Add support for decimal expiration time and switch to days if interval exceeds 48h (#357 )

* Add helper function to check for integer * Add support for decimal expiration time and switch to days if interval exceeds 48h
Add option to copy peer details (ip, public ip, hostname, domain name) in detailed peer view (#356 )
2024-03-15 15:54:06 +01:00 · 2024-03-15 13:46:27 +01:00 · 2024-03-15 13:43:00 +01:00 · 2024-03-15 13:35:25 +01:00 · 2024-03-15 13:34:47 +01:00 · 2024-03-15 13:25:40 +01:00
31 changed files with 805 additions and 262 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
        "@tabler/icons-react": "^2.39.0",
        "@tanstack/match-sorter-utils": "^8.8.4",
        "@tanstack/react-table": "^8.10.7",
+        "@types/crypto-js": "^4.2.2",
        "@types/lodash": "^4.14.200",
        "@types/node": "20.10.6",
        "@types/react": "^18",
@@ -35,6 +36,7 @@
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
        "cmdk": "^0.2.0",
+        "crypto-js": "^4.2.0",
        "date-fns": "^2.30.0",
        "dayjs": "^1.11.10",
        "eslint": "^8",
@@ -1661,6 +1663,11 @@
      "resolved": "https://registry.npmjs.org/@types/base64-js/-/base64-js-1.3.2.tgz",
      "integrity": "sha512-Q2Xn2/vQHRGLRXhQ5+BSLwhHkR3JVflxVKywH0Q6fVoAiUE8fFYL2pE5/l2ZiOiBDfA8qUqRnSxln4G/NFz1Sg=="
    },
+    "node_modules/@types/crypto-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
+      "integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
+    },
    "node_modules/@types/jquery": {
      "version": "3.5.29",
      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.29.tgz",
@@ -2974,6 +2981,11 @@
        "node": ">= 8"
      }
    },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
+    },
    "node_modules/css-mediaquery": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
    "@tabler/icons-react": "^2.39.0",
    "@tanstack/match-sorter-utils": "^8.8.4",
    "@tanstack/react-table": "^8.10.7",
+    "@types/crypto-js": "^4.2.2",
    "@types/lodash": "^4.14.200",
    "@types/node": "20.10.6",
    "@types/react": "^18",
@@ -40,6 +41,7 @@
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
+    "crypto-js": "^4.2.0",
    "date-fns": "^2.30.0",
    "dayjs": "^1.11.10",
    "eslint": "^8",
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -306,6 +306,8 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
    <Card>
      <Card.List>
        <Card.ListItem
+          copy
+          copyText={"NetBird IP-Address"}
          label={
            <>
              <MapPin size={16} />
@@ -316,6 +318,8 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
        />

        <Card.ListItem
+          copy
+          copyText={"Public IP-Address"}
          label={
            <>
              <NetworkIcon size={16} />
@@ -325,6 +329,30 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
          value={peer.connection_ip}
        />

+        <Card.ListItem
+          copy
+          copyText={"Domain name"}
+          label={
+            <>
+              <Globe size={16} />
+              Domain Name
+            </>
+          }
+          value={peer.dns_label}
+        />
+
+        <Card.ListItem
+          copy
+          copyText={"Hostname"}
+          label={
+            <>
+              <MonitorSmartphoneIcon size={16} />
+              Hostname
+            </>
+          }
+          value={peer.hostname}
+        />
+
        <Card.ListItem
          label={
            <>
@@ -353,24 +381,6 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
          }
        />

-        <Card.ListItem
-          label={
-            <>
-              <Globe size={16} />
-              Domain Name
-            </>
-          }
-          value={peer.dns_label}
-        />
-        <Card.ListItem
-          label={
-            <>
-              <MonitorSmartphoneIcon size={16} />
-              Hostname
-            </>
-          }
-          value={peer.hostname}
-        />
        <Card.ListItem
          label={
            <>
--- a/src/app/(dashboard)/peers/page.tsx
+++ b/src/app/(dashboard)/peers/page.tsx
@@ -6,17 +6,35 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import useFetchApi from "@utils/api";
 import { ExternalLinkIcon } from "lucide-react";
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, useEffect } from "react";
 import PeerIcon from "@/assets/icons/PeerIcon";
-import { useUsers } from "@/contexts/UsersProvider";
+import { useGroups } from "@/contexts/GroupsProvider";
+import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider";
 import { Peer } from "@/interfaces/Peer";
 import PageContainer from "@/layouts/PageContainer";
+import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal";

 const PeersTable = lazy(() => import("@/modules/peers/PeersTable"));

 export default function Peers() {
+  const { isUser } = useLoggedInUser();
+
+  return (
+    <PageContainer>
+      {isUser ? <PeersDefaultView /> : <PeersView />}
+    </PageContainer>
+  );
+}
+
+function PeersView() {
  const { data: peers, isLoading } = useFetchApi<Peer[]>("/peers");
  const { users } = useUsers();
+  const { refresh } = useGroups();
+
+  useEffect(() => {
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  const peersWithUser = peers?.map((peer) => {
    if (!users) return peer;
@@ -27,7 +45,7 @@ export default function Peers() {
  });

  return (
-    <PageContainer>
+    <>
      <div className={"p-default py-6"}>
        <Breadcrumbs>
          <Breadcrumbs.Item
@@ -56,6 +74,37 @@ export default function Peers() {
      <Suspense fallback={<SkeletonTable />}>
        <PeersTable isLoading={isLoading} peers={peersWithUser} />
      </Suspense>
-    </PageContainer>
+    </>
+  );
+}
+
+function PeersDefaultView() {
+  return (
+    <div className={"flex items-center justify-center flex-col"}>
+      <div className={"p-default py-6 max-w-3xl text-center"}>
+        <h1>Add new peer to your network</h1>
+        <Paragraph className={"inline"}>
+          To get started, install NetBird and log in using your email account.
+          After that you should be connected. If you have further questions
+          check out our{" "}
+          <InlineLink
+            href={"https://docs.netbird.io/how-to/getting-started#installation"}
+            target={"_blank"}
+          >
+            Installation Guide
+            <ExternalLinkIcon size={12} />
+          </InlineLink>
+        </Paragraph>
+      </div>
+      <div className={"px-3 pt-1 pb-8 max-w-3xl w-full"}>
+        <div
+          className={
+            "rounded-md border border-nb-gray-900/70 grid w-full bg-nb-gray-930/40 stepper-bg-variant"
+          }
+        >
+          <SetupModalContent header={false} footer={false} />
+        </div>
+      </div>
+    </div>
  );
 }
--- a/src/app/(dashboard)/team/user/page.tsx
+++ b/src/app/(dashboard)/team/user/page.tsx
@@ -57,7 +57,7 @@ function UserOverview({ user }: Props) {
  const router = useRouter();
  const userRequest = useApiCall<User>("/users");
  const { mutate } = useSWRConfig();
-  const { loggedInUser, isOwnerOrAdmin } = useLoggedInUser();
+  const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser();
  const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false;

  const initialGroups = user.auto_groups;
@@ -104,6 +104,7 @@ function UserOverview({ user }: Props) {
          <Breadcrumbs.Item
            href={"/team"}
            label={"Team"}
+            disabled={isUser}
            icon={<TeamIcon size={13} />}
          />

@@ -117,6 +118,7 @@ function UserOverview({ user }: Props) {
            <Breadcrumbs.Item
              href={"/team/users"}
              label={"Users"}
+              disabled={isUser}
              icon={<User2 size={16} />}
            />
          )}
@@ -156,28 +158,30 @@ function UserOverview({ user }: Props) {
              </h1>
            </div>
          </div>
-          <div className={"flex gap-4"}>
-            <Button
-              variant={"default"}
-              className={"w-full"}
-              onClick={() => {
-                user.is_service_user
-                  ? router.push("/team/service-users")
-                  : router.push("/team/users");
-              }}
-            >
-              Cancel
-            </Button>
+          {!isUser && (
+            <div className={"flex gap-4"}>
+              <Button
+                variant={"default"}
+                className={"w-full"}
+                onClick={() => {
+                  user.is_service_user
+                    ? router.push("/team/service-users")
+                    : router.push("/team/users");
+                }}
+              >
+                Cancel
+              </Button>

-            <Button
-              variant={"primary"}
-              className={"w-full"}
-              disabled={!hasChanges}
-              onClick={save}
-            >
-              Save Changes
-            </Button>
-          </div>
+              <Button
+                variant={"primary"}
+                className={"w-full"}
+                disabled={!hasChanges}
+                onClick={save}
+              >
+                Save Changes
+              </Button>
+            </div>
+          )}
        </div>

        <div className={"flex gap-10 w-full mt-8 max-w-6xl"}>
@@ -190,6 +194,7 @@ function UserOverview({ user }: Props) {
                  Groups will be assigned to peers added by this user.
                </HelpText>
                <PeerGroupSelector
+                  disabled={isUser}
                  onChange={setSelectedGroups}
                  values={selectedGroups}
                />
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -64,4 +64,8 @@ p {
    display: table;
    position: relative;
    width: 100%;
+}
+
+.stepper-bg-variant .step-circle {
+    @apply !border-[#1d2024];
 }
--- a/src/assets/netbird-full.svg
+++ b/src/assets/netbird-full.svg
@@ -0,0 +1,19 @@
+<svg width="133" height="23" viewBox="0 0 133 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_0_3)">
+<path d="M46.9438 7.5013C48.1229 8.64688 48.7082 10.3025 48.7082 12.4683V21.6663H46.1411V12.8362C46.1411 11.2809 45.7481 10.0851 44.9704 9.26566C44.1928 8.43783 43.1308 8.0281 41.7846 8.0281C40.4383 8.0281 39.3345 8.45455 38.5234 9.30747C37.7123 10.1604 37.3109 11.4063 37.3109 13.0369V21.6663H34.7188V6.06305H37.3109V8.28732C37.821 7.49294 38.5234 6.87416 39.4014 6.43934C40.2878 6.00452 41.2578 5.78711 42.3197 5.78711C44.2179 5.78711 45.7565 6.36408 46.9355 7.50966L46.9438 7.5013Z" fill="#F2F2F2"/>
+<path d="M67.1048 14.8344H54.6288C54.7208 16.373 55.2476 17.5771 56.2092 18.4384C57.1708 19.2997 58.3331 19.7345 59.6961 19.7345C60.8166 19.7345 61.7531 19.4753 62.4973 18.9485C63.2499 18.4301 63.7767 17.7277 64.0777 16.858H66.8706C66.4525 18.3548 65.6163 19.5756 64.3621 20.5205C63.1078 21.4571 61.5525 21.9337 59.6878 21.9337C58.2077 21.9337 56.8865 21.5992 55.7159 20.9386C54.5452 20.278 53.6337 19.3331 52.9648 18.1039C52.2958 16.8831 51.9697 15.4616 51.9697 13.8477C51.9697 12.2339 52.2958 10.8207 52.9397 9.60825C53.5836 8.39578 54.495 7.45924 55.6573 6.80702C56.828 6.15479 58.1659 5.82031 59.6878 5.82031C61.2096 5.82031 62.4806 6.14643 63.6178 6.79029C64.7551 7.43416 65.6331 8.32052 66.2518 9.44938C66.8706 10.5782 67.18 11.8576 67.18 13.2791C67.18 13.7725 67.1549 14.2909 67.0964 14.8428L67.1048 14.8344ZM63.8603 10.1769C63.4255 9.4661 62.8318 8.92258 62.0793 8.55465C61.3267 8.18673 60.4989 8.00277 59.5874 8.00277C58.2746 8.00277 57.1625 8.42086 56.2427 9.25705C55.3228 10.0932 54.796 11.2472 54.6623 12.7356H64.5126C64.5126 11.7489 64.2952 10.896 63.8603 10.1852V10.1769Z" fill="#F2F2F2"/>
+<path d="M73.7695 8.20355V17.4016C73.7695 18.1626 73.9284 18.6977 74.2545 19.0071C74.5806 19.3165 75.1409 19.4754 75.9352 19.4754H77.8418V21.6662H75.5088C74.0622 21.6662 72.9835 21.3317 72.2644 20.6711C71.5452 20.0105 71.1857 18.9151 71.1857 17.3933V8.19519H69.1621V6.0629H71.1857V2.13281H73.7779V6.0629H77.8501V8.19519H73.7779L73.7695 8.20355Z" fill="#F2F2F2"/>
+<path d="M85.9022 6.68902C86.9307 6.10369 88.093 5.80266 89.4058 5.80266C90.8106 5.80266 92.0732 6.13714 93.1937 6.79773C94.3142 7.46668 95.2006 8.39485 95.8444 9.59896C96.4883 10.8031 96.8144 12.2079 96.8144 13.7966C96.8144 15.3854 96.4883 16.7818 95.8444 18.011C95.2006 19.2486 94.3142 20.2018 93.1854 20.8875C92.0565 21.5732 90.7939 21.916 89.4141 21.916C88.0344 21.916 86.8805 21.6234 85.8687 21.0297C84.8569 20.4443 84.0876 19.6918 83.5775 18.7803V21.6568H80.9854V0.601562H83.5775V8.97182C84.1127 8.04365 84.8904 7.28272 85.9105 6.69738L85.9022 6.68902ZM93.4529 10.7362C92.9763 9.86654 92.3408 9.19759 91.5297 8.74605C90.7186 8.29451 89.8322 8.06037 88.8706 8.06037C87.909 8.06037 87.0394 8.29451 86.2366 8.75441C85.4255 9.22268 84.7817 9.89163 84.2967 10.778C83.8117 11.6643 83.5692 12.6845 83.5692 13.8384C83.5692 14.9924 83.8117 16.046 84.2967 16.9323C84.7817 17.8187 85.4255 18.4877 86.2366 18.9559C87.0394 19.4242 87.9174 19.65 88.8706 19.65C89.8239 19.65 90.727 19.4158 91.5297 18.9559C92.3324 18.4877 92.9763 17.8187 93.4529 16.9323C93.9296 16.046 94.1637 15.0091 94.1637 13.8134C94.1637 12.6176 93.9296 11.6142 93.4529 10.7362Z" fill="#F2F2F2"/>
+<path d="M100.318 3.01864C99.9749 2.67581 99.8076 2.25771 99.8076 1.76436C99.8076 1.27101 99.9749 0.852913 100.318 0.510076C100.661 0.167238 101.079 0 101.572 0C102.065 0 102.45 0.167238 102.784 0.510076C103.119 0.852913 103.286 1.27101 103.286 1.76436C103.286 2.25771 103.119 2.67581 102.784 3.01864C102.45 3.36148 102.049 3.52872 101.572 3.52872C101.095 3.52872 100.661 3.36148 100.318 3.01864ZM102.826 6.06237V21.6657H100.234V6.06237H102.826Z" fill="#F2F2F2"/>
+<path d="M111.773 6.52155C112.617 6.0282 113.646 5.77734 114.867 5.77734V8.45315H114.181C111.28 8.45315 109.825 10.0252 109.825 13.1776V21.6649H107.232V6.06165H109.825V8.5953C110.276 7.70058 110.928 7.00654 111.773 6.51319V6.52155Z" fill="#F2F2F2"/>
+<path d="M117.861 9.60732C118.505 8.40321 119.391 7.46668 120.52 6.80609C121.649 6.1455 122.92 5.81102 124.325 5.81102C125.537 5.81102 126.666 6.09533 127.711 6.64721C128.757 7.20746 129.551 7.94331 130.103 8.85475V0.601562H132.72V21.6735H130.103V18.7385C129.593 19.6667 128.832 20.436 127.828 21.0297C126.825 21.6317 125.646 21.9244 124.3 21.9244C122.953 21.9244 121.657 21.5816 120.528 20.8959C119.4 20.2102 118.513 19.257 117.869 18.0194C117.226 16.7818 116.899 15.377 116.899 13.805C116.899 12.233 117.226 10.8114 117.869 9.60732H117.861ZM129.392 10.7613C128.915 9.89163 128.28 9.22268 127.469 8.75441C126.658 8.28614 125.771 8.06037 124.81 8.06037C123.848 8.06037 122.962 8.28614 122.159 8.74605C121.356 9.20595 120.729 9.86654 120.253 10.7362C119.776 11.6058 119.542 12.6343 119.542 13.8134C119.542 14.9924 119.776 16.046 120.253 16.9323C120.729 17.8187 121.365 18.4877 122.159 18.9559C122.953 19.4242 123.84 19.65 124.81 19.65C125.78 19.65 126.666 19.4158 127.469 18.9559C128.272 18.4877 128.915 17.8187 129.392 16.9323C129.869 16.046 130.103 15.0175 130.103 13.8384C130.103 12.6594 129.869 11.6393 129.392 10.7613Z" fill="#F2F2F2"/>
+<path d="M21.4651 0.568359C17.8193 0.902835 16.0047 3.00167 15.3191 4.06363L4.66602 22.5183H17.5182L30.1949 0.568359H21.4651Z" fill="#F68330"/>
+<path d="M17.5265 22.5187L0 3.9302C0 3.9302 19.8177 -1.39633 21.7493 15.2188L17.5265 22.5187Z" fill="#F68330"/>
+<path d="M14.9255 4.75055L9.54883 14.0657L17.5177 22.5196L21.7405 15.2029C21.0715 9.49174 18.287 6.37276 14.9255 4.74219" fill="#F35E32"/>
+</g>
+<defs>
+<clipPath id="clip0_0_3">
+<rect width="132.72" height="22.5186" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs.tsx
@@ -15,13 +15,25 @@ type ItemProps = {
  label: string;
  icon?: React.ReactNode;
  active?: boolean;
+  disabled?: boolean;
 };

-export const Item = ({ href, label, icon, active }: ItemProps) => {
+export const Item = ({
+  href,
+  label,
+  icon,
+  active,
+  disabled = false,
+}: ItemProps) => {
  const router = useRouter();

  return (
-    <div className={"flex items-center gap-2 group"}>
+    <div
+      className={cn(
+        "flex items-center gap-2 group",
+        disabled && "pointer-events-none",
+      )}
+    >
      <ChevronRightIcon
        size={16}
        className={"text-nb-gray-400 group-first:hidden"}
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -30,6 +30,7 @@ type CardListItemProps = {
  value: React.ReactNode;
  className?: string;
  copy?: boolean;
+  copyText?: string;
  tooltip?: boolean;
 };

@@ -38,6 +39,7 @@ function CardListItem({
  value,
  className,
  copy = false,
+  copyText,
  tooltip = true,
 }: CardListItemProps) {
  const [, copyToClipBoard] = useCopyToClipboard(value as string);
@@ -56,7 +58,10 @@ function CardListItem({
          copy && "cursor-pointer hover:text-nb-gray-300 transition-all",
        )}
        onClick={() =>
-          copy && copyToClipBoard(`${label} has been copied to clipboard.`)
+          copy &&
+          copyToClipBoard(
+            `${copyText ? copyText : label} has been copied to clipboard.`,
+          )
        }
      >
        {tooltip ? (
@@ -64,7 +69,7 @@ function CardListItem({
        ) : (
          value
        )}
-        {copy && <Copy size={13} />}
+        {copy && <Copy size={13} className={"shrink-0"} />}
      </div>
    </li>
  );
--- a/src/components/PeerGroupSelector.tsx
+++ b/src/components/PeerGroupSelector.tsx
@@ -86,8 +86,6 @@ export function PeerGroupSelector({
    }

    if (max == 1) setOpen(false);
-
-    setSearch("");
  };

  // Remove group from the groupOptions if it does not have an id
@@ -145,6 +143,7 @@ export function PeerGroupSelector({
            "min-h-[46px] w-full relative items-center",
            "border border-neutral-200 dark:border-nb-gray-700 justify-between py-2 px-3",
            "rounded-md bg-white text-sm dark:bg-nb-gray-900/40 flex dark:text-neutral-400/70 text-neutral-500 cursor-pointer hover:dark:bg-nb-gray-900/50",
+            "disabled:pointer-events-none disabled:opacity-30",
          )}
          disabled={disabled}
          ref={inputRef}
--- a/src/components/PeerSelector.tsx
+++ b/src/components/PeerSelector.tsx
@@ -1,7 +1,6 @@
 import { CommandItem } from "@components/Command";
 import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 import { ScrollArea } from "@components/ScrollArea";
-import SmallOSIcon from "@components/ui/SmallOSIcon";
 import TextWithTooltip from "@components/ui/TextWithTooltip";
 import { IconArrowBack } from "@tabler/icons-react";
 import useFetchApi from "@utils/api";
@@ -11,6 +10,7 @@ import { sortBy, trim, unionBy } from "lodash";
 import { ChevronsUpDown, MapPin, SearchIcon } from "lucide-react";
 import * as React from "react";
 import { useEffect, useMemo, useState } from "react";
+import { FcLinux } from "react-icons/fc";
 import { useElementSize } from "@/hooks/useElementSize";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -45,7 +45,7 @@ export function PeerSelector({

    // Filter out peers that are not linux
    options = options.filter((peer) => {
-      return getOperatingSystem(peer.os) == OperatingSystem.LINUX;
+      return getOperatingSystem(peer.os) === OperatingSystem.LINUX;
    });

    // Filter out excluded peers
@@ -56,7 +56,7 @@ export function PeerSelector({
      });
    }

-    setDropdownOptions(unionBy(options, dropdownOptions, "name"));
+    setDropdownOptions(unionBy(options, dropdownOptions, "id"));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [peers]);

@@ -100,6 +100,12 @@ export function PeerSelector({
    }
  }, [open, dropdownOptions]);

+  const LinuxIcon = (
+    <span className={"grayscale brightness-[100%] contrast-[40%]"}>
+      <FcLinux className={"text-white text-lg min-w-[20px] brightness-150"} />
+    </span>
+  );
+
  return (
    <Popover
      open={open}
@@ -135,7 +141,7 @@ export function PeerSelector({
                }
              >
                <div className={"flex items-center gap-2.5 text-sm"}>
-                  <SmallOSIcon os={value.os} />
+                  {LinuxIcon}
                  <TextWithTooltip text={value.name} maxChars={20} />
                </div>

@@ -249,7 +255,7 @@ export function PeerSelector({
                        }}
                      >
                        <div className={"flex items-center gap-2.5 text-sm"}>
-                          <SmallOSIcon os={option.os} />
+                          {LinuxIcon}
                          <TextWithTooltip text={option.name} maxChars={20} />
                        </div>

--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -36,7 +36,7 @@ const Step = ({ children, step, line = true, center = false }: StepProps) => {
        className={cn(
          "h-[34px] w-[34px] shrink-0 rounded-full  flex items-center justify-center font-medium text-xs relative z-0 border-4  transition-all",
          "dark:bg-nb-gray-900 dark:text-nb-gray-400 dark:border-nb-gray dark:group-hover:bg-nb-gray-800",
-          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200",
+          "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200 step-circle",
        )}
      >
        {step}
--- a/src/components/table/DataTable.tsx
+++ b/src/components/table/DataTable.tsx
@@ -2,6 +2,7 @@
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import DataTableGlobalSearch from "@components/table/DataTableGlobalSearch";
 import { DataTablePagination } from "@components/table/DataTablePagination";
+import DataTableResetFilterButton from "@components/table/DataTableResetFilterButton";
 import {
  Table,
  TableBody,
@@ -223,6 +224,15 @@ export function DataTableContent<TData, TValue>({
  const TableDataUnstyledComponent = as === "table" ? "td" : "div";
  const TableRowUnstyledComponent = as === "table" ? "tr" : "div";

+  /**
+   * Reset all filters, search & set pagination to first page
+   */
+  const resetFilters = () => {
+    table.setPageIndex(0);
+    setColumnFilters([]);
+    setGlobalSearch("");
+  };
+
  return (
    <div className={cn("relative table-fixed-scroll", className)}>
      {!minimal && (
@@ -238,6 +248,7 @@ export function DataTableContent<TData, TValue>({
            placeholder={searchPlaceholder}
          />
          {children && children(table)}
+          <DataTableResetFilterButton onClick={resetFilters} table={table} />
          <div className={"flex gap-4 flex-wrap grow"}>
            <div className={"flex gap-4 flex-wrap"}></div>
            {rightSide && rightSide(table)}
--- a/src/components/table/DataTableResetFilterButton.tsx
+++ b/src/components/table/DataTableResetFilterButton.tsx
@@ -0,0 +1,55 @@
+import Button from "@components/Button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip";
+import { Table } from "@tanstack/react-table";
+import { FilterX } from "lucide-react";
+import * as React from "react";
+import { useState } from "react";
+
+interface Props<TData> {
+  table: Table<TData>;
+  onClick: () => void;
+}
+
+export default function DataTableResetFilterButton<TData>({
+  table,
+  onClick,
+}: Props<TData>) {
+  const [hovered, setHovered] = useState(false);
+  const isDisabled =
+    table.getState().columnFilters.length <= 0 &&
+    table.getState().globalFilter === "";
+
+  return !isDisabled ? (
+    <Tooltip delayDuration={1}>
+      <TooltipTrigger
+        asChild={true}
+        onMouseOver={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Button
+          className={"h-[42px]"}
+          variant={"secondary"}
+          disabled={isDisabled}
+          onClick={onClick}
+        >
+          <FilterX size={16} />
+        </Button>
+      </TooltipTrigger>
+
+      <TooltipContent
+        sideOffset={10}
+        className={"px-3 py-2"}
+        onPointerDownOutside={(event) => {
+          if (hovered) event.preventDefault();
+        }}
+      >
+        <span className={"text-xs text-neutral-300"}>
+          Reset Filters & Search
+        </span>
+      </TooltipContent>
+    </Tooltip>
+  ) : null;
+}
--- a/src/components/ui/AnnouncementBanner.tsx
+++ b/src/components/ui/AnnouncementBanner.tsx
@@ -0,0 +1,92 @@
+import InlineLink from "@components/InlineLink";
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
+
+const variants = cva(
+  {},
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200",
+        important: "from-netbird to-netbird-400 bg-gradient-to-b text-white",
+      },
+      tagBadge: {
+        default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium",
+        important: "bg-white text-netbird font-medium",
+      },
+      closeButton: {
+        default:
+          "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800",
+        important:
+          "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white",
+      },
+      inlineLink: {
+        default: "text-nb-blue-400 hover:underline",
+        important: "!text-white underline hover:opacity-80",
+      },
+    },
+  },
+);
+
+export type AnnouncementVariant = VariantProps<typeof variants>;
+
+export const AnnouncementBanner = () => {
+  const { bannerHeight, closeAnnouncement, announcements } = useAnnouncement();
+  const announcement = announcements?.find((a) => a.isOpen);
+
+  return announcement ? (
+    <div
+      className={cn(
+        "flex items-center justify-center text-sm px-8 font-light",
+        variants({ variant: announcement.variant }),
+      )}
+      style={{ height: bannerHeight }}
+    >
+      <div className={"flex items-center gap-2"}>
+        {announcement.tag && (
+          <div
+            className={cn(
+              "bg-nb-gray-200/10 backdrop-blur text-nb-gray-100 font-medium tracking-wide uppercase text-[10px] py-2.5 px-2 rounded-md leading-[0]",
+              variants({ tagBadge: announcement.variant }),
+            )}
+          >
+            {announcement.tag}
+          </div>
+        )}
+        <div>
+          {announcement.text}
+          {announcement.link && (
+            <InlineLink
+              href={announcement.link || "#"}
+              target={announcement.isExternal ? "_blank" : undefined}
+              className={cn(
+                "ml-2 !text-sm",
+                variants({ inlineLink: announcement.variant }),
+              )}
+            >
+              {announcement.linkText || "Learn more"}
+              <ArrowRightIcon size={14} />
+            </InlineLink>
+          )}
+        </div>
+      </div>
+      {announcement.closeable && (
+        <div className={"absolute right-0 px-4"}>
+          <div
+            className={cn(
+              "rounded-md p-1 text-nb-gray-300 transition-all cursor-pointer",
+              variants({ closeButton: announcement.variant }),
+            )}
+            onClick={() => closeAnnouncement(announcement.hash)}
+          >
+            <XIcon size={14} />
+          </div>
+        </div>
+      )}
+    </div>
+  ) : null;
+};
--- a/src/components/ui/SmallOSIcon.tsx
+++ b/src/components/ui/SmallOSIcon.tsx
@@ -1,26 +0,0 @@
-import Image from "next/image";
-import { useMemo } from "react";
-import { FaWindows } from "react-icons/fa6";
-import { FcAndroidOs, FcLinux } from "react-icons/fc";
-import AppleLogo from "@/assets/os-icons/apple.svg";
-import { getOperatingSystem } from "@/hooks/useOperatingSystem";
-import { OperatingSystem } from "@/interfaces/OperatingSystem";
-
-export default function SmallOSIcon({ os }: { os: string }) {
-  const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
-  }, [os]);
-
-  if (icon === OperatingSystem.WINDOWS)
-    return <FaWindows className={"text-white text-md min-w-[20px]"} />;
-  if (icon === OperatingSystem.APPLE)
-    return (
-      <div className={"min-w-[20px] flex items-center justify-center"}>
-        <Image src={AppleLogo} alt={""} width={12} />
-      </div>
-    );
-  if (icon === OperatingSystem.ANDROID)
-    return <FcAndroidOs className={"text-white text-xl min-w-[20px]"} />;
-
-  return <FcLinux className={"text-white text-lg min-w-[20px]"} />;
-}
--- a/src/contexts/AnnouncementProvider.tsx
+++ b/src/contexts/AnnouncementProvider.tsx
@@ -0,0 +1,90 @@
+import { AnnouncementVariant } from "@components/ui/AnnouncementBanner";
+import { useLocalStorage } from "@hooks/useLocalStorage";
+import md5 from "crypto-js/md5";
+import React, { useEffect, useState } from "react";
+
+const initialAnnouncements: Announcement[] = [];
+
+export interface Announcement extends AnnouncementVariant {
+  tag: string;
+  text: string;
+  link?: string;
+  linkText?: string;
+  isExternal?: boolean;
+  closeable: boolean;
+}
+
+interface AnnouncementInfo extends Announcement {
+  isOpen: boolean;
+  hash: string;
+}
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const AnnouncementContext = React.createContext(
+  {} as {
+    bannerHeight: number;
+    announcements?: AnnouncementInfo[];
+    closeAnnouncement: (hash: string) => void;
+  },
+);
+
+const bannerHeight = 40;
+
+export default function AnnouncementProvider({ children }: Props) {
+  const [height, setHeight] = useState(0);
+  const [closedAnnouncements, setClosedAnnouncements] = useLocalStorage<
+    string[]
+  >("netbird-closed-announcements", []);
+  const [announcements, setAnnouncements] = useState<AnnouncementInfo[]>();
+
+  useEffect(() => {
+    const initial = initialAnnouncements.map((announcement) => {
+      const hash = md5(announcement.text).toString();
+      const isOpen = !closedAnnouncements.some((h) => h === hash);
+      return {
+        ...announcement,
+        hash,
+        isOpen,
+      };
+    });
+    if (initial.length > 0) {
+      setAnnouncements(initial);
+    }
+  }, [closedAnnouncements]);
+
+  const closeAnnouncement = (hash: string) => {
+    setClosedAnnouncements([...closedAnnouncements, hash]);
+    setAnnouncements(() => {
+      return announcements?.map((a) => {
+        if (a.hash === hash) {
+          return { ...a, isOpen: false };
+        }
+        return a;
+      });
+    });
+  };
+
+  useEffect(() => {
+    const isAnnouncementOpen = announcements?.some((a) => a.isOpen);
+    if (isAnnouncementOpen) {
+      setHeight(bannerHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [announcements]);
+
+  return (
+    <AnnouncementContext.Provider
+      value={{ bannerHeight: height, announcements, closeAnnouncement }}
+    >
+      {children}
+    </AnnouncementContext.Provider>
+  );
+}
+
+export const useAnnouncement = () => {
+  return React.useContext(AnnouncementContext);
+};
--- a/src/contexts/CountryProvider.tsx
+++ b/src/contexts/CountryProvider.tsx
@@ -1,5 +1,6 @@
 import useFetchApi from "@utils/api";
 import React, { useCallback } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Country } from "@/interfaces/Country";
 import { Peer } from "@/interfaces/Peer";

@@ -16,6 +17,16 @@ const CountryContext = React.createContext(
 );

 export default function CountryProvider({ children }: Props) {
+  const { isUser } = useLoggedInUser();
+
+  return isUser ? (
+    children
+  ) : (
+    <CountryProviderContent>{children}</CountryProviderContent>
+  );
+}
+
+function CountryProviderContent({ children }: Props) {
  const { data: countries, isLoading } = useFetchApi<Country[]>(
    "/locations/countries",
    false,
--- a/src/contexts/GroupsProvider.tsx
+++ b/src/contexts/GroupsProvider.tsx
@@ -1,5 +1,7 @@
 import useFetchApi from "@utils/api";
+import { usePathname } from "next/navigation";
 import React, { useState } from "react";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";

 type Props = {
@@ -17,11 +19,22 @@ const GroupContext = React.createContext(
 );

 export default function GroupsProvider({ children }: Props) {
+  const path = usePathname();
+  const { isUser } = useLoggedInUser();
+
+  return isUser && path == "/peers" ? (
+    children
+  ) : (
+    <GroupsProviderContent>{children}</GroupsProviderContent>
+  );
+}
+
+export function GroupsProviderContent({ children }: Props) {
  const { data: groups, mutate, isLoading } = useFetchApi<Group[]>("/groups");
  const [dropdownOptions, setDropdownOptions] = useState<Group[]>([]);

  const refresh = () => {
-    mutate().then();
+    if (groups && !isLoading) mutate().then();
  };

  return (
--- a/src/hooks/useOperatingSystem.ts
+++ b/src/hooks/useOperatingSystem.ts
@@ -13,10 +13,13 @@ export default function useOperatingSystem() {
 }

 export const getOperatingSystem = (os: string) => {
-  if (os.includes("darwin")) return OperatingSystem.APPLE as const;
-  if (os.includes("mac")) return OperatingSystem.APPLE as const;
-  if (os.includes("android")) return OperatingSystem.ANDROID as const;
-  if (os.includes("ios")) return OperatingSystem.IOS as const;
-  if (os.includes("win")) return OperatingSystem.WINDOWS as const;
+  if (os.toLowerCase().includes("darwin"))
+    return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("mac")) return OperatingSystem.APPLE as const;
+  if (os.toLowerCase().includes("android"))
+    return OperatingSystem.ANDROID as const;
+  if (os.toLowerCase().includes("ios")) return OperatingSystem.IOS as const;
+  if (os.toLowerCase().includes("windows"))
+    return OperatingSystem.WINDOWS as const;
  return OperatingSystem.LINUX as const;
 };
--- a/src/layouts/AppLayout.tsx
+++ b/src/layouts/AppLayout.tsx
@@ -11,6 +11,7 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
 import AnalyticsProvider from "@/contexts/AnalyticsProvider";
+import AnnouncementProvider from "@/contexts/AnnouncementProvider";
 import DialogProvider from "@/contexts/DialogProvider";
 import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
@@ -35,9 +36,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
            <GlobalThemeProvider>
              <ErrorBoundaryProvider>
                <OIDCProvider>
-                  <TooltipProvider delayDuration={0}>
-                    {children}
-                  </TooltipProvider>
+                  <AnnouncementProvider>
+                    <TooltipProvider delayDuration={0}>
+                      {children}
+                    </TooltipProvider>
+                  </AnnouncementProvider>
                </OIDCProvider>
              </ErrorBoundaryProvider>
            </GlobalThemeProvider>
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@@ -9,14 +9,15 @@ import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import ApplicationProvider, {
  useApplicationContext,
 } from "@/contexts/ApplicationProvider";
 import CountryProvider from "@/contexts/CountryProvider";
 import GroupsProvider from "@/contexts/GroupsProvider";
-import UsersProvider from "@/contexts/UsersProvider";
+import UsersProvider, { useLoggedInUser } from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
-import Navbar from "./Header";
+import Navbar, { headerHeight } from "./Header";

 export default function DashboardLayout({
  children,
@@ -41,9 +42,10 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
  const { mobileNavOpen, toggleMobileNav } = useApplicationContext();
  const isSm = useIsSm();
  const isXs = useIsXs();
+  const { isUser } = useLoggedInUser();

  const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%";
-
+  const { bannerHeight } = useAnnouncement();
  return (
    <div className={cn("flex flex-col h-screen", mobileNavOpen && "flex")}>
      {mobileNavOpen && (
@@ -145,13 +147,14 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
            }}
          >
            <Navbar />
+
            <div
              className={"flex flex-row flex-grow"}
              style={{
-                height: "calc(100vh - 75px)",
+                height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
              }}
            >
-              <Navigation hideOnMobile />
+              {!isUser && <Navigation hideOnMobile />}
              {children}
            </div>
          </motion.div>
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -1,59 +1,98 @@
 "use client";

 import Button from "@components/Button";
+import { AnnouncementBanner } from "@components/ui/AnnouncementBanner";
 import DarkModeToggle from "@components/ui/DarkModeToggle";
 import UserDropdown from "@components/ui/UserDropdown";
-import { Navbar } from "flowbite-react";
+import { cn } from "@utils/helpers";
 import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import NetBirdLogo from "@/assets/netbird.svg";
+import NetBirdLogoFull from "@/assets/netbird-full.svg";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
+
+export const headerHeight = 75;

 export default function NavbarWithDropdown() {
  const router = useRouter();
  const Logo = useMemo(() => {
-    return <Image src={NetBirdLogo} width={30} alt={"NetBird Logo"} />;
+    return (
+      <>
+        <Image
+          src={NetBirdLogoFull}
+          height={22}
+          alt={"NetBird Logo"}
+          className={"hidden md:block"}
+        />
+        <Image
+          src={NetBirdLogo}
+          width={30}
+          alt={"NetBird Logo"}
+          className={"md:hidden"}
+        />
+      </>
+    );
  }, []);

  const { toggleMobileNav } = useApplicationContext();
+  const { bannerHeight } = useAnnouncement();
+  const { isUser } = useLoggedInUser();

  return (
    <>
-      <Navbar
-        fluid
-        className={
-          "border-b dark:border-zinc-700/40 fixed z-50 h-[75px] px-3 md:px-4 w-full"
-        }
+      <div
+        className={"fixed z-50 w-full"}
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
      >
-        <div className={"flex items-center gap-4 md:hidden"}>
-          <Button
-            className={"!px-3 md:hidden"}
-            variant={"default-outline"}
-            onClick={toggleMobileNav}
-          >
-            <div>
-              <MenuIcon size={20} className={"relative"} />
-            </div>
-          </Button>
-        </div>
-        <Navbar.Brand
-          onClick={() => router.push("/peers")}
-          className={"cursor-pointer hover:opacity-70 transition-all"}
+        <AnnouncementBanner />
+        <div
+          className={cn(
+            "bg-white px-2 py-4 dark:border-gray-700 dark:bg-nb-gray/50 backdrop-blur-lg sm:px-6",
+            "border-b dark:border-zinc-700/40 px-3 md:px-4 w-full",
+            "flex justify-between items-center transition-all",
+          )}
        >
-          {Logo}
-        </Navbar.Brand>
-
-        <div className="flex md:order-2 gap-4">
-          <div className={"hidden md:block"}>
-            <DarkModeToggle />
+          <div className={"flex items-center gap-4 md:hidden"}>
+            <Button
+              className={cn(
+                "!px-3 md:hidden",
+                isUser && "opacity-0 pointer-events-none",
+              )}
+              variant={"default-outline"}
+              onClick={toggleMobileNav}
+            >
+              <div>
+                <MenuIcon size={20} className={"relative"} />
+              </div>
+            </Button>
+          </div>
+          <div
+            onClick={() => router.push("/peers")}
+            className={"cursor-pointer hover:opacity-70 transition-all"}
+          >
+            {Logo}
          </div>

-          <UserDropdown />
+          <div className="flex md:order-2 gap-4">
+            <div className={"hidden md:block"}>
+              <DarkModeToggle />
+            </div>
+
+            <UserDropdown />
+          </div>
        </div>
-      </Navbar>
-      <div className={"h-[75px]"}></div>
+      </div>
+      <div
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
+      ></div>
    </>
  );
 }
--- a/src/modules/activity/ActivityDescription.tsx
+++ b/src/modules/activity/ActivityDescription.tsx
@@ -31,6 +31,10 @@ export default function ActivityDescription({ event }: Props) {

  if (!m) return null;

+  /**
+   * Setup Key
+   */
+
  if (event.activity_code == "setupkey.revoke")
    return (
      <div className={"inline"}>
@@ -54,13 +58,6 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

-  if (event.activity_code == "dashboard.login")
-    return (
-      <div className={"inline"}>
-        <Value>{m.username}</Value> logged in to the dashboard
-      </div>
-    );
-
  if (event.activity_code == "setupkey.group.delete")
    return (
      <div className={"inline"}>
@@ -77,6 +74,20 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  /**
+   * Dashboard
+   */
+  if (event.activity_code == "dashboard.login")
+    return (
+      <div className={"inline"}>
+        <Value>{m.username}</Value> logged in to the dashboard
+      </div>
+    );
+
+  /**
+   * Policy
+   */
+
  if (event.activity_code == "policy.update")
    return (
      <div className={"inline"}>
@@ -98,6 +109,10 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  /**
+   * Route
+   */
+
  if (event.activity_code == "route.delete")
    return (
      <div className={"inline"}>
@@ -122,6 +137,10 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  /**
+   * User
+   */
+
  if (event.activity_code == "user.peer.delete")
    return (
      <div className={"inline"}>
@@ -150,6 +169,86 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  if (event.activity_code == "user.invite")
+    return (
+      <div className={"inline"}>
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>{" "}
+        was invited.
+      </div>
+    );
+
+  if (event.activity_code == "user.group.add")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.group}</Value> was added to user{" "}
+        <Value>{event.meta.username}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.block")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+        was blocked
+      </div>
+    );
+
+  if (event.activity_code == "user.unblock")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value>
+        was unblocked
+      </div>
+    );
+
+  if (event.activity_code == "user.delete")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was deleted
+      </div>
+    );
+
+  if (event.activity_code == "user.group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.group}</Value> was removed from user{" "}
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  if (event.activity_code == "user.role.update")
+    return (
+      <div className={"inline"}>
+        Role <Value>{event.meta.role}</Value> was updated of user{" "}
+        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
+      </div>
+    );
+
+  /**
+   * Service User
+   */
+
+  if (event.activity_code == "service.user.create")
+    return (
+      <div className={"inline"}>
+        Service user <Value>{event.meta.name}</Value> was created
+      </div>
+    );
+
+  if (event.activity_code == "service.user.delete")
+    return (
+      <div className={"inline"}>
+        Service user <Value>{event.meta.name}</Value> was deleted
+      </div>
+    );
+
+  /**
+   * Peer
+   */
+
  if (event.activity_code == "peer.group.delete")
    return (
      <div className={"inline"}>
@@ -216,6 +315,10 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  /**
+   * Group
+   */
+
  if (event.activity_code == "group.add")
    return (
      <div className={"inline"}>
@@ -223,6 +326,17 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  if (event.activity_code == "group.delete")
+    return (
+      <div className={"inline"}>
+        Group <Value>{event.meta.name}</Value> was deleted
+      </div>
+    );
+
+  /**
+   * Account
+   */
+
  if (event.activity_code == "account.create")
    return (
      <div className={"inline"}>
@@ -230,21 +344,18 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

-  if (event.activity_code == "user.invite")
-    return (
-      <div className={"inline"}>
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>{" "}
-        was invited.
-      </div>
-    );
+  if (event.activity_code == "account.setting.peer.login.expiration.update")
+    return <div className={"inline"}>Global login expiration was updated</div>;

-  if (event.activity_code == "user.group.add")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.group}</Value> was added to user{" "}
-        <Value>{event.meta.username}</Value>
-      </div>
-    );
+  if (event.activity_code == "account.setting.peer.login.expiration.enable")
+    return <div className={"inline"}>Global login expiration was enabled</div>;
+
+  if (event.activity_code == "account.setting.peer.login.expiration.disable")
+    return <div className={"inline"}>Global login expiration was disabled</div>;
+
+  /**
+   * Nameserver
+   */

  if (event.activity_code == "nameserver.group.add")
    return (
@@ -267,14 +378,9 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

-  if (event.activity_code == "account.setting.peer.login.expiration.update")
-    return <div className={"inline"}>Global login expiration was updated</div>;
-
-  if (event.activity_code == "account.setting.peer.login.expiration.enable")
-    return <div className={"inline"}>Global login expiration was enabled</div>;
-
-  if (event.activity_code == "account.setting.peer.login.expiration.disable")
-    return <div className={"inline"}>Global login expiration was disabled</div>;
+  /**
+   * Personal Access Token
+   */

  if (event.activity_code == "personal.access.token.create")
    return (
@@ -292,68 +398,9 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

-  if (event.activity_code == "user.block")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value>
-        was blocked
-      </div>
-    );
-
-  if (event.activity_code == "user.unblock")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value>
-        was unblocked
-      </div>
-    );
-
-  if (event.activity_code == "user.delete")
-    return (
-      <div className={"inline"}>
-        User <Value>{event.meta.username}</Value>{" "}
-        <Value>{event.meta.email}</Value> was deleted
-      </div>
-    );
-
-  if (event.activity_code == "user.group.delete")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.group}</Value> was removed from user{" "}
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
-      </div>
-    );
-
-  if (event.activity_code == "user.role.update")
-    return (
-      <div className={"inline"}>
-        Role <Value>{event.meta.role}</Value> was updated of user{" "}
-        <Value>{event.meta.username}</Value> <Value>{event.meta.email}</Value>
-      </div>
-    );
-
-  if (event.activity_code == "service.user.create")
-    return (
-      <div className={"inline"}>
-        Service user <Value>{event.meta.name}</Value> was created
-      </div>
-    );
-
-  if (event.activity_code == "service.user.delete")
-    return (
-      <div className={"inline"}>
-        Service user <Value>{event.meta.name}</Value> was deleted
-      </div>
-    );
-
-  if (event.activity_code == "group.delete")
-    return (
-      <div className={"inline"}>
-        Group <Value>{event.meta.name}</Value> was deleted
-      </div>
-    );
+  /**
+   * Integration
+   */

  if (event.activity_code == "integration.create") {
    if (!event.meta.platform) return "Integration created";
@@ -385,7 +432,10 @@ export default function ActivityDescription({ event }: Props) {
    );
  }

-  // Group was added to DNS Management Setting that disables DNS for the group
+  /**
+   * DNS
+   */
+
  if (event.activity_code == "dns.setting.disabled.management.group.add")
    return (
      <div className={"inline"}>
@@ -402,6 +452,31 @@ export default function ActivityDescription({ event }: Props) {
      </div>
    );

+  /**
+   * Posture Checks
+   */
+
+  if (event.activity_code == "posture.check.updated")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was updated
+      </div>
+    );
+
+  if (event.activity_code == "posture.check.created")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was created
+      </div>
+    );
+
+  if (event.activity_code == "posture.check.deleted")
+    return (
+      <div className={"inline"}>
+        Posture check <Value> {m.name}</Value> was deleted
+      </div>
+    );
+
  // TODO add activity texts
  // rule.add
  // rule.update
--- a/src/modules/activity/ActivityTypeIcon.tsx
+++ b/src/modules/activity/ActivityTypeIcon.tsx
@@ -12,6 +12,7 @@ import {
  NetworkIcon,
  Server,
  Shield,
+  ShieldCheck,
  User,
 } from "lucide-react";
 import React from "react";
@@ -70,6 +71,10 @@ export default function ActivityTypeIcon({
    return <User size={size} className={cn(DEFAULT_CLASSES, className)} />;
  } else if (code.startsWith("service")) {
    return <Cog size={size} className={cn(DEFAULT_CLASSES, className)} />;
+  } else if (code.startsWith("posture")) {
+    return (
+      <ShieldCheck size={size} className={cn(DEFAULT_CLASSES, className)} />
+    );
  } else {
    return (
      <HelpCircleIcon size={size} className={cn(DEFAULT_CLASSES, className)} />
--- a/src/modules/peers/PeerOSCell.tsx
+++ b/src/modules/peers/PeerOSCell.tsx
@@ -42,7 +42,7 @@ export function PeerOSCell({ os }: { os: string }) {

 export function OSLogo({ os }: { os: string }) {
  const icon = useMemo(() => {
-    return getOperatingSystem(os.toLowerCase());
+    return getOperatingSystem(os);
  }, [os]);

  if (icon === OperatingSystem.WINDOWS)
--- a/src/modules/settings/AuthenticationTab.tsx
+++ b/src/modules/settings/AuthenticationTab.tsx
@@ -15,7 +15,7 @@ import {
 } from "@components/Select";
 import * as Tabs from "@radix-ui/react-tabs";
 import { useApiCall } from "@utils/api";
-import { cn } from "@utils/helpers";
+import { cn, isInt } from "@utils/helpers";
 import { isLocalDev, isNetBirdHosted } from "@utils/netbird";
 import { CalendarClock, ShieldIcon, TimerReset, VoteIcon } from "lucide-react";
 import React, { useMemo, useState } from "react";
@@ -55,16 +55,21 @@ export default function AuthenticationTab({ account }: Props) {
  const [expiresInSeconds] = useState(
    account.settings.peer_login_expiration || 86400,
  );
+
  const [expiresIn, setExpiresIn] = useState(() => {
-    if (expiresInSeconds <= 86400) return "1";
-    return Math.round(expiresInSeconds / 86400).toString();
+    if (expiresInSeconds <= 172800) {
+      const hours = expiresInSeconds / 3600;
+      return isInt(hours) ? hours.toString() : hours.toFixed(2).toString();
+    }
+    const days = expiresInSeconds / 86400;
+    return isInt(days) ? days.toString() : days.toFixed(2).toString();
  });

  /**
   * Interval
   */
  const initialInterval = useMemo(() => {
-    if (Number(expiresIn) <= 86400) return "hours";
+    if (expiresInSeconds <= 172800) return "hours";
    return "days";
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
--- a/src/modules/settings/GroupsTab.tsx
+++ b/src/modules/settings/GroupsTab.tsx
@@ -50,7 +50,7 @@ export default function GroupsTab({ account }: Props) {
   * JWT Group Sync
   */
  const [jwtGroupSync, setJwtGroupSync] = useState<boolean>(
-    account.settings.groups_propagation_enabled,
+    account.settings.jwt_groups_enabled,
  );
  const [jwtGroupsClaimName, setJwtGroupsClaimName] = useState(
    account.settings.jwt_groups_claim_name,
--- a/src/modules/setup-netbird-modal/SetupModal.tsx
+++ b/src/modules/setup-netbird-modal/SetupModal.tsx
@@ -5,6 +5,7 @@ import { ModalContent, ModalFooter } from "@components/modal/Modal";
 import Paragraph from "@components/Paragraph";
 import SmallParagraph from "@components/SmallParagraph";
 import { Tabs, TabsList, TabsTrigger } from "@components/Tabs";
+import { ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import AndroidIcon from "@/assets/icons/AndroidIcon";
 import AppleIcon from "@/assets/icons/AppleIcon";
@@ -32,29 +33,49 @@ type Props = {
 };

 export default function SetupModal({ showClose = true, user }: Props) {
-  const os = useOperatingSystem();
+  return (
+    <ModalContent showClose={showClose}>
+      <SetupModalContent user={user} />
+    </ModalContent>
+  );
+}

+export function SetupModalContent({
+  user,
+  header = true,
+  footer = true,
+  tabAlignment = "center",
+}: {
+  user?: OidcUserInfo;
+  header?: boolean;
+  footer?: boolean;
+  tabAlignment?: "center" | "start" | "end";
+}) {
+  const os = useOperatingSystem();
  const [isFirstRun] = useLocalStorage<boolean>("netbird-first-run", true);

  return (
-    <ModalContent showClose={showClose}>
-      <div className={"text-center pb-8 pt-4 px-8"}>
-        <h2 className={"text-3xl max-w-lg mx-auto"}>
-          {isFirstRun ? (
-            <>
-              Hello {user?.given_name || "there"}! 👋 <br />
-              {`It's time to add your first device.`}
-            </>
-          ) : (
-            <>Add new peer</>
-          )}
-        </h2>
-        <Paragraph className={"max-w-xs mx-auto mt-3"}>
-          To get started, install NetBird and log in using your email account.
-        </Paragraph>
-      </div>
+    <>
+      {header && (
+        <div className={"text-center pb-8 pt-4 px-8"}>
+          <h2 className={"text-3xl max-w-lg mx-auto"}>
+            {isFirstRun ? (
+              <>
+                Hello {user?.given_name || "there"}! 👋 <br />
+                {`It's time to add your first device.`}
+              </>
+            ) : (
+              <>Add new peer</>
+            )}
+          </h2>
+          <Paragraph className={"max-w-xs mx-auto mt-3"}>
+            To get started, install NetBird and log in using your email account.
+          </Paragraph>
+        </div>
+      )}
+
      <Tabs defaultValue={String(os)}>
-        <TabsList>
+        <TabsList justify={tabAlignment} className={"pt-2 px-3"}>
          <TabsTrigger value={String(OperatingSystem.LINUX)}>
            <ShellIcon
              className={
@@ -111,23 +132,26 @@ export default function SetupModal({ showClose = true, user }: Props) {
        <IOSTab />
        <DockerTab />
      </Tabs>
-      <ModalFooter variant={"setup"}>
-        <div>
-          <SmallParagraph>
-            After that you should be connected. Add more devices to your network
-            or manage your existing devices in the admin panel. If you have
-            further questions check out our{" "}
-            <InlineLink
-              href={
-                "https://docs.netbird.io/how-to/getting-started#installation"
-              }
-              target={"_blank"}
-            >
-              installation guide.
-            </InlineLink>
-          </SmallParagraph>
-        </div>
-      </ModalFooter>
-    </ModalContent>
+      {footer && (
+        <ModalFooter variant={"setup"}>
+          <div>
+            <SmallParagraph>
+              After that you should be connected. Add more devices to your
+              network or manage your existing devices in the admin panel. If you
+              have further questions check out our{" "}
+              <InlineLink
+                href={
+                  "https://docs.netbird.io/how-to/getting-started#installation"
+                }
+                target={"_blank"}
+              >
+                Installation Guide
+                <ExternalLinkIcon size={12} />
+              </InlineLink>
+            </SmallParagraph>
+          </div>
+        </ModalFooter>
+      )}
+    </>
  );
 }
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -75,3 +75,7 @@ export const validator = {
    return semverRegex.test(version);
  },
 };
+
+export function isInt(n: number) {
+  return n % 1 === 0;
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -27,7 +27,6 @@ const config: Config = {
          "940": "#1b1f22",
          "950": "#181a1d",
        },
-
        netbird: {
          DEFAULT: "#f68330",
          "50": "#fff6ed",
@@ -42,6 +41,20 @@ const config: Config = {
          "900": "#7a2b14",
          "950": "#421308",
        },
+        "nb-blue": {
+          DEFAULT: "#31e4f5",
+          "50": "#ebffff",
+          "100": "#cefdff",
+          "200": "#a2f9ff",
+          "300": "#63f2fd",
+          "400": "#31e4f5",
+          "500": "#00c4da",
+          "600": "#039cb7",
+          "700": "#0a7c94",
+          "800": "#126478",
+          "900": "#145365",
+          "950": "#063746",
+        },
      },
      keyframes: {
        "accordion-down": {
Author	SHA1	Message	Date
Eduard Gert	fe6d8c9bd5	Add support for decimal expiration time and switch to days if interval exceeds 48h (#357 ) Some checks failed build and push / build_n_push (push) Has been cancelled Details * Add helper function to check for integer * Add support for decimal expiration time and switch to days if interval exceeds 48h	2024-03-15 15:54:06 +01:00
Eduard Gert	121976d101	Add option to copy peer details (ip, public ip, hostname, domain name) in detailed peer view (#356 )	2024-03-15 13:46:27 +01:00
Eduard Gert	f7071e00b6	Add reset filter button (#355 )	2024-03-15 13:43:00 +01:00
Eduard Gert	6b73ccf102	Fix search resetting when selecting a group (#354 )	2024-03-15 13:35:25 +01:00
Eduard Gert	87dcd00264	Fix peer groups occasionally not refreshing (#351 ) * Trigger groups refresh when visiting peers page * Disable exhaustive-deps linter --------- Co-authored-by: Maycon Santos <mlsmaycon@gmail.com>	2024-03-15 13:34:47 +01:00
Eduard Gert	99f1bcc375	Reduce information visible to regular users (non-adminstrators) (#353 ) reducing visibility to display only add peer information	2024-03-15 13:25:40 +01:00
Eduard Gert	bf34c55110	Fix JWT group sync checkbox using wrong variable (#352 )	2024-03-12 17:23:42 +01:00
Eduard Gert	1dfc6e2d75	Add announcement banner to show updates or important information (#350 ) * Add contrast color * Add crypto-js for md5 hash * Add announcement banner	2024-03-11 15:31:52 +01:00
Eduard Gert	b7860a8786	Filter peers by id instead of name in peer dropdown selector (#347 )	2024-03-09 18:07:45 +01:00
Eduard Gert	c9172e3a5f	Show full netbird logo on desktop and netbird logomark on mobile (#348 )	2024-03-09 18:07:26 +01:00
Eduard Gert	78d75134f9	Add better description for posture check activity events (#349 )	2024-03-09 17:14:41 +01:00
Eduard Gert	071feb02f9	Fix SSO expiration dropdown to reflect the actual "Hours" or "Days" (#345 )	2024-03-01 17:01:26 +01:00