Merge branch 'dev' into feat/show-newt-install-command

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -1,4 +1,5 @@
 import { ApprovalFeed } from "@app/components/ApprovalFeed";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
@@ -42,6 +43,9 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
                 title={t("accessApprovalsManage")}
                 description={t("accessApprovalsDescription")}
             />
+
+            <PaidFeaturesAlert />
+
             <OrgProvider org={org}>
                 <div className="container mx-auto max-w-12xl">
                     <ApprovalFeed orgId={params.orgId} />

src/app/[orgId]/settings/access/users/create/page.tsx

@@ -361,7 +361,7 @@ export default function Page() {
         const res = await api
             .put(`/org/${orgId}/user`, {
                 username: values.email, // Use email as username for Google/Azure
-                email: values.email,
+                email: values.email || undefined,
                 name: values.name,
                 type: "oidc",
                 idpId: selectedUserOption.idpId,
@@ -403,7 +403,7 @@ export default function Page() {
         const res = await api
             .put(`/org/${orgId}/user`, {
                 username: values.username,
-                email: values.email,
+                email: values.email || undefined,
                 name: values.name,
                 type: "oidc",
                 idpId: selectedUserOption.idpId,

src/app/[orgId]/settings/clients/machine/[niceId]/general/page.tsx

@@ -29,9 +29,11 @@ import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import ActionBanner from "@app/components/ActionBanner";
+import { Shield, ShieldOff } from "lucide-react";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
@@ -45,7 +47,9 @@ export default function GeneralPage() {
     const { client, updateClient } = useClientContext();
     const api = createApiClient(useEnvContext());
     const [loading, setLoading] = useState(false);
+    const [isRefreshing, setIsRefreshing] = useState(false);
     const router = useRouter();
+    const [, startTransition] = useTransition();
 
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
@@ -109,8 +113,54 @@ export default function GeneralPage() {
         }
     }
 
+    const handleUnblock = async () => {
+        if (!client?.clientId) return;
+        setIsRefreshing(true);
+        try {
+            await api.post(`/client/${client.clientId}/unblock`);
+            // Optimistically update the client context
+            updateClient({ blocked: false, approvalState: null });
+            toast({
+                title: t("unblockClient"),
+                description: t("unblockClientDescription")
+            });
+            startTransition(() => {
+                router.refresh();
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("error"),
+                description: formatAxiosError(e, t("error"))
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
     return (
         <SettingsContainer>
+            {/* Blocked Device Banner */}
+            {client?.blocked && (
+                <ActionBanner
+                    variant="destructive"
+                    title={t("blocked")}
+                    titleIcon={<Shield className="w-5 h-5" />}
+                    description={t("deviceBlockedDescription")}
+                    actions={
+                        <Button
+                            onClick={handleUnblock}
+                            disabled={isRefreshing}
+                            loading={isRefreshing}
+                            variant="outline"
+                            className="gap-2"
+                        >
+                            <ShieldOff className="size-4" />
+                            {t("unblock")}
+                        </Button>
+                    }
+                />
+            )}
             <SettingsSection>
                 <SettingsSectionHeader>
                     <SettingsSectionTitle>

src/app/[orgId]/settings/clients/machine/create/page.tsx

@@ -73,9 +73,10 @@ type CommandItem = string | { title: string; command: string };
 type Commands = {
     unix: Record<string, CommandItem[]>;
     windows: Record<string, CommandItem[]>;
+    docker: Record<string, CommandItem[]>;
 };
 
-const platforms = ["unix", "windows"] as const;
+const platforms = ["unix", "docker", "windows"] as const;
 
 type Platform = (typeof platforms)[number];
 
@@ -156,6 +157,27 @@ export default function Page() {
                         command: `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}`
                     }
                 ]
+            },
+            docker: {
+                "Docker Compose": [
+                    `services:
+  olm:
+    image: fosrl/olm
+    container_name: olm
+    restart: unless-stopped
+    network_mode: host
+    cap_add:
+      - NET_ADMIN
+    devices:
+      - /dev/net/tun:/dev/net/tun
+    environment:
+      - PANGOLIN_ENDPOINT=${endpoint}
+      - OLM_ID=${id}
+      - OLM_SECRET=${secret}`
+                ],
+                "Docker Run": [
+                    `docker run -dit --network host --cap-add NET_ADMIN --device /dev/net/tun:/dev/net/tun fosrl/olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
+                ]
             }
         };
         setCommands(commands);
@@ -167,6 +189,8 @@ export default function Page() {
                 return ["All"];
             case "windows":
                 return ["x64"];
+            case "docker":
+                return ["Docker Compose", "Docker Run"];
             default:
                 return ["x64"];
         }

src/app/[orgId]/settings/clients/user/[niceId]/general/page.tsx

@@ -0,0 +1,553 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import { useClientContext } from "@app/hooks/useClientContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { useTranslations } from "next-intl";
+import { build } from "@server/build";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    InfoSectionTitle
+} from "@app/components/InfoSection";
+import { Badge } from "@app/components/ui/badge";
+import { Button } from "@app/components/ui/button";
+import ActionBanner from "@app/components/ActionBanner";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { toast } from "@app/hooks/useToast";
+import { useRouter } from "next/navigation";
+import { useState, useEffect, useTransition } from "react";
+import { Check, Ban, Shield, ShieldOff, Clock } from "lucide-react";
+import { useParams } from "next/navigation";
+import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
+import { SiAndroid } from "react-icons/si";
+
+function formatTimestamp(timestamp: number | null | undefined): string {
+    if (!timestamp) return "-";
+    return new Date(timestamp * 1000).toLocaleString();
+}
+
+function formatPlatform(platform: string | null | undefined): string {
+    if (!platform) return "-";
+    const platformMap: Record<string, string> = {
+        macos: "macOS",
+        windows: "Windows",
+        linux: "Linux",
+        ios: "iOS",
+        android: "Android",
+        unknown: "Unknown"
+    };
+    return platformMap[platform.toLowerCase()] || platform;
+}
+
+function getPlatformIcon(platform: string | null | undefined) {
+    if (!platform) return null;
+    const normalizedPlatform = platform.toLowerCase();
+    switch (normalizedPlatform) {
+        case "macos":
+        case "ios":
+            return <FaApple className="h-4 w-4" />;
+        case "windows":
+            return <FaWindows className="h-4 w-4" />;
+        case "linux":
+            return <FaLinux className="h-4 w-4" />;
+        case "android":
+            return <SiAndroid className="h-4 w-4" />;
+        default:
+            return null;
+    }
+}
+
+type FieldConfig = {
+    show: boolean;
+    labelKey: string;
+};
+
+function getPlatformFieldConfig(
+    platform: string | null | undefined
+): Record<string, FieldConfig> {
+    const normalizedPlatform = platform?.toLowerCase() || "unknown";
+
+    const configs: Record<string, Record<string, FieldConfig>> = {
+        macos: {
+            osVersion: { show: true, labelKey: "macosVersion" },
+            kernelVersion: { show: false, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        },
+        windows: {
+            osVersion: { show: true, labelKey: "windowsVersion" },
+            kernelVersion: { show: true, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        },
+        linux: {
+            osVersion: { show: true, labelKey: "osVersion" },
+            kernelVersion: { show: true, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        },
+        ios: {
+            osVersion: { show: true, labelKey: "iosVersion" },
+            kernelVersion: { show: false, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        },
+        android: {
+            osVersion: { show: true, labelKey: "androidVersion" },
+            kernelVersion: { show: true, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        },
+        unknown: {
+            osVersion: { show: true, labelKey: "osVersion" },
+            kernelVersion: { show: true, labelKey: "kernelVersion" },
+            arch: { show: true, labelKey: "architecture" },
+            deviceModel: { show: true, labelKey: "deviceModel" },
+            serialNumber: { show: true, labelKey: "serialNumber" },
+            username: { show: true, labelKey: "username" },
+            hostname: { show: true, labelKey: "hostname" }
+        }
+    };
+
+    return configs[normalizedPlatform] || configs.unknown;
+}
+
+export default function GeneralPage() {
+    const { client, updateClient } = useClientContext();
+    const { isPaidUser } = usePaidStatus();
+    const t = useTranslations();
+    const api = createApiClient(useEnvContext());
+    const router = useRouter();
+    const params = useParams();
+    const orgId = params.orgId as string;
+    const [approvalId, setApprovalId] = useState<number | null>(null);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [, startTransition] = useTransition();
+
+    const showApprovalFeatures = build !== "oss" && isPaidUser;
+
+    // Fetch approval ID for this client if pending
+    useEffect(() => {
+        if (
+            showApprovalFeatures &&
+            client.approvalState === "pending" &&
+            client.clientId
+        ) {
+            api.get(`/org/${orgId}/approvals?approvalState=pending`)
+                .then((res) => {
+                    const approval = res.data.data.approvals.find(
+                        (a: any) => a.clientId === client.clientId
+                    );
+                    if (approval) {
+                        setApprovalId(approval.approvalId);
+                    }
+                })
+                .catch(() => {
+                    // Silently fail - approval might not exist
+                });
+        }
+    }, [
+        showApprovalFeatures,
+        client.approvalState,
+        client.clientId,
+        orgId,
+        api
+    ]);
+
+    const handleApprove = async () => {
+        if (!approvalId) return;
+        setIsRefreshing(true);
+        try {
+            await api.put(`/org/${orgId}/approvals/${approvalId}`, {
+                decision: "approved"
+            });
+            // Optimistically update the client context
+            updateClient({ approvalState: "approved" });
+            toast({
+                title: t("accessApprovalUpdated"),
+                description: t("accessApprovalApprovedDescription")
+            });
+            startTransition(() => {
+                router.refresh();
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("accessApprovalErrorUpdate"),
+                description: formatAxiosError(
+                    e,
+                    t("accessApprovalErrorUpdateDescription")
+                )
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const handleDeny = async () => {
+        if (!approvalId) return;
+        setIsRefreshing(true);
+        try {
+            await api.put(`/org/${orgId}/approvals/${approvalId}`, {
+                decision: "denied"
+            });
+            // Optimistically update the client context
+            updateClient({ approvalState: "denied", blocked: true });
+            toast({
+                title: t("accessApprovalUpdated"),
+                description: t("accessApprovalDeniedDescription")
+            });
+            startTransition(() => {
+                router.refresh();
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("accessApprovalErrorUpdate"),
+                description: formatAxiosError(
+                    e,
+                    t("accessApprovalErrorUpdateDescription")
+                )
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const handleBlock = async () => {
+        if (!client.clientId) return;
+        setIsRefreshing(true);
+        try {
+            await api.post(`/client/${client.clientId}/block`);
+            // Optimistically update the client context
+            updateClient({ blocked: true, approvalState: "denied" });
+            toast({
+                title: t("blockClient"),
+                description: t("blockClientMessage")
+            });
+            startTransition(() => {
+                router.refresh();
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("error"),
+                description: formatAxiosError(e, t("error"))
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const handleUnblock = async () => {
+        if (!client.clientId) return;
+        setIsRefreshing(true);
+        try {
+            await api.post(`/client/${client.clientId}/unblock`);
+            // Optimistically update the client context
+            updateClient({ blocked: false, approvalState: null });
+            toast({
+                title: t("unblockClient"),
+                description: t("unblockClientDescription")
+            });
+            startTransition(() => {
+                router.refresh();
+            });
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("error"),
+                description: formatAxiosError(e, t("error"))
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    return (
+        <SettingsContainer>
+            {/* Pending Approval Banner */}
+            {showApprovalFeatures && client.approvalState === "pending" && (
+                <ActionBanner
+                    variant="warning"
+                    title={t("pendingApproval")}
+                    titleIcon={<Clock className="w-5 h-5" />}
+                    description={t("devicePendingApprovalBannerDescription")}
+                    actions={
+                        <>
+                            <Button
+                                onClick={handleApprove}
+                                disabled={isRefreshing || !approvalId}
+                                loading={isRefreshing}
+                                variant="outline"
+                                className="gap-2"
+                            >
+                                <Check className="size-4" />
+                                {t("approve")}
+                            </Button>
+                            <Button
+                                onClick={handleDeny}
+                                disabled={isRefreshing || !approvalId}
+                                loading={isRefreshing}
+                                variant="outline"
+                                className="gap-2"
+                            >
+                                <Ban className="size-4" />
+                                {t("deny")}
+                            </Button>
+                        </>
+                    }
+                />
+            )}
+
+            {/* Blocked Device Banner */}
+            {client.blocked && client.approvalState !== "pending" && (
+                <ActionBanner
+                    variant="destructive"
+                    title={t("blocked")}
+                    titleIcon={<Shield className="w-5 h-5" />}
+                    description={t("deviceBlockedDescription")}
+                    actions={
+                        <Button
+                            onClick={handleUnblock}
+                            disabled={isRefreshing}
+                            loading={isRefreshing}
+                            variant="outline"
+                            className="gap-2"
+                        >
+                            <ShieldOff className="size-4" />
+                            {t("unblock")}
+                        </Button>
+                    }
+                />
+            )}
+
+            {/* Device Information Section */}
+            {(client.fingerprint || (client.agent && client.olmVersion)) && (
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("deviceInformation")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("deviceInformationDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+
+                    <SettingsSectionBody>
+                        {client.agent && client.olmVersion && (
+                            <div className="mb-6">
+                                <InfoSection>
+                                    <InfoSectionTitle>
+                                        {t("agent")}
+                                    </InfoSectionTitle>
+                                    <InfoSectionContent>
+                                        <Badge variant="secondary">
+                                            {client.agent +
+                                                " v" +
+                                                client.olmVersion}
+                                        </Badge>
+                                    </InfoSectionContent>
+                                </InfoSection>
+                            </div>
+                        )}
+
+                        {client.fingerprint &&
+                            (() => {
+                                const platform = client.fingerprint.platform;
+                                const fieldConfig =
+                                    getPlatformFieldConfig(platform);
+
+                                return (
+                                    <InfoSections cols={3}>
+                                        {platform && (
+                                            <InfoSection>
+                                                <InfoSectionTitle>
+                                                    {t("platform")}
+                                                </InfoSectionTitle>
+                                                <InfoSectionContent>
+                                                    <div className="flex items-center gap-2">
+                                                        {getPlatformIcon(
+                                                            platform
+                                                        )}
+                                                        <span>
+                                                            {formatPlatform(
+                                                                platform
+                                                            )}
+                                                        </span>
+                                                    </div>
+                                                </InfoSectionContent>
+                                            </InfoSection>
+                                        )}
+
+                                        {client.fingerprint.osVersion &&
+                                            fieldConfig.osVersion.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t(
+                                                            fieldConfig
+                                                                .osVersion
+                                                                .labelKey
+                                                        )}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .osVersion
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.kernelVersion &&
+                                            fieldConfig.kernelVersion.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("kernelVersion")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .kernelVersion
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.arch &&
+                                            fieldConfig.arch.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("architecture")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .arch
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.deviceModel &&
+                                            fieldConfig.deviceModel.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("deviceModel")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .deviceModel
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.serialNumber &&
+                                            fieldConfig.serialNumber.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("serialNumber")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .serialNumber
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.username &&
+                                            fieldConfig.username.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("username")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .username
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.hostname &&
+                                            fieldConfig.hostname.show && (
+                                                <InfoSection>
+                                                    <InfoSectionTitle>
+                                                        {t("hostname")}
+                                                    </InfoSectionTitle>
+                                                    <InfoSectionContent>
+                                                        {
+                                                            client.fingerprint
+                                                                .hostname
+                                                        }
+                                                    </InfoSectionContent>
+                                                </InfoSection>
+                                            )}
+
+                                        {client.fingerprint.firstSeen && (
+                                            <InfoSection>
+                                                <InfoSectionTitle>
+                                                    {t("firstSeen")}
+                                                </InfoSectionTitle>
+                                                <InfoSectionContent>
+                                                    {formatTimestamp(
+                                                        client.fingerprint
+                                                            .firstSeen
+                                                    )}
+                                                </InfoSectionContent>
+                                            </InfoSection>
+                                        )}
+
+                                        {client.fingerprint.lastSeen && (
+                                            <InfoSection>
+                                                <InfoSectionTitle>
+                                                    {t("lastSeen")}
+                                                </InfoSectionTitle>
+                                                <InfoSectionContent>
+                                                    {formatTimestamp(
+                                                        client.fingerprint
+                                                            .lastSeen
+                                                    )}
+                                                </InfoSectionContent>
+                                            </InfoSection>
+                                        )}
+                                    </InfoSections>
+                                );
+                            })()}
+                    </SettingsSectionBody>
+                </SettingsSection>
+            )}
+        </SettingsContainer>
+    );
+}

src/app/[orgId]/settings/clients/user/[niceId]/layout.tsx

@@ -0,0 +1,57 @@
+import ClientInfoCard from "@app/components/ClientInfoCard";
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import ClientProvider from "@app/providers/ClientProvider";
+import { GetClientResponse } from "@server/routers/client";
+import { AxiosResponse } from "axios";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+
+type SettingsLayoutProps = {
+    children: React.ReactNode;
+    params: Promise<{ niceId: number | string; orgId: string }>;
+};
+
+export default async function SettingsLayout(props: SettingsLayoutProps) {
+    const params = await props.params;
+
+    const { children } = props;
+
+    let client = null;
+    try {
+        const res = await internal.get<AxiosResponse<GetClientResponse>>(
+            `/org/${params.orgId}/client/${params.niceId}`,
+            await authCookieHeader()
+        );
+        client = res.data.data;
+    } catch (error) {
+        redirect(`/${params.orgId}/settings/clients/user`);
+    }
+
+    const t = await getTranslations();
+
+    const navItems = [
+        {
+            title: t("general"),
+            href: `/${params.orgId}/settings/clients/user/${params.niceId}/general`
+        }
+    ];
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={`${client?.name} Settings`}
+                description={t("deviceSettingsDescription")}
+            />
+
+            <ClientProvider client={client}>
+                <div className="space-y-6">
+                    <ClientInfoCard />
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
+                </div>
+            </ClientProvider>
+        </>
+    );
+}

src/app/[orgId]/settings/clients/user/[niceId]/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+export default async function ClientPage(props: {
+    params: Promise<{ orgId: string; niceId: number | string }>;
+}) {
+    const params = await props.params;
+    redirect(
+        `/${params.orgId}/settings/clients/user/${params.niceId}/general`
+    );
+}

src/app/[orgId]/settings/clients/user/page.tsx

@@ -41,6 +41,32 @@ export default async function ClientsPage(props: ClientsPageProps) {
     const mapClientToRow = (
         client: ListClientsResponse["clients"][0]
     ): ClientRow => {
+        // Build fingerprint object if any fingerprint data exists
+        const hasFingerprintData =
+            (client as any).fingerprintPlatform ||
+            (client as any).fingerprintOsVersion ||
+            (client as any).fingerprintKernelVersion ||
+            (client as any).fingerprintArch ||
+            (client as any).fingerprintSerialNumber ||
+            (client as any).fingerprintUsername ||
+            (client as any).fingerprintHostname ||
+            (client as any).deviceModel;
+
+        const fingerprint = hasFingerprintData
+            ? {
+                  platform: (client as any).fingerprintPlatform || null,
+                  osVersion: (client as any).fingerprintOsVersion || null,
+                  kernelVersion:
+                      (client as any).fingerprintKernelVersion || null,
+                  arch: (client as any).fingerprintArch || null,
+                  deviceModel: (client as any).deviceModel || null,
+                  serialNumber:
+                      (client as any).fingerprintSerialNumber || null,
+                  username: (client as any).fingerprintUsername || null,
+                  hostname: (client as any).fingerprintHostname || null
+              }
+            : null;
+
         return {
             name: client.name,
             id: client.clientId,
@@ -58,7 +84,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
             agent: client.agent,
             archived: client.archived || false,
             blocked: client.blocked || false,
-            approvalState: client.approvalState
+            approvalState: client.approvalState,
+            fingerprint
         };
     };
 

src/app/[orgId]/settings/general/layout.tsx

@@ -51,6 +51,10 @@ export default async function GeneralSettingsPage({
             title: t("general"),
             href: `/{orgId}/settings/general`,
             exact: true
+        },
+        {
+            title: t("security"),
+            href: `/{orgId}/settings/general/security`
         }
     ];
     if (build !== "oss") {

src/app/[orgId]/settings/general/page.tsx

@@ -1,19 +1,12 @@
 "use client";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import AuthPageSettings, {
-    AuthPageSettingsRef
-} from "@app/components/private/AuthPageSettings";
-
 import { Button } from "@app/components/ui/button";
 import { useOrgContext } from "@app/hooks/useOrgContext";
-import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
 import { toast } from "@app/hooks/useToast";
 import {
     useState,
-    useRef,
     useTransition,
-    useActionState,
-    type ComponentRef
+    useActionState
 } from "react";
 import {
     Form,
@@ -25,13 +18,6 @@ import {
     FormMessage
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue
-} from "@/components/ui/select";
 
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -55,79 +41,19 @@ import {
 import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
-import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import type { t } from "@faker-js/faker/dist/airline-DF6RqYmq";
 import type { OrgContextType } from "@app/contexts/orgContext";
 
-// Session length options in hours
-const SESSION_LENGTH_OPTIONS = [
-    { value: null, labelKey: "unenforced" },
-    { value: 1, labelKey: "1Hour" },
-    { value: 3, labelKey: "3Hours" },
-    { value: 6, labelKey: "6Hours" },
-    { value: 12, labelKey: "12Hours" },
-    { value: 24, labelKey: "1DaySession" },
-    { value: 72, labelKey: "3Days" },
-    { value: 168, labelKey: "7Days" },
-    { value: 336, labelKey: "14Days" },
-    { value: 720, labelKey: "30DaysSession" },
-    { value: 2160, labelKey: "90DaysSession" },
-    { value: 4320, labelKey: "180DaysSession" }
-];
-
-// Password expiry options in days - will be translated in component
-const PASSWORD_EXPIRY_OPTIONS = [
-    { value: null, labelKey: "neverExpire" },
-    { value: 1, labelKey: "1Day" },
-    { value: 30, labelKey: "30Days" },
-    { value: 60, labelKey: "60Days" },
-    { value: 90, labelKey: "90Days" },
-    { value: 180, labelKey: "180Days" },
-    { value: 365, labelKey: "1Year" }
-];
-
 // Schema for general organization settings
 const GeneralFormSchema = z.object({
     name: z.string(),
-    subnet: z.string().optional(),
-    requireTwoFactor: z.boolean().optional(),
-    maxSessionLengthHours: z.number().nullable().optional(),
-    passwordExpiryDays: z.number().nullable().optional(),
-    settingsLogRetentionDaysRequest: z.number(),
-    settingsLogRetentionDaysAccess: z.number(),
-    settingsLogRetentionDaysAction: z.number()
+    subnet: z.string().optional()
 });
 
-type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
-
-const LOG_RETENTION_OPTIONS = [
-    { label: "logRetentionDisabled", value: 0 },
-    { label: "logRetention3Days", value: 3 },
-    { label: "logRetention7Days", value: 7 },
-    { label: "logRetention14Days", value: 14 },
-    { label: "logRetention30Days", value: 30 },
-    { label: "logRetention90Days", value: 90 },
-    ...(build != "saas"
-        ? [
-              { label: "logRetentionForever", value: -1 },
-              { label: "logRetentionEndOfFollowingYear", value: 9001 }
-          ]
-        : [])
-];
-
 export default function GeneralPage() {
     const { org } = useOrgContext();
     return (
         <SettingsContainer>
             <GeneralSectionForm org={org.org} />
-
-            <LogRetentionSectionForm org={org.org} />
-
-            {build !== "oss" && <SecuritySettingsSectionForm org={org.org} />}
             {build !== "saas" && <DeleteForm org={org.org} />}
         </SettingsContainer>
     );
@@ -340,637 +266,3 @@ function GeneralSectionForm({ org }: SectionFormProps) {
     );
 }
 
-function LogRetentionSectionForm({ org }: SectionFormProps) {
-    const form = useForm({
-        resolver: zodResolver(
-            GeneralFormSchema.pick({
-                settingsLogRetentionDaysRequest: true,
-                settingsLogRetentionDaysAccess: true,
-                settingsLogRetentionDaysAction: true
-            })
-        ),
-        defaultValues: {
-            settingsLogRetentionDaysRequest:
-                org.settingsLogRetentionDaysRequest ?? 15,
-            settingsLogRetentionDaysAccess:
-                org.settingsLogRetentionDaysAccess ?? 15,
-            settingsLogRetentionDaysAction:
-                org.settingsLogRetentionDaysAction ?? 15
-        },
-        mode: "onChange"
-    });
-
-    const router = useRouter();
-    const t = useTranslations();
-    const { isPaidUser, hasSaasSubscription } = usePaidStatus();
-
-    const [, formAction, loadingSave] = useActionState(performSave, null);
-    const api = createApiClient(useEnvContext());
-
-    async function performSave() {
-        const isValid = await form.trigger();
-        if (!isValid) return;
-
-        const data = form.getValues();
-
-        try {
-            const reqData = {
-                settingsLogRetentionDaysRequest:
-                    data.settingsLogRetentionDaysRequest,
-                settingsLogRetentionDaysAccess:
-                    data.settingsLogRetentionDaysAccess,
-                settingsLogRetentionDaysAction:
-                    data.settingsLogRetentionDaysAction
-            } as any;
-
-            // Update organization
-            await api.post(`/org/${org.orgId}`, reqData);
-
-            toast({
-                title: t("orgUpdated"),
-                description: t("orgUpdatedDescription")
-            });
-            router.refresh();
-        } catch (e) {
-            toast({
-                variant: "destructive",
-                title: t("orgErrorUpdate"),
-                description: formatAxiosError(e, t("orgErrorUpdateMessage"))
-            });
-        }
-    }
-
-    return (
-        <SettingsSection>
-            <SettingsSectionHeader>
-                <SettingsSectionTitle>{t("logRetention")}</SettingsSectionTitle>
-                <SettingsSectionDescription>
-                    {t("logRetentionDescription")}
-                </SettingsSectionDescription>
-            </SettingsSectionHeader>
-            <SettingsSectionBody>
-                <SettingsSectionForm>
-                    <Form {...form}>
-                        <form
-                            action={formAction}
-                            className="grid gap-4"
-                            id="org-log-retention-settings-form"
-                        >
-                            <FormField
-                                control={form.control}
-                                name="settingsLogRetentionDaysRequest"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormLabel>
-                                            {t("logRetentionRequestLabel")}
-                                        </FormLabel>
-                                        <FormControl>
-                                            <Select
-                                                value={field.value.toString()}
-                                                onValueChange={(value) =>
-                                                    field.onChange(
-                                                        parseInt(value, 10)
-                                                    )
-                                                }
-                                            >
-                                                <SelectTrigger>
-                                                    <SelectValue
-                                                        placeholder={t(
-                                                            "selectLogRetention"
-                                                        )}
-                                                    />
-                                                </SelectTrigger>
-                                                <SelectContent>
-                                                    {LOG_RETENTION_OPTIONS.filter(
-                                                        (option) => {
-                                                            if (
-                                                                hasSaasSubscription &&
-                                                                option.value >
-                                                                    30
-                                                            ) {
-                                                                return false;
-                                                            }
-                                                            return true;
-                                                        }
-                                                    ).map((option) => (
-                                                        <SelectItem
-                                                            key={option.value}
-                                                            value={option.value.toString()}
-                                                        >
-                                                            {t(option.label)}
-                                                        </SelectItem>
-                                                    ))}
-                                                </SelectContent>
-                                            </Select>
-                                        </FormControl>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
-
-                            {build !== "oss" && (
-                                <>
-                                    <PaidFeaturesAlert />
-
-                                    <FormField
-                                        control={form.control}
-                                        name="settingsLogRetentionDaysAccess"
-                                        render={({ field }) => {
-                                            const isDisabled = !isPaidUser;
-
-                                            return (
-                                                <FormItem>
-                                                    <FormLabel>
-                                                        {t(
-                                                            "logRetentionAccessLabel"
-                                                        )}
-                                                    </FormLabel>
-                                                    <FormControl>
-                                                        <Select
-                                                            value={field.value.toString()}
-                                                            onValueChange={(
-                                                                value
-                                                            ) => {
-                                                                if (
-                                                                    !isDisabled
-                                                                ) {
-                                                                    field.onChange(
-                                                                        parseInt(
-                                                                            value,
-                                                                            10
-                                                                        )
-                                                                    );
-                                                                }
-                                                            }}
-                                                            disabled={
-                                                                isDisabled
-                                                            }
-                                                        >
-                                                            <SelectTrigger>
-                                                                <SelectValue
-                                                                    placeholder={t(
-                                                                        "selectLogRetention"
-                                                                    )}
-                                                                />
-                                                            </SelectTrigger>
-                                                            <SelectContent>
-                                                                {LOG_RETENTION_OPTIONS.map(
-                                                                    (
-                                                                        option
-                                                                    ) => (
-                                                                        <SelectItem
-                                                                            key={
-                                                                                option.value
-                                                                            }
-                                                                            value={option.value.toString()}
-                                                                        >
-                                                                            {t(
-                                                                                option.label
-                                                                            )}
-                                                                        </SelectItem>
-                                                                    )
-                                                                )}
-                                                            </SelectContent>
-                                                        </Select>
-                                                    </FormControl>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            );
-                                        }}
-                                    />
-                                    <FormField
-                                        control={form.control}
-                                        name="settingsLogRetentionDaysAction"
-                                        render={({ field }) => {
-                                            const isDisabled = !isPaidUser;
-
-                                            return (
-                                                <FormItem>
-                                                    <FormLabel>
-                                                        {t(
-                                                            "logRetentionActionLabel"
-                                                        )}
-                                                    </FormLabel>
-                                                    <FormControl>
-                                                        <Select
-                                                            value={field.value.toString()}
-                                                            onValueChange={(
-                                                                value
-                                                            ) => {
-                                                                if (
-                                                                    !isDisabled
-                                                                ) {
-                                                                    field.onChange(
-                                                                        parseInt(
-                                                                            value,
-                                                                            10
-                                                                        )
-                                                                    );
-                                                                }
-                                                            }}
-                                                            disabled={
-                                                                isDisabled
-                                                            }
-                                                        >
-                                                            <SelectTrigger>
-                                                                <SelectValue
-                                                                    placeholder={t(
-                                                                        "selectLogRetention"
-                                                                    )}
-                                                                />
-                                                            </SelectTrigger>
-                                                            <SelectContent>
-                                                                {LOG_RETENTION_OPTIONS.map(
-                                                                    (
-                                                                        option
-                                                                    ) => (
-                                                                        <SelectItem
-                                                                            key={
-                                                                                option.value
-                                                                            }
-                                                                            value={option.value.toString()}
-                                                                        >
-                                                                            {t(
-                                                                                option.label
-                                                                            )}
-                                                                        </SelectItem>
-                                                                    )
-                                                                )}
-                                                            </SelectContent>
-                                                        </Select>
-                                                    </FormControl>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            );
-                                        }}
-                                    />
-                                </>
-                            )}
-                        </form>
-                    </Form>
-                </SettingsSectionForm>
-            </SettingsSectionBody>
-
-            <div className="flex justify-end gap-2 mt-4">
-                <Button
-                    type="submit"
-                    form="org-log-retention-settings-form"
-                    loading={loadingSave}
-                    disabled={loadingSave}
-                >
-                    {t("saveSettings")}
-                </Button>
-            </div>
-        </SettingsSection>
-    );
-}
-
-function SecuritySettingsSectionForm({ org }: SectionFormProps) {
-    const router = useRouter();
-    const form = useForm({
-        resolver: zodResolver(
-            GeneralFormSchema.pick({
-                requireTwoFactor: true,
-                maxSessionLengthHours: true,
-                passwordExpiryDays: true
-            })
-        ),
-        defaultValues: {
-            requireTwoFactor: org.requireTwoFactor || false,
-            maxSessionLengthHours: org.maxSessionLengthHours || null,
-            passwordExpiryDays: org.passwordExpiryDays || null
-        },
-        mode: "onChange"
-    });
-    const t = useTranslations();
-    const { isPaidUser } = usePaidStatus();
-
-    // Track initial security policy values
-    const initialSecurityValues = {
-        requireTwoFactor: org.requireTwoFactor || false,
-        maxSessionLengthHours: org.maxSessionLengthHours || null,
-        passwordExpiryDays: org.passwordExpiryDays || null
-    };
-
-    const [isSecurityPolicyConfirmOpen, setIsSecurityPolicyConfirmOpen] =
-        useState(false);
-
-    // Check if security policies have changed
-    const hasSecurityPolicyChanged = () => {
-        const currentValues = form.getValues();
-        return (
-            currentValues.requireTwoFactor !==
-                initialSecurityValues.requireTwoFactor ||
-            currentValues.maxSessionLengthHours !==
-                initialSecurityValues.maxSessionLengthHours ||
-            currentValues.passwordExpiryDays !==
-                initialSecurityValues.passwordExpiryDays
-        );
-    };
-
-    const [, formAction, loadingSave] = useActionState(onSubmit, null);
-    const api = createApiClient(useEnvContext());
-
-    const formRef = useRef<ComponentRef<"form">>(null);
-
-    async function onSubmit() {
-        // Check if security policies have changed
-        if (hasSecurityPolicyChanged()) {
-            setIsSecurityPolicyConfirmOpen(true);
-            return;
-        }
-
-        await performSave();
-    }
-
-    async function performSave() {
-        const isValid = await form.trigger();
-        if (!isValid) return;
-
-        const data = form.getValues();
-
-        try {
-            const reqData = {
-                requireTwoFactor: data.requireTwoFactor || false,
-                maxSessionLengthHours: data.maxSessionLengthHours,
-                passwordExpiryDays: data.passwordExpiryDays
-            } as any;
-
-            // Update organization
-            await api.post(`/org/${org.orgId}`, reqData);
-
-            toast({
-                title: t("orgUpdated"),
-                description: t("orgUpdatedDescription")
-            });
-            router.refresh();
-        } catch (e) {
-            toast({
-                variant: "destructive",
-                title: t("orgErrorUpdate"),
-                description: formatAxiosError(e, t("orgErrorUpdateMessage"))
-            });
-        }
-    }
-
-    return (
-        <>
-            <ConfirmDeleteDialog
-                open={isSecurityPolicyConfirmOpen}
-                setOpen={setIsSecurityPolicyConfirmOpen}
-                dialog={
-                    <div className="space-y-2">
-                        <p>{t("securityPolicyChangeDescription")}</p>
-                    </div>
-                }
-                buttonText={t("saveSettings")}
-                onConfirm={performSave}
-                string={t("securityPolicyChangeConfirmMessage")}
-                title={t("securityPolicyChangeWarning")}
-                warningText={t("securityPolicyChangeWarningText")}
-            />
-            <SettingsSection>
-                <SettingsSectionHeader>
-                    <SettingsSectionTitle>
-                        {t("securitySettings")}
-                    </SettingsSectionTitle>
-                    <SettingsSectionDescription>
-                        {t("securitySettingsDescription")}
-                    </SettingsSectionDescription>
-                </SettingsSectionHeader>
-                <SettingsSectionBody>
-                    <SettingsSectionForm>
-                        <Form {...form}>
-                            <form
-                                action={formAction}
-                                ref={formRef}
-                                id="security-settings-section-form"
-                                className="space-y-4"
-                            >
-                                <PaidFeaturesAlert />
-                                <FormField
-                                    control={form.control}
-                                    name="requireTwoFactor"
-                                    render={({ field }) => {
-                                        const isDisabled = !isPaidUser;
-
-                                        return (
-                                            <FormItem className="col-span-2">
-                                                <div className="flex items-center gap-2">
-                                                    <FormControl>
-                                                        <SwitchInput
-                                                            id="require-two-factor"
-                                                            defaultChecked={
-                                                                field.value ||
-                                                                false
-                                                            }
-                                                            label={t(
-                                                                "requireTwoFactorForAllUsers"
-                                                            )}
-                                                            disabled={
-                                                                isDisabled
-                                                            }
-                                                            onCheckedChange={(
-                                                                val
-                                                            ) => {
-                                                                if (
-                                                                    !isDisabled
-                                                                ) {
-                                                                    form.setValue(
-                                                                        "requireTwoFactor",
-                                                                        val
-                                                                    );
-                                                                }
-                                                            }}
-                                                        />
-                                                    </FormControl>
-                                                </div>
-                                                <FormMessage />
-                                                <FormDescription>
-                                                    {t(
-                                                        "requireTwoFactorDescription"
-                                                    )}
-                                                </FormDescription>
-                                            </FormItem>
-                                        );
-                                    }}
-                                />
-                                <FormField
-                                    control={form.control}
-                                    name="maxSessionLengthHours"
-                                    render={({ field }) => {
-                                        const isDisabled = !isPaidUser;
-
-                                        return (
-                                            <FormItem className="col-span-2">
-                                                <FormLabel>
-                                                    {t("maxSessionLength")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Select
-                                                        value={
-                                                            field.value?.toString() ||
-                                                            "null"
-                                                        }
-                                                        onValueChange={(
-                                                            value
-                                                        ) => {
-                                                            if (!isDisabled) {
-                                                                const numValue =
-                                                                    value ===
-                                                                    "null"
-                                                                        ? null
-                                                                        : parseInt(
-                                                                              value,
-                                                                              10
-                                                                          );
-                                                                form.setValue(
-                                                                    "maxSessionLengthHours",
-                                                                    numValue
-                                                                );
-                                                            }
-                                                        }}
-                                                        disabled={isDisabled}
-                                                    >
-                                                        <SelectTrigger>
-                                                            <SelectValue
-                                                                placeholder={t(
-                                                                    "selectSessionLength"
-                                                                )}
-                                                            />
-                                                        </SelectTrigger>
-                                                        <SelectContent>
-                                                            {SESSION_LENGTH_OPTIONS.map(
-                                                                (option) => (
-                                                                    <SelectItem
-                                                                        key={
-                                                                            option.value ===
-                                                                            null
-                                                                                ? "null"
-                                                                                : option.value.toString()
-                                                                        }
-                                                                        value={
-                                                                            option.value ===
-                                                                            null
-                                                                                ? "null"
-                                                                                : option.value.toString()
-                                                                        }
-                                                                    >
-                                                                        {t(
-                                                                            option.labelKey
-                                                                        )}
-                                                                    </SelectItem>
-                                                                )
-                                                            )}
-                                                        </SelectContent>
-                                                    </Select>
-                                                </FormControl>
-                                                <FormMessage />
-                                                <FormDescription>
-                                                    {t(
-                                                        "maxSessionLengthDescription"
-                                                    )}
-                                                </FormDescription>
-                                            </FormItem>
-                                        );
-                                    }}
-                                />
-                                <FormField
-                                    control={form.control}
-                                    name="passwordExpiryDays"
-                                    render={({ field }) => {
-                                        const isDisabled = !isPaidUser;
-
-                                        return (
-                                            <FormItem className="col-span-2">
-                                                <FormLabel>
-                                                    {t("passwordExpiryDays")}
-                                                </FormLabel>
-                                                <FormControl>
-                                                    <Select
-                                                        value={
-                                                            field.value?.toString() ||
-                                                            "null"
-                                                        }
-                                                        onValueChange={(
-                                                            value
-                                                        ) => {
-                                                            if (!isDisabled) {
-                                                                const numValue =
-                                                                    value ===
-                                                                    "null"
-                                                                        ? null
-                                                                        : parseInt(
-                                                                              value,
-                                                                              10
-                                                                          );
-                                                                form.setValue(
-                                                                    "passwordExpiryDays",
-                                                                    numValue
-                                                                );
-                                                            }
-                                                        }}
-                                                        disabled={isDisabled}
-                                                    >
-                                                        <SelectTrigger>
-                                                            <SelectValue
-                                                                placeholder={t(
-                                                                    "selectPasswordExpiry"
-                                                                )}
-                                                            />
-                                                        </SelectTrigger>
-                                                        <SelectContent>
-                                                            {PASSWORD_EXPIRY_OPTIONS.map(
-                                                                (option) => (
-                                                                    <SelectItem
-                                                                        key={
-                                                                            option.value ===
-                                                                            null
-                                                                                ? "null"
-                                                                                : option.value.toString()
-                                                                        }
-                                                                        value={
-                                                                            option.value ===
-                                                                            null
-                                                                                ? "null"
-                                                                                : option.value.toString()
-                                                                        }
-                                                                    >
-                                                                        {t(
-                                                                            option.labelKey
-                                                                        )}
-                                                                    </SelectItem>
-                                                                )
-                                                            )}
-                                                        </SelectContent>
-                                                    </Select>
-                                                </FormControl>
-                                                <FormDescription>
-                                                    <FormMessage />
-                                                    {t(
-                                                        "editPasswordExpiryDescription"
-                                                    )}
-                                                </FormDescription>
-                                            </FormItem>
-                                        );
-                                    }}
-                                />
-                            </form>
-                        </Form>
-                    </SettingsSectionForm>
-                </SettingsSectionBody>
-
-                <div className="flex justify-end gap-2 mt-4">
-                    <Button
-                        type="submit"
-                        form="security-settings-section-form"
-                        loading={loadingSave}
-                        disabled={loadingSave}
-                    >
-                        {t("saveSettings")}
-                    </Button>
-                </div>
-            </SettingsSection>
-        </>
-    );
-}

src/app/[orgId]/settings/general/security/page.tsx

@@ -0,0 +1,751 @@
+"use client";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { Button } from "@app/components/ui/button";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { toast } from "@app/hooks/useToast";
+import {
+    useState,
+    useRef,
+    useActionState,
+    type ComponentRef
+} from "react";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
+
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { formatAxiosError } from "@app/lib/api";
+import { useRouter } from "next/navigation";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSectionDescription,
+    SettingsSectionBody,
+    SettingsSectionForm
+} from "@app/components/Settings";
+import { useTranslations } from "next-intl";
+import { build } from "@server/build";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import type { OrgContextType } from "@app/contexts/orgContext";
+
+// Session length options in hours
+const SESSION_LENGTH_OPTIONS = [
+    { value: null, labelKey: "unenforced" },
+    { value: 1, labelKey: "1Hour" },
+    { value: 3, labelKey: "3Hours" },
+    { value: 6, labelKey: "6Hours" },
+    { value: 12, labelKey: "12Hours" },
+    { value: 24, labelKey: "1DaySession" },
+    { value: 72, labelKey: "3Days" },
+    { value: 168, labelKey: "7Days" },
+    { value: 336, labelKey: "14Days" },
+    { value: 720, labelKey: "30DaysSession" },
+    { value: 2160, labelKey: "90DaysSession" },
+    { value: 4320, labelKey: "180DaysSession" }
+];
+
+// Password expiry options in days - will be translated in component
+const PASSWORD_EXPIRY_OPTIONS = [
+    { value: null, labelKey: "neverExpire" },
+    { value: 1, labelKey: "1Day" },
+    { value: 30, labelKey: "30Days" },
+    { value: 60, labelKey: "60Days" },
+    { value: 90, labelKey: "90Days" },
+    { value: 180, labelKey: "180Days" },
+    { value: 365, labelKey: "1Year" }
+];
+
+// Schema for security organization settings
+const SecurityFormSchema = z.object({
+    requireTwoFactor: z.boolean().optional(),
+    maxSessionLengthHours: z.number().nullable().optional(),
+    passwordExpiryDays: z.number().nullable().optional(),
+    settingsLogRetentionDaysRequest: z.number(),
+    settingsLogRetentionDaysAccess: z.number(),
+    settingsLogRetentionDaysAction: z.number()
+});
+
+const LOG_RETENTION_OPTIONS = [
+    { label: "logRetentionDisabled", value: 0 },
+    { label: "logRetention3Days", value: 3 },
+    { label: "logRetention7Days", value: 7 },
+    { label: "logRetention14Days", value: 14 },
+    { label: "logRetention30Days", value: 30 },
+    { label: "logRetention90Days", value: 90 },
+    ...(build != "saas"
+        ? [
+              { label: "logRetentionForever", value: -1 },
+              { label: "logRetentionEndOfFollowingYear", value: 9001 }
+          ]
+        : [])
+];
+
+type SectionFormProps = {
+    org: OrgContextType["org"]["org"];
+};
+
+export default function SecurityPage() {
+    const { org } = useOrgContext();
+    return (
+        <SettingsContainer>
+            <LogRetentionSectionForm org={org.org} />
+            {build !== "oss" && <SecuritySettingsSectionForm org={org.org} />}
+        </SettingsContainer>
+    );
+}
+
+function LogRetentionSectionForm({ org }: SectionFormProps) {
+    const form = useForm({
+        resolver: zodResolver(
+            SecurityFormSchema.pick({
+                settingsLogRetentionDaysRequest: true,
+                settingsLogRetentionDaysAccess: true,
+                settingsLogRetentionDaysAction: true
+            })
+        ),
+        defaultValues: {
+            settingsLogRetentionDaysRequest:
+                org.settingsLogRetentionDaysRequest ?? 15,
+            settingsLogRetentionDaysAccess:
+                org.settingsLogRetentionDaysAccess ?? 15,
+            settingsLogRetentionDaysAction:
+                org.settingsLogRetentionDaysAction ?? 15
+        },
+        mode: "onChange"
+    });
+
+    const router = useRouter();
+    const t = useTranslations();
+    const { isPaidUser, hasSaasSubscription } = usePaidStatus();
+
+    const [, formAction, loadingSave] = useActionState(performSave, null);
+    const api = createApiClient(useEnvContext());
+
+    async function performSave() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+
+        try {
+            const reqData = {
+                settingsLogRetentionDaysRequest:
+                    data.settingsLogRetentionDaysRequest,
+                settingsLogRetentionDaysAccess:
+                    data.settingsLogRetentionDaysAccess,
+                settingsLogRetentionDaysAction:
+                    data.settingsLogRetentionDaysAction
+            } as any;
+
+            // Update organization
+            await api.post(`/org/${org.orgId}`, reqData);
+
+            toast({
+                title: t("orgUpdated"),
+                description: t("orgUpdatedDescription")
+            });
+            router.refresh();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("orgErrorUpdate"),
+                description: formatAxiosError(e, t("orgErrorUpdateMessage"))
+            });
+        }
+    }
+
+    return (
+        <SettingsSection>
+            <SettingsSectionHeader>
+                <SettingsSectionTitle>{t("logRetention")}</SettingsSectionTitle>
+                <SettingsSectionDescription>
+                    {t("logRetentionDescription")}
+                </SettingsSectionDescription>
+            </SettingsSectionHeader>
+            <SettingsSectionBody>
+                <SettingsSectionForm>
+                    <Form {...form}>
+                        <form
+                            action={formAction}
+                            className="grid gap-4"
+                            id="org-log-retention-settings-form"
+                        >
+                            <FormField
+                                control={form.control}
+                                name="settingsLogRetentionDaysRequest"
+                                render={({ field }) => (
+                                    <FormItem>
+                                        <FormLabel>
+                                            {t("logRetentionRequestLabel")}
+                                        </FormLabel>
+                                        <FormControl>
+                                            <Select
+                                                value={field.value.toString()}
+                                                onValueChange={(value) =>
+                                                    field.onChange(
+                                                        parseInt(value, 10)
+                                                    )
+                                                }
+                                            >
+                                                <SelectTrigger>
+                                                    <SelectValue
+                                                        placeholder={t(
+                                                            "selectLogRetention"
+                                                        )}
+                                                    />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {LOG_RETENTION_OPTIONS.filter(
+                                                        (option) => {
+                                                            if (
+                                                                hasSaasSubscription &&
+                                                                option.value >
+                                                                    30
+                                                            ) {
+                                                                return false;
+                                                            }
+                                                            return true;
+                                                        }
+                                                    ).map((option) => (
+                                                        <SelectItem
+                                                            key={option.value}
+                                                            value={option.value.toString()}
+                                                        >
+                                                            {t(option.label)}
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectContent>
+                                            </Select>
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            {build !== "oss" && (
+                                <>
+                                    <PaidFeaturesAlert />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="settingsLogRetentionDaysAccess"
+                                        render={({ field }) => {
+                                            const isDisabled = !isPaidUser;
+
+                                            return (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t(
+                                                            "logRetentionAccessLabel"
+                                                        )}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Select
+                                                            value={field.value.toString()}
+                                                            onValueChange={(
+                                                                value
+                                                            ) => {
+                                                                if (
+                                                                    !isDisabled
+                                                                ) {
+                                                                    field.onChange(
+                                                                        parseInt(
+                                                                            value,
+                                                                            10
+                                                                        )
+                                                                    );
+                                                                }
+                                                            }}
+                                                            disabled={
+                                                                isDisabled
+                                                            }
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue
+                                                                    placeholder={t(
+                                                                        "selectLogRetention"
+                                                                    )}
+                                                                />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {LOG_RETENTION_OPTIONS.map(
+                                                                    (
+                                                                        option
+                                                                    ) => (
+                                                                        <SelectItem
+                                                                            key={
+                                                                                option.value
+                                                                            }
+                                                                            value={option.value.toString()}
+                                                                        >
+                                                                            {t(
+                                                                                option.label
+                                                                            )}
+                                                                        </SelectItem>
+                                                                    )
+                                                                )}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="settingsLogRetentionDaysAction"
+                                        render={({ field }) => {
+                                            const isDisabled = !isPaidUser;
+
+                                            return (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t(
+                                                            "logRetentionActionLabel"
+                                                        )}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Select
+                                                            value={field.value.toString()}
+                                                            onValueChange={(
+                                                                value
+                                                            ) => {
+                                                                if (
+                                                                    !isDisabled
+                                                                ) {
+                                                                    field.onChange(
+                                                                        parseInt(
+                                                                            value,
+                                                                            10
+                                                                        )
+                                                                    );
+                                                                }
+                                                            }}
+                                                            disabled={
+                                                                isDisabled
+                                                            }
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue
+                                                                    placeholder={t(
+                                                                        "selectLogRetention"
+                                                                    )}
+                                                                />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {LOG_RETENTION_OPTIONS.map(
+                                                                    (
+                                                                        option
+                                                                    ) => (
+                                                                        <SelectItem
+                                                                            key={
+                                                                                option.value
+                                                                            }
+                                                                            value={option.value.toString()}
+                                                                        >
+                                                                            {t(
+                                                                                option.label
+                                                                            )}
+                                                                        </SelectItem>
+                                                                    )
+                                                                )}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                </>
+                            )}
+                        </form>
+                    </Form>
+                </SettingsSectionForm>
+            </SettingsSectionBody>
+
+            <div className="flex justify-end gap-2 mt-4">
+                <Button
+                    type="submit"
+                    form="org-log-retention-settings-form"
+                    loading={loadingSave}
+                    disabled={loadingSave}
+                >
+                    {t("saveSettings")}
+                </Button>
+            </div>
+        </SettingsSection>
+    );
+}
+
+function SecuritySettingsSectionForm({ org }: SectionFormProps) {
+    const router = useRouter();
+    const form = useForm({
+        resolver: zodResolver(
+            SecurityFormSchema.pick({
+                requireTwoFactor: true,
+                maxSessionLengthHours: true,
+                passwordExpiryDays: true
+            })
+        ),
+        defaultValues: {
+            requireTwoFactor: org.requireTwoFactor || false,
+            maxSessionLengthHours: org.maxSessionLengthHours || null,
+            passwordExpiryDays: org.passwordExpiryDays || null
+        },
+        mode: "onChange"
+    });
+    const t = useTranslations();
+    const { isPaidUser } = usePaidStatus();
+
+    // Track initial security policy values
+    const initialSecurityValues = {
+        requireTwoFactor: org.requireTwoFactor || false,
+        maxSessionLengthHours: org.maxSessionLengthHours || null,
+        passwordExpiryDays: org.passwordExpiryDays || null
+    };
+
+    const [isSecurityPolicyConfirmOpen, setIsSecurityPolicyConfirmOpen] =
+        useState(false);
+
+    // Check if security policies have changed
+    const hasSecurityPolicyChanged = () => {
+        const currentValues = form.getValues();
+        return (
+            currentValues.requireTwoFactor !==
+                initialSecurityValues.requireTwoFactor ||
+            currentValues.maxSessionLengthHours !==
+                initialSecurityValues.maxSessionLengthHours ||
+            currentValues.passwordExpiryDays !==
+                initialSecurityValues.passwordExpiryDays
+        );
+    };
+
+    const [, formAction, loadingSave] = useActionState(onSubmit, null);
+    const api = createApiClient(useEnvContext());
+
+    const formRef = useRef<ComponentRef<"form">>(null);
+
+    async function onSubmit() {
+        // Check if security policies have changed
+        if (hasSecurityPolicyChanged()) {
+            setIsSecurityPolicyConfirmOpen(true);
+            return;
+        }
+
+        await performSave();
+    }
+
+    async function performSave() {
+        const isValid = await form.trigger();
+        if (!isValid) return;
+
+        const data = form.getValues();
+
+        try {
+            const reqData = {
+                requireTwoFactor: data.requireTwoFactor || false,
+                maxSessionLengthHours: data.maxSessionLengthHours,
+                passwordExpiryDays: data.passwordExpiryDays
+            } as any;
+
+            // Update organization
+            await api.post(`/org/${org.orgId}`, reqData);
+
+            toast({
+                title: t("orgUpdated"),
+                description: t("orgUpdatedDescription")
+            });
+            router.refresh();
+        } catch (e) {
+            toast({
+                variant: "destructive",
+                title: t("orgErrorUpdate"),
+                description: formatAxiosError(e, t("orgErrorUpdateMessage"))
+            });
+        }
+    }
+
+    return (
+        <>
+            <ConfirmDeleteDialog
+                open={isSecurityPolicyConfirmOpen}
+                setOpen={setIsSecurityPolicyConfirmOpen}
+                dialog={
+                    <div className="space-y-2">
+                        <p>{t("securityPolicyChangeDescription")}</p>
+                    </div>
+                }
+                buttonText={t("saveSettings")}
+                onConfirm={performSave}
+                string={t("securityPolicyChangeConfirmMessage")}
+                title={t("securityPolicyChangeWarning")}
+                warningText={t("securityPolicyChangeWarningText")}
+            />
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("securitySettings")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("securitySettingsDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <SettingsSectionForm>
+                        <Form {...form}>
+                            <form
+                                action={formAction}
+                                ref={formRef}
+                                id="security-settings-section-form"
+                                className="space-y-4"
+                            >
+                                <PaidFeaturesAlert />
+                                <FormField
+                                    control={form.control}
+                                    name="requireTwoFactor"
+                                    render={({ field }) => {
+                                        const isDisabled = !isPaidUser;
+
+                                        return (
+                                            <FormItem className="col-span-2">
+                                                <div className="flex items-center gap-2">
+                                                    <FormControl>
+                                                        <SwitchInput
+                                                            id="require-two-factor"
+                                                            defaultChecked={
+                                                                field.value ||
+                                                                false
+                                                            }
+                                                            label={t(
+                                                                "requireTwoFactorForAllUsers"
+                                                            )}
+                                                            disabled={
+                                                                isDisabled
+                                                            }
+                                                            onCheckedChange={(
+                                                                val
+                                                            ) => {
+                                                                if (
+                                                                    !isDisabled
+                                                                ) {
+                                                                    form.setValue(
+                                                                        "requireTwoFactor",
+                                                                        val
+                                                                    );
+                                                                }
+                                                            }}
+                                                        />
+                                                    </FormControl>
+                                                </div>
+                                                <FormMessage />
+                                                <FormDescription>
+                                                    {t(
+                                                        "requireTwoFactorDescription"
+                                                    )}
+                                                </FormDescription>
+                                            </FormItem>
+                                        );
+                                    }}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="maxSessionLengthHours"
+                                    render={({ field }) => {
+                                        const isDisabled = !isPaidUser;
+
+                                        return (
+                                            <FormItem className="col-span-2">
+                                                <FormLabel>
+                                                    {t("maxSessionLength")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Select
+                                                        value={
+                                                            field.value?.toString() ||
+                                                            "null"
+                                                        }
+                                                        onValueChange={(
+                                                            value
+                                                        ) => {
+                                                            if (!isDisabled) {
+                                                                const numValue =
+                                                                    value ===
+                                                                    "null"
+                                                                        ? null
+                                                                        : parseInt(
+                                                                              value,
+                                                                              10
+                                                                          );
+                                                                form.setValue(
+                                                                    "maxSessionLengthHours",
+                                                                    numValue
+                                                                );
+                                                            }
+                                                        }}
+                                                        disabled={isDisabled}
+                                                    >
+                                                        <SelectTrigger>
+                                                            <SelectValue
+                                                                placeholder={t(
+                                                                    "selectSessionLength"
+                                                                )}
+                                                            />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            {SESSION_LENGTH_OPTIONS.map(
+                                                                (option) => (
+                                                                    <SelectItem
+                                                                        key={
+                                                                            option.value ===
+                                                                            null
+                                                                                ? "null"
+                                                                                : option.value.toString()
+                                                                        }
+                                                                        value={
+                                                                            option.value ===
+                                                                            null
+                                                                                ? "null"
+                                                                                : option.value.toString()
+                                                                        }
+                                                                    >
+                                                                        {t(
+                                                                            option.labelKey
+                                                                        )}
+                                                                    </SelectItem>
+                                                                )
+                                                            )}
+                                                        </SelectContent>
+                                                    </Select>
+                                                </FormControl>
+                                                <FormMessage />
+                                                <FormDescription>
+                                                    {t(
+                                                        "maxSessionLengthDescription"
+                                                    )}
+                                                </FormDescription>
+                                            </FormItem>
+                                        );
+                                    }}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="passwordExpiryDays"
+                                    render={({ field }) => {
+                                        const isDisabled = !isPaidUser;
+
+                                        return (
+                                            <FormItem className="col-span-2">
+                                                <FormLabel>
+                                                    {t("passwordExpiryDays")}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Select
+                                                        value={
+                                                            field.value?.toString() ||
+                                                            "null"
+                                                        }
+                                                        onValueChange={(
+                                                            value
+                                                        ) => {
+                                                            if (!isDisabled) {
+                                                                const numValue =
+                                                                    value ===
+                                                                    "null"
+                                                                        ? null
+                                                                        : parseInt(
+                                                                              value,
+                                                                              10
+                                                                          );
+                                                                form.setValue(
+                                                                    "passwordExpiryDays",
+                                                                    numValue
+                                                                );
+                                                            }
+                                                        }}
+                                                        disabled={isDisabled}
+                                                    >
+                                                        <SelectTrigger>
+                                                            <SelectValue
+                                                                placeholder={t(
+                                                                    "selectPasswordExpiry"
+                                                                )}
+                                                            />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            {PASSWORD_EXPIRY_OPTIONS.map(
+                                                                (option) => (
+                                                                    <SelectItem
+                                                                        key={
+                                                                            option.value ===
+                                                                            null
+                                                                                ? "null"
+                                                                                : option.value.toString()
+                                                                        }
+                                                                        value={
+                                                                            option.value ===
+                                                                            null
+                                                                                ? "null"
+                                                                                : option.value.toString()
+                                                                        }
+                                                                    >
+                                                                        {t(
+                                                                            option.labelKey
+                                                                        )}
+                                                                    </SelectItem>
+                                                                )
+                                                            )}
+                                                        </SelectContent>
+                                                    </Select>
+                                                </FormControl>
+                                                <FormDescription>
+                                                    <FormMessage />
+                                                    {t(
+                                                        "editPasswordExpiryDescription"
+                                                    )}
+                                                </FormDescription>
+                                            </FormItem>
+                                        );
+                                    }}
+                                />
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+
+                <div className="flex justify-end gap-2 mt-4">
+                    <Button
+                        type="submit"
+                        form="security-settings-section-form"
+                        loading={loadingSave}
+                        disabled={loadingSave}
+                    >
+                        {t("saveSettings")}
+                    </Button>
+                </div>
+            </SettingsSection>
+        </>
+    );
+}

src/app/[orgId]/settings/sites/create/page.tsx

@@ -728,26 +728,28 @@ WantedBy=default.target`
                                                 </FormItem>
                                             )}
                                         />
-                                        <div className="flex items-center justify-end md:col-start-2">
-                                            <Button
-                                                type="button"
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setShowAdvancedSettings(
-                                                        !showAdvancedSettings
-                                                    )
-                                                }
-                                                className="flex items-center gap-2"
-                                            >
-                                                {showAdvancedSettings ? (
-                                                    <ChevronUp className="h-4 w-4" />
-                                                ) : (
-                                                    <ChevronDown className="h-4 w-4" />
-                                                )}
-                                                {t("advancedSettings")}
-                                            </Button>
-                                        </div>
+                                        {form.watch("method") === "newt" && (
+                                            <div className="flex items-center justify-end md:col-start-2">
+                                                <Button
+                                                    type="button"
+                                                    variant="ghost"
+                                                    size="sm"
+                                                    onClick={() =>
+                                                        setShowAdvancedSettings(
+                                                            !showAdvancedSettings
+                                                        )
+                                                    }
+                                                    className="flex items-center gap-2"
+                                                >
+                                                    {showAdvancedSettings ? (
+                                                        <ChevronUp className="h-4 w-4" />
+                                                    ) : (
+                                                        <ChevronDown className="h-4 w-4" />
+                                                    )}
+                                                    {t("advancedSettings")}
+                                                </Button>
+                                            </div>
+                                        )}
                                         {form.watch("method") === "newt" &&
                                             showAdvancedSettings && (
                                                 <FormField

src/app/auth/login/device/success/page.tsx

@@ -18,8 +18,8 @@ export default function DeviceAuthSuccessPage() {
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     useEffect(() => {
         // Detect if we're on iOS or Android
@@ -82,4 +82,4 @@ export default function DeviceAuthSuccessPage() {
             </p>
         </>
     );
-}
+}

src/components/ActionBanner.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import React, { type ReactNode } from "react";
+import { Card, CardContent } from "@app/components/ui/card";
+import { Button } from "@app/components/ui/button";
+import { cn } from "@app/lib/cn";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const actionBannerVariants = cva(
+    "mb-6 relative overflow-hidden",
+    {
+        variants: {
+            variant: {
+                warning: "border-yellow-500/30 bg-gradient-to-br from-yellow-500/10 via-background to-background",
+                info: "border-blue-500/30 bg-gradient-to-br from-blue-500/10 via-background to-background",
+                success: "border-green-500/30 bg-gradient-to-br from-green-500/10 via-background to-background",
+                destructive: "border-red-500/30 bg-gradient-to-br from-red-500/10 via-background to-background",
+                default: "border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background"
+            }
+        },
+        defaultVariants: {
+            variant: "default"
+        }
+    }
+);
+
+const titleVariants = "text-lg font-semibold flex items-center gap-2";
+
+const iconVariants = cva(
+    "w-5 h-5",
+    {
+        variants: {
+            variant: {
+                warning: "text-yellow-600 dark:text-yellow-500",
+                info: "text-blue-600 dark:text-blue-500",
+                success: "text-green-600 dark:text-green-500",
+                destructive: "text-red-600 dark:text-red-500",
+                default: "text-primary"
+            }
+        },
+        defaultVariants: {
+            variant: "default"
+        }
+    }
+);
+
+type ActionBannerProps = {
+    title: string;
+    titleIcon?: ReactNode;
+    description: string;
+    actions?: ReactNode;
+    className?: string;
+} & VariantProps<typeof actionBannerVariants>;
+
+export function ActionBanner({
+    title,
+    titleIcon,
+    description,
+    actions,
+    variant = "default",
+    className
+}: ActionBannerProps) {
+    return (
+        <Card className={cn(actionBannerVariants({ variant }), className)}>
+            <CardContent className="p-6">
+                <div className="flex flex-col lg:flex-row lg:items-center gap-6">
+                    <div className="flex-1 space-y-2 min-w-0">
+                        <h3 className={titleVariants}>
+                            {titleIcon && (
+                                <span className={cn(iconVariants({ variant }))}>
+                                    {titleIcon}
+                                </span>
+                            )}
+                            {title}
+                        </h3>
+                        <p className="text-sm text-muted-foreground max-w-4xl">
+                            {description}
+                        </p>
+                    </div>
+                    {actions && (
+                        <div className="flex flex-wrap gap-3 lg:shrink-0 lg:justify-end">
+                            {actions}
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default ActionBanner;

src/components/ClientInfoCard.tsx

@@ -19,7 +19,11 @@ export default function SiteInfoCard({}: ClientInfoCardProps) {
     return (
         <Alert>
             <AlertDescription>
-                <InfoSections cols={3}>
+                <InfoSections cols={4}>
+                    <InfoSection>
+                        <InfoSectionTitle>{t("name")}</InfoSectionTitle>
+                        <InfoSectionContent>{client.name}</InfoSectionContent>
+                    </InfoSection>
                     <InfoSection>
                         <InfoSectionTitle>{t("identifier")}</InfoSectionTitle>
                         <InfoSectionContent>{client.niceId}</InfoSectionContent>

src/components/CreateRoleForm.tsx

@@ -161,7 +161,7 @@ export default function CreateRoleForm({
                                     )}
                                 />
                                 {build !== "oss" && (
-                                    <div className="pt-3">
+                                    <div>
                                         <PaidFeaturesAlert />
 
                                         <FormField

src/components/Credenza.tsx

@@ -166,7 +166,7 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
     return (
         <CredenzaFooter
             className={cn(
-                "mt-8 md:mt-0 -mx-6 px-6 py-4 border-t border-border",
+                "mt-8 md:mt-0 -mx-6 -mb-4 px-6 py-4 border-t border-border",
                 className
             )}
             {...props}

src/components/DashboardLoginForm.tsx

@@ -57,8 +57,8 @@ export default function DashboardLoginForm({
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     return (
         <Card className="w-full max-w-md">

src/components/DeviceLoginForm.tsx

@@ -195,8 +195,8 @@ export default function DeviceLoginForm({
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     function onCancel() {
         setMetadata(null);

src/components/EditRoleForm.tsx

@@ -169,7 +169,7 @@ export default function EditRoleForm({
                                     )}
                                 />
                                 {build !== "oss" && (
-                                    <div className="pt-3">
+                                    <div>
                                         <PaidFeaturesAlert />
 
                                         <FormField

src/components/InfoSection.tsx

@@ -11,7 +11,7 @@ export function InfoSections({
 }) {
     return (
         <div
-            className={`grid md:grid-cols-(--columns) md:gap-4 gap-2 md:items-start grid-cols-1`}
+            className={`grid grid-cols-2 md:grid-cols-(--columns) md:gap-4 gap-2 md:items-start`}
             style={{
                 // @ts-expect-error dynamic props don't work with tailwind, but we can set the
                 // value of a CSS variable at runtime and tailwind will just reuse that value

src/components/LoginCardHeader.tsx

@@ -17,8 +17,8 @@ export default function LoginCardHeader({ subtitle }: LoginCardHeaderProps) {
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     return (
         <CardHeader className="border-b">

src/components/MachineClientsTable.tsx

@@ -59,7 +59,6 @@ export default function MachineClientsTable({
     const t = useTranslations();
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
     const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
         null
     );
@@ -152,8 +151,6 @@ export default function MachineClientsTable({
             .then(() => {
                 startTransition(() => {
                     router.refresh();
-                    setIsBlockModalOpen(false);
-                    setSelectedClient(null);
                 });
             });
     };
@@ -421,8 +418,7 @@ export default function MachineClientsTable({
                                             if (clientRow.blocked) {
                                                 unblockClient(clientRow.id);
                                             } else {
-                                                setSelectedClient(clientRow);
-                                                setIsBlockModalOpen(true);
+                                                blockClient(clientRow.id);
                                             }
                                         }}
                                     >
@@ -482,28 +478,6 @@ export default function MachineClientsTable({
                     title="Delete Client"
                 />
             )}
-            {selectedClient && (
-                <ConfirmDeleteDialog
-                    open={isBlockModalOpen}
-                    setOpen={(val) => {
-                        setIsBlockModalOpen(val);
-                        if (!val) {
-                            setSelectedClient(null);
-                        }
-                    }}
-                    dialog={
-                        <div className="space-y-2">
-                            <p>{t("blockClientQuestion")}</p>
-                            <p>{t("blockClientMessage")}</p>
-                        </div>
-                    }
-                    buttonText={t("blockClientConfirm")}
-                    onConfirm={async () => blockClient(selectedClient!.id)}
-                    string={selectedClient.name}
-                    title={t("blockClient")}
-                />
-            )}
-
             <DataTable
                 columns={columns}
                 data={machineClients || []}

src/components/OrgSelectionForm.tsx

@@ -42,8 +42,8 @@ export function OrgSelectionForm() {
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();

src/components/SignupForm.tsx

@@ -201,8 +201,8 @@ export default function SignupForm({
         ? env.branding.logo?.authPage?.width || 175
         : 175;
     const logoHeight = isUnlocked()
-        ? env.branding.logo?.authPage?.height || 58
-        : 58;
+        ? env.branding.logo?.authPage?.height || 44
+        : 44;
 
     const showOrgBanner = fromSmartLogin && (build === "saas" || env.flags.useOrgOnlyIdp);
     const orgBannerHref = redirect

src/components/UserDevicesTable.tsx

@@ -27,7 +27,7 @@ import ClientDownloadBanner from "./ClientDownloadBanner";
 import { Badge } from "./ui/badge";
 import { build } from "@server/build";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { t } from "@faker-js/faker/dist/airline-DF6RqYmq";
+import { InfoPopup } from "@app/components/ui/info-popup";
 
 export type ClientRow = {
     id: number;
@@ -48,6 +48,16 @@ export type ClientRow = {
     approvalState: "approved" | "pending" | "denied" | null;
     archived?: boolean;
     blocked?: boolean;
+    fingerprint?: {
+        platform: string | null;
+        osVersion: string | null;
+        kernelVersion: string | null;
+        arch: string | null;
+        deviceModel: string | null;
+        serialNumber: string | null;
+        username: string | null;
+        hostname: string | null;
+    } | null;
 };
 
 type ClientTableProps = {
@@ -55,12 +65,57 @@ type ClientTableProps = {
     orgId: string;
 };
 
+function formatPlatform(platform: string | null | undefined): string {
+    if (!platform) return "-";
+    const platformMap: Record<string, string> = {
+        macos: "macOS",
+        windows: "Windows",
+        linux: "Linux",
+        ios: "iOS",
+        android: "Android",
+        unknown: "Unknown"
+    };
+    return platformMap[platform.toLowerCase()] || platform;
+}
+
 export default function UserDevicesTable({ userClients }: ClientTableProps) {
     const router = useRouter();
     const t = useTranslations();
 
+    const formatFingerprintInfo = (
+        fingerprint: ClientRow["fingerprint"]
+    ): string => {
+        if (!fingerprint) return "";
+        const parts: string[] = [];
+
+        if (fingerprint.platform) {
+            parts.push(
+                `${t("platform")}: ${formatPlatform(fingerprint.platform)}`
+            );
+        }
+        if (fingerprint.deviceModel) {
+            parts.push(`${t("deviceModel")}: ${fingerprint.deviceModel}`);
+        }
+        if (fingerprint.osVersion) {
+            parts.push(`${t("osVersion")}: ${fingerprint.osVersion}`);
+        }
+        if (fingerprint.arch) {
+            parts.push(`${t("architecture")}: ${fingerprint.arch}`);
+        }
+        if (fingerprint.hostname) {
+            parts.push(`${t("hostname")}: ${fingerprint.hostname}`);
+        }
+        if (fingerprint.username) {
+            parts.push(`${t("username")}: ${fingerprint.username}`);
+        }
+        if (fingerprint.serialNumber) {
+            parts.push(`${t("serialNumber")}: ${fingerprint.serialNumber}`);
+        }
+
+        return parts.join("\n");
+    };
+
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-    const [isBlockModalOpen, setIsBlockModalOpen] = useState(false);
     const [selectedClient, setSelectedClient] = useState<ClientRow | null>(
         null
     );
@@ -152,8 +207,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             .then(() => {
                 startTransition(() => {
                     router.refresh();
-                    setIsBlockModalOpen(false);
-                    setSelectedClient(null);
                 });
             });
     };
@@ -185,7 +238,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             {
                 accessorKey: "name",
                 enableHiding: false,
-                friendlyName: "Name",
+                friendlyName: t("name"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -196,16 +249,31 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            Name
+                            {t("name")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
                 },
                 cell: ({ row }) => {
                     const r = row.original;
+                    const fingerprintInfo = r.fingerprint
+                        ? formatFingerprintInfo(r.fingerprint)
+                        : null;
                     return (
                         <div className="flex items-center gap-2">
                             <span>{r.name}</span>
+                            {fingerprintInfo && (
+                                <InfoPopup>
+                                    <div className="space-y-1 text-sm">
+                                        <div className="font-semibold mb-2">
+                                            {t("deviceInformation")}
+                                        </div>
+                                        <div className="text-muted-foreground whitespace-pre-line">
+                                            {fingerprintInfo}
+                                        </div>
+                                    </div>
+                                </InfoPopup>
+                            )}
                             {r.archived && (
                                 <Badge variant="secondary">
                                     {t("archived")}
@@ -253,7 +321,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             },
             {
                 accessorKey: "userEmail",
-                friendlyName: "User",
+                friendlyName: t("users"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -264,7 +332,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            User
+                            {t("users")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
@@ -287,7 +355,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             },
             {
                 accessorKey: "online",
-                friendlyName: "Connectivity",
+                friendlyName: t("online"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -298,7 +366,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            Connectivity
+                            {t("online")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
@@ -309,14 +377,14 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                         return (
                             <span className="text-green-500 flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                <span>Connected</span>
+                                <span>{t("online")}</span>
                             </span>
                         );
                     } else {
                         return (
                             <span className="text-neutral-500 flex items-center space-x-2">
                                 <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                                <span>Disconnected</span>
+                                <span>{t("offline")}</span>
                             </span>
                         );
                     }
@@ -324,7 +392,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             },
             {
                 accessorKey: "mbIn",
-                friendlyName: "Data In",
+                friendlyName: t("dataIn"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -335,7 +403,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            Data In
+                            {t("dataIn")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
@@ -343,7 +411,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             },
             {
                 accessorKey: "mbOut",
-                friendlyName: "Data Out",
+                friendlyName: t("dataOut"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -354,7 +422,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            Data Out
+                            {t("dataOut")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
@@ -402,7 +470,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
             },
             {
                 accessorKey: "subnet",
-                friendlyName: "Address",
+                friendlyName: t("address"),
                 header: ({ column }) => {
                     return (
                         <Button
@@ -413,7 +481,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 )
                             }
                         >
-                            Address
+                            {t("address")}
                             <ArrowUpDown className="ml-2 h-4 w-4" />
                         </Button>
                     );
@@ -448,8 +516,8 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 >
                                     <span>
                                         {clientRow.archived
-                                            ? "Unarchive"
-                                            : "Archive"}
+                                            ? t("actionUnarchiveClient")
+                                            : t("actionArchiveClient")}
                                     </span>
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
@@ -457,15 +525,14 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                         if (clientRow.blocked) {
                                             unblockClient(clientRow.id);
                                         } else {
-                                            setSelectedClient(clientRow);
-                                            setIsBlockModalOpen(true);
+                                            blockClient(clientRow.id);
                                         }
                                     }}
                                 >
                                     <span>
                                         {clientRow.blocked
-                                            ? "Unblock"
-                                            : "Block"}
+                                            ? t("actionUnblockClient")
+                                            : t("actionBlockClient")}
                                     </span>
                                 </DropdownMenuItem>
                                 {!clientRow.userId && (
@@ -477,17 +544,17 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                         }}
                                     >
                                         <span className="text-red-500">
-                                            Delete
+                                            {t("delete")}
                                         </span>
                                     </DropdownMenuItem>
                                 )}
                             </DropdownMenuContent>
                         </DropdownMenu>
                         <Link
-                            href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
+                            href={`/${clientRow.orgId}/settings/clients/user/${clientRow.niceId}`}
                         >
                             <Button variant={"outline"}>
-                                View
+                                {t("viewDetails")}
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>
                         </Link>
@@ -499,6 +566,49 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
         return baseColumns;
     }, [hasRowsWithoutUserId, t]);
 
+    const statusFilterOptions = useMemo(() => {
+        const allOptions = [
+            {
+                id: "active",
+                label: t("active"),
+                value: "active"
+            },
+            {
+                id: "pending",
+                label: t("pendingApproval"),
+                value: "pending"
+            },
+            {
+                id: "denied",
+                label: t("deniedApproval"),
+                value: "denied"
+            },
+            {
+                id: "archived",
+                label: t("archived"),
+                value: "archived"
+            },
+            {
+                id: "blocked",
+                label: t("blocked"),
+                value: "blocked"
+            }
+        ];
+
+        if (build === "oss") {
+            return allOptions.filter((option) => option.value !== "pending");
+        }
+
+        return allOptions;
+    }, [t]);
+
+    const statusFilterDefaultValues = useMemo(() => {
+        if (build === "oss") {
+            return ["active"];
+        }
+        return ["active", "pending"];
+    }, []);
+
     return (
         <>
             {selectedClient && !selectedClient.userId && (
@@ -514,34 +624,12 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                             <p>{t("clientMessageRemove")}</p>
                         </div>
                     }
-                    buttonText="Confirm Delete Client"
+                    buttonText={t("actionDeleteClient")}
                     onConfirm={async () => deleteClient(selectedClient!.id)}
                     string={selectedClient.name}
-                    title="Delete Client"
+                    title={t("actionDeleteClient")}
                 />
             )}
-            {selectedClient && (
-                <ConfirmDeleteDialog
-                    open={isBlockModalOpen}
-                    setOpen={(val) => {
-                        setIsBlockModalOpen(val);
-                        if (!val) {
-                            setSelectedClient(null);
-                        }
-                    }}
-                    dialog={
-                        <div className="space-y-2">
-                            <p>{t("blockClientQuestion")}</p>
-                            <p>{t("blockClientMessage")}</p>
-                        </div>
-                    }
-                    buttonText={t("blockClientConfirm")}
-                    onConfirm={async () => blockClient(selectedClient!.id)}
-                    string={selectedClient.name}
-                    title={t("blockClient")}
-                />
-            )}
-
             <ClientDownloadBanner />
 
             <DataTable
@@ -563,33 +651,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                         label: t("status") || "Status",
                         multiSelect: true,
                         displayMode: "calculated",
-                        options: [
-                            {
-                                id: "active",
-                                label: t("active"),
-                                value: "active"
-                            },
-                            {
-                                id: "pending",
-                                label: t("pendingApproval"),
-                                value: "pending"
-                            },
-                            {
-                                id: "denied",
-                                label: t("deniedApproval"),
-                                value: "denied"
-                            },
-                            {
-                                id: "archived",
-                                label: t("archived"),
-                                value: "archived"
-                            },
-                            {
-                                id: "blocked",
-                                label: t("blocked"),
-                                value: "blocked"
-                            }
-                        ],
+                        options: statusFilterOptions,
                         filterFn: (
                             row: ClientRow,
                             selectedValues: (string | number | boolean)[]
@@ -598,7 +660,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                             const rowArchived = row.archived;
                             const rowBlocked = row.blocked;
                             const approvalState = row.approvalState;
-                            const isActive = !rowArchived && !rowBlocked;
+                            const isActive = !rowArchived && !rowBlocked && approvalState !== "pending" && approvalState !== "denied";
 
                             if (selectedValues.includes("active") && isActive)
                                 return true;
@@ -624,7 +686,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                 return true;
                             return false;
                         },
-                        defaultValues: ["active", "pending"] // Default to showing active clients
+                        defaultValues: statusFilterDefaultValues
                     }
                 ]}
             />

src/components/private/IdpLoginButtons.tsx

@@ -133,6 +133,7 @@ export default function IdpLoginButtons({
                                         loginWithIdp(idp.idpId);
                                     }}
                                     disabled={loading}
+                                    loading={loading}
                                 >
                                     {effectiveType === "google" && (
                                         <Image

src/components/ui/alert.tsx

@@ -11,7 +11,7 @@ const alertVariants = cva(
                 default: "bg-card border text-foreground",
                 neutral: "bg-card bg-muted border text-foreground",
                 destructive:
-                    "border-destructive/50 border bg-destructive/8 text-destructive dark:border-destructive/50 [&>svg]:text-destructive",
+                    "border-destructive/50 border bg-destructive/8 dark:text-red-200 text-red-900 dark:border-destructive/50 [&>svg]:text-destructive",
                 success:
                     "border-green-500/50 border bg-green-500/10 text-green-500 dark:border-success [&>svg]:text-green-500",
                 info: "border-blue-500/50 border bg-blue-500/10 text-blue-800 dark:text-blue-400 dark:border-blue-400 [&>svg]:text-blue-500",

src/components/ui/info-popup.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Info } from "lucide-react";
 import {
     Popover,
@@ -17,25 +17,61 @@ interface InfoPopupProps {
 }
 
 export function InfoPopup({ text, info, trigger, children }: InfoPopupProps) {
+    const [open, setOpen] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const handleMouseEnter = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setOpen(true);
+    };
+
+    const handleMouseLeave = () => {
+        // Add a small delay to prevent flickering when moving between trigger and content
+        timeoutRef.current = setTimeout(() => {
+            setOpen(false);
+        }, 100);
+    };
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
     const defaultTrigger = (
         <Button
             variant="ghost"
             size="icon"
-            className="h-6 w-6 rounded-full p-0"
+            className="h-6 w-6 rounded-full p-0 focus-visible:ring-0 focus-visible:ring-offset-0"
         >
             <Info className="h-4 w-4" />
             <span className="sr-only">Show info</span>
         </Button>
     );
 
+    const triggerElement = trigger ?? defaultTrigger;
+
     return (
         <div className="flex items-center space-x-2">
             {text && <span>{text}</span>}
-            <Popover>
-                <PopoverTrigger asChild>
-                    {trigger ?? defaultTrigger}
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger
+                    asChild
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                >
+                    {triggerElement}
                 </PopoverTrigger>
-                <PopoverContent className="w-80">
+                <PopoverContent
+                    className="w-80"
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                >
                     {children ||
                         (info && (
                             <p className="text-sm text-muted-foreground">

src/providers/ClientProvider.tsx

@@ -2,7 +2,7 @@
 
 import ClientContext from "@app/contexts/clientContext";
 import { GetClientResponse } from "@server/routers/client/getClient";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 interface ClientProviderProps {
     children: React.ReactNode;
@@ -15,6 +15,11 @@ export function ClientProvider({
 }: ClientProviderProps) {
     const [client, setClient] = useState<GetClientResponse>(serverClient);
 
+    // Sync client state when server client changes (e.g., after router.refresh())
+    useEffect(() => {
+        setClient(serverClient);
+    }, [serverClient]);
+
     const updateClient = (updatedClient: Partial<GetClientResponse>) => {
         if (!client) {
             throw new Error("No client to update");