add view user device page with fingerprint and actions

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);
-                                                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/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);
-                                            setIsBlockModalOpen(true);
+                                            blockClient(clientRow.id);
                                         }
                                     }}
                                 >
@@ -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