refactor: show banner when the server is disabled

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -35,7 +35,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { GlobeIcon, HelpCircle } from "lucide-react";
+import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -156,6 +156,26 @@ const Service = (
 					</div>
 				</header>
 			</div>
+
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -240,6 +260,7 @@ const Service = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -29,7 +29,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { CircuitBoard } from "lucide-react";
+import { CircuitBoard, ServerOff } from "lucide-react";
 import { HelpCircle } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
@@ -151,6 +151,25 @@ const Service = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -243,6 +262,7 @@ const Service = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -137,6 +137,25 @@ const Mariadb = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -210,6 +229,7 @@ const Mariadb = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -138,6 +138,25 @@ const Mongo = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -212,6 +231,7 @@ const Mongo = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -137,6 +137,25 @@ const MySql = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -211,6 +230,7 @@ const MySql = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx

@@ -30,7 +30,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -138,6 +138,25 @@ const Postgresql = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -212,6 +231,7 @@ const Postgresql = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx

@@ -29,7 +29,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -137,6 +137,25 @@ const Redis = (
 					</div>
 				</header>
 			</div>
+			{data?.server?.serverStatus === "inactive" ? (
+				<div className="flex h-[55vh] border-2 rounded-xl border-dashed p-4">
+					<div className="max-w-3xl mx-auto flex flex-col items-center justify-center self-center gap-3">
+						<ServerOff className="size-10 text-muted-foreground self-center" />
+						<span className="text-center text-base text-muted-foreground">
+							This service is hosted on the server {data.server.name}, but this
+							server has been disabled because your current plan doesn't include
+							enough servers. Please purchase more servers to regain access to
+							this application.
+						</span>
+						<span className="text-center text-base text-muted-foreground">
+							Go to{" "}
+							<Link href="/dashboard/settings/billing" className="text-primary">
+								Billing
+							</Link>
+						</span>
+					</div>
+				</div>
+			) : (
 				<Tabs
 					value={tab}
 					defaultValue="general"
@@ -205,6 +224,7 @@ const Redis = (
 						</div>
 					</TabsContent>
 				</Tabs>
+			)}
 		</div>
 	);
 };

apps/dokploy/server/api/routers/compose.ts

@@ -252,7 +252,6 @@ export const composeRouter = createTRPCRouter({
 				descriptionLog: "",
 				server: !!compose.serverId,
 			};
-			console.log(jobData);
 
 			if (IS_CLOUD && compose.serverId) {
 				jobData.serverId = compose.serverId;