add view user device page with fingerprint and actions

messages/en-US.json

@@ -2483,5 +2483,31 @@
     "signupOrgTip": "Are you trying to sign in through your organization's identity provider?",
     "signupOrgLink": "Sign in or sign up with your organization instead",
     "verifyEmailLogInWithDifferentAccount": "Use a Different Account",
-    "logIn": "Log In"
+    "logIn": "Log In",
+    "deviceInformation": "Device Information",
+    "deviceInformationDescription": "Information about the device and agent",
+    "platform": "Platform",
+    "macosVersion": "macOS Version",
+    "windowsVersion": "Windows Version",
+    "iosVersion": "iOS Version",
+    "androidVersion": "Android Version",
+    "osVersion": "OS Version",
+    "kernelVersion": "Kernel Version",
+    "deviceModel": "Device Model",
+    "serialNumber": "Serial Number",
+    "hostname": "Hostname",
+    "firstSeen": "First Seen",
+    "lastSeen": "Last Seen",
+    "deviceSettingsDescription": "View device information and settings",
+    "devicePendingApprovalDescription": "This device is waiting for approval",
+    "deviceBlockedDescription": "This device is currently blocked. It won't be able to connect to any resources unless unblocked.",
+    "unblockClient": "Unblock Client",
+    "unblockClientDescription": "The device has been unblocked",
+    "unarchiveClient": "Unarchive Client",
+    "unarchiveClientDescription": "The device has been unarchived",
+    "block": "Block",
+    "unblock": "Unblock",
+    "deviceActions": "Device Actions",
+    "deviceActionsDescription": "Manage device status and access",
+    "devicePendingApprovalBannerDescription": "This device is pending approval. It won't be able to connect to resources until approved."
 }

server/routers/client/getClient.ts

@@ -49,6 +49,20 @@ export type GetClientResponse = NonNullable<
     Awaited<ReturnType<typeof query>>
 >["clients"] & {
     olmId: string | null;
+    agent: string | null;
+    olmVersion: string | null;
+    fingerprint: {
+        username: string | null;
+        hostname: string | null;
+        platform: string | null;
+        osVersion: string | null;
+        kernelVersion: string | null;
+        arch: string | null;
+        deviceModel: string | null;
+        serialNumber: string | null;
+        firstSeen: number | null;
+        lastSeen: number | null;
+    } | null;
 };
 
 registry.registerPath({
@@ -115,10 +129,29 @@ export async function getClient(
             clientName = getUserDeviceName(model, client.clients.name);
         }
 
+        // Build fingerprint data if available
+        const fingerprintData = client.fingerprints
+            ? {
+                  username: client.fingerprints.username || null,
+                  hostname: client.fingerprints.hostname || null,
+                  platform: client.fingerprints.platform || null,
+                  osVersion: client.fingerprints.osVersion || null,
+                  kernelVersion: client.fingerprints.kernelVersion || null,
+                  arch: client.fingerprints.arch || null,
+                  deviceModel: client.fingerprints.deviceModel || null,
+                  serialNumber: client.fingerprints.serialNumber || null,
+                  firstSeen: client.fingerprints.firstSeen || null,
+                  lastSeen: client.fingerprints.lastSeen || null
+              }
+            : null;
+
         const data: GetClientResponse = {
             ...client.clients,
             name: clientName,
-            olmId: client.olms ? client.olms.olmId : null
+            olmId: client.olms ? client.olms.olmId : null,
+            agent: client.olms?.agent || null,
+            olmVersion: client.olms?.version || null,
+            fingerprint: fingerprintData
         };
 
         return response<GetClientResponse>(res, {

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/user/[niceId]/general/page.tsx

@@ -0,0 +1,507 @@
+"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}
+                                className="gap-2"
+                            >
+                                <Check className="size-4" />
+                                {t("approve")}
+                            </Button>
+                            <Button
+                                onClick={handleDeny}
+                                disabled={isRefreshing || !approvalId}
+                                loading={isRefreshing}
+                                variant="destructive"
+                                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/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/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/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);
+                                                blockClient(clientRow.id);
-                                                setIsBlockModalOpen(true);
                                             }
                                         }}
                                     >
@@ -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/UserDevicesTable.tsx

@@ -60,7 +60,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
     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 UserDevicesTable({ userClients }: ClientTableProps) {
             .then(() => {
                 startTransition(() => {
                     router.refresh();
-                    setIsBlockModalOpen(false);
-                    setSelectedClient(null);
                 });
             });
     };
@@ -457,8 +454,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                                         if (clientRow.blocked) {
                                             unblockClient(clientRow.id);
                                         } else {
-                                            setSelectedClient(clientRow);
+                                            blockClient(clientRow.id);
-                                            setIsBlockModalOpen(true);
                                         }
                                     }}
                                 >
@@ -484,7 +480,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                             </DropdownMenuContent>
                         </DropdownMenu>
                         <Link
-                            href={`/${clientRow.orgId}/settings/clients/${clientRow.id}`}
+                            href={`/${clientRow.orgId}/settings/clients/user/${clientRow.niceId}`}
                         >
                             <Button variant={"outline"}>
                                 View
@@ -520,28 +516,6 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                     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")}
-                />
-            )}
-
             <ClientDownloadBanner />
 
             <DataTable

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");