From eb4fbff1b20dda42119d0d2c9d636cb7667337a3 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Mon, 15 Dec 2025 15:17:56 -0600
Subject: [PATCH 1/3] feat(servers): enhance server management UI with button
 options

- Added `asButton` prop to `HandleServers`, `SetupServer`, `ShowServerActions`, and `TerminalModal` components to allow rendering as buttons for improved UI flexibility.
- Updated the server management interface to use buttons for actions like editing and setting up servers, enhancing user experience.
- Introduced new icons for better visual representation of actions in the server management dashboard.
---
 .../servers/actions/show-server-actions.tsx   |  20 +-
 .../settings/servers/handle-servers.tsx       |  28 +-
 .../settings/servers/setup-server.tsx         |  20 +-
 .../settings/servers/show-servers.tsx         | 445 +++++++++---------
 .../settings/web-server/terminal-modal.tsx    |  19 +-
 5 files changed, 293 insertions(+), 239 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx b/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
index 41156d35b..ea2300cc5 100644
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-server-actions.tsx
@@ -1,3 +1,4 @@
+import { Activity } from "lucide-react";
 import { useState } from "react";
 import {
 	Dialog,
@@ -6,6 +7,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { ShowStorageActions } from "./show-storage-actions";
 import { ShowTraefikActions } from "./show-traefik-actions";
@@ -13,20 +15,30 @@ import { ToggleDockerCleanup } from "./toggle-docker-cleanup";
 
 interface Props {
 	serverId: string;
+	asButton?: boolean;
 }
 
-export const ShowServerActions = ({ serverId }: Props) => {
+export const ShowServerActions = ({ serverId, asButton = false }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+			{asButton ? (
+				<DialogTrigger asChild>
+					<Button variant="outline" size="icon" className="h-9 w-9">
+						<Activity className="h-4 w-4" />
+					</Button>
+				</DialogTrigger>
+			) : (
 				<DropdownMenuItem
 					className="w-full cursor-pointer"
-					onSelect={(e) => e.preventDefault()}
+					onSelect={(e) => {
+						e.preventDefault();
+						setIsOpen(true);
+					}}
 				>
 					View Actions
 				</DropdownMenuItem>
-			</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-xl">
 				<div className="flex flex-col gap-1">
 					<DialogTitle className="text-xl">Web server settings</DialogTitle>
diff --git a/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx
index b36aec7c4..d9d1977a7 100644
--- a/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/handle-servers.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
+import { PlusIcon, Pencil } from "lucide-react";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { useEffect, useState } from "react";
@@ -59,9 +59,10 @@ type Schema = z.infer<typeof Schema>;
 
 interface Props {
 	serverId?: string;
+	asButton?: boolean;
 }
 
-export const HandleServers = ({ serverId }: Props) => {
+export const HandleServers = ({ serverId, asButton = false }: Props) => {
 	const { t } = useTranslation("settings");
 
 	const utils = api.useUtils();
@@ -137,21 +138,32 @@ export const HandleServers = ({ serverId }: Props) => {
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				{serverId ? (
+			{serverId ? (
+				asButton ? (
+					<DialogTrigger asChild>
+						<Button variant="outline" size="icon" className="h-9 w-9">
+							<Pencil className="h-4 w-4" />
+						</Button>
+					</DialogTrigger>
+				) : (
 					<DropdownMenuItem
 						className="w-full cursor-pointer "
-						onSelect={(e) => e.preventDefault()}
+						onSelect={(e) => {
+							e.preventDefault();
+							setIsOpen(true);
+						}}
 					>
 						Edit Server
 					</DropdownMenuItem>
-				) : (
+				)
+			) : (
+				<DialogTrigger asChild>
 					<Button className="cursor-pointer space-x-3">
 						<PlusIcon className="h-4 w-4" />
 						Create Server
 					</Button>
-				)}
-			</DialogTrigger>
+				</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-3xl ">
 				<DialogHeader>
 					<DialogTitle>{serverId ? "Edit" : "Create"} Server</DialogTitle>
diff --git a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
index 95899f20a..d88e9a3e4 100644
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -1,5 +1,5 @@
 import copy from "copy-to-clipboard";
-import { CopyIcon, ExternalLinkIcon, ServerIcon } from "lucide-react";
+import { CopyIcon, ExternalLinkIcon, ServerIcon, Settings } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -36,9 +36,10 @@ import { ValidateServer } from "./validate-server";
 
 interface Props {
 	serverId: string;
+	asButton?: boolean;
 }
 
-export const SetupServer = ({ serverId }: Props) => {
+export const SetupServer = ({ serverId, asButton = false }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const { data: server } = api.server.one.useQuery(
 		{
@@ -81,14 +82,23 @@ export const SetupServer = ({ serverId }: Props) => {
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+			{asButton ? (
+				<DialogTrigger asChild>
+					<Button variant="outline" size="icon" className="h-9 w-9">
+						<Settings className="h-4 w-4" />
+					</Button>
+				</DialogTrigger>
+			) : (
 				<DropdownMenuItem
 					className="w-full cursor-pointer "
-					onSelect={(e) => e.preventDefault()}
+					onSelect={(e) => {
+						e.preventDefault();
+						setIsOpen(true);
+					}}
 				>
 					Setup Server
 				</DropdownMenuItem>
-			</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-4xl  ">
 				<DialogHeader>
 					<div className="flex flex-col gap-1.5">
diff --git a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
index 2f8ac24e2..2efc718ee 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -1,5 +1,5 @@
 import { format } from "date-fns";
-import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react";
+import { KeyIcon, Loader2, MoreHorizontal, ServerIcon, Clock, User, Key, Network, Terminal, Settings, Pencil, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -24,14 +24,11 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
-	Table,
-	TableBody,
-	TableCaption,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@/components/ui/table";
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 import { TerminalModal } from "../web-server/terminal-modal";
@@ -59,7 +56,7 @@ export const ShowServers = () => {
 	return (
 		<div className="w-full">
 			{query?.success && isCloud && <WelcomeSuscription />}
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+			<Card className="h-full  p-2.5 rounded-xl  max-w-5xl mx-auto">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
 						<CardTitle className="text-xl flex flex-row gap-2">
@@ -114,57 +111,70 @@ export const ShowServers = () => {
 												<HandleServers />
 											</div>
 										) : (
-											<div className="flex flex-col gap-4  min-h-[25vh]">
-												<Table>
-													<TableCaption>
-														<div className="flex flex-col  gap-4">
-															See all servers
-														</div>
-													</TableCaption>
-													<TableHeader>
-														<TableRow>
-															<TableHead className="text-left">Name</TableHead>
-															{isCloud && (
-																<TableHead className="text-center">
-																	Status
-																</TableHead>
-															)}
-															<TableHead className="text-center">
-																Type
-															</TableHead>
-															<TableHead className="text-center">
-																IP Address
-															</TableHead>
-															<TableHead className="text-center">
-																Port
-															</TableHead>
-															<TableHead className="text-center">
-																Username
-															</TableHead>
-															<TableHead className="text-center">
-																SSH Key
-															</TableHead>
-															<TableHead className="text-center">
-																Created
-															</TableHead>
-															<TableHead className="text-right">
-																Actions
-															</TableHead>
-														</TableRow>
-													</TableHeader>
-													<TableBody>
-														{data?.map((server) => {
-															const canDelete = server.totalSum === 0;
-															const isActive = server.serverStatus === "active";
-															const isBuildServer =
-																server.serverType === "build";
-															return (
-																<TableRow key={server.serverId}>
-																	<TableCell className="text-left">
-																		{server.name}
-																	</TableCell>
-																	{isCloud && (
-																		<TableHead className="text-center">
+											<div className="flex flex-col gap-4 min-h-[25vh]">
+												<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+													{data?.map((server) => {
+														const canDelete = server.totalSum === 0;
+														const isActive = server.serverStatus === "active";
+														const isBuildServer =
+															server.serverType === "build";
+														return (
+															<Card key={server.serverId} className="relative hover:shadow-lg transition-shadow flex flex-col bg-transparent">
+																<CardHeader className="pb-3">
+																	<div className="flex items-start justify-between">
+																		<div className="flex items-center gap-2">
+																			<ServerIcon className="size-5 text-muted-foreground" />
+																			<CardTitle className="text-lg">
+																				{server.name}
+																			</CardTitle>
+																		</div>
+																		{isActive && server.sshKeyId && !isBuildServer && (
+																			<DropdownMenu>
+																				<DropdownMenuTrigger asChild>
+																					<Button
+																						variant="ghost"
+																						className="h-8 w-8 p-0"
+																					>
+																						<span className="sr-only">
+																							More options
+																						</span>
+																						<MoreHorizontal className="h-4 w-4" />
+																					</Button>
+																				</DropdownMenuTrigger>
+																				<DropdownMenuContent align="end">
+																					<DropdownMenuLabel>
+																						Advanced
+																					</DropdownMenuLabel>
+																					<ShowTraefikFileSystemModal
+																						serverId={server.serverId}
+																					/>
+																					<ShowDockerContainersModal
+																						serverId={server.serverId}
+																					/>
+																					{isCloud && (
+																						<ShowMonitoringModal
+																							url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
+																							token={
+																								server?.metricsConfig
+																									?.server?.token
+																							}
+																						/>
+																					)}
+																					<ShowSwarmOverviewModal
+																						serverId={server.serverId}
+																					/>
+																					<ShowNodesModal
+																						serverId={server.serverId}
+																					/>
+																					<ShowSchedulesModal
+																						serverId={server.serverId}
+																					/>
+																				</DropdownMenuContent>
+																			</DropdownMenu>
+																		)}
+																	</div>
+																	<div className="flex gap-2 mt-2 flex-wrap">
+																		{isCloud && (
 																			<Badge
 																				variant={
 																					server.serverStatus === "active"
@@ -174,9 +184,7 @@ export const ShowServers = () => {
 																			>
 																				{server.serverStatus}
 																			</Badge>
-																		</TableHead>
-																	)}
-																	<TableCell className="text-center">
+																		)}
 																		<Badge
 																			variant={
 																				isBuildServer ? "secondary" : "default"
@@ -184,170 +192,173 @@ export const ShowServers = () => {
 																		>
 																			{server.serverType}
 																		</Badge>
-																	</TableCell>
-																	<TableCell className="text-center">
-																		<Badge>{server.ipAddress}</Badge>
-																	</TableCell>
-																	<TableCell className="text-center">
-																		{server.port}
-																	</TableCell>
-																	<TableCell className="text-center">
-																		{server.username}
-																	</TableCell>
-																	<TableCell className="text-right">
-																		<span className="text-sm text-muted-foreground">
+																	</div>
+																</CardHeader>
+																<CardContent className="space-y-3 flex-1 flex flex-col">
+																	<div className="flex items-center gap-2 text-sm">
+																		<Network className="size-4 text-muted-foreground" />
+																		<span className="text-muted-foreground">IP:</span>
+																		<Badge variant="outline">{server.ipAddress}</Badge>
+																		<span className="text-muted-foreground">Port:</span>
+																		<span className="font-medium">{server.port}</span>
+																	</div>
+																	<div className="flex items-center gap-2 text-sm">
+																		<User className="size-4 text-muted-foreground" />
+																		<span className="text-muted-foreground">User:</span>
+																		<span className="font-medium">{server.username}</span>
+																	</div>
+																	<div className="flex items-center gap-2 text-sm">
+																		<Key className="size-4 text-muted-foreground" />
+																		<span className="text-muted-foreground">SSH Key:</span>
+																		<span className="font-medium">
 																			{server.sshKeyId ? "Yes" : "No"}
 																		</span>
-																	</TableCell>
-																	<TableCell className="text-right">
-																		<span className="text-sm text-muted-foreground">
-																			{format(
-																				new Date(server.createdAt),
-																				"PPpp",
-																			)}
+																	</div>
+																	<div className="flex items-center gap-2 text-sm pt-2 border-t">
+																		<Clock className="size-4 text-muted-foreground" />
+																		<span className="text-xs text-muted-foreground">
+																			Created {format(new Date(server.createdAt), "PPp")}
 																		</span>
-																	</TableCell>
-
-																	<TableCell className="text-right flex justify-end">
-																		<DropdownMenu>
-																			<DropdownMenuTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					className="h-8 w-8 p-0"
-																				>
-																					<span className="sr-only">
-																						Open menu
-																					</span>
-																					<MoreHorizontal className="h-4 w-4" />
-																				</Button>
-																			</DropdownMenuTrigger>
-																			<DropdownMenuContent align="end">
-																				<DropdownMenuLabel>
-																					Actions
-																				</DropdownMenuLabel>
-
-																				{isActive && (
-																					<>
-																						{server.sshKeyId && (
-																							<TerminalModal
+																	</div>
+																	
+																	{/* Compact Actions */}
+																	{isActive && (
+																		<div className="flex items-center gap-2 pt-3 border-t mt-auto">
+																			<TooltipProvider>
+																				{server.sshKeyId && (
+																					<Tooltip>
+																						<TooltipTrigger asChild>
+																							<div>
+																								<TerminalModal
+																									serverId={server.serverId}
+																									asButton={true}
+																								>
+																									<Button 
+																										variant="outline" 
+																										size="icon"
+																										className="h-9 w-9"
+																									>
+																										<Terminal className="h-4 w-4" />
+																									</Button>
+																								</TerminalModal>
+																							</div>
+																						</TooltipTrigger>
+																						<TooltipContent>
+																							<p>Terminal</p>
+																						</TooltipContent>
+																					</Tooltip>
+																				)}
+																				
+																				<Tooltip>
+																					<TooltipTrigger asChild>
+																						<div>
+																							<SetupServer
 																								serverId={server.serverId}
-																							>
-																								<span>
-																									{t(
-																										"settings.common.enterTerminal",
-																									)}
-																								</span>
-																							</TerminalModal>
-																						)}
-																						<SetupServer
-																							serverId={server.serverId}
-																						/>
+																								asButton={true}
+																							/>
+																						</div>
+																					</TooltipTrigger>
+																					<TooltipContent>
+																						<p>Setup Server</p>
+																					</TooltipContent>
+																				</Tooltip>
 
-																						<HandleServers
-																							serverId={server.serverId}
-																						/>
+																				<Tooltip>
+																					<TooltipTrigger asChild>
+																						<div>
+																							<HandleServers
+																								serverId={server.serverId}
+																								asButton={true}
+																							/>
+																						</div>
+																					</TooltipTrigger>
+																					<TooltipContent>
+																						<p>Edit Server</p>
+																					</TooltipContent>
+																				</Tooltip>
 
-																						{server.sshKeyId &&
-																							!isBuildServer && (
+																				{server.sshKeyId && !isBuildServer && (
+																					<Tooltip>
+																						<TooltipTrigger asChild>
+																							<div>
 																								<ShowServerActions
 																									serverId={server.serverId}
+																									asButton={true}
 																								/>
-																							)}
-																					</>
-																				)}
-
-																				<DialogAction
-																					disabled={!canDelete}
-																					title={
-																						canDelete
-																							? "Delete Server"
-																							: "Server has active services"
-																					}
-																					description={
-																						canDelete ? (
-																							"This will delete the server and all associated data"
-																						) : (
-																							<div className="flex flex-col gap-2">
-																								You can not delete this server
-																								because it has active services.
-																								<AlertBlock type="warning">
-																									You have active services
-																									associated with this server,
-																									please delete them first.
-																								</AlertBlock>
 																							</div>
-																						)
-																					}
-																					onClick={async () => {
-																						await mutateAsync({
-																							serverId: server.serverId,
-																						})
-																							.then(() => {
-																								refetch();
-																								toast.success(
-																									`Server ${server.name} deleted successfully`,
-																								);
-																							})
-																							.catch((err) => {
-																								toast.error(err.message);
-																							});
-																					}}
-																				>
-																					<DropdownMenuItem
-																						className="w-full cursor-pointer text-red-500 hover:!text-red-600"
-																						onSelect={(e) => e.preventDefault()}
-																					>
-																						Delete Server
-																					</DropdownMenuItem>
-																				</DialogAction>
+																						</TooltipTrigger>
+																						<TooltipContent>
+																							<p>Web Server Actions</p>
+																						</TooltipContent>
+																					</Tooltip>
+																				)}
+																				
+																				<div className="flex-1" />
+																				
+																				<Tooltip>
+																					<TooltipTrigger asChild>
+																						<div>
+																							<DialogAction
+																								disabled={!canDelete}
+																								title={
+																									canDelete
+																										? "Delete Server"
+																										: "Server has active services"
+																								}
+																								description={
+																									canDelete ? (
+																										"This will delete the server and all associated data"
+																									) : (
+																										<div className="flex flex-col gap-2">
+																											You can not delete this server
+																											because it has active services.
+																											<AlertBlock type="warning">
+																												You have active services
+																												associated with this server,
+																												please delete them first.
+																											</AlertBlock>
+																										</div>
+																									)
+																								}
+																								onClick={async () => {
+																									await mutateAsync({
+																										serverId: server.serverId,
+																									})
+																										.then(() => {
+																											refetch();
+																											toast.success(
+																												`Server ${server.name} deleted successfully`,
+																											);
+																										})
+																										.catch((err) => {
+																											toast.error(err.message);
+																										});
+																								}}
+																							>
+																								<Button
+																									variant="ghost"
+																									size="icon"
+																									className={`h-9 w-9 ${canDelete ? 'text-destructive hover:text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-muted'}`}
+																								>
+																									<Trash2 className="h-4 w-4" />
+																								</Button>
+																							</DialogAction>
+																						</div>
+																					</TooltipTrigger>
+																					<TooltipContent>
+																						<p>{canDelete ? 'Delete Server' : 'Cannot delete - has active services'}</p>
+																					</TooltipContent>
+																				</Tooltip>
+																			</TooltipProvider>
+																		</div>
+																	)}
+																</CardContent>
+															</Card>
+														);
+													})}
+												</div>
 
-																				{isActive &&
-																					server.sshKeyId &&
-																					!isBuildServer && (
-																						<>
-																							<DropdownMenuSeparator />
-																							<DropdownMenuLabel>
-																								Extra
-																							</DropdownMenuLabel>
-
-																							<ShowTraefikFileSystemModal
-																								serverId={server.serverId}
-																							/>
-																							<ShowDockerContainersModal
-																								serverId={server.serverId}
-																							/>
-																							{isCloud && (
-																								<ShowMonitoringModal
-																									url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
-																									token={
-																										server?.metricsConfig
-																											?.server?.token
-																									}
-																								/>
-																							)}
-
-																							<ShowSwarmOverviewModal
-																								serverId={server.serverId}
-																							/>
-																							<ShowNodesModal
-																								serverId={server.serverId}
-																							/>
-
-																							<ShowSchedulesModal
-																								serverId={server.serverId}
-																							/>
-																						</>
-																					)}
-																			</DropdownMenuContent>
-																		</DropdownMenu>
-																	</TableCell>
-																</TableRow>
-															);
-														})}
-													</TableBody>
-												</Table>
-
-												<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<div className="flex flex-row gap-2 flex-wrap w-full justify-end mt-4">
 													{data && data?.length > 0 && (
 														<div>
 															<HandleServers />
diff --git a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
index 58e4c9d4e..0bea05fc0 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -24,10 +24,12 @@ const getTerminalKey = () => {
 interface Props {
 	children?: React.ReactNode;
 	serverId: string;
+	asButton?: boolean;
 }
 
-export const TerminalModal = ({ children, serverId }: Props) => {
+export const TerminalModal = ({ children, serverId, asButton = false }: Props) => {
 	const [terminalKey, setTerminalKey] = useState<string>(getTerminalKey());
+	const [isOpen, setIsOpen] = useState(false);
 	const isLocalServer = serverId === "local";
 
 	const { data } = api.server.one.useQuery(
@@ -43,15 +45,22 @@ export const TerminalModal = ({ children, serverId }: Props) => {
 	};
 
 	return (
-		<Dialog>
-			<DialogTrigger asChild>
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			{asButton ? (
+				<DialogTrigger asChild>
+					{children}
+				</DialogTrigger>
+			) : (
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"
-					onSelect={(e) => e.preventDefault()}
+					onSelect={(e) => {
+						e.preventDefault();
+						setIsOpen(true);
+					}}
 				>
 					{children}
 				</DropdownMenuItem>
-			</DialogTrigger>
+			)}
 			<DialogContent
 				className="sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}

From 0ddf6b851f0d9919d73430ce384297c5c2a5887a Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 16 Dec 2025 21:05:52 -0600
Subject: [PATCH 2/3] feat(servers): add tooltip for deactivated server status
 in dashboard

- Wrapped server status display in a TooltipProvider to provide additional context for deactivated servers.
- Implemented a tooltip that informs users about the reason for deactivation and instructions for reactivation, enhancing user experience and clarity in server management.
---
 .../settings/servers/show-servers.tsx         | 45 ++++++++++++-------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
index 2efc718ee..e0aa3c54e 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -173,26 +173,41 @@ export const ShowServers = () => {
 																			</DropdownMenu>
 																		)}
 																	</div>
-																	<div className="flex gap-2 mt-2 flex-wrap">
-																		{isCloud && (
+																	<TooltipProvider>
+																		<div className="flex gap-2 mt-2 flex-wrap">
+																			{isCloud && (
+																				<>
+																					{server.serverStatus === "active" ? (
+																						<Badge variant="default">
+																							{server.serverStatus}
+																						</Badge>
+																					) : (
+																						<Tooltip delayDuration={0}>
+																							<TooltipTrigger asChild>
+																								<span className="inline-block">
+																									<Badge variant="destructive" className="cursor-help">
+																										{server.serverStatus}
+																									</Badge>
+																								</span>
+																							</TooltipTrigger>
+																							<TooltipContent className="max-w-xs" side="bottom">
+																								<p className="text-sm">
+																									This server is deactivated due to lack of payment. Please pay your invoice to reactivate it. If you think this is an error, please contact support.
+																								</p>
+																							</TooltipContent>
+																						</Tooltip>
+																					)}
+																				</>
+																			)}
 																			<Badge
 																				variant={
-																					server.serverStatus === "active"
-																						? "default"
-																						: "destructive"
+																					isBuildServer ? "secondary" : "default"
 																				}
 																			>
-																				{server.serverStatus}
+																				{server.serverType}
 																			</Badge>
-																		)}
-																		<Badge
-																			variant={
-																				isBuildServer ? "secondary" : "default"
-																			}
-																		>
-																			{server.serverType}
-																		</Badge>
-																	</div>
+																		</div>
+																	</TooltipProvider>
 																</CardHeader>
 																<CardContent className="space-y-3 flex-1 flex flex-col">
 																	<div className="flex items-center gap-2 text-sm">

From 3a5ac9d31f91c0d3cdb74a24be5356ef83dfbd5c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Wed, 17 Dec 2025 03:09:23 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes

---
 .../settings/servers/show-servers.tsx         | 195 +++++++++++-------
 .../settings/web-server/terminal-modal.tsx    |  10 +-
 2 files changed, 130 insertions(+), 75 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
index e0aa3c54e..111f10e28 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -1,5 +1,18 @@
 import { format } from "date-fns";
-import { KeyIcon, Loader2, MoreHorizontal, ServerIcon, Clock, User, Key, Network, Terminal, Settings, Pencil, Trash2 } from "lucide-react";
+import {
+	KeyIcon,
+	Loader2,
+	MoreHorizontal,
+	ServerIcon,
+	Clock,
+	User,
+	Key,
+	Network,
+	Terminal,
+	Settings,
+	Pencil,
+	Trash2,
+} from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
@@ -116,10 +129,12 @@ export const ShowServers = () => {
 													{data?.map((server) => {
 														const canDelete = server.totalSum === 0;
 														const isActive = server.serverStatus === "active";
-														const isBuildServer =
-															server.serverType === "build";
+														const isBuildServer = server.serverType === "build";
 														return (
-															<Card key={server.serverId} className="relative hover:shadow-lg transition-shadow flex flex-col bg-transparent">
+															<Card
+																key={server.serverId}
+																className="relative hover:shadow-lg transition-shadow flex flex-col bg-transparent"
+															>
 																<CardHeader className="pb-3">
 																	<div className="flex items-start justify-between">
 																		<div className="flex items-center gap-2">
@@ -128,50 +143,52 @@ export const ShowServers = () => {
 																				{server.name}
 																			</CardTitle>
 																		</div>
-																		{isActive && server.sshKeyId && !isBuildServer && (
-																			<DropdownMenu>
-																				<DropdownMenuTrigger asChild>
-																					<Button
-																						variant="ghost"
-																						className="h-8 w-8 p-0"
-																					>
-																						<span className="sr-only">
-																							More options
-																						</span>
-																						<MoreHorizontal className="h-4 w-4" />
-																					</Button>
-																				</DropdownMenuTrigger>
-																				<DropdownMenuContent align="end">
-																					<DropdownMenuLabel>
-																						Advanced
-																					</DropdownMenuLabel>
-																					<ShowTraefikFileSystemModal
-																						serverId={server.serverId}
-																					/>
-																					<ShowDockerContainersModal
-																						serverId={server.serverId}
-																					/>
-																					{isCloud && (
-																						<ShowMonitoringModal
-																							url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
-																							token={
-																								server?.metricsConfig
-																									?.server?.token
-																							}
+																		{isActive &&
+																			server.sshKeyId &&
+																			!isBuildServer && (
+																				<DropdownMenu>
+																					<DropdownMenuTrigger asChild>
+																						<Button
+																							variant="ghost"
+																							className="h-8 w-8 p-0"
+																						>
+																							<span className="sr-only">
+																								More options
+																							</span>
+																							<MoreHorizontal className="h-4 w-4" />
+																						</Button>
+																					</DropdownMenuTrigger>
+																					<DropdownMenuContent align="end">
+																						<DropdownMenuLabel>
+																							Advanced
+																						</DropdownMenuLabel>
+																						<ShowTraefikFileSystemModal
+																							serverId={server.serverId}
 																						/>
-																					)}
-																					<ShowSwarmOverviewModal
-																						serverId={server.serverId}
-																					/>
-																					<ShowNodesModal
-																						serverId={server.serverId}
-																					/>
-																					<ShowSchedulesModal
-																						serverId={server.serverId}
-																					/>
-																				</DropdownMenuContent>
-																			</DropdownMenu>
-																		)}
+																						<ShowDockerContainersModal
+																							serverId={server.serverId}
+																						/>
+																						{isCloud && (
+																							<ShowMonitoringModal
+																								url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
+																								token={
+																									server?.metricsConfig?.server
+																										?.token
+																								}
+																							/>
+																						)}
+																						<ShowSwarmOverviewModal
+																							serverId={server.serverId}
+																						/>
+																						<ShowNodesModal
+																							serverId={server.serverId}
+																						/>
+																						<ShowSchedulesModal
+																							serverId={server.serverId}
+																						/>
+																					</DropdownMenuContent>
+																				</DropdownMenu>
+																			)}
 																	</div>
 																	<TooltipProvider>
 																		<div className="flex gap-2 mt-2 flex-wrap">
@@ -185,14 +202,24 @@ export const ShowServers = () => {
 																						<Tooltip delayDuration={0}>
 																							<TooltipTrigger asChild>
 																								<span className="inline-block">
-																									<Badge variant="destructive" className="cursor-help">
+																									<Badge
+																										variant="destructive"
+																										className="cursor-help"
+																									>
 																										{server.serverStatus}
 																									</Badge>
 																								</span>
 																							</TooltipTrigger>
-																							<TooltipContent className="max-w-xs" side="bottom">
+																							<TooltipContent
+																								className="max-w-xs"
+																								side="bottom"
+																							>
 																								<p className="text-sm">
-																									This server is deactivated due to lack of payment. Please pay your invoice to reactivate it. If you think this is an error, please contact support.
+																									This server is deactivated due
+																									to lack of payment. Please pay
+																									your invoice to reactivate it.
+																									If you think this is an error,
+																									please contact support.
 																								</p>
 																							</TooltipContent>
 																						</Tooltip>
@@ -201,7 +228,9 @@ export const ShowServers = () => {
 																			)}
 																			<Badge
 																				variant={
-																					isBuildServer ? "secondary" : "default"
+																					isBuildServer
+																						? "secondary"
+																						: "default"
 																				}
 																			>
 																				{server.serverType}
@@ -212,19 +241,33 @@ export const ShowServers = () => {
 																<CardContent className="space-y-3 flex-1 flex flex-col">
 																	<div className="flex items-center gap-2 text-sm">
 																		<Network className="size-4 text-muted-foreground" />
-																		<span className="text-muted-foreground">IP:</span>
-																		<Badge variant="outline">{server.ipAddress}</Badge>
-																		<span className="text-muted-foreground">Port:</span>
-																		<span className="font-medium">{server.port}</span>
+																		<span className="text-muted-foreground">
+																			IP:
+																		</span>
+																		<Badge variant="outline">
+																			{server.ipAddress}
+																		</Badge>
+																		<span className="text-muted-foreground">
+																			Port:
+																		</span>
+																		<span className="font-medium">
+																			{server.port}
+																		</span>
 																	</div>
 																	<div className="flex items-center gap-2 text-sm">
 																		<User className="size-4 text-muted-foreground" />
-																		<span className="text-muted-foreground">User:</span>
-																		<span className="font-medium">{server.username}</span>
+																		<span className="text-muted-foreground">
+																			User:
+																		</span>
+																		<span className="font-medium">
+																			{server.username}
+																		</span>
 																	</div>
 																	<div className="flex items-center gap-2 text-sm">
 																		<Key className="size-4 text-muted-foreground" />
-																		<span className="text-muted-foreground">SSH Key:</span>
+																		<span className="text-muted-foreground">
+																			SSH Key:
+																		</span>
 																		<span className="font-medium">
 																			{server.sshKeyId ? "Yes" : "No"}
 																		</span>
@@ -232,10 +275,14 @@ export const ShowServers = () => {
 																	<div className="flex items-center gap-2 text-sm pt-2 border-t">
 																		<Clock className="size-4 text-muted-foreground" />
 																		<span className="text-xs text-muted-foreground">
-																			Created {format(new Date(server.createdAt), "PPp")}
+																			Created{" "}
+																			{format(
+																				new Date(server.createdAt),
+																				"PPp",
+																			)}
 																		</span>
 																	</div>
-																	
+
 																	{/* Compact Actions */}
 																	{isActive && (
 																		<div className="flex items-center gap-2 pt-3 border-t mt-auto">
@@ -248,8 +295,8 @@ export const ShowServers = () => {
 																									serverId={server.serverId}
 																									asButton={true}
 																								>
-																									<Button 
-																										variant="outline" 
+																									<Button
+																										variant="outline"
 																										size="icon"
 																										className="h-9 w-9"
 																									>
@@ -263,7 +310,7 @@ export const ShowServers = () => {
 																						</TooltipContent>
 																					</Tooltip>
 																				)}
-																				
+
 																				<Tooltip>
 																					<TooltipTrigger asChild>
 																						<div>
@@ -307,9 +354,9 @@ export const ShowServers = () => {
 																						</TooltipContent>
 																					</Tooltip>
 																				)}
-																				
+
 																				<div className="flex-1" />
-																				
+
 																				<Tooltip>
 																					<TooltipTrigger asChild>
 																						<div>
@@ -325,12 +372,14 @@ export const ShowServers = () => {
 																										"This will delete the server and all associated data"
 																									) : (
 																										<div className="flex flex-col gap-2">
-																											You can not delete this server
-																											because it has active services.
+																											You can not delete this
+																											server because it has
+																											active services.
 																											<AlertBlock type="warning">
 																												You have active services
-																												associated with this server,
-																												please delete them first.
+																												associated with this
+																												server, please delete
+																												them first.
 																											</AlertBlock>
 																										</div>
 																									)
@@ -353,7 +402,7 @@ export const ShowServers = () => {
 																								<Button
 																									variant="ghost"
 																									size="icon"
-																									className={`h-9 w-9 ${canDelete ? 'text-destructive hover:text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-muted'}`}
+																									className={`h-9 w-9 ${canDelete ? "text-destructive hover:text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"}`}
 																								>
 																									<Trash2 className="h-4 w-4" />
 																								</Button>
@@ -361,7 +410,11 @@ export const ShowServers = () => {
 																						</div>
 																					</TooltipTrigger>
 																					<TooltipContent>
-																						<p>{canDelete ? 'Delete Server' : 'Cannot delete - has active services'}</p>
+																						<p>
+																							{canDelete
+																								? "Delete Server"
+																								: "Cannot delete - has active services"}
+																						</p>
 																					</TooltipContent>
 																				</Tooltip>
 																			</TooltipProvider>
diff --git a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
index 0bea05fc0..2647e1dc0 100644
--- a/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/terminal-modal.tsx
@@ -27,7 +27,11 @@ interface Props {
 	asButton?: boolean;
 }
 
-export const TerminalModal = ({ children, serverId, asButton = false }: Props) => {
+export const TerminalModal = ({
+	children,
+	serverId,
+	asButton = false,
+}: Props) => {
 	const [terminalKey, setTerminalKey] = useState<string>(getTerminalKey());
 	const [isOpen, setIsOpen] = useState(false);
 	const isLocalServer = serverId === "local";
@@ -47,9 +51,7 @@ export const TerminalModal = ({ children, serverId, asButton = false }: Props) =
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			{asButton ? (
-				<DialogTrigger asChild>
-					{children}
-				</DialogTrigger>
+				<DialogTrigger asChild>{children}</DialogTrigger>
 			) : (
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"