Update NextJS to 16.1.6 (#547)

* Update NextJS to 16.1.6

* Update Node in workflow

* Fix rabbit comments

* Fix types

* Add engines field

.github/workflows/build_and_push.yml

@@ -19,7 +19,7 @@ jobs:
       - name: setup-node
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies
@@ -54,8 +54,19 @@ jobs:
           fileName: "ironrdp_web_bg.wasm"
           out-file-path: 'public/ironrdp-pkg'
 
+      - name: Get version from tag
+        id: version
+        run: |
+          if [[ "${{ github.ref }}" == refs/tags/* ]]; then
+            echo "version=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
+          else
+            echo "version=development" >> $GITHUB_OUTPUT
+          fi
+
       - name: Build
         run: npm run build
+        env:
+          NEXT_PUBLIC_DASHBOARD_VERSION: ${{ steps.version.outputs.version }}
       -
         name: Set up QEMU
         uses: docker/setup-qemu-action@v2

announcements.json

@@ -0,0 +1,12 @@
+[
+  {
+    "tag": "New",
+    "text": "Custom DNS Zones for Private Network Resolution",
+    "link": "https://netbird.io/knowledge-hub/custom-dns-zones",
+    "linkText": "Read Release Article",
+    "variant": "important",
+    "isExternal": true,
+    "closeable": true,
+    "isCloudOnly": false
+  }
+]

next.config.js

@@ -7,6 +7,8 @@ const nextConfig = {
   reactStrictMode: false,
   env: {
     APP_ENV: process.env.APP_ENV || "production",
+    NEXT_PUBLIC_DASHBOARD_VERSION:
+      process.env.NEXT_PUBLIC_DASHBOARD_VERSION || "development",
   },
 };
 

package.json

@@ -2,6 +2,9 @@
   "name": "netbird-dashboard",
   "version": "2.0.0",
   "private": true,
+  "engines": {
+    "node": ">=20.9.0"
+  },
   "scripts": {
     "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
     "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
@@ -13,34 +16,34 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
-    "@axa-fr/react-oidc": "^7.22.18",
+    "@axa-fr/react-oidc": "^7.26.3",
     "@dagrejs/dagre": "^1.1.5",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.1.4",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@tabler/icons-react": "^2.39.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tabler/icons-react": "^3.36.1",
     "@tanstack/match-sorter-utils": "^8.8.4",
     "@tanstack/react-table": "^8.10.7",
     "@types/crypto-js": "^4.2.2",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.14.200",
     "@types/node": "20.10.6",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/react-window": "^1.8.8",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
@@ -49,8 +52,9 @@
     "chart.js": "^4.4.8",
     "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.7.0",
+    "classnames": "^2.5.1",
     "clsx": "^2.0.0",
-    "cmdk": "^0.2.0",
+    "cmdk": "^1.1.1",
     "crypto-js": "^4.2.0",
     "d3": "^7.9.0",
     "date-fns": "^2.30.0",
@@ -58,24 +62,23 @@
     "elkjs": "^0.10.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "flowbite": "^1.8.1",
-    "flowbite-react": "^0.6.4",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^12.29.2",
     "ip-address": "^10.1.0",
     "ip-cidr": "^3.1.0",
     "js-cookie": "^3.0.5",
-    "lodash": "^4.17.21",
+    "lodash": "^4.17.23",
     "lucide-react": "^0.539.0",
-    "next": "^14.2.35",
+    "next": "^16.1.6",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
-    "react": "^18.3.1",
-    "react-day-picker": "^8.9.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "^19.2.4",
     "react-ga4": "^2.1.0",
     "react-hot-toast": "^2.4.1",
-    "react-hotjar": "^6.2.0",
+    "react-hotjar": "^6.3.1",
     "react-hotkeys-hook": "^4.4.1",
+    "react-icons": "^5.5.0",
     "react-jwt": "^1.2.0",
     "react-loading-skeleton": "^3.3.1",
     "react-responsive": "^9.0.2",
@@ -91,7 +94,7 @@
     "@types/chroma-js": "^3.1.1",
     "@types/js-cookie": "^3.0.6",
     "eslint": "^9.39.1",
-    "eslint-config-next": "^16.0.5",
+    "eslint-config-next": "^16.1.6",
     "postcss": "^8",
     "prettier": "3.0.3",
     "tailwindcss": "^3.4.17"

src/app/globals.css

@@ -2,7 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-
+html{
+    @apply bg-nb-gray;
+}
 
 h1 {
     @apply text-2xl font-medium text-gray-700 dark:text-nb-gray-100 my-1;

src/app/invite/layout.tsx

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

src/app/invite/page.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import Button from "@components/Button";
+import { Input } from "@components/Input";
+import Paragraph from "@components/Paragraph";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { acceptInvite, fetchInviteInfo } from "@utils/unauthenticatedApi";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Clock,
+  KeyRound,
+  Mail,
+  User2,
+} from "lucide-react";
+import dayjs from "dayjs";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useMemo, useState } from "react";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
+import { UserInviteInfo } from "@/interfaces/User";
+
+export default function InviteAcceptPage() {
+  return (
+    <Suspense fallback={<FullScreenLoading />}>
+      <InviteAcceptContent />
+    </Suspense>
+  );
+}
+
+function InviteAcceptContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const token = searchParams?.get("token");
+
+  const [loading, setLoading] = useState(true);
+  const [inviteInfo, setInviteInfo] = useState<UserInviteInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isRateLimited, setIsRateLimited] = useState(false);
+
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    if (!token) {
+      setError("No invite token provided");
+      setLoading(false);
+      return;
+    }
+
+    fetchInviteInfo(token)
+      .then((info) => {
+        setInviteInfo(info);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (err.code === 429) {
+          setError("Too many attempts. Please wait a moment and try again.");
+          setIsRateLimited(true);
+        } else {
+          setError(err.message || "Invalid or expired invite link");
+          setIsRateLimited(false);
+        }
+        setLoading(false);
+      });
+  }, [token]);
+
+  const passwordsMatch = password === confirmPassword;
+  const hasMinLength = password.length >= 8;
+  const hasUppercase = /[A-Z]/.test(password);
+  const hasLowercase = /[a-z]/.test(password);
+  const hasNumber = /[0-9]/.test(password);
+  const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+  const passwordValid = hasMinLength && hasUppercase && hasLowercase && hasNumber && hasSpecialChar;
+  const canSubmit = passwordValid && passwordsMatch && !submitting;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!canSubmit || !token) return;
+
+    setSubmitting(true);
+    setError(null);
+
+    try {
+      await acceptInvite(token, password);
+      setSuccess(true);
+    } catch (err: any) {
+      setError(err.message || "Failed to accept invite");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const isExpired = useMemo(() => {
+    if (!inviteInfo) return false;
+    return new Date(inviteInfo.expires_at) < new Date();
+  }, [inviteInfo]);
+
+  if (loading) {
+    return <FullScreenLoading />;
+  }
+
+  if (error && !inviteInfo) {
+    if (isRateLimited) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-nb-gray-950 p-4">
+          <div className="max-w-md w-full text-center">
+            <div className="mb-6 flex justify-center">
+              <div className="w-16 h-16 bg-yellow-500/10 rounded-full flex items-center justify-center">
+                <Clock className="w-8 h-8 text-yellow-500" />
+              </div>
+            </div>
+            <h1 className="text-2xl font-semibold text-white mb-2">
+              Too Many Requests
+            </h1>
+            <Paragraph className="text-nb-gray-400 text-base">
+              You&apos;ve made too many requests. Please wait a moment and try
+              again.
+            </Paragraph>
+            <Button
+              variant="secondary"
+              className="mt-6"
+              onClick={() => window.location.reload()}
+            >
+              Try Again
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-nb-gray-950 p-4">
+        <div className="max-w-md w-full text-center">
+          <div className="mb-6 flex justify-center">
+            <div className="w-16 h-16 bg-red-500/10 rounded-full flex items-center justify-center">
+              <AlertCircle className="w-8 h-8 text-red-500" />
+            </div>
+          </div>
+          <h1 className="text-2xl font-semibold text-white mb-2">
+            Invalid Invite
+          </h1>
+          <Paragraph className="text-nb-gray-400 text-base">
+            This invite link is invalid or has expired. Please contact your
+            administrator to receive a new invitation.
+          </Paragraph>
+          <Button
+            variant="secondary"
+            className="mt-6"
+            onClick={() => router.push("/")}
+          >
+            Go to Login
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-nb-gray-950 p-4">
+        <div className="max-w-md w-full text-center">
+          <div className="mb-6 flex justify-center">
+            <div className="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center">
+              <CheckCircle2 className="w-8 h-8 text-green-500" />
+            </div>
+          </div>
+          <h1 className="text-2xl font-semibold text-white mb-2">
+            Account Created!
+          </h1>
+          <Paragraph className="text-nb-gray-400">
+            Your account has been created successfully. You can now log in with
+            your email and password.
+          </Paragraph>
+          <Button
+            variant="primary"
+            className="mt-6"
+            onClick={() => router.push("/")}
+          >
+            Go to Login
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (isExpired || !inviteInfo?.valid) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-nb-gray-950 p-4">
+        <div className="max-w-md w-full text-center">
+          <div className="mb-6 flex justify-center">
+            <div className="w-16 h-16 bg-yellow-500/10 rounded-full flex items-center justify-center">
+              <AlertCircle className="w-8 h-8 text-yellow-500" />
+            </div>
+          </div>
+          <h1 className="text-2xl font-semibold text-white mb-2">
+            Invite Expired
+          </h1>
+          <Paragraph className="text-nb-gray-400">
+            This invite link has expired. Please contact your administrator to
+            receive a new invitation.
+          </Paragraph>
+          <Button
+            variant="secondary"
+            className="mt-6"
+            onClick={() => router.push("/")}
+          >
+            Go to Login
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-nb-gray-950 p-4">
+      <div className="max-w-md w-full">
+        <div className="mb-8 flex justify-center">
+          <NetBirdIcon size={48} />
+        </div>
+
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-semibold text-white mb-2">
+            Welcome to NetBird
+          </h1>
+          <p className="dark:text-nb-gray-400 text-nb-gray-500 text-base">
+            You&apos;ve been invited by <span className="dark:text-white text-nb-gray-900 font-medium">{inviteInfo.invited_by}</span> to join the network. Set your password to complete your account setup.
+          </p>
+        </div>
+
+        <div className="bg-nb-gray-930 border border-nb-gray-900 rounded-lg p-6 mb-6">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-10 h-10 bg-nb-gray-900 rounded-full flex items-center justify-center">
+              <User2 className="w-5 h-5 text-nb-gray-400" />
+            </div>
+            <div>
+              <div className="text-white font-medium">{inviteInfo.name}</div>
+              <div className="text-nb-gray-400 text-sm flex items-center gap-1">
+                <Mail className="w-3 h-3" />
+                {inviteInfo.email}
+              </div>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <Input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                customPrefix={
+                  <KeyRound size={16} className="text-nb-gray-400" />
+                }
+              />
+              {password && (
+                <div className="mt-2 space-y-1">
+                  <PasswordRule met={hasMinLength} text="At least 8 characters" />
+                  <PasswordRule met={hasUppercase} text="One uppercase letter" />
+                  <PasswordRule met={hasLowercase} text="One lowercase letter" />
+                  <PasswordRule met={hasNumber} text="One number" />
+                  <PasswordRule met={hasSpecialChar} text="One special character (!@#$%^&*)" />
+                </div>
+              )}
+            </div>
+
+            <div>
+              <Input
+                type="password"
+                placeholder="Confirm Password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                customPrefix={
+                  <KeyRound size={16} className="text-nb-gray-400" />
+                }
+              />
+              {confirmPassword && !passwordsMatch && (
+                <p className="text-xs text-red-500 mt-1">
+                  Passwords do not match
+                </p>
+              )}
+            </div>
+
+            {error && (
+              <div className="bg-red-500/10 border border-red-500/20 rounded-md p-3">
+                <p className="text-sm text-red-500">{error}</p>
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              variant="primary"
+              className="w-full"
+              disabled={!canSubmit}
+            >
+              {submitting ? "Creating Account..." : "Create Account"}
+            </Button>
+          </form>
+        </div>
+
+        <p className="text-center text-xs text-nb-gray-500">
+          Invite expires on {dayjs(inviteInfo.expires_at).format("D MMMM, YYYY [at] h:mm A")}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function PasswordRule({ met, text }: { met: boolean; text: string }) {
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      {met ? (
+        <CheckCircle2 className="w-3 h-3 text-green-500" />
+      ) : (
+        <AlertCircle className="w-3 h-3 text-nb-gray-500" />
+      )}
+      <span className={met ? "text-green-500" : "text-nb-gray-500"}>{text}</span>
+    </div>
+  );
+}

src/auth/OIDCProvider.tsx

@@ -104,7 +104,9 @@ export default function OIDCProvider({ children }: Props) {
   // We bypass authentication for pages that do not require auth.
   // E.g., when we just want to show installation steps for public.
   // Or the instance setup wizard for first-time setup.
-  if (path === "/install" || path === "/setup") return children;
+  // Or the invite acceptance page for new users.
+  if (path === "/install" || path === "/setup" || path?.startsWith("/invite"))
+    return children;
 
   return mounted && providerConfig ? (
     <OidcProvider

src/components/AutoCompleteInput.tsx

@@ -1,90 +0,0 @@
-import { Checkbox } from "@components/Checkbox";
-import { Input } from "@components/Input";
-import { Popover, PopoverContent } from "@components/Popover";
-import { useElementSize } from "@hooks/useElementSize";
-import { Anchor } from "@radix-ui/react-popover";
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import { FaWindows } from "react-icons/fa6";
-
-type Props = {};
-export const AutoCompleteInput = ({}: Props) => {
-  const [open, setOpen] = useState<boolean>(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [elementWidth, { width }] = useElementSize<HTMLDivElement>();
-
-  useEffect(() => {
-    const input = inputRef.current;
-
-    const onFocus = () => {
-      setOpen(true);
-    };
-
-    if (input) {
-      inputRef.current.addEventListener("focus", onFocus);
-    }
-
-    return () => {
-      if (input) {
-        inputRef.current.removeEventListener("focus", onFocus);
-      }
-    };
-  }, []);
-
-  return (
-    <div className={"z-10 relative"}>
-      <Popover modal={false} open={open} onOpenChange={setOpen}>
-        <Anchor ref={elementWidth}>
-          <Input
-            placeholder={"11"}
-            ref={inputRef}
-            maxWidthClass={"max-w-[200px]"}
-            customPrefix={
-              <div className={"flex items-center gap-2"}>
-                <Checkbox></Checkbox>
-                <div
-                  className={"flex gap-2 items-center text-sm text-nb-gray-200"}
-                >
-                  <FaWindows className={"text-sky-600 text-lg"} />
-                  Windows
-                </div>
-              </div>
-            }
-          />
-        </Anchor>
-
-        <PopoverContent
-          hideWhenDetached={false}
-          className="w-full p-0 shadow-sm  shadow-nb-gray-950"
-          style={{
-            width: width,
-          }}
-          forceMount={true}
-          align="start"
-          side={"bottom"}
-          sideOffset={10}
-          onOpenAutoFocus={(event) => event.preventDefault()}
-          onCloseAutoFocus={(event) => event.preventDefault()}
-          onInteractOutside={(event) => {
-            event.preventDefault();
-            if (event.target !== inputRef.current) {
-              setOpen(false);
-            }
-          }}
-          onPointerDownOutside={(event) => {
-            event.preventDefault();
-            if (event.target !== inputRef.current) {
-              setOpen(false);
-            }
-          }}
-          onFocusOutside={(event) => {
-            event.preventDefault();
-            if (event.target !== inputRef.current) {
-              setOpen(false);
-            }
-          }}
-        ></PopoverContent>
-      </Popover>
-    </div>
-  );
-};

src/components/Tooltip.tsx

@@ -53,13 +53,10 @@ const TooltipContent = React.forwardRef<
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         ref={ref}
-        asChild={true}
         sideOffset={sideOffset}
         className={cn(tooltipVariants({ variant }), className)}
         {...props}
-      >
-        <div>{props.children}</div>
-      </TooltipPrimitive.Content>
+      />
     </TooltipPrimitive.Portal>
   ),
 );

src/components/VersionInfo.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import FullTooltip from "@components/FullTooltip";
+import { cn } from "@utils/helpers";
+import { ArrowUpCircle } from "lucide-react";
+import * as React from "react";
+import Skeleton from "react-loading-skeleton";
+import useFetchApi from "@utils/api";
+import { isNetBirdHosted } from "@utils/netbird";
+import { useApplicationContext } from "@/contexts/ApplicationProvider";
+import { VersionInfo as VersionInfoType } from "@/interfaces/Instance";
+
+function formatVersion(version: string): string {
+  if (!version) return "";
+  // Add "v" prefix if version starts with a number
+  if (/^\d/.test(version)) return `v${version}`;
+  return version;
+}
+
+function compareVersions(current: string, latest: string): boolean {
+  // Returns true if latest is newer than current
+  if (!current || !latest) return false;
+  if (current === "development") return false;
+
+  // Strip "v" prefix if present
+  const normalizedCurrent = current.replace(/^v/, "");
+  const normalizedLatest = latest.replace(/^v/, "");
+
+  const currentParts = normalizedCurrent
+    .split(".")
+    .map((p) => parseInt(p, 10) || 0);
+  const latestParts = normalizedLatest
+    .split(".")
+    .map((p) => parseInt(p, 10) || 0);
+
+  for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+    const c = currentParts[i] || 0;
+    const l = latestParts[i] || 0;
+    if (l > c) return true;
+    if (l < c) return false;
+  }
+  return false;
+}
+
+export const NavigationVersionInfo = () => {
+  const { isNavigationCollapsed, mobileNavOpen } = useApplicationContext();
+
+  // Only show for self-hosted, not cloud
+  if (isNetBirdHosted()) return null;
+
+  return (
+    <div
+      className={cn(
+        "px-4 py-4 animate-fade-in",
+        isNavigationCollapsed &&
+          !mobileNavOpen &&
+          "hidden md:group-hover/navigation:block",
+      )}
+    >
+      <NavigationVersionInfoContent />
+    </div>
+  );
+};
+
+const NavigationVersionInfoContent = () => {
+  const { data: versionInfo, isLoading } = useFetchApi<VersionInfoType>(
+    "/instance/version",
+    true, // ignore errors
+    false, // don't revalidate on focus
+  );
+
+  const dashboardVersion =
+    process.env.NEXT_PUBLIC_DASHBOARD_VERSION || "development";
+
+  if (isLoading)
+    return <Skeleton height={80} className={"rounded-lg opacity-60"} />;
+
+  if (!versionInfo) return null;
+
+  // Compare versions to detect updates (returns false for "development" versions)
+  const managementUpdateAvailable = compareVersions(
+    versionInfo.management_current_version,
+    versionInfo.management_available_version,
+  );
+  const dashboardUpdateAvailable = compareVersions(
+    dashboardVersion,
+    versionInfo.dashboard_available_version,
+  );
+  const hasUpdate = managementUpdateAvailable || dashboardUpdateAvailable;
+
+  return (
+    <div
+      className={cn(
+        "w-full rounded-md text-xs flex flex-col gap-2 whitespace-normal border text-left",
+        "bg-nb-gray-900/20 py-3 px-3 border-nb-gray-800/30",
+      )}
+    >
+      <div className="flex flex-col gap-1 text-nb-gray-400">
+        <FullTooltip
+          content={
+            <span className="text-xs">
+              Latest: {formatVersion(versionInfo.management_available_version)}
+            </span>
+          }
+          side="top"
+          className="w-full"
+        >
+          <div className="flex items-center justify-between w-full cursor-default">
+            <span>Management</span>
+            <span className="text-nb-gray-300 font-medium">
+              {formatVersion(versionInfo.management_current_version)}
+            </span>
+          </div>
+        </FullTooltip>
+        <FullTooltip
+          content={
+            <span className="text-xs">
+              Latest: {formatVersion(versionInfo.dashboard_available_version)}
+            </span>
+          }
+          side="top"
+          className="w-full"
+        >
+          <div className="flex items-center justify-between w-full cursor-default">
+            <span>Dashboard</span>
+            <span className="text-nb-gray-300 font-medium">
+              {formatVersion(dashboardVersion)}
+            </span>
+          </div>
+        </FullTooltip>
+      </div>
+
+      {hasUpdate && (
+        <a
+          href="https://docs.netbird.io/selfhosted/maintenance/upgrade"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-center gap-1.5 text-white font-medium bg-netbird hover:bg-netbird-500 transition-colors rounded-md py-1.5 px-2 mt-1"
+        >
+          <ArrowUpCircle size={12} />
+          <span>Update available</span>
+        </a>
+      )}
+    </div>
+  );
+};
+
+export default NavigationVersionInfo;

src/components/VirtualScrollAreaList.tsx

@@ -1,12 +1,25 @@
 import {
   MemoizedScrollArea,
-  MemoizedScrollAreaViewport,
+  ScrollAreaViewport,
 } from "@components/ScrollArea";
 import { cn } from "@utils/helpers";
 import * as React from "react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
 
+const VirtuosoScroller = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>((props, ref) => <ScrollAreaViewport ref={ref} {...props} />);
+
 type Props<T extends { id?: string }> = {
   items: T[];
   onSelect: (item: T) => void;
@@ -183,7 +196,7 @@ export function VirtualScrollAreaList<T extends { id?: string }>({
         }}
         style={virtuosoHeight}
         components={{
-          Scroller: MemoizedScrollAreaViewport,
+          Scroller: VirtuosoScroller,
         }}
       />
     </MemoizedScrollArea>

src/components/modal/Modal.tsx

@@ -2,6 +2,7 @@
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { DialogTriggerProps } from "@radix-ui/react-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { cn } from "@utils/helpers";
 import { X } from "lucide-react";
 import * as React from "react";
@@ -74,18 +75,19 @@ const ModalContent = React.forwardRef<
           {...props}
           onClick={(e) => e.stopPropagation()}
         >
-          <>
-            {children}
-            {showClose && (
-              <DialogPrimitive.Close
-                data-cy={"modal-close"}
-                className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
-              >
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-              </DialogPrimitive.Close>
-            )}
-          </>
+          <VisuallyHidden asChild>
+            <DialogPrimitive.Title>Dialog</DialogPrimitive.Title>
+          </VisuallyHidden>
+          {children}
+          {showClose && (
+            <DialogPrimitive.Close
+              data-cy={"modal-close"}
+              className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
         </DialogPrimitive.Content>
       </ModalOverlay>
     </ModalPortal>
@@ -129,18 +131,19 @@ const SidebarModalContent = React.forwardRef<
             }}
             onClick={(e) => e.stopPropagation()}
           >
-            <>
-              {children}
-              {showClose && (
-                <DialogPrimitive.Close
-                  data-cy={"modal-close"}
-                  className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
-                >
-                  <X className="h-4 w-4" />
-                  <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-              )}
-            </>
+            <VisuallyHidden asChild>
+              <DialogPrimitive.Title>Dialog</DialogPrimitive.Title>
+            </VisuallyHidden>
+            {children}
+            {showClose && (
+              <DialogPrimitive.Close
+                data-cy={"modal-close"}
+                className="absolute right-4 z-10 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-500 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-400"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
           </DialogPrimitive.Content>
         </div>
       </ModalPortal>

src/components/table/DataTable.tsx

@@ -14,11 +14,6 @@ import {
   TableWrapper,
 } from "@components/table/Table";
 import NoResults from "@components/ui/NoResults";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-} from "@radix-ui/react-accordion";
 import { RankingInfo } from "@tanstack/match-sorter-utils";
 import {
   ColumnDef,
@@ -493,117 +488,97 @@ export function DataTable<TData, TValue>({
               </TableHeaderComponent>
             )}
 
-            <Accordion
-              asChild={true}
-              type={"multiple"}
-              value={accordion}
-              onValueChange={setAccordion}
+            <TableBodyComponent
+              className={cn(
+                "relative",
+                data == undefined && "blur-sm",
+                wrapperClassName,
+              )}
             >
-              <TableBodyComponent
-                className={cn(
-                  "relative",
-                  data == undefined && "blur-sm",
-                  wrapperClassName,
-                )}
-              >
-                {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => {
-                    const expandedRow = renderExpandedRow?.(row.original);
-                    const rowContent = (
-                      <AccordionItem
-                        value={row.original.id}
-                        asChild={true}
-                        key={row.id}
-                      >
-                        <>
-                          <TableRowComponent
-                            minimal={minimal}
-                            data-row-id={row.original.id}
-                            className={cn(
-                              (onRowClick || renderExpandedRow) &&
-                                "relative group/accordion",
-                              (onRowClick || expandedRow) && "cursor-pointer",
-                              rowClassName,
-                            )}
-                            data-state={row.getIsSelected() && "selected"}
-                            data-accordion={
-                              accordion?.includes(row.original.id)
-                                ? "opened"
-                                : "closed"
-                            }
-                            onClick={(e) => {
-                              if (expandedRow) {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                setAccordion((prev) => {
-                                  if (prev?.includes(row.original.id)) {
-                                    return prev.filter(
-                                      (item) => item !== row.original.id,
-                                    );
-                                  } else {
-                                    return [...(prev ?? []), row.original.id];
-                                  }
-                                });
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => {
+                  const expandedRow = renderExpandedRow?.(row.original);
+                  const rowId = row.original.id ?? row.id;
+                  const isExpanded = accordion?.includes(rowId);
+                  const rowContent = (
+                    <React.Fragment key={row.id}>
+                      <TableRowComponent
+                        minimal={minimal}
+                        data-row-id={rowId}
+                        className={cn(
+                          (onRowClick || renderExpandedRow) &&
+                            "relative group/accordion",
+                          (onRowClick || expandedRow) && "cursor-pointer",
+                          rowClassName,
+                        )}
+                        data-state={row.getIsSelected() && "selected"}
+                        data-accordion={isExpanded ? "opened" : "closed"}
+                        onClick={(e) => {
+                          if (expandedRow) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setAccordion((prev) => {
+                              if (prev?.includes(rowId)) {
+                                return prev.filter(
+                                  (item) => item !== rowId,
+                                );
+                              } else {
+                                return [...(prev ?? []), rowId];
                               }
+                            });
+                          }
+                        }}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCellComponent
+                            key={cell.id}
+                            className={cn("relative", tableCellClassName)}
+                            minimal={minimal}
+                            inset={inset}
+                            onClick={() => {
+                              onRowClick && onRowClick(row, cell.column.id);
                             }}
                           >
-                            <>
-                              {row.getVisibleCells().map((cell) => (
-                                <TableCellComponent
-                                  key={cell.id}
-                                  className={cn("relative", tableCellClassName)}
-                                  minimal={minimal}
-                                  inset={inset}
-                                  onClick={() => {
-                                    onRowClick &&
-                                      onRowClick(row, cell.column.id);
-                                  }}
-                                >
-                                  <div
-                                    className={
-                                      "absolute left-0 top-0 w-full h-full z-0"
-                                    }
-                                  ></div>
-                                  <div className={"relative z-[1]"}>
-                                    {flexRender(
-                                      cell.column.columnDef.cell,
-                                      cell.getContext(),
-                                    )}
-                                  </div>
-                                </TableCellComponent>
-                              ))}
-                            </>
-                          </TableRowComponent>
+                            <div
+                              className={
+                                "absolute left-0 top-0 w-full h-full z-0"
+                              }
+                            ></div>
+                            <div className={"relative z-[1]"}>
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </div>
+                          </TableCellComponent>
+                        ))}
+                      </TableRowComponent>
 
-                          {expandedRow && (
-                            <AccordionContent asChild={true}>
-                              <TableRowComponent
-                                data-row-id={row.id + "-expanded-row"}
-                                key={row.id + "-expanded-row"}
-                                minimal={minimal}
-                                className={cn(
-                                  onRowClick && "cursor-pointer relative",
-                                  rowClassName,
-                                )}
-                                data-state={row.getIsSelected() && "selected"}
-                              >
-                                <TableDataUnstyledComponent
-                                  className={"w-full"}
-                                  colSpan={row.getVisibleCells().length}
-                                >
-                                  {expandedRow}
-                                </TableDataUnstyledComponent>
-                              </TableRowComponent>
-                            </AccordionContent>
+                      {expandedRow && isExpanded && (
+                        <TableRowComponent
+                          data-row-id={row.id + "-expanded-row"}
+                          minimal={minimal}
+                          className={cn(
+                            onRowClick && "cursor-pointer relative",
+                            rowClassName,
                           )}
-                        </>
-                      </AccordionItem>
-                    );
+                          data-state={row.getIsSelected() && "selected"}
+                        >
+                          <TableDataUnstyledComponent
+                            className={"w-full"}
+                            colSpan={row.getVisibleCells().length}
+                          >
+                            {expandedRow}
+                          </TableDataUnstyledComponent>
+                        </TableRowComponent>
+                      )}
+                    </React.Fragment>
+                  );
 
-                    return renderRow
-                      ? renderRow(row.original, rowContent)
-                      : rowContent;
-                  })
+                  return renderRow
+                    ? renderRow(row.original, rowContent)
+                    : rowContent;
+                })
                 ) : (
                   <TableRowUnstyledComponent>
                     <TableCellComponent
@@ -614,8 +589,7 @@ export function DataTable<TData, TValue>({
                     </TableCellComponent>
                   </TableRowUnstyledComponent>
                 )}
-              </TableBodyComponent>
-            </Accordion>
+            </TableBodyComponent>
           </TableComponent>
         )}
       </TableWrapper>

src/components/ui/AbsoluteDateTimeInput.tsx

@@ -64,8 +64,16 @@ const Time = ({
     }
   }, [value]);
 
+  const { ref, ...rootProps } = getRootProps();
+
   return (
-    <div className={"timescape w-full"} {...getRootProps()}>
+    <div
+      className={"timescape w-full"}
+      ref={(element) => {
+        ref(element);
+      }}
+      {...rootProps}
+    >
       <div>
         <input {...getInputProps("years")} />
         <span className={"separator"}>/</span>

src/components/ui/Calendar.tsx

@@ -19,40 +19,46 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 relative",
+        month: "space-y-4 pr-4 last:pr-0",
+        month_caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-0 top-0 z-10",
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-0 top-0 z-10",
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
           "text-neutral-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-neutral-400",
-        row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
-        day: cn("h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
-        day_range_end: "day-range-end rounded-r-md",
-        day_range_start: "day-range-start rounded-l-md",
-        day_selected:
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-neutral-100/50 [&:has([aria-selected])]:bg-neutral-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 dark:[&:has([aria-selected])]:bg-neutral-800",
+        day_button: cn("h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        range_end: "day-range-end rounded-r-md",
+        range_start: "day-range-start rounded-l-md",
+        selected:
           "bg-neutral-900 text-neutral-50 hover:bg-neutral-900 hover:text-neutral-50 focus:bg-neutral-900 focus:text-neutral-50 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50 dark:hover:text-neutral-900 dark:focus:bg-neutral-50 dark:focus:text-neutral-900",
-        day_today: "text-neutral-900 dark:text-red-500",
-        day_outside:
+        today: "text-neutral-900 dark:text-red-500",
+        outside:
           "day-outside text-neutral-500 opacity-50 aria-selected:bg-neutral-100/50 aria-selected:text-neutral-500 aria-selected:opacity-30 dark:text-neutral-400 dark:aria-selected:bg-neutral-800/50 dark:aria-selected:text-neutral-400",
-        day_disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
-        day_range_middle:
+        disabled: "text-neutral-500 opacity-50 dark:text-neutral-400",
+        range_middle:
           "aria-selected:bg-neutral-100 aria-selected:text-neutral-900 dark:aria-selected:bg-nb-gray-800 dark:aria-selected:text-neutral-50 rounded-none",
-        day_hidden: "invisible",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
-        IconRight: () => <ChevronRight className="h-4 w-4" />,
+        Chevron: ({ orientation }) =>
+          orientation === "left" ? (
+            <ChevronLeft className="h-4 w-4" />
+          ) : (
+            <ChevronRight className="h-4 w-4" />
+          ),
       }}
       {...props}
     />

src/contexts/AnalyticsProvider.tsx

@@ -56,7 +56,7 @@ export default function AnalyticsProvider({ children }: Readonly<Props>) {
       });
     }
     if (hjid && window._DATADOG_SYNTHETICS_BROWSER === undefined) {
-      hotjar.initialize(hjid, 6);
+      hotjar.initialize({ id: hjid, sv: 6 });
     }
     setInitialized(true);
   }, []);

src/contexts/AnnouncementProvider.tsx

@@ -1,21 +1,26 @@
 import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
-import { useLocalStorage } from "@hooks/useLocalStorage";
 import md5 from "crypto-js/md5";
-import React, { useEffect, useState } from "react";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { usePermissions } from "@/contexts/PermissionsProvider";
+import { isNetBirdHosted } from "@utils/netbird";
 
-const initialAnnouncements: Announcement[] = [
-  {
-    tag: "New",
-    text: "NetBird v0.62 Released - Local Users and Simplified IdP Integration",
-    link: "https://netbird.io/knowledge-hub/local-users-simplified-idp",
-    linkText: "Read Release Article",
-    variant: "important", // "default" or "important"
-    isExternal: true,
-    closeable: true,
-    isCloudOnly: false,
-  },
-];
+const ANNOUNCEMENTS_URL =
+  "https://raw.githubusercontent.com/netbirdio/dashboard/main/announcements.json";
+const STORAGE_KEY = "netbird-announcements";
+const CACHE_DURATION_MS = 30 * 60 * 1000;
+const BANNER_HEIGHT = 40;
+
+interface AnnouncementStore {
+  timestamp: number;
+  announcements: Announcement[];
+  closedAnnouncements: string[];
+}
 
 export interface Announcement extends AnnouncementVariant {
   tag: string;
@@ -36,7 +41,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-const AnnouncementContext = React.createContext(
+const AnnouncementContext = createContext(
   {} as {
     bannerHeight: number;
     announcements?: AnnouncementInfo[];
@@ -47,59 +52,99 @@ const AnnouncementContext = React.createContext(
   },
 );
 
-const bannerHeight = 40;
+const getAnnouncements = async (): Promise<AnnouncementInfo[]> => {
+  try {
+    let stored: AnnouncementStore | null = null;
+    try {
+      const data = localStorage.getItem(STORAGE_KEY);
+      stored = data ? JSON.parse(data) : null;
+    } catch {}
+
+    const now = Date.now();
+
+    let raw: Announcement[];
+
+    if (stored && now - stored.timestamp < CACHE_DURATION_MS) {
+      raw = stored.announcements;
+    } else {
+      const response = await fetch(ANNOUNCEMENTS_URL);
+      if (!response.ok) return [];
+
+      raw = await response.json();
+    }
+
+    const isCloud = isNetBirdHosted();
+    const filtered = raw.filter((a) => !a.isCloudOnly || isCloud);
+    const hashes = new Set(filtered.map((a) => md5(a.text).toString()));
+    const closed = (stored?.closedAnnouncements ?? []).filter((h) =>
+      hashes.has(h),
+    );
+
+    try {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({
+          timestamp: now,
+          announcements: raw,
+          closedAnnouncements: closed,
+        }),
+      );
+    } catch {}
+
+    return filtered.map((a) => {
+      const hash = md5(a.text).toString();
+      return { ...a, hash, isOpen: !closed.includes(hash) };
+    });
+  } catch {
+    return [];
+  }
+};
+
+const saveAnnouncements = (closedAnnouncements: string[]) => {
+  try {
+    const data = localStorage.getItem(STORAGE_KEY);
+    const stored: AnnouncementStore | null = data ? JSON.parse(data) : null;
+    if (stored) {
+      localStorage.setItem(
+        STORAGE_KEY,
+        JSON.stringify({ ...stored, closedAnnouncements }),
+      );
+    }
+  } catch {}
+};
 
 export default function AnnouncementProvider({ children }: Readonly<Props>) {
-  const [height, setHeight] = useState(0);
-  const [closedAnnouncements, setClosedAnnouncements] = useLocalStorage<
-    string[]
-  >("netbird-closed-announcements", []);
   const [announcements, setAnnouncements] = useState<AnnouncementInfo[]>();
   const { isRestricted } = usePermissions();
+  const fetchingRef = useRef(false);
 
   useEffect(() => {
-    if (announcements && announcements.length > 0) return;
-
-    if (isRestricted) return;
-    const initial = initialAnnouncements.map((announcement) => {
-      const hash = md5(announcement.text).toString();
-      const isOpen = !closedAnnouncements.some((h) => h === hash);
-      return {
-        ...announcement,
-        hash,
-        isOpen,
-      } as AnnouncementInfo;
-    });
-    if (initial.length > 0) {
-      setAnnouncements(initial);
-    }
-  }, [closedAnnouncements, announcements]);
+    if (announcements !== undefined || isRestricted || fetchingRef.current)
+      return;
+    fetchingRef.current = true;
+    getAnnouncements()
+      .then((a) => setAnnouncements(a))
+      .finally(() => (fetchingRef.current = false));
+  }, [announcements, isRestricted]);
 
   const closeAnnouncement = (hash: string) => {
-    setClosedAnnouncements([...closedAnnouncements, hash]);
-    setAnnouncements(() => {
-      return announcements?.map((a) => {
-        if (a.hash === hash) {
-          return { ...a, isOpen: false };
-        }
-        return a;
-      });
-    });
+    if (!announcements) return;
+    const updated = announcements.map((a) =>
+      a.hash === hash ? { ...a, isOpen: false } : a,
+    );
+    const closedAnnouncements = updated
+      .filter((a) => !a.isOpen)
+      .map((a) => a.hash);
+    saveAnnouncements(closedAnnouncements);
+    setAnnouncements(updated);
   };
 
-  useEffect(() => {
-    const isAnnouncementOpen = announcements?.some((a) => a.isOpen);
-    if (isAnnouncementOpen) {
-      setHeight(bannerHeight);
-    } else {
-      setHeight(0);
-    }
-  }, [announcements]);
+  const bannerHeight = announcements?.some((a) => a.isOpen) ? BANNER_HEIGHT : 0;
 
   return (
     <AnnouncementContext.Provider
       value={{
-        bannerHeight: height,
+        bannerHeight,
         announcements,
         closeAnnouncement,
         setAnnouncements,
@@ -110,6 +155,4 @@ export default function AnnouncementProvider({ children }: Readonly<Props>) {
   );
 }
 
-export const useAnnouncement = () => {
-  return React.useContext(AnnouncementContext);
-};
+export const useAnnouncement = () => useContext(AnnouncementContext);

src/contexts/DialogProvider.tsx

@@ -34,7 +34,7 @@ export default function DialogProvider({ children }: Props) {
     isOpen: false,
   });
   const [dialogOptions, setDialogOptions] = useState<DialogOptions>();
-  const fn = useRef<Function>();
+  const fn = useRef<Function>(undefined);
 
   const confirm = useCallback((data: DialogOptions): Promise<boolean> => {
     return new Promise((resolve) => {

src/contexts/GlobalThemeProvider.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import "react-loading-skeleton/dist/skeleton.css";
-import { netbirdTheme } from "@utils/theme";
-import { Flowbite } from "flowbite-react";
 import dynamic from "next/dynamic";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 import * as React from "react";
@@ -26,11 +24,9 @@ export function GlobalThemeProvider({
       disableTransitionOnChange
       {...props}
     >
-      <Flowbite theme={{ theme: netbirdTheme }}>
-        <SkeletonTheme baseColor={"#25282d"} highlightColor={"#33373e"}>
-          {children}
-        </SkeletonTheme>
-      </Flowbite>
+      <SkeletonTheme baseColor={"#25282d"} highlightColor={"#33373e"}>
+        {children}
+      </SkeletonTheme>
     </NextThemesProvider>
   );
 }

src/hooks/useIsVisible.ts

@@ -1,6 +1,6 @@
 import { RefObject, useEffect, useRef, useState } from "react";
 
-export default function useIsVisible(ref: RefObject<HTMLElement>) {
+export default function useIsVisible(ref: RefObject<HTMLElement | null>) {
   const observerRef = useRef<IntersectionObserver | null>(null);
   const [isOnScreen, setIsOnScreen] = useState(false);
 

src/hooks/usePrevious.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 
 const usePrevious = <T>(value: T): T | undefined => {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
 
   useEffect(() => {
     ref.current = value;

src/interfaces/Account.ts

@@ -24,6 +24,7 @@ export interface Account {
     lazy_connection_enabled: boolean;
     embedded_idp_enabled?: boolean;
     auto_update_version: string;
+    local_auth_disabled?: boolean;
   };
   onboarding?: AccountOnboarding;
 }

src/interfaces/Instance.ts

@@ -17,3 +17,9 @@ export interface ApiError {
   code: number;
   message: string;
 }
+
+export interface VersionInfo {
+  management_current_version: string;
+  management_available_version: string;
+  dashboard_available_version: string;
+}

src/interfaces/User.ts

@@ -17,6 +17,51 @@ export interface User {
   idp_id?: string;
 }
 
+export interface UserInviteCreateRequest {
+  email: string;
+  name: string;
+  role: string;
+  auto_groups: string[];
+  expires_in?: number;
+}
+
+export interface UserInvite {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  auto_groups: string[];
+  expires_at: string;
+  created_at: string;
+  expired: boolean;
+  invite_token?: string;
+}
+
+export interface UserInviteInfo {
+  email: string;
+  name: string;
+  expires_at: string;
+  valid: boolean;
+  invited_by: string;
+}
+
+export interface UserInviteAcceptRequest {
+  password: string;
+}
+
+export interface UserInviteAcceptResponse {
+  success: boolean;
+}
+
+export interface UserInviteRegenerateRequest {
+  expires_in?: number;
+}
+
+export interface UserInviteRegenerateResponse {
+  invite_token: string;
+  invite_expires_at: string;
+}
+
 export enum Role {
   User = "user",
   Admin = "admin",

src/layouts/AppLayout.tsx

@@ -42,7 +42,7 @@ export default function AppLayout({
       <head>
         <GoogleTagManagerHeadScript />
       </head>
-      <body className={cn(inter.className, "dark:bg-nb-gray bg-gray-50")}>
+      <body className={cn(inter.className)}>
         <Suspense fallback={<FullScreenLoading />}>
           <AnalyticsProvider>
             <DialogProvider>

src/layouts/Navigation.tsx

@@ -14,6 +14,7 @@ import SettingsIcon from "@/assets/icons/SettingsIcon";
 import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import SidebarItem from "@/components/SidebarItem";
+import { NavigationVersionInfo } from "@/components/VersionInfo";
 import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 import { usePermissions } from "@/contexts/PermissionsProvider";
@@ -201,6 +202,7 @@ export default function Navigation({
                 />
               </SidebarItemGroup>
             </div>
+            <NavigationVersionInfo />
           </div>
         </ScrollArea>
       </div>

src/modules/activity/ActivityDescription.tsx

@@ -285,6 +285,42 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  /**
+   * User Invite Link
+   */
+
+  if (event.activity_code == "user.invite.link.create")
+    return (
+      <div className={"inline"}>
+        Invite link was created for <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.invite.link.accept")
+    return (
+      <div className={"inline"}>
+        Invite link was accepted by <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.invite.link.regenerate")
+    return (
+      <div className={"inline"}>
+        Invite link was regenerated for <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.invite.link.delete")
+    return (
+      <div className={"inline"}>
+        Invite link was deleted for <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+      </div>
+    );
+
   /**
    * Service User
    */

src/modules/posture-checks/ui/PostureCheckOperatingSystemInfo.tsx

@@ -7,7 +7,7 @@ type Props = {
   version?: string;
   versionText?: string;
   versionList?: SelectOption[];
-  icon: React.FunctionComponent<{ size: number }>;
+  icon: (props: { size: number }) => React.ReactElement;
   os: string;
 };
 export const PostureCheckOperatingSystemInfo = ({

src/modules/remote-access/rdp/rdp-certificate-handler.ts

@@ -91,7 +91,7 @@ export class RDPCertificateHandler implements CertificateHandler {
    * Calculate SHA-256 fingerprint of certificate
    */
   async calculateFingerprint(certBytes: Uint8Array): Promise<string> {
-    const hashBuffer = await crypto.subtle.digest('SHA-256', certBytes);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', certBytes as Uint8Array<ArrayBuffer>);
     const hashArray = Array.from(new Uint8Array(hashBuffer));
     return hashArray
       .map(b => b.toString(16).padStart(2, '0'))

src/modules/remote-access/rdp/useRDPCertificateHandler.ts

@@ -46,7 +46,7 @@ export const useRDPCertificateHandler = () => {
   const calculateFingerprint = useCallback(
     async (certBytes: Uint8Array): Promise<string> => {
       try {
-        const hashBuffer = await crypto.subtle.digest("SHA-256", certBytes);
+        const hashBuffer = await crypto.subtle.digest("SHA-256", certBytes as Uint8Array<ArrayBuffer>);
         const hashArray = Array.from(new Uint8Array(hashBuffer));
         const fingerprint = hashArray
           .map((b) => b.toString(16).padStart(2, "0"))

src/modules/settings/GroupsSettings.tsx

@@ -191,16 +191,6 @@ export default function GroupsSettings({ account }: Props) {
               disabled={!permission.settings.update}
             />
           )}
-          <Callout variant={"info"} className={""}>
-            Looking to view and manage your groups? You can find group
-            management under{"  "}
-            <InlineButtonLink
-              onClick={() => router.push("/groups")}
-              variant={"dashed"}
-            >
-              {`Access Control › Groups`}
-            </InlineButtonLink>
-          </Callout>
         </div>
 
         {(!isNetBirdHosted() || isLocalDev()) && (
@@ -323,6 +313,17 @@ export default function GroupsSettings({ account }: Props) {
             )}
           </AnimatePresence>
         )}
+
+        <Callout variant={"info"} className={"mt-6"}>
+          Looking to view and manage your groups? You can find group management
+          under{"  "}
+          <InlineButtonLink
+            onClick={() => router.push("/groups")}
+            variant={"dashed"}
+          >
+            {`Access Control › Groups`}
+          </InlineButtonLink>
+        </Callout>
       </div>
     </Tabs.Content>
   );

src/modules/users/UserInviteModal.tsx

@@ -12,10 +12,11 @@ import {
 import { notify } from "@components/Notification";
 import Paragraph from "@components/Paragraph";
 import { PeerGroupSelector } from "@components/PeerGroupSelector";
-import { IconMailForward } from "@tabler/icons-react";
+import { SegmentedTabs } from "@components/SegmentedTabs";
+import { IconMailForward, IconLink, IconUserPlus } from "@tabler/icons-react";
 import { useApiCall } from "@utils/api";
 import { cn, validator } from "@utils/helpers";
-import { CopyIcon, MailIcon, User2 } from "lucide-react";
+import { AlarmClock, CopyIcon, MailIcon, User2 } from "lucide-react";
 import Image from "next/image";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
@@ -25,28 +26,50 @@ import Avatar2 from "@/assets/avatars/030.jpg";
 import Avatar3 from "@/assets/avatars/063.jpg";
 import Avatar4 from "@/assets/avatars/086.jpg";
 import { Group } from "@/interfaces/Group";
-import { Role, User } from "@/interfaces/User";
+import { Role, User, UserInvite } from "@/interfaces/User";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
-import {isNetBirdHosted} from "@utils/netbird";
+import { isNetBirdHosted } from "@utils/netbird";
+
+type UserCreationMode = "create" | "invite";
 
 type Props = {
   children: React.ReactNode;
   groups?: Group[];
 };
 
-const copyMessage = "Password was copied to your clipboard!";
+const passwordCopyMessage = "Password was copied to your clipboard!";
+const inviteLinkCopyMessage = "Invite link was copied to your clipboard!";
+
+type SuccessData =
+  | { type: "password"; user: User }
+  | { type: "invite"; invite: UserInvite };
 
 export default function UserInviteModal({ children, groups }: Readonly<Props>) {
   const [open, setOpen] = useState(false);
   const [successModal, setSuccessModal] = useState(false);
-  const [createdUser, setCreatedUser] = useState<User>();
+  const [successData, setSuccessData] = useState<SuccessData | null>(null);
   const { mutate } = useSWRConfig();
-  const [, copyToClipboard] = useCopyToClipboard(createdUser?.password);
 
-  const handleOnSuccess = (user: User) => {
+  const isPasswordSuccess = successData?.type === "password";
+  const isInviteSuccess = successData?.type === "invite";
+
+  const getInviteFullUrl = () => {
+    if (!isInviteSuccess) return "";
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    return `${origin}/invite?token=${successData.invite.invite_token}`;
+  };
+
+  const getCopyValue = () => {
+    if (successData?.type === "password") return successData.user.password;
+    if (successData?.type === "invite") return getInviteFullUrl();
+    return undefined;
+  };
+  const [, copyToClipboard] = useCopyToClipboard(getCopyValue());
+
+  const handleUserCreated = (user: User) => {
     if (user.password) {
-      setCreatedUser(user);
+      setSuccessData({ type: "password", user });
       setSuccessModal(true);
     } else {
       setOpen(false);
@@ -56,9 +79,22 @@ export default function UserInviteModal({ children, groups }: Readonly<Props>) {
     }, 1000);
   };
 
+  const handleInviteCreated = (invite: UserInvite) => {
+    setSuccessData({ type: "invite", invite });
+    setSuccessModal(true);
+    setTimeout(() => {
+      mutate("/users?service_user=false");
+      mutate("/users/invites");
+    }, 1000);
+  };
+
   const handleCopyAndClose = () => {
-    copyToClipboard(copyMessage).then(() => {
-      setCreatedUser(undefined);
+    const message =
+      successData?.type === "password"
+        ? passwordCopyMessage
+        : inviteLinkCopyMessage;
+    copyToClipboard(message).then(() => {
+      setSuccessData(null);
       setSuccessModal(false);
       setOpen(false);
     });
@@ -68,14 +104,18 @@ export default function UserInviteModal({ children, groups }: Readonly<Props>) {
     <>
       <Modal open={open} onOpenChange={setOpen} key={open ? 1 : 0}>
         <ModalTrigger asChild={true}>{children}</ModalTrigger>
-        <UserInviteModalContent onSuccess={handleOnSuccess} groups={groups} />
+        <UserInviteModalContent
+          onUserCreated={handleUserCreated}
+          onInviteCreated={handleInviteCreated}
+          groups={groups}
+        />
       </Modal>
 
       <Modal
         open={successModal}
         onOpenChange={(open) => {
           if (!open) {
-            setCreatedUser(undefined);
+            setSuccessData(null);
           }
           setSuccessModal(open);
           setOpen(open);
@@ -85,7 +125,7 @@ export default function UserInviteModal({ children, groups }: Readonly<Props>) {
           onEscapeKeyDown={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
           onPointerDownOutside={(e) => e.preventDefault()}
-          maxWidthClass={"max-w-md"}
+          maxWidthClass={isInviteSuccess ? "max-w-xl" : "max-w-md"}
           className={"mt-20"}
           showClose={false}
         >
@@ -93,20 +133,41 @@ export default function UserInviteModal({ children, groups }: Readonly<Props>) {
             <div className={"flex flex-col items-center justify-center gap-3"}>
               <div>
                 <h2 className={"text-2xl text-center mb-2"}>
-                  User created successfully!
+                  {isPasswordSuccess && "User created successfully!"}
+                  {isInviteSuccess && "Invite link created!"}
                 </h2>
                 <Paragraph className={"mt-0 text-sm text-center"}>
-                  This password will not be shown again, so be sure to copy it
-                  and store in a secure location.
+                  {isPasswordSuccess &&
+                    "This password will not be shown again, so be sure to copy it and store in a secure location."}
+                  {isInviteSuccess &&
+                    "Share this link with the user. They will be able to set their own password."}
                 </Paragraph>
               </div>
             </div>
           </div>
 
           <div className={"px-8 pb-6"}>
-            <Code message={copyMessage}>
-              <Code.Line>{createdUser?.password || ""}</Code.Line>
+            <Code
+              message={
+                isPasswordSuccess ? passwordCopyMessage : inviteLinkCopyMessage
+              }
+              codeToCopy={getCopyValue()}
+            >
+              {isPasswordSuccess && (
+                <Code.Line>{successData.user.password}</Code.Line>
+              )}
+              {isInviteSuccess && (
+                <span className="break-all whitespace-normal block">
+                  {getInviteFullUrl()}
+                </span>
+              )}
             </Code>
+            {isInviteSuccess && (
+              <Paragraph className={"mt-3 text-xs text-nb-gray-400 text-center"}>
+                Expires on{" "}
+                {new Date(successData.invite.expires_at).toLocaleString()}
+              </Paragraph>
+            )}
           </div>
           <ModalFooter className={"items-center"}>
             <Button
@@ -125,31 +186,38 @@ export default function UserInviteModal({ children, groups }: Readonly<Props>) {
 }
 
 type ModalProps = {
-  onSuccess: (user: User) => void;
+  onUserCreated: (user: User) => void;
+  onInviteCreated: (invite: UserInvite) => void;
   groups?: Group[];
 };
 
 export function UserInviteModalContent({
-  onSuccess,
+  onUserCreated,
+  onInviteCreated,
   groups = [],
 }: Readonly<ModalProps>) {
   const userRequest = useApiCall<User>("/users");
+  const inviteRequest = useApiCall<UserInvite>("/users/invites");
   const { mutate } = useSWRConfig();
 
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [role, setRole] = useState("user");
+  const [expiresIn, setExpiresIn] = useState("3");
   const [selectedGroups, setSelectedGroups, { save: saveGroups }] =
     useGroupHelper({
       initial: groups,
     });
 
-  const sendInvite = async () => {
+  const isCloud = isNetBirdHosted();
+  const [mode, setMode] = useState<UserCreationMode>("invite");
+
+  const createUser = async () => {
     const groups = await saveGroups();
     const groupIds = groups.map((group) => group.id) as string[];
     notify({
-      title: "User Invitation",
-      description: `${name} was invited to join your network.`,
+      title: "Create User",
+      description: `Creating user account for ${name}...`,
       promise: userRequest
         .post({
           name,
@@ -160,11 +228,46 @@ export function UserInviteModalContent({
         })
         .then((user) => {
           mutate("/users?service_user=false");
-          onSuccess && onSuccess(user);
+          onUserCreated && onUserCreated(user);
         }),
-      loadingMessage: "Sending invite...",
+      loadingMessage: "Creating user...",
     });
   };
+
+  const createInvite = async () => {
+    const groups = await saveGroups();
+    const groupIds = groups.map((group) => group.id) as string[];
+    notify({
+      title: "Create Invite",
+      description: `Creating invite link for ${name}...`,
+      promise: inviteRequest
+        .post({
+          name,
+          email,
+          role,
+          auto_groups: groupIds,
+          expires_in: parseInt(expiresIn || "3") * 24 * 60 * 60, // Days to seconds
+        })
+        .then((invite) => {
+          mutate("/users?service_user=false");
+          onInviteCreated && onInviteCreated(invite);
+        }),
+      loadingMessage: "Creating invite...",
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (isCloud) {
+      await createUser();
+    } else {
+      if (mode === "create") {
+        await createUser();
+      } else {
+        await createInvite();
+      }
+    }
+  };
+
   const isValidEmail = useMemo(() => {
     return email.length > 0 && validator.isValidEmail(email);
   }, [email]);
@@ -173,6 +276,33 @@ export function UserInviteModalContent({
     return name.length === 0 || !isValidEmail;
   }, [name, isValidEmail]);
 
+  const getTitle = () => {
+    if (isCloud) return "Invite User";
+    return mode === "create" ? "Create User" : "Invite User";
+  };
+
+  const getDescription = () => {
+    if (isCloud) return "Invite a user to your network and set their permissions.";
+    if (mode === "create") {
+      return "Create a NetBird user account with email and password.";
+    }
+    return "Generate an invite link that the user can use to set their own password.";
+  };
+
+  const getButtonText = () => {
+    if (isCloud) return "Send Invitation";
+    return mode === "create" ? "Create User" : "Create Invite Link";
+  };
+
+  const getButtonIcon = () => {
+    if (isCloud) return <IconMailForward size={16} />;
+    return mode === "create" ? (
+      <IconUserPlus size={16} />
+    ) : (
+      <IconLink size={16} />
+    );
+  };
+
   return (
     <ModalContent maxWidthClass={"max-w-lg relative"} showClose={true}>
       <div
@@ -193,15 +323,31 @@ export function UserInviteModalContent({
           "mx-auto text-center flex flex-col items-center justify-center mt-6"
         }
       >
-        <h2 className={"text-lg my-0 leading-[1.5 text-center]"}>
-            {isNetBirdHosted() ? "Invite User" : "Create User"}
-        </h2>
+        <h2 className={"text-lg my-0 leading-[1.5 text-center]"}>{getTitle()}</h2>
         <Paragraph className={cn("text-sm text-center max-w-xs")}>
-            {isNetBirdHosted() ? "Invite a user to your network and set their permissions." : "Create a NetBird user account with email and password."}
+          {getDescription()}
         </Paragraph>
       </div>
 
-      <div className={"px-8 py-3 flex flex-col gap-6 mt-4"}>
+      <div className={"px-8 py-3 flex flex-col gap-6 mt-4 relative z-10"}>
+        {!isCloud && (
+          <SegmentedTabs
+            value={mode}
+            onChange={(value) => setMode(value as UserCreationMode)}
+          >
+            <SegmentedTabs.List className="rounded-lg border">
+              <SegmentedTabs.Trigger value="invite">
+                <IconLink size={16} />
+                Invite User
+              </SegmentedTabs.Trigger>
+              <SegmentedTabs.Trigger value="create">
+                <IconUserPlus size={16} />
+                Create User
+              </SegmentedTabs.Trigger>
+            </SegmentedTabs.List>
+          </SegmentedTabs>
+        )}
+
         <div className={"flex flex-col gap-4"}>
           <Input
             customPrefix={
@@ -230,6 +376,26 @@ export function UserInviteModalContent({
             onChange={setRole}
             hideOwner={true}
           />
+          {!isCloud && mode === "invite" && (
+            <div className={"flex justify-between mt-3"}>
+              <div>
+                <Label>Expires in</Label>
+                <HelpText>Days until the invite expires.</HelpText>
+              </div>
+              <Input
+                maxWidthClass={"max-w-[200px]"}
+                placeholder={"3"}
+                min={1}
+                value={expiresIn}
+                type={"number"}
+                onChange={(e) => setExpiresIn(e.target.value)}
+                customPrefix={
+                  <AlarmClock size={16} className={"text-nb-gray-300"} />
+                }
+                customSuffix={"Day(s)"}
+              />
+            </div>
+          )}
         </div>
 
         <div className={"mb-4"}>
@@ -252,10 +418,10 @@ export function UserInviteModalContent({
           variant={"primary"}
           className={"w-full"}
           disabled={isDisabled}
-          onClick={sendInvite}
+          onClick={handleSubmit}
         >
-            {isNetBirdHosted() ? "Send Invitation" : "Create User"}
-          <IconMailForward size={16} />
+          {getButtonText()}
+          {getButtonIcon()}
         </Button>
       </ModalFooter>
     </ModalContent>

src/modules/users/UserInvitesTable.tsx

@@ -0,0 +1,528 @@
+import Button from "@components/Button";
+import Code from "@components/Code";
+import InlineLink from "@components/InlineLink";
+import { Modal, ModalContent, ModalFooter } from "@components/modal/Modal";
+import Paragraph from "@components/Paragraph";
+import SquareIcon from "@components/SquareIcon";
+import { DataTable } from "@components/table/DataTable";
+import DataTableHeader from "@components/table/DataTableHeader";
+import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
+import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
+import GetStartedTest from "@components/ui/GetStartedTest";
+import MultipleGroups from "@components/ui/MultipleGroups";
+import Skeleton from "react-loading-skeleton";
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+import useFetchApi, { useApiCall } from "@utils/api";
+import { notify } from "@components/Notification";
+import { RefreshCw } from "lucide-react";
+import { isNetBirdHosted } from "@utils/netbird";
+import dayjs from "dayjs";
+import {
+  Cog,
+  CopyIcon,
+  CreditCardIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  Link2,
+  MailPlus,
+  NetworkIcon,
+  Trash2,
+  User2,
+} from "lucide-react";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
+import Badge from "@components/Badge";
+import { usePathname } from "next/navigation";
+import React, { useMemo, useState } from "react";
+import { useSWRConfig } from "swr";
+import { useDialog } from "@/contexts/DialogProvider";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { usePermissions } from "@/contexts/PermissionsProvider";
+import useCopyToClipboard from "@/hooks/useCopyToClipboard";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { cn, generateColorFromString } from "@utils/helpers";
+import { Group } from "@/interfaces/Group";
+import { Role, UserInvite, UserInviteRegenerateResponse } from "@/interfaces/User";
+import UserInviteModal from "@/modules/users/UserInviteModal";
+import { useAccount } from "@/modules/account/useAccount";
+
+// Name cell for invites - same styling as UserNameCell but for invites
+function InviteNameCell({ invite }: { invite: UserInvite }) {
+  return (
+    <div
+      className={cn("flex gap-4 px-2 py-1 items-center")}
+      data-cy={"invite-name-cell"}
+    >
+      <div
+        className={
+          "w-10 h-10 rounded-full relative flex items-center justify-center text-white uppercase text-md font-medium bg-nb-gray-900"
+        }
+        style={{
+          color: generateColorFromString(invite.name || invite.email),
+        }}
+      >
+        {invite?.name?.charAt(0) || invite?.email?.charAt(0)}
+      </div>
+      <div className={"flex flex-col justify-center"}>
+        <span className={cn("text-base font-medium flex items-center gap-3")}>
+          {invite.name}
+        </span>
+        <span className={cn("text-sm text-nb-gray-400")}>{invite.email}</span>
+      </div>
+    </div>
+  );
+}
+
+// Role cell for invites - same styling as UserRoleCell but for invites
+function InviteRoleCell({ invite }: { invite: UserInvite }) {
+  const role = invite.role as Role;
+
+  return (
+    <div className={cn("flex gap-3 items-center text-nb-gray-200")}>
+      <Badge variant={role === "owner" ? "netbird" : "gray"}>
+        {role === Role.User && (
+          <>
+            <User2 size={14} />
+            User
+          </>
+        )}
+        {role === Role.Admin && (
+          <>
+            <Cog size={14} />
+            Admin
+          </>
+        )}
+        {role === Role.Owner && (
+          <>
+            <NetBirdIcon size={14} />
+            Owner
+          </>
+        )}
+        {role === Role.BillingAdmin && (
+          <>
+            <CreditCardIcon size={14} />
+            Billing Admin
+          </>
+        )}
+        {role === Role.Auditor && (
+          <>
+            <EyeIcon size={14} />
+            Auditor
+          </>
+        )}
+        {role === Role.NetworkAdmin && (
+          <>
+            <NetworkIcon size={14} />
+            Network Admin
+          </>
+        )}
+      </Badge>
+    </div>
+  );
+}
+
+// Regenerate cell for invites - button to regenerate invite link with modal
+function InviteRegenerateCell({ invite }: { invite: UserInvite }) {
+  const { mutate } = useSWRConfig();
+  const { permission } = usePermissions();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [regeneratedData, setRegeneratedData] = useState<UserInviteRegenerateResponse | null>(null);
+
+  const regenerateRequest = useApiCall<UserInviteRegenerateResponse>(
+    `/users/invites/${invite.id}/regenerate`,
+  );
+
+  const getInviteFullUrl = () => {
+    if (!regeneratedData) return "";
+    const origin = typeof window !== "undefined" ? window.location.origin : "";
+    return `${origin}/invite?token=${regeneratedData.invite_token}`;
+  };
+
+  const [, copyToClipboard] = useCopyToClipboard(getInviteFullUrl());
+
+  const handleRegenerate = async () => {
+    notify({
+      title: "Regenerate Invite",
+      description: `Regenerating invite link for ${invite.name}...`,
+      promise: regenerateRequest.post({}).then((response) => {
+        setRegeneratedData(response);
+        setModalOpen(true);
+        mutate("/users/invites");
+      }),
+      loadingMessage: "Regenerating...",
+    });
+  };
+
+  const handleCopyAndClose = () => {
+    copyToClipboard("Invite link was copied to your clipboard!").then(() => {
+      setRegeneratedData(null);
+      setModalOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <div className={"flex"}>
+        <Button
+          variant="secondary"
+          size="xs"
+          onClick={handleRegenerate}
+          disabled={!permission.users.update}
+        >
+          <RefreshCw size={14} />
+          Regenerate
+        </Button>
+      </div>
+
+      <Modal
+        open={modalOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRegeneratedData(null);
+          }
+          setModalOpen(open);
+        }}
+      >
+        <ModalContent
+          maxWidthClass={"max-w-xl"}
+          className={"mt-20"}
+          showClose={true}
+        >
+          <div className={"pb-6 px-8"}>
+            <div className={"flex flex-col items-center justify-center gap-3"}>
+              <div>
+                <h2 className={"text-2xl text-center mb-2"}>
+                  Invite link regenerated!
+                </h2>
+                <Paragraph className={"mt-0 text-sm text-center"}>
+                  Share this link with the user. They will be able to set their own password.
+                </Paragraph>
+              </div>
+            </div>
+          </div>
+
+          <div className={"px-8 pb-6"}>
+            <Code
+              message={"Invite link was copied to your clipboard!"}
+              codeToCopy={getInviteFullUrl()}
+            >
+              <span className="break-all whitespace-normal block">
+                {getInviteFullUrl()}
+              </span>
+            </Code>
+            {regeneratedData && (
+              <Paragraph className={"mt-3 text-xs text-nb-gray-400 text-center"}>
+                Expires on{" "}
+                {new Date(regeneratedData.invite_expires_at).toLocaleString()}
+              </Paragraph>
+            )}
+          </div>
+          <ModalFooter className={"items-center"}>
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              onClick={handleCopyAndClose}
+            >
+              <CopyIcon size={14} />
+              Copy & Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+// Groups cell for invites - read-only display of auto_groups
+function InviteGroupCell({ invite }: { invite: UserInvite }) {
+  const { groups, isLoading } = useGroups();
+
+  const foundGroups = useMemo(() => {
+    if (isLoading || !groups) return [];
+    return (invite.auto_groups || [])
+      .map((groupId) => groups.find((g) => g?.id === groupId))
+      .filter((g): g is Group => g !== undefined);
+  }, [invite.auto_groups, groups, isLoading]);
+
+  if (isLoading) {
+    return (
+      <div className={"flex gap-2"}>
+        <Skeleton height={34} width={90} />
+        <Skeleton height={34} width={45} />
+      </div>
+    );
+  }
+
+  return (
+    <MultipleGroups
+      groups={foundGroups}
+      label={"Auto-assigned Groups"}
+    />
+  );
+}
+
+// Status cell for invites - shows Valid/Expired based on expired field
+function InviteStatusCell({ invite }: { invite: UserInvite }) {
+  const isExpired = invite.expired;
+  const text = isExpired ? "Expired" : "Valid";
+  const color = isExpired ? "bg-red-500" : "bg-green-500";
+
+  return (
+    <div
+      className={cn("flex gap-2.5 items-center text-nb-gray-300 text-sm")}
+      data-cy={"invite-status-cell"}
+    >
+      <span className={cn("h-2 w-2 rounded-full", color)}></span>
+      {text}
+    </div>
+  );
+}
+
+// Action cell for invites - delete invite
+function InviteActionCell({ invite }: { invite: UserInvite }) {
+  const { confirm } = useDialog();
+  const { permission } = usePermissions();
+  const inviteRequest = useApiCall<UserInvite>("/users/invites");
+  const { mutate } = useSWRConfig();
+
+  const deleteInvite = async () => {
+    const name = invite.name || invite.email || "Invite";
+    notify({
+      title: `'${name}' deleted`,
+      description: "Invite was successfully deleted.",
+      promise: inviteRequest.del("", `/${invite.id}`).then(() => {
+        mutate("/users/invites");
+      }),
+      loadingMessage: "Deleting the invite...",
+    });
+  };
+
+  const openConfirm = async () => {
+    const name = invite.name || invite.email || "Invite";
+    const choice = await confirm({
+      title: `Delete invite for '${name}'?`,
+      description:
+        "Deleting this invite will revoke the invite link. The user will no longer be able to join using this invite.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      maxWidthClass: "max-w-md",
+      type: "danger",
+    });
+    if (!choice) return;
+    deleteInvite().then();
+  };
+
+  return (
+    <div className={"flex justify-end pr-4 items-center gap-2"}>
+      <Button
+        variant={"danger-outline"}
+        size={"sm"}
+        onClick={openConfirm}
+        data-cy={"delete-invite"}
+        disabled={!permission.users.delete}
+      >
+        <Trash2 size={16} />
+        Delete
+      </Button>
+    </div>
+  );
+}
+
+export const InvitesTableColumns: ColumnDef<UserInvite>[] = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Name</DataTableHeader>;
+    },
+    accessorFn: (row) => row.name + " " + row.email,
+    sortingFn: "text",
+    cell: ({ row }) => <InviteNameCell invite={row.original} />,
+  },
+  {
+    accessorKey: "role",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Role</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <InviteRoleCell invite={row.original} />,
+  },
+  {
+    accessorKey: "expired",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Status</DataTableHeader>;
+    },
+    sortingFn: "basic",
+    cell: ({ row }) => <InviteStatusCell invite={row.original} />,
+  },
+  {
+    accessorKey: "auto_groups",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Groups</DataTableHeader>;
+    },
+    sortingFn: "text",
+    cell: ({ row }) => <InviteGroupCell invite={row.original} />,
+  },
+  {
+    id: "regenerate",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Regenerate</DataTableHeader>;
+    },
+    cell: ({ row }) => <InviteRegenerateCell invite={row.original} />,
+  },
+  {
+    accessorKey: "expires_at",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Expires</DataTableHeader>;
+    },
+    sortingFn: "datetime",
+    cell: ({ row }) => (
+      <span className="text-nb-gray-400">
+        {dayjs(row.original.expires_at).format("D MMM, YYYY")}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "id",
+    header: "",
+    sortingFn: "text",
+    cell: ({ row }) => <InviteActionCell invite={row.original} />,
+  },
+];
+
+type Props = {
+  headingTarget?: HTMLHeadingElement | null;
+  onShowUsers?: () => void;
+};
+
+export default function UserInvitesTable({
+  headingTarget,
+  onShowUsers,
+}: Readonly<Props>) {
+  useFetchApi("/groups");
+  const { data: invites, isLoading } = useFetchApi<UserInvite[]>("/users/invites");
+  const { mutate } = useSWRConfig();
+  const path = usePathname();
+
+  // Default sorting state of the table
+  const [sorting, setSorting] = useLocalStorage<SortingState>(
+    "netbird-table-sort-invites" + path,
+    [
+      {
+        id: "is_current",
+        desc: true,
+      },
+      {
+        id: "name",
+        desc: true,
+      },
+    ],
+  );
+
+  return (
+    <DataTable
+      headingTarget={headingTarget}
+      isLoading={isLoading}
+      text={"Invites"}
+      sorting={sorting}
+      setSorting={setSorting}
+      columns={InvitesTableColumns}
+      data={invites}
+      searchPlaceholder={"Search by name or email..."}
+      getStartedCard={
+        <GetStartedTest
+          icon={
+            <SquareIcon
+              icon={<Link2 className={"fill-nb-gray-200"} size={20} />}
+              color={"gray"}
+              size={"large"}
+            />
+          }
+          title={"No Pending Invites"}
+          description={
+            "There are no pending invites. Create an invite to add users to your network."
+          }
+          button={
+            <div className={"flex flex-col items-center justify-center"}>
+              <InviteUserButton show={true} />
+            </div>
+          }
+          learnMore={
+            <>
+              Learn more about
+              <InlineLink
+                href={
+                  "https://docs.netbird.io/how-to/add-users-to-your-network"
+                }
+                target={"_blank"}
+              >
+                Users
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </>
+          }
+        />
+      }
+      rightSide={() => (
+        <InviteUserButton
+          show={invites && invites?.length > 0}
+          className={"ml-auto"}
+        />
+      )}
+    >
+      {(table) => {
+        return (
+          <>
+            <DataTableRowsPerPage table={table} disabled={invites?.length == 0} />
+            <DataTableRefreshButton
+              isDisabled={invites?.length == 0}
+              onClick={() => {
+                mutate("/users/invites");
+              }}
+            />
+            <Button variant={"secondary"} onClick={onShowUsers}>
+              <User2 size={14} />
+              Show Users
+            </Button>
+          </>
+        );
+      }}
+    </DataTable>
+  );
+}
+
+type InviteUserButtonProps = {
+  show?: boolean;
+  className?: string;
+  groups?: Group[];
+};
+
+export const InviteUserButton = ({
+  show = false,
+  className,
+  groups,
+}: InviteUserButtonProps) => {
+  const { permission } = usePermissions();
+  const account = useAccount();
+
+  if (!show) return null;
+
+  // On cloud: always show "Invite User"
+  // On self-hosted: only show when embedded_idp_enabled is true
+  const isCloud = isNetBirdHosted();
+  const embeddedIdpEnabled = account?.settings.embedded_idp_enabled;
+
+  if (!isCloud && !embeddedIdpEnabled) return null;
+
+  return (
+    <UserInviteModal groups={groups}>
+      <Button
+        variant={"primary"}
+        className={className}
+        disabled={!permission.users.create}
+      >
+        <MailPlus size={16} />
+        {isCloud ? "Invite User" : "Add User"}
+      </Button>
+    </UserInviteModal>
+  );
+};
+

src/modules/users/UsersTable.tsx

@@ -1,5 +1,6 @@
 import Button from "@components/Button";
 import Card from "@components/Card";
+import FullTooltip from "@components/FullTooltip";
 import InlineLink from "@components/InlineLink";
 import SquareIcon from "@components/SquareIcon";
 import { DataTable } from "@components/table/DataTable";
@@ -7,6 +8,7 @@ import DataTableHeader from "@components/table/DataTableHeader";
 import DataTableRefreshButton from "@components/table/DataTableRefreshButton";
 import { DataTableRowsPerPage } from "@components/table/DataTableRowsPerPage";
 import GetStartedTest from "@components/ui/GetStartedTest";
+import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
 import {
   ColumnDef,
   Row,
@@ -17,15 +19,15 @@ import {
 import useFetchApi from "@utils/api";
 import { isNetBirdHosted } from "@utils/netbird";
 import dayjs from "dayjs";
-import { ExternalLinkIcon, MailPlus } from "lucide-react";
+import { ExternalLinkIcon, Link2, MailPlus } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
-import React from "react";
+import React, { useState } from "react";
 import { useSWRConfig } from "swr";
 import TeamIcon from "@/assets/icons/TeamIcon";
 import { usePermissions } from "@/contexts/PermissionsProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Group } from "@/interfaces/Group";
-import { User } from "@/interfaces/User";
+import { User, UserInvite } from "@/interfaces/User";
 import LastTimeRow from "@/modules/common-table-rows/LastTimeRow";
 import { PendingApprovalFilter } from "@/modules/users/PendingApprovalFilter";
 import UserActionCell from "@/modules/users/table-cells/UserActionCell";
@@ -35,6 +37,7 @@ import UserNameCell from "@/modules/users/table-cells/UserNameCell";
 import UserRoleCell from "@/modules/users/table-cells/UserRoleCell";
 import UserStatusCell from "@/modules/users/table-cells/UserStatusCell";
 import UserInviteModal from "@/modules/users/UserInviteModal";
+import UserInvitesTable from "@/modules/users/UserInvitesTable";
 import { useAccount } from "@/modules/account/useAccount";
 
 export const UsersTableColumns: ColumnDef<User>[] = [
@@ -142,6 +145,21 @@ export default function UsersTable({
   useFetchApi("/groups");
   const { mutate } = useSWRConfig();
   const path = usePathname();
+  const account = useAccount();
+
+  const isCloud = isNetBirdHosted();
+  const embeddedIdpEnabled = account?.settings.embedded_idp_enabled;
+  const showInvitesToggle = !isCloud && embeddedIdpEnabled;
+
+  const { data: invites } = useFetchApi<UserInvite[]>(
+    "/users/invites",
+    false,
+    true,
+    showInvitesToggle,
+  );
+  const validInvitesCount = invites?.filter((i) => !i.expired).length ?? 0;
+
+  const [showInvites, setShowInvites] = useState(false);
 
   // Default sorting state of the table
   const [sorting, setSorting] = useLocalStorage<SortingState>(
@@ -162,6 +180,15 @@ export default function UsersTable({
   const router = useRouter();
   const { permission } = usePermissions();
 
+  if (showInvites) {
+    return (
+      <UserInvitesTable
+        headingTarget={headingTarget}
+        onShowUsers={() => setShowInvites(false)}
+      />
+    );
+  }
+
   return (
     <DataTable
       headingTarget={headingTarget}
@@ -256,6 +283,16 @@ export default function UsersTable({
                 mutate("/groups");
               }}
             />
+            {showInvitesToggle && (
+              <Button
+                variant={"secondary"}
+                onClick={() => setShowInvites(true)}
+              >
+                <Link2 size={14} />
+                Show Invites
+                <NotificationCountBadge count={validInvitesCount} />
+              </Button>
+            )}
           </>
         );
       }}
@@ -283,19 +320,51 @@ export const InviteUserButton = ({
   // On self-hosted: only show when embedded_idp_enabled is true
   const isCloud = isNetBirdHosted();
   const embeddedIdpEnabled = account?.settings.embedded_idp_enabled;
+  const localAuthDisabled = account?.settings.local_auth_disabled;
 
   if (!isCloud && !embeddedIdpEnabled) return null;
 
-  return (
-    <UserInviteModal groups={groups}>
-      <Button
-        variant={"primary"}
-        className={className}
-        disabled={!permission.users.create}
-      >
-        <MailPlus size={16} />
-        {isCloud ? "Invite User" : "Create User"}
-      </Button>
-    </UserInviteModal>
+  const isDisabled = !permission.users.create || localAuthDisabled;
+
+  const button = (
+    <Button
+      variant={"primary"}
+      className={className}
+      disabled={isDisabled}
+    >
+      <MailPlus size={16} />
+      {isCloud ? "Invite User" : "Add User"}
+    </Button>
   );
+
+  if (localAuthDisabled) {
+    return (
+      <FullTooltip
+        className={className}
+        interactive={true}
+        content={
+          <div className={"flex flex-col"}>
+            <p className={"max-w-[200px] text-xs"}>
+              Local authentication is disabled. Use your IdP for authentication.
+            </p>
+            <div className={"text-xs mt-1.5"}>
+              <InlineLink
+                href={"https://docs.netbird.io/selfhosted/identity-providers/disable-local-authentication"}
+                target={"_blank"}
+                className={"flex gap-1 items-center"}
+              >
+                Learn more
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </div>
+          </div>
+        }
+      >
+        {button}
+      </FullTooltip>
+    );
+  }
+
+  return <UserInviteModal groups={groups}>{button}</UserInviteModal>;
 };
+

src/utils/api.tsx

@@ -80,7 +80,7 @@ export function useNetBirdFetch(ignoreError: boolean = false): {
   const handleErrors = useApiErrorHandling(ignoreError);
 
   const isTokenExpired = async () => {
-    let attempts = 20;
+    let attempts = 4;
     while (isExpired(token) && attempts > 0) {
       await sleep(500);
       attempts = attempts - 1;

src/utils/theme.ts

@@ -1,20 +0,0 @@
-import { CustomFlowbiteTheme } from "flowbite-react";
-
-export const netbirdTheme: CustomFlowbiteTheme = {
-  navbar: {
-    root: {
-      base: "bg-white px-2 py-4 dark:border-gray-700 dark:bg-nb-gray/50 backdrop-blur-lg bg-gray-50 sm:px-6",
-    },
-  },
-  dropdown: {
-    floating: {
-      divider: "my-1 h-px bg-gray-100 dark:bg-zinc-800",
-      item: {
-        base: "flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer w-full hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-200 dark:hover:bg-zinc-800 focus:outline-none dark:hover:text-white dark:focus:bg-zinc-800 dark:focus:text-white",
-      },
-      style: {
-        auto: "border border-gray-200 bg-white text-gray-900 dark:border-zinc-800/50 dark:bg-zinc-900 dark:text-white",
-      },
-    },
-  },
-};

src/utils/unauthenticatedApi.ts

@@ -5,6 +5,7 @@ import {
   SetupRequest,
   SetupResponse,
 } from "@/interfaces/Instance";
+import { UserInviteInfo, UserInviteAcceptResponse } from "@/interfaces/User";
 
 const config = loadConfig();
 
@@ -52,3 +53,18 @@ export async function fetchInstanceStatus(): Promise<InstanceStatus> {
 export async function submitSetup(data: SetupRequest): Promise<SetupResponse> {
   return unauthenticatedRequest<SetupResponse>("POST", "/setup", data);
 }
+
+export async function fetchInviteInfo(token: string): Promise<UserInviteInfo> {
+  return unauthenticatedRequest<UserInviteInfo>("GET", `/users/invites/${token}`);
+}
+
+export async function acceptInvite(
+  token: string,
+  password: string,
+): Promise<UserInviteAcceptResponse> {
+  return unauthenticatedRequest<UserInviteAcceptResponse>(
+    "POST",
+    `/users/invites/${token}/accept`,
+    { password },
+  );
+}

tailwind.config.ts

@@ -1,14 +1,107 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  content: [
-    "./node_modules/flowbite-react/**/*.js",
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   darkMode: "class",
   theme: {
     extend: {
       colors: {
+        gray: {
+          50: "#F9FAFB",
+          100: "#F3F4F6",
+          200: "#E5E7EB",
+          300: "#D1D5DB",
+          400: "#9CA3AF",
+          500: "#6B7280",
+          600: "#4B5563",
+          700: "#374151",
+          800: "#1F2937",
+          900: "#111827",
+        },
+        red: {
+          50: "#FDF2F2",
+          100: "#FDE8E8",
+          200: "#FBD5D5",
+          300: "#F8B4B4",
+          400: "#F98080",
+          500: "#F05252",
+          600: "#E02424",
+          700: "#C81E1E",
+          800: "#9B1C1C",
+          900: "#771D1D",
+        },
+        yellow: {
+          50: "#FDFDEA",
+          100: "#FDF6B2",
+          200: "#FCE96A",
+          300: "#FACA15",
+          400: "#E3A008",
+          500: "#C27803",
+          600: "#9F580A",
+          700: "#8E4B10",
+          800: "#723B13",
+          900: "#633112",
+        },
+        green: {
+          50: "#F3FAF7",
+          100: "#DEF7EC",
+          200: "#BCF0DA",
+          300: "#84E1BC",
+          400: "#31C48D",
+          500: "#0E9F6E",
+          600: "#057A55",
+          700: "#046C4E",
+          800: "#03543F",
+          900: "#014737",
+        },
+        blue: {
+          50: "#EBF5FF",
+          100: "#E1EFFE",
+          200: "#C3DDFD",
+          300: "#A4CAFE",
+          400: "#76A9FA",
+          500: "#3F83F8",
+          600: "#1C64F2",
+          700: "#1A56DB",
+          800: "#1E429F",
+          900: "#233876",
+        },
+        indigo: {
+          50: "#F0F5FF",
+          100: "#E5EDFF",
+          200: "#CDDBFE",
+          300: "#B4C6FC",
+          400: "#8DA2FB",
+          500: "#6875F5",
+          600: "#5850EC",
+          700: "#5145CD",
+          800: "#42389D",
+          900: "#362F78",
+        },
+        purple: {
+          50: "#F6F5FF",
+          100: "#EDEBFE",
+          200: "#DCD7FE",
+          300: "#CABFFD",
+          400: "#AC94FA",
+          500: "#9061F9",
+          600: "#7E3AF2",
+          700: "#6C2BD9",
+          800: "#5521B5",
+          900: "#4A1D96",
+        },
+        pink: {
+          50: "#FDF2F8",
+          100: "#FCE8F3",
+          200: "#FAD1E8",
+          300: "#F8B4D9",
+          400: "#F17EB8",
+          500: "#E74694",
+          600: "#D61F69",
+          700: "#BF125D",
+          800: "#99154B",
+          900: "#751A3D",
+        },
         "nb-gray": {
           DEFAULT: "#181A1D",
           "50": "#f4f6f7",
@@ -33,6 +126,7 @@ const config: Config = {
           "950": "#181a1d",
           "960": "#15171a",
         },
+
         netbird: {
           DEFAULT: "#f68330",
           "50": "#fff6ed",
@@ -82,6 +176,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("flowbite/plugin"), require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate")],
 };
 export default config;

tsconfig.json

@@ -17,7 +17,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -52,10 +52,11 @@
     "next-env.d.ts",
     "src/**/*.ts",
     "src/**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules",
-    "node_modules/@axa-fr/**/*",
+    "node_modules/@axa-fr/**/*"
   ]
 }