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
2026-02-02 15:34:23 +01:00
parent ea148545e8
commit 750f660bcc
25 changed files with 2430 additions and 2645 deletions
--- a/.github/workflows/build_and_push.yml
+++ b/.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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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.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"
--- a/src/app/globals.css
+++ b/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;
--- a/src/components/AutoCompleteInput.tsx
+++ b/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>
-  );
-};
--- a/src/components/Tooltip.tsx
+++ b/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>
  ),
 );
--- a/src/components/VirtualScrollAreaList.tsx
+++ b/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>
--- a/src/components/modal/Modal.tsx
+++ b/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>
--- a/src/components/table/DataTable.tsx
+++ b/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>
--- a/src/components/ui/AbsoluteDateTimeInput.tsx
+++ b/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>
--- a/src/components/ui/Calendar.tsx
+++ b/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}
    />
--- a/src/contexts/AnalyticsProvider.tsx
+++ b/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);
  }, []);
--- a/src/contexts/DialogProvider.tsx
+++ b/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) => {
--- a/src/contexts/GlobalThemeProvider.tsx
+++ b/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>
  );
 }
--- a/src/hooks/useIsVisible.ts
+++ b/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);

--- a/src/hooks/usePrevious.ts
+++ b/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;
--- a/src/layouts/AppLayout.tsx
+++ b/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>
--- a/src/modules/posture-checks/ui/PostureCheckOperatingSystemInfo.tsx
+++ b/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 = ({
--- a/src/modules/remote-access/rdp/rdp-certificate-handler.ts
+++ b/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'))
--- a/src/modules/remote-access/rdp/useRDPCertificateHandler.ts
+++ b/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"))
--- a/src/modules/settings/GroupsSettings.tsx
+++ b/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>
  );
--- a/src/utils/api.tsx
+++ b/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;
--- a/src/utils/theme.ts
+++ b/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",
-      },
-    },
-  },
-};
--- a/tailwind.config.ts
+++ b/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;
--- a/tsconfig.json
+++ b/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/**/*"
  ]
 }