Merge branch 'main' into feature/posture-checks

# Conflicts:
#	package-lock.json
#	package.json
#	src/app/(dashboard)/access-control/page.tsx
#	src/app/(dashboard)/peer/page.tsx
#	src/app/(dashboard)/team/user/page.tsx
#	src/components/PeerSelector.tsx
#	src/components/SquareIcon.tsx
#	src/components/ToggleSwitch.tsx
#	src/components/VerticalTabs.tsx
#	src/components/modal/Modal.tsx
#	src/components/modal/ModalHeader.tsx
#	src/components/select/SelectDropdown.tsx
#	src/components/ui/UserAvatar.tsx
#	src/contexts/PoliciesProvider.tsx
#	src/hooks/useOperatingSystem.ts
#	src/interfaces/AccessToken.ts
#	src/interfaces/ActivityEvent.ts
#	src/interfaces/Peer.ts
#	src/interfaces/Policy.ts
#	src/interfaces/User.ts
#	src/interfaces/Version.ts
#	src/layouts/Navigation.tsx
#	src/modules/activity/ActivityDescription.tsx
#	src/modules/activity/ActivityEntryRow.tsx
#	src/modules/activity/ActivityUserSelector.tsx
#	src/modules/dns-nameservers/NameserverModal.tsx
#	src/modules/groups/useGroupHelper.tsx
#	src/modules/peers/PeerOSCell.tsx
#	src/modules/routes/RouteModal.tsx
#	src/modules/routes/RouteUpdateModal.tsx
#	src/modules/setup-keys/SetupKeyModal.tsx
#	src/modules/users/ServiceUsersTable.tsx
#	src/modules/users/UserInviteModal.tsx
#	src/modules/users/UsersTable.tsx
#	src/modules/users/table-cells/ServiceUserNameCell.tsx
#	src/modules/users/table-cells/UserActionCell.tsx
#	src/modules/users/table-cells/UserBlockCell.tsx
#	src/modules/users/table-cells/UserNameCell.tsx
#	src/utils/api.tsx

package.json

@@ -21,7 +21,6 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@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.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -39,7 +38,7 @@
     "autoprefixer": "^10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "cmdk": "^0.2.1",
+    "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "eslint": "^8",
@@ -50,7 +49,6 @@
     "flowbite-react": "^0.6.4",
     "framer-motion": "^10.16.4",
     "ip-cidr": "^3.1.0",
-    "iso-3166": "^4.3.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.287.0",
     "next": "13.5.5",
@@ -69,8 +67,7 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5",
-    "virtua": "^0.25.0"
+    "typescript": "^5"
   },
   "devDependencies": {
     "cypress": "^13.3.3",

src/app/(dashboard)/access-control/page.tsx

@@ -6,7 +6,7 @@ import Paragraph from "@components/Paragraph";
 import SkeletonTable from "@components/skeletons/SkeletonTable";
 import { RestrictedAccess } from "@components/ui/RestrictedAccess";
 import useFetchApi from "@utils/api";
-import { BookIcon, ExternalLinkIcon } from "lucide-react";
+import { ExternalLinkIcon } from "lucide-react";
 import React, { lazy, Suspense } from "react";
 import AccessControlIcon from "@/assets/icons/AccessControlIcon";
 import GroupsProvider from "@/contexts/GroupsProvider";
@@ -15,7 +15,7 @@ import { Policy } from "@/interfaces/Policy";
 import PageContainer from "@/layouts/PageContainer";
 
 const AccessControlTable = lazy(
-  () => import("@/modules/access-control/rules/table/AccessControlTable"),
+  () => import("@/modules/access-control/table/AccessControlTable"),
 );
 export default function AccessControlPage() {
   const { data: policies, isLoading } = useFetchApi<Policy[]>("/policies");
@@ -26,21 +26,15 @@ export default function AccessControlPage() {
         <div className={"p-default py-6"}>
           <Breadcrumbs>
             <Breadcrumbs.Item
-              href={"/access-control"}
+              href={"/policies"}
               label={"Access Control"}
               icon={<AccessControlIcon size={13} />}
             />
-            <Breadcrumbs.Item
-              href={"/access-control"}
-              label={"Rules"}
-              active
-              icon={<BookIcon size={14} />}
-            />
           </Breadcrumbs>
           <h1>
             {policies && policies.length > 1
-              ? `${policies.length} Access Control Rules`
-              : "Access Control Rules"}
+              ? `${policies.length} Access Control Policies`
+              : "Access Control Policies"}
           </h1>
           <Paragraph>
             Create rules to manage access in your network and define what peers

src/app/(dashboard)/peer/page.tsx

@@ -132,7 +132,7 @@ function PeerOverview() {
             <Breadcrumbs.Item label={peer.ip} active />
           </Breadcrumbs>
 
-          <div className={"flex justify-between max-w-6xl"}>
+          <div className={"flex justify-between max-w-6xl items-start"}>
             <div>
               <div className={"flex items-center gap-3"}>
                 <h1 className={"flex items-center gap-3"}>

src/app/(dashboard)/team/user/page.tsx

@@ -121,7 +121,7 @@ function UserOverview({ user }: Props) {
             />
           )}
 
-          <Breadcrumbs.Item label={user.name} active />
+          <Breadcrumbs.Item label={user.name || user.id} active />
         </Breadcrumbs>
 
         <div className={"flex justify-between max-w-6xl"}>
@@ -138,18 +138,22 @@ function UserOverview({ user }: Props) {
                       }
                     : {
                         color: user?.name
-                          ? generateColorFromString(user?.name || "System User")
+                          ? generateColorFromString(
+                              user?.name || user?.id || "System User",
+                            )
                           : "#808080",
                       }
                 }
               >
                 {user.is_service_user ? (
                   <IconSettings2 size={16} />
                 ) : (
-                  user?.name?.charAt(0)
+                  user?.name?.charAt(0) || user?.id?.charAt(0)
                 )}
               </div>
-              <h1 className={"flex items-center gap-3"}>{user.name}</h1>
+              <h1 className={"flex items-center gap-3"}>
+                {user.name || user.id}
+              </h1>
             </div>
           </div>
           <div className={"flex gap-4"}>
@@ -256,10 +260,10 @@ function UserInformationCard({ user }: { user: User }) {
           label={
             <>
               <User2 size={16} />
-              Name
+              {user.name ? "Name" : "User ID"}
             </>
           }
-          value={user.name}
+          value={user.name || user.id}
         />
 
         {!isServiceUser && (
@@ -270,7 +274,7 @@ function UserInformationCard({ user }: { user: User }) {
                 E-Mail
               </>
             }
-            value={user.email}
+            value={user.email || "-"}
           />
         )}
 
@@ -303,12 +307,10 @@ function UserInformationCard({ user }: { user: User }) {
                 </>
               }
               value={
-                dayjs(user.last_login).isBefore(dayjs().subtract(1000, "years"))
-                  ? "Never"
-                  : dayjs(user.last_login).format("D MMMM, YYYY [at] h:mm A") +
-                    " (" +
-                    dayjs().to(user.last_login) +
-                    ")"
+                dayjs(user.last_login).format("D MMMM, YYYY [at] h:mm A") +
+                " (" +
+                dayjs().to(user.last_login) +
+                ")"
               }
             />
           </>

src/components/PeerSelector.tsx

@@ -33,8 +33,8 @@ export function PeerSelector({
 
   const [dropdownOptions, setDropdownOptions] = useState<Peer[]>([]);
   const searchRef = React.useRef<HTMLInputElement>(null);
-  const [search, setSearch] = useState("");
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
+  const [search, setSearch] = useState("");
 
   // Update dropdown options when peers change
   useEffect(() => {

src/components/VerticalTabs.tsx

@@ -26,29 +26,17 @@ function VerticalTabs({ value, onChange, children }: Props) {
   );
 }
 
-function List({
-  children,
-  fullHeight = true,
-  border = true,
-  className,
-}: {
-  children: React.ReactNode;
-  fullHeight?: boolean;
-  border?: boolean;
-  className?: string;
-}) {
+function List({ children }: { children: React.ReactNode }) {
   const isLg = useIsLg();
   return (
     <Tabs.List
       className={cn(
         "px-4 py-4 whitespace-nowrap overflow-y-hidden shrink-0 no-scrollbar",
-        "lg:h-full items-start bg-nb-gray  border-nb-gray-930",
+        "lg:h-full items-start bg-nb-gray border-b border-nb-gray-930",
         "flex lg:flex-col lg:gap-1",
-        border && "border-b",
-        className,
       )}
       style={{
-        height: isLg && fullHeight ? "calc(100vh - 75px)" : "auto",
+        height: isLg ? "calc(100vh - 75px)" : "auto",
       }}
     >
       {children}

src/components/modal/Modal.tsx

@@ -31,8 +31,8 @@ const ModalOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-neutral-950/70",
-      "place-items-center overflow-y-auto",
+      "fixed top-0 left-0 bottom-0 right-0 grid z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-neutral-950/70",
+      "mx-auto place-items-start overflow-y-auto md:py-16",
       className,
     )}
     {...props}
@@ -65,7 +65,7 @@ const ModalContent = React.forwardRef<
         <DialogPrimitive.Content
           ref={ref}
           className={cn(
-            "fixed left-[50%] top-0 md:top-[5%] z-50 grid w-full translate-x-[-50%] border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2  data-[state=open]:slide-in-from-left-1/2 ] sm:rounded-lg md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
+            "mx-auto relative top-0 z-50 grid w-full  border border-neutral-200 bg-white py-6 dark:shadow-lg shadow-sm duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1  data-[state=open]:slide-in-from-left-1 sm:rounded-lg md:w-full dark:border-nb-gray-900 dark:bg-nb-gray",
             className,
             maxWidthClass,
           )}

src/components/modal/ModalHeader.tsx

@@ -19,7 +19,7 @@ export default function ModalHeader({
   margin = "mt-0",
 }: Props) {
   return (
-    <div className={cn(className, "relative z-[1]")}>
+    <div className={className}>
       <div className={"flex items-start gap-5 pr-10"}>
         {icon && <SquareIcon color={color} icon={icon} />}
         <div>

src/components/ui/UserAvatar.tsx

@@ -31,11 +31,11 @@ export const UserAvatar = ({ size = "default" }: Props) => {
       )}
       style={{
         color: user?.name
-          ? generateColorFromString(user?.name || "System User")
+          ? generateColorFromString(user?.name || user?.id || "System User")
           : "#808080",
       }}
     >
-      {user?.name?.charAt(0)}
+      {user?.name?.charAt(0) || user?.id?.charAt(0)}
     </div>
   );
 };