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] 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">