refactor: migration

Fix typo in README.md

.circleci/config.yml

@@ -11,6 +11,7 @@ jobs:
           command: |
             cp apps/dokploy/.env.production.example .env.production
             cp apps/dokploy/.env.production.example apps/dokploy/.env.production
+
       - run:
           name: Build and push AMD64 image
           command: |
@@ -61,7 +62,7 @@ jobs:
               VERSION=$(node -p "require('./apps/dokploy/package.json').version")
               echo $VERSION
               TAG="latest"
-              
+
               docker manifest create dokploy/dokploy:${TAG} \
                 dokploy/dokploy:${TAG}-amd64 \
                 dokploy/dokploy:${TAG}-arm64

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Build Docs & Website Docker images
+name: Build Docker images
 
 on:
   push:
@@ -48,3 +48,74 @@ jobs:
           push: true
           tags: dokploy/website:latest
           platforms: linux/amd64
+
+
+  build-and-push-cloud-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.cloud
+          push: true
+          tags: |
+            siumauricio/cloud:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64
+
+  build-and-push-schedule-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.schedule
+          push: true
+          tags: |
+            siumauricio/schedule:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64     
+
+
+  build-and-push-server-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile.server
+          push: true
+          tags: |
+            siumauricio/server:${{ github.ref_name == 'main' && 'main' || 'canary' }}
+          platforms: linux/amd64  

.github/workflows/pull-request.yml

@@ -18,6 +18,7 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build  
       - run: pnpm biome ci
       - run: pnpm typecheck
 
@@ -32,6 +33,7 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build
       - run: pnpm build
 
   parallel-tests:
@@ -44,4 +46,5 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build  
       - run: pnpm test

.husky/commit-msg

@@ -0,0 +1 @@
+npx commitlint --edit "$1"

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === "production" || process.env.CI === "true") {
+	process.exit(0);
+}
+const husky = (await import("husky")).default;
+console.log(husky());

.husky/pre-commit

@@ -0,0 +1,2 @@
+pnpm run check
+git add .

CONTRIBUTING.md

@@ -71,6 +71,12 @@ Run the command that will spin up all the required services and files.
 pnpm run dokploy:setup
 ```
 
+Build the server package (If you make any changes after in the packages/server folder, you need to rebuild and run this command)
+
+```bash
+pnpm run server:build
+```
+
 Now run the development server.
 
 ```bash

Dockerfile

@@ -15,7 +15,9 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 # Deploy only the dokploy app
 
 ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
 RUN pnpm --filter=./apps/dokploy run build
+
 RUN pnpm --filter=./apps/dokploy --prod deploy /prod/dokploy
 
 RUN cp -R /usr/src/app/apps/dokploy/.next /prod/dokploy/.next

Dockerfile.cloud

@@ -0,0 +1,52 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/dokploy install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/dokploy run build
+
+RUN pnpm --filter=./apps/dokploy --prod deploy /prod/dokploy
+
+RUN cp -R /usr/src/app/apps/dokploy/.next /prod/dokploy/.next
+RUN cp -R /usr/src/app/apps/dokploy/dist /prod/dokploy/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var/lib/apt/lists/*
+
+# Copy only the necessary files
+COPY --from=build /prod/dokploy/.next ./.next
+COPY --from=build /prod/dokploy/dist ./dist
+COPY --from=build /prod/dokploy/next.config.mjs ./next.config.mjs
+COPY --from=build /prod/dokploy/public ./public
+COPY --from=build /prod/dokploy/package.json ./package.json
+COPY --from=build /prod/dokploy/drizzle ./drizzle
+COPY --from=build /prod/dokploy/components.json ./components.json
+COPY --from=build /prod/dokploy/node_modules ./node_modules
+
+
+# Install RCLONE
+RUN curl https://rclone.org/install.sh | bash
+
+# tsx
+RUN pnpm install -g tsx
+
+EXPOSE 3000
+CMD [ "pnpm", "start" ]

Dockerfile.schedule

@@ -0,0 +1,36 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/schedules install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/schedules run build
+
+RUN pnpm --filter=./apps/schedules --prod deploy /prod/schedules
+
+RUN cp -R /usr/src/app/apps/schedules/dist /prod/schedules/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+# Copy only the necessary files
+COPY --from=build /prod/schedules/dist ./dist
+COPY --from=build /prod/schedules/package.json ./package.json
+COPY --from=build /prod/schedules/node_modules ./node_modules
+
+CMD HOSTNAME=0.0.0.0 && pnpm start

Dockerfile.server

@@ -0,0 +1,36 @@
+FROM node:18-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+FROM base AS build
+COPY . /usr/src/app
+WORKDIR /usr/src/app
+
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
+
+# Install dependencies
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/api install --frozen-lockfile
+
+# Deploy only the dokploy app
+
+ENV NODE_ENV=production
+RUN pnpm --filter=@dokploy/server build
+RUN pnpm --filter=./apps/api run build
+
+RUN pnpm --filter=./apps/api --prod deploy /prod/api
+
+RUN cp -R /usr/src/app/apps/api/dist /prod/api/dist
+
+FROM base AS dokploy
+WORKDIR /app
+
+# Set production
+ENV NODE_ENV=production
+
+# Copy only the necessary files
+COPY --from=build /prod/api/dist ./dist
+COPY --from=build /prod/api/package.json ./package.json
+COPY --from=build /prod/api/node_modules ./node_modules
+
+CMD HOSTNAME=0.0.0.0 && pnpm start

LICENSE.MD

@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and limitations
 
 ## Additional Terms for Specific Features
 
-The following additional terms apply to the multi-node support and Docker Compose file support features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
+The following additional terms apply to the multi-node support, Docker Compose file and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
 
-- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support and Docker Compose file support, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support and Docker Compose file support features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support and Docker Compose file support features must be distributed freely and cannot be sold or offered as a service.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support and Multi Server, will always be free to use in the self-hosted version.
+- **Restriction on Resale**: The multi-node support, Docker Compose file support and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
+- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support and Multi Server features must be distributed freely and cannot be sold or offered as a service.
 
 For further inquiries or permissions, please contact us directly.

README.md

@@ -30,8 +30,9 @@ Dokploy include multiples features to make your life easier.
 - **Traefik Integration**: Automatically integrates with Traefik for routing and load balancing.
 - **Real-time Monitoring**: Monitor CPU, memory, storage, and network usage, for every resource.
 - **Docker Management**: Easily deploy and manage Docker containers.
-- **CLI/API**: Manage your applications and databases using the command line or trought the API.
+- **CLI/API**: Manage your applications and databases using the command line or through the API.
 - **Notifications**: Get notified when your deployments are successful or failed (Slack, Discord, Telegram, Email, etc.)
+- **Multi Server**: Deploy and manager your applications remotely to external servers.
 - **Self-Hosted**: Self-host Dokploy on your VPS.
 
 ## 🚀 Getting Started
@@ -58,7 +59,14 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 ### Hero Sponsors 🎖
 
-<a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" ><img src=".github/sponsors/hostinger.jpg" alt="Hostinger" width="200"/></a>
+<div style="display: flex; align-items: center; gap: 20px;">
+  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" style="display: inline-block;">
+    <img src=".github/sponsors/hostinger.jpg" alt="Hostinger" height="50"/>
+  </a>
+  <a href="https://www.lxaer.com/?ref=dokploy" target="_blank" style="display: inline-block;">
+    <img src=".github/sponsors/lxaer.png" alt="LX Aer" height="50"/>
+  </a>
+</div>
 
 ### Premium Supporters 🥇
 
@@ -81,6 +89,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">
 <a href="https://steamsets.com/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/111978405?s=200&v=4" width="60px" alt="Steamsets.com"/></a>
+<a href="https://rivo.gg/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/126797452?s=200&v=4" width="60px" alt="Rivo.gg"/></a>
 </div>
 
 #### Organizations:

apps/api/package.json

@@ -1,15 +1,33 @@
 {
-	"name": "my-app",
+	"name": "@dokploy/api",
+	"version": "0.0.1",
+	"type": "module",
 	"scripts": {
-		"dev": "tsx watch src/index.ts"
+		"dev": "PORT=4000 tsx watch src/index.ts",
+		"build": "tsc --project tsconfig.json",
+		"start": "node --experimental-specifier-resolution=node dist/index.js",
+		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"pino": "9.4.0",
+		"pino-pretty": "11.2.2",
+		"@hono/zod-validator": "0.3.0",
+		"zod": "^3.23.4",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"@dokploy/server": "workspace:*",
 		"@hono/node-server": "^1.12.1",
 		"hono": "^4.5.8",
-		"dotenv": "^16.3.1"
+		"dotenv": "^16.3.1",
+		"redis": "4.7.0",
+		"@nerimity/mimiqueue": "1.2.3"
 	},
 	"devDependencies": {
+		"typescript": "^5.4.2",
+		"@types/react": "^18.2.37",
+		"@types/react-dom": "^18.2.15",
 		"@types/node": "^20.11.17",
 		"tsx": "^4.7.1"
-	}
+	},
+	"packageManager": "pnpm@9.5.0"
 }

apps/api/src/index.ts

@@ -1,66 +1,61 @@
 import { serve } from "@hono/node-server";
-import { config } from "dotenv";
 import { Hono } from "hono";
-import { cors } from "hono/cors";
-import { validateLemonSqueezyLicense } from "./utils";
-
-config();
+import "dotenv/config";
+import { zValidator } from "@hono/zod-validator";
+import { Queue } from "@nerimity/mimiqueue";
+import { createClient } from "redis";
+import { logger } from "./logger";
+import { type DeployJob, deployJobSchema } from "./schema";
+import { deploy } from "./utils";
 
 const app = new Hono();
-
-app.use(
-	"/*",
-	cors({
-		origin: ["http://localhost:3000", "http://localhost:3001"], // Ajusta esto a los orígenes de tu aplicación Next.js
-		allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
-		allowHeaders: ["Content-Type", "Authorization"],
-		exposeHeaders: ["Content-Length", "X-Kuma-Revision"],
-		maxAge: 600,
-		credentials: true,
-	}),
-);
-
-export const LEMON_SQUEEZY_API_KEY = process.env.LEMON_SQUEEZY_API_KEY;
-export const LEMON_SQUEEZY_STORE_ID = process.env.LEMON_SQUEEZY_STORE_ID;
-
-app.get("/v1/health", (c) => {
-	return c.text("Hello Hono!");
+const redisClient = createClient({
+	url: process.env.REDIS_URL,
 });
 
-app.post("/v1/validate-license", async (c) => {
-	const { licenseKey } = await c.req.json();
+app.use(async (c, next) => {
+	if (c.req.path === "/health") {
+		return next();
+	}
+	const authHeader = c.req.header("X-API-Key");
 
-	if (!licenseKey) {
-		return c.json({ error: "License key is required" }, 400);
+	if (process.env.API_KEY !== authHeader) {
+		return c.json({ message: "Invalid API Key" }, 403);
 	}
 
-	try {
-		const licenseValidation = await validateLemonSqueezyLicense(licenseKey);
-
-		if (licenseValidation.valid) {
-			return c.json({
-				valid: true,
-				message: "License is valid",
-				metadata: licenseValidation.meta,
-			});
-		}
-		return c.json(
-			{
-				valid: false,
-				message: licenseValidation.error || "Invalid license",
-			},
-			400,
-		);
-	} catch (error) {
-		console.error("Error during license validation:", error);
-		return c.json({ error: "Internal server error" }, 500);
-	}
+	return next();
 });
 
-const port = 4000;
-console.log(`Server is running on port ${port}`);
-
-serve({
-	fetch: app.fetch,
-	port,
+app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
+	const data = c.req.valid("json");
+	const res = queue.add(data, { groupName: data.serverId });
+	return c.json(
+		{
+			message: "Deployment Added",
+		},
+		200,
+	);
 });
+
+app.get("/health", async (c) => {
+	return c.json({ status: "ok" });
+});
+
+const queue = new Queue({
+	name: "deployments",
+	process: async (job: DeployJob) => {
+		logger.info("Deploying job", job);
+		return await deploy(job);
+	},
+	redisClient,
+});
+
+(async () => {
+	await redisClient.connect();
+	await redisClient.flushAll();
+	logger.info("Redis Cleaned");
+})();
+
+const port = Number.parseInt(process.env.PORT || "3000");
+logger.info("Starting Deployments Server ✅", port);
+serve({ fetch: app.fetch, port });

apps/api/src/logger.ts

@@ -0,0 +1,10 @@
+import pino from "pino";
+
+export const logger = pino({
+	transport: {
+		target: "pino-pretty",
+		options: {
+			colorize: true,
+		},
+	},
+});

apps/api/src/schema.ts

@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+export const deployJobSchema = z.discriminatedUnion("applicationType", [
+	z.object({
+		applicationId: z.string(),
+		titleLog: z.string(),
+		descriptionLog: z.string(),
+		server: z.boolean().optional(),
+		type: z.enum(["deploy", "redeploy"]),
+		applicationType: z.literal("application"),
+		serverId: z.string().min(1),
+	}),
+	z.object({
+		composeId: z.string(),
+		titleLog: z.string(),
+		descriptionLog: z.string(),
+		server: z.boolean().optional(),
+		type: z.enum(["deploy", "redeploy"]),
+		applicationType: z.literal("compose"),
+		serverId: z.string().min(1),
+	}),
+]);
+
+export type DeployJob = z.infer<typeof deployJobSchema>;

apps/api/src/utils.ts

@@ -1,28 +1,96 @@
-import { LEMON_SQUEEZY_API_KEY, LEMON_SQUEEZY_STORE_ID } from ".";
+import {
+	deployApplication,
+	deployCompose,
+	deployRemoteApplication,
+	deployRemoteCompose,
+	rebuildApplication,
+	rebuildCompose,
+	rebuildRemoteApplication,
+	rebuildRemoteCompose,
+	updateApplicationStatus,
+	updateCompose,
+} from "@dokploy/server";
+import type { DeployJob } from "./schema";
 import type { LemonSqueezyLicenseResponse } from "./types";
 
-export const validateLemonSqueezyLicense = async (
-	licenseKey: string,
-): Promise<LemonSqueezyLicenseResponse> => {
-	try {
-		const response = await fetch(
-			"https://api.lemonsqueezy.com/v1/licenses/validate",
-			{
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-					"x-api-key": LEMON_SQUEEZY_API_KEY as string,
-				},
-				body: JSON.stringify({
-					license_key: licenseKey,
-					store_id: LEMON_SQUEEZY_STORE_ID as string,
-				}),
-			},
-		);
+// const LEMON_SQUEEZY_API_KEY = process.env.LEMON_SQUEEZY_API_KEY;
+// const LEMON_SQUEEZY_STORE_ID = process.env.LEMON_SQUEEZY_STORE_ID;
+// export const validateLemonSqueezyLicense = async (
+// 	licenseKey: string,
+// ): Promise<LemonSqueezyLicenseResponse> => {
+// 	try {
+// 		const response = await fetch(
+// 			"https://api.lemonsqueezy.com/v1/licenses/validate",
+// 			{
+// 				method: "POST",
+// 				headers: {
+// 					"Content-Type": "application/json",
+// 					"x-api-key": LEMON_SQUEEZY_API_KEY as string,
+// 				},
+// 				body: JSON.stringify({
+// 					license_key: licenseKey,
+// 					store_id: LEMON_SQUEEZY_STORE_ID as string,
+// 				}),
+// 			},
+// 		);
 
-		return response.json();
+// 		return response.json();
+// 	} catch (error) {
+// 		console.error("Error validating license:", error);
+// 		return { valid: false, error: "Error validating license" };
+// 	}
+// };
+
+export const deploy = async (job: DeployJob) => {
+	try {
+		if (job.applicationType === "application") {
+			await updateApplicationStatus(job.applicationId, "running");
+			if (job.server) {
+				if (job.type === "redeploy") {
+					await rebuildRemoteApplication({
+						applicationId: job.applicationId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				} else if (job.type === "deploy") {
+					await deployRemoteApplication({
+						applicationId: job.applicationId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				}
+			}
+		} else if (job.applicationType === "compose") {
+			await updateCompose(job.composeId, {
+				composeStatus: "running",
+			});
+
+			if (job.server) {
+				if (job.type === "redeploy") {
+					await rebuildRemoteCompose({
+						composeId: job.composeId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				} else if (job.type === "deploy") {
+					await deployRemoteCompose({
+						composeId: job.composeId,
+						titleLog: job.titleLog,
+						descriptionLog: job.descriptionLog,
+					});
+				}
+			}
+		}
 	} catch (error) {
-		console.error("Error validating license:", error);
-		return { valid: false, error: "Error validating license" };
+		console.log(error);
+		if (job.applicationType === "application") {
+			await updateApplicationStatus(job.applicationId, "error");
+		} else if (job.applicationType === "compose") {
+			await updateCompose(job.composeId, {
+				composeStatus: "error",
+			});
+		}
 	}
+
+	return true;
 };

apps/api/tsconfig.json

@@ -2,11 +2,12 @@
 	"compilerOptions": {
 		"target": "ESNext",
 		"module": "ESNext",
-		"moduleResolution": "Bundler",
+		"moduleResolution": "Node",
 		"strict": true,
 		"skipLibCheck": true,
-		"types": ["node"],
+		"outDir": "dist",
 		"jsx": "react-jsx",
 		"jsxImportSource": "hono/jsx"
-	}
+	},
+	"exclude": ["node_modules", "dist"]
 }

apps/docs/content/docs/core/templates/overview.mdx

@@ -31,8 +31,7 @@ The following templates are available:
 - **Wordpress**: Open Source Content Management System
 - **Open WebUI**: Free and Open Source ChatGPT Alternative
 - **Teable**: Open Source Airtable Alternative, Developer Friendly, No-code Database Built on Postgres
-
-
+- **Roundcube**: Free and open source webmail software for the masses, written in PHP, uses SMTP[^1].
 
 ## Create your own template
 
@@ -41,3 +40,5 @@ We accept contributions to upload new templates to the dokploy repository.
 Make sure to follow the guidelines for creating a template:
 
 [Steps to create your own template](https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#templates)
+
+[^1]: Please note that if you're self-hosting a mail server you need port 25 to be open for SMTP (Mail Transmission Protocol that allows you to send and receive) to work properly. Some VPS providers like [Hetzner](https://docs.hetzner.com/cloud/servers/faq/#why-can-i-not-send-any-mails-from-my-server) block this port by default for new clients.

apps/docs/mdx-components.tsx

@@ -10,8 +10,10 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 		p: ({ children }) => (
 			<p className="text-[#3E4342] dark:text-muted-foreground">{children}</p>
 		),
-		li: ({ children }) => (
-			<li className="text-[#3E4342] dark:text-muted-foreground">{children}</li>
+		li: ({ children, id }) => (
+			<li {...{ id }} className="text-[#3E4342] dark:text-muted-foreground">
+				{children}
+			</li>
 		),
 	};
 }

apps/docs/package.json

@@ -21,15 +21,11 @@
 		"react-ga4": "^2.1.0"
 	},
 	"devDependencies": {
-		"tsx": "4.15.7",
-		"@biomejs/biome": "1.8.1",
+		"autoprefixer": "10.4.12",
 		"@types/mdx": "^2.0.13",
-		"@types/node": "^20.14.2",
 		"@types/react": "^18.3.3",
-		"@types/react-dom": "^18.3.0",
-		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
-		"tailwindcss": "^3.4.4",
+		"tailwindcss": "^3.4.1",
 		"typescript": "^5.4.5"
 	}
 }

apps/dokploy/__test__/compose/compose.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllProperties } from "@/server/utils/docker/compose";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { addSuffixToAllProperties } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToConfigsRoot } from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToConfigsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config-service.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToConfigsInServices } from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToConfigsInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/config/config.test.ts

@@ -1,9 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import {
-	addSuffixToAllConfigs,
-	addSuffixToConfigsRoot,
-} from "@/server/utils/docker/compose/configs";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToAllConfigs, addSuffixToConfigsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -1,5 +1,5 @@
-import type { Domain } from "@/server/api/services/domain";
-import { createDomainLabels } from "@/server/utils/docker/domain";
+import type { Domain } from "@dokploy/server";
+import { createDomainLabels } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("createDomainLabels", () => {

apps/dokploy/__test__/compose/domain/network-root.test.ts

@@ -1,4 +1,4 @@
-import { addDokployNetworkToRoot } from "@/server/utils/docker/domain";
+import { addDokployNetworkToRoot } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("addDokployNetworkToRoot", () => {

apps/dokploy/__test__/compose/domain/network-service.test.ts

@@ -1,4 +1,4 @@
-import { addDokployNetworkToService } from "@/server/utils/docker/domain";
+import { addDokployNetworkToService } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 
 describe("addDokployNetworkToService", () => {

apps/dokploy/__test__/compose/network/network-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToNetworksRoot } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToNetworksRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network-service.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNetworks } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNetworks } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/network/network.test.ts

@@ -1,10 +1,10 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
+import { generateRandomHash } from "@dokploy/server";
 import {
 	addSuffixToAllNetworks,
 	addSuffixToServiceNetworks,
-} from "@/server/utils/docker/compose/network";
-import { addSuffixToNetworksRoot } from "@/server/utils/docker/compose/network";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import { addSuffixToNetworksRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToSecretsRoot } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToSecretsRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { dump, load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret-services.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToSecretsInServices } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToSecretsInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/secrets/secret.test.ts

@@ -1,5 +1,5 @@
-import { addSuffixToAllSecrets } from "@/server/utils/docker/compose/secrets";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { addSuffixToAllSecrets } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-container-name.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-depends-on.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-extends.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-links.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service-names.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/service.test.ts

@@ -1,8 +1,8 @@
 import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
-} from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/service/sevice-volumes-from.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToServiceNames } from "@/server/utils/docker/compose/service";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToServiceNames } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-2.test.ts

@@ -1,9 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import {
-	addSuffixToAllVolumes,
-	addSuffixToVolumesRoot,
-} from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToAllVolumes, addSuffixToVolumesRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-root.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToVolumesRoot } from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToVolumesRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume-services.test.ts

@@ -1,6 +1,6 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
-import { addSuffixToVolumesInServices } from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { generateRandomHash } from "@dokploy/server";
+import { addSuffixToVolumesInServices } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/compose/volume/volume.test.ts

@@ -1,9 +1,9 @@
-import { generateRandomHash } from "@/server/utils/docker/compose";
+import { generateRandomHash } from "@dokploy/server";
 import {
 	addSuffixToAllVolumes,
 	addSuffixToVolumesInServices,
-} from "@/server/utils/docker/compose/volume";
-import type { ComposeSpecification } from "@/server/utils/docker/types";
+} from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

apps/dokploy/__test__/drop/drop.test.test.ts

@@ -1,9 +1,9 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { paths } from "@/server/constants";
+import { paths } from "@dokploy/server/dist/constants";
 const { APPLICATIONS_PATH } = paths();
-import type { ApplicationNested } from "@/server/utils/builders";
-import { unzipDrop } from "@/server/utils/builders/drop";
+import type { ApplicationNested } from "@dokploy/server";
+import { unzipDrop } from "@dokploy/server";
 import AdmZip from "adm-zip";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
@@ -81,14 +81,17 @@ const baseApp: ApplicationNested = {
 	username: null,
 	dockerContextPath: null,
 };
-//
-vi.mock("@/server/constants", () => ({
-	paths: () => ({
-		APPLICATIONS_PATH: "./__test__/drop/zips/output",
-	}),
-	// APPLICATIONS_PATH: "./__test__/drop/zips/output",
-}));
 
+vi.mock("@dokploy/server/dist/constants", async (importOriginal) => {
+	const actual = await importOriginal();
+	return {
+		// @ts-ignore
+		...actual,
+		paths: () => ({
+			APPLICATIONS_PATH: "./__test__/drop/zips/output",
+		}),
+	};
+});
 describe("unzipDrop using real zip files", () => {
 	// const { APPLICATIONS_PATH } = paths();
 	beforeAll(async () => {
@@ -102,15 +105,19 @@ describe("unzipDrop using real zip files", () => {
 	it("should correctly extract a zip with a single root folder", async () => {
 		baseApp.appName = "single-file";
 		// const appName = "single-file";
-		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, baseApp);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-		expect(files.some((f) => f.name === "test.txt")).toBe(true);
+		try {
+			const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+			const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
+			console.log(`Output Path: ${outputPath}`);
+			const zipBuffer = zip.toBuffer();
+			const file = new File([zipBuffer], "single.zip");
+			await unzipDrop(file, baseApp);
+			const files = await fs.readdir(outputPath, { withFileTypes: true });
+			expect(files.some((f) => f.name === "test.txt")).toBe(true);
+		} catch (err) {
+			console.log(err);
+		} finally {
+		}
 	});
 
 	it("should correctly extract a zip with a single root folder and a subfolder", async () => {

apps/dokploy/__test__/requests/request.test.ts

@@ -1,4 +1,4 @@
-import { parseRawConfig, processLogs } from "@/server/utils/access-log/utils";
+import { parseRawConfig, processLogs } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
 const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
 

apps/dokploy/__test__/traefik/server/update-server-config.test.ts

@@ -5,11 +5,12 @@ vi.mock("node:fs", () => ({
 	default: fs,
 }));
 
-import type { Admin } from "@/server/api/services/admin";
-import { createDefaultServerTraefikConfig } from "@/server/setup/traefik-setup";
-import { loadOrCreateConfig } from "@/server/utils/traefik/application";
-import type { FileConfig } from "@/server/utils/traefik/file-types";
-import { updateServerTraefik } from "@/server/utils/traefik/web-server";
+import type { Admin, FileConfig } from "@dokploy/server";
+import {
+	createDefaultServerTraefikConfig,
+	loadOrCreateConfig,
+	updateServerTraefik,
+} from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: Admin = {
@@ -23,6 +24,9 @@ const baseAdmin: Admin = {
 	sshPrivateKey: null,
 	enableDockerCleanup: false,
 	enableLogRotation: false,
+	serversQuantity: 0,
+	stripeCustomerId: "",
+	stripeSubscriptionId: "",
 };
 
 beforeEach(() => {

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -1,7 +1,7 @@
-import type { Domain } from "@/server/api/services/domain";
-import type { Redirect } from "@/server/api/services/redirect";
-import type { ApplicationNested } from "@/server/utils/builders";
-import { createRouterConfig } from "@/server/utils/traefik/domain";
+import type { Domain } from "@dokploy/server";
+import type { Redirect } from "@dokploy/server";
+import type { ApplicationNested } from "@dokploy/server";
+import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {

apps/dokploy/__test__/vitest.config.ts

@@ -13,4 +13,9 @@ export default defineConfig({
 		exclude: ["**/node_modules/**", "**/dist/**", "**/.docker/**"],
 		pool: "forks",
 	},
+	define: {
+		"process.env": {
+			NODE: "test",
+		},
+	},
 });

apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx

@@ -17,7 +17,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -125,28 +125,14 @@ export const UpdatePort = ({ portId }: Props) => {
 									<FormItem>
 										<FormLabel>Published Port</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="1-65535"
-												{...field}
-												value={field.value?.toString() || ""}
-												onChange={(e) => {
-													const value = e.target.value;
-													if (value === "") {
-														field.onChange(0);
-													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
-													}
-												}}
-											/>
+											<NumberInput placeholder="1-65535" {...field} />
 										</FormControl>
 
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
+
 							<FormField
 								control={form.control}
 								name="targetPort"
@@ -154,22 +140,7 @@ export const UpdatePort = ({ portId }: Props) => {
 									<FormItem>
 										<FormLabel>Target Port</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="1-65535"
-												{...field}
-												value={field.value?.toString() || ""}
-												onChange={(e) => {
-													const value = e.target.value;
-													if (value === "") {
-														field.onChange(0);
-													} else {
-														const number = Number.parseInt(value, 10);
-														if (!Number.isNaN(number)) {
-															field.onChange(number);
-														}
-													}
-												}}
-											/>
+											<Input placeholder="1-65535" {...field} />
 										</FormControl>
 
 										<FormMessage />

apps/dokploy/components/dashboard/application/advanced/show-application-advanced-settings.tsx

@@ -80,7 +80,7 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx

@@ -16,20 +16,37 @@ interface Props {
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
 		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}${serverId ? `&serverId=${serverId}` : ""}`;
 		const ws = new WebSocket(wsUrl);
+		wsRef.current = ws; // Store WebSocket instance in ref
 
 		ws.onmessage = (e) => {
 			setData((currentData) => currentData + e.data);
 		};
 
-		return () => ws.close();
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			console.log("WebSocket connection closed");
+			wsRef.current = null; // Clear reference on close
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
 	}, [logPath, open]);
 
 	const scrollToBottom = () => {
@@ -45,7 +62,15 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
 			}}
 		>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>

apps/dokploy/components/dashboard/application/domains/add-domain.tsx

@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -228,13 +228,7 @@ export const AddDomain = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
-														placeholder={"3000"}
-														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
-													/>
+													<NumberInput placeholder={"3000"} {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -52,7 +52,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
 						<div className="flex w-full flex-col items-center justify-center gap-3">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To access to the application is required to set at least 1
+								To access the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">

apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx

@@ -21,20 +21,38 @@ export const ShowDeploymentCompose = ({
 }: Props) => {
 	const [data, setData] = useState("");
 	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
 	useEffect(() => {
 		if (!open || !logPath) return;
 
+		setData("");
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 
 		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}&serverId=${serverId}`;
 		const ws = new WebSocket(wsUrl);
 
+		wsRef.current = ws; // Store WebSocket instance in ref
+
 		ws.onmessage = (e) => {
 			setData((currentData) => currentData + e.data);
 		};
 
-		return () => ws.close();
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			console.log("WebSocket connection closed");
+			wsRef.current = null;
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
 	}, [logPath, open]);
 
 	const scrollToBottom = () => {
@@ -50,7 +68,15 @@ export const ShowDeploymentCompose = ({
 			open={open}
 			onOpenChange={(e) => {
 				onClose();
-				if (!e) setData("");
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
 			}}
 		>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>

apps/dokploy/components/dashboard/compose/domains/add-domain.tsx

@@ -18,7 +18,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+import { Input, NumberInput } from "@/components/ui/input";
 import {
 	Select,
 	SelectContent,
@@ -364,13 +364,7 @@ export const AddDomainCompose = ({
 											<FormItem>
 												<FormLabel>Container Port</FormLabel>
 												<FormControl>
-													<Input
-														placeholder={"3000"}
-														{...field}
-														onChange={(e) => {
-															field.onChange(Number.parseInt(e.target.value));
-														}}
-													/>
+													<NumberInput placeholder={"3000"} {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>

apps/dokploy/components/dashboard/compose/domains/show-domains.tsx

@@ -53,7 +53,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 						<div className="flex w-full flex-col items-center justify-center gap-3">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To access to the application is required to set at least 1
+								To access to the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">

apps/dokploy/components/dashboard/compose/general/compose-file-editor.tsx

@@ -77,7 +77,6 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 				});
 			})
 			.catch((e) => {
-				console.log(e);
 				toast.error("Error to update the compose config");
 			});
 	};

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import { Puzzle, RefreshCw } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
 interface Props {
@@ -34,6 +34,16 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 
 	const { mutateAsync, isLoading } = api.compose.fetchSourceType.useMutation();
 
+	useEffect(() => {
+		if (isOpen) {
+			mutateAsync({ composeId })
+				.then(() => {
+					refetch();
+				})
+				.catch((err) => {});
+		}
+	}, [isOpen]);
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>

apps/dokploy/components/dashboard/docker/logs/docker-logs-id.tsx

@@ -1,7 +1,7 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Terminal } from "@xterm/xterm";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 
@@ -18,12 +18,24 @@ export const DockerLogsId: React.FC<Props> = ({
 }) => {
 	const [term, setTerm] = React.useState<Terminal>();
 	const [lines, setLines] = React.useState<number>(40);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
 
-	const createTerminal = (): Terminal => {
+	useEffect(() => {
+		// if (containerId === "select-a-container") {
+		// 	return;
+		// }
 		const container = document.getElementById(id);
 		if (container) {
 			container.innerHTML = "";
 		}
+
+		if (wsRef.current) {
+			console.log(wsRef.current);
+			if (wsRef.current.readyState === WebSocket.OPEN) {
+				wsRef.current.close();
+			}
+			wsRef.current = null;
+		}
 		const termi = new Terminal({
 			cursorBlink: true,
 			cols: 80,
@@ -45,7 +57,7 @@ export const DockerLogsId: React.FC<Props> = ({
 
 		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
 		const ws = new WebSocket(wsUrl);
-
+		wsRef.current = ws;
 		const fitAddon = new FitAddon();
 		termi.loadAddon(fitAddon);
 		// @ts-ignore
@@ -54,6 +66,10 @@ export const DockerLogsId: React.FC<Props> = ({
 		termi.focus();
 		setTerm(termi);
 
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
 		ws.onmessage = (e) => {
 			termi.write(e.data);
 		};
@@ -62,12 +78,14 @@ export const DockerLogsId: React.FC<Props> = ({
 			console.log(e.reason);
 
 			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
+			wsRef.current = null;
+		};
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
 		};
-		return termi;
-	};
-
-	useEffect(() => {
-		createTerminal();
 	}, [lines, containerId]);
 
 	useEffect(() => {

apps/dokploy/components/dashboard/mariadb/advanced/show-mariadb-resources.tsx

@@ -79,7 +79,7 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/mariadb/backups/show-backup-mariadb.tsx

@@ -44,7 +44,7 @@ export const ShowBackupMariadb = ({ mariadbId }: Props) => {
 				<div className="flex flex-col gap-0.5">
 					<CardTitle className="text-xl">Backups</CardTitle>
 					<CardDescription>
-						Add backup to your database to save the data to a different
+						Add backups to your database to save the data to a different
 						providers.
 					</CardDescription>
 				</div>
@@ -62,8 +62,8 @@ export const ShowBackupMariadb = ({ mariadbId }: Props) => {
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
-							To create a backup is required to set at least 1 provider. Please,
-							go to{" "}
+							To create a backup it is required to set at least 1 provider.
+							Please, go to{" "}
 							<Link
 								href="/dashboard/settings/server"
 								className="text-foreground"

apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -48,6 +48,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 	const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
 	const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
+	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),
@@ -79,7 +80,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 		const buildConnectionUrl = () => {
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${ip}:${port}/${data?.databaseName}`;
+			return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());
@@ -90,7 +91,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 		form,
 		data?.databaseName,
 		data?.databaseUser,
-		ip,
+		getIp,
 	]);
 	return (
 		<>

apps/dokploy/components/dashboard/mongo/advanced/show-mongo-resources.tsx

@@ -79,7 +79,7 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/mongo/backups/show-backup-mongo.tsx

@@ -44,8 +44,8 @@ export const ShowBackupMongo = ({ mongoId }: Props) => {
 				<div className="flex flex-col gap-0.5">
 					<CardTitle className="text-xl">Backups</CardTitle>
 					<CardDescription>
-						Add backup to your database to save the data to a different
-						providers.
+						Add backups to your database to save the data to a different
+						provider.
 					</CardDescription>
 				</div>
 
@@ -62,8 +62,8 @@ export const ShowBackupMongo = ({ mongoId }: Props) => {
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
-							To create a backup is required to set at least 1 provider. Please,
-							go to{" "}
+							To create a backup it is required to set at least 1 provider.
+							Please, go to{" "}
 							<Link
 								href="/dashboard/settings/server"
 								className="text-foreground"

apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -48,7 +48,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 	const { data, refetch } = api.mongo.one.useQuery({ mongoId });
 	const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-
+	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),
@@ -80,7 +80,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 		const buildConnectionUrl = () => {
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${ip}:${port}`;
+			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());
@@ -90,7 +90,7 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 		data?.databasePassword,
 		form,
 		data?.databaseUser,
-		ip,
+		getIp,
 	]);
 
 	return (

apps/dokploy/components/dashboard/mongo/volumes/show-volumes.tsx

@@ -30,7 +30,7 @@ export const ShowVolumes = ({ mongoId }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Volumes</CardTitle>
 					<CardDescription>
-						If you want to persist data in this mongo use the following config
+						If you want to persist data in this mongo use the following config.
 						to setup the volumes
 					</CardDescription>
 				</div>

apps/dokploy/components/dashboard/monitoring/docker/show.tsx

@@ -191,7 +191,7 @@ export const DockerMonitoring = ({
 				<CardHeader>
 					<CardTitle className="text-xl">Monitoring</CardTitle>
 					<CardDescription>
-						Watch the usage of your server in the current app
+						Watch the usage of your server in the current app.
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-4">

apps/dokploy/components/dashboard/mysql/advanced/show-mysql-resources.tsx

@@ -79,7 +79,7 @@ export const ShowMysqlResources = ({ mysqlId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/mysql/backups/show-backup-mysql.tsx

@@ -44,8 +44,8 @@ export const ShowBackupMySql = ({ mysqlId }: Props) => {
 				<div className="flex flex-col gap-0.5">
 					<CardTitle className="text-xl">Backups</CardTitle>
 					<CardDescription>
-						Add backup to your database to save the data to a different
-						providers.
+						Add backups to your database to save the data to a different
+						provider.
 					</CardDescription>
 				</div>
 
@@ -62,8 +62,8 @@ export const ShowBackupMySql = ({ mysqlId }: Props) => {
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
-							To create a backup is required to set at least 1 provider. Please,
-							go to{" "}
+							To create a backup it is required to set at least 1 provider.
+							Please, go to{" "}
 							<Link
 								href="/dashboard/settings/server"
 								className="text-foreground"

apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx

@@ -48,7 +48,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 	const { data, refetch } = api.mysql.one.useQuery({ mysqlId });
 	const { mutateAsync, isLoading } = api.mysql.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-
+	const getIp = data?.server?.ipAddress || ip;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),
@@ -80,7 +80,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 		const buildConnectionUrl = () => {
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `mysql://${data?.databaseUser}:${data?.databasePassword}@${ip}:${port}/${data?.databaseName}`;
+			return `mysql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());
@@ -91,7 +91,7 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 		data?.databaseName,
 		data?.databaseUser,
 		form,
-		ip,
+		getIp,
 	]);
 	return (
 		<>

apps/dokploy/components/dashboard/postgres/advanced/show-postgres-resources.tsx

@@ -79,7 +79,7 @@ export const ShowPostgresResources = ({ postgresId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/postgres/backups/show-backup-postgres.tsx

@@ -45,8 +45,8 @@ export const ShowBackupPostgres = ({ postgresId }: Props) => {
 				<div className="flex flex-col gap-0.5">
 					<CardTitle className="text-xl">Backups</CardTitle>
 					<CardDescription>
-						Add backup to your database to save the data to a different
-						providers.
+						Add backups to your database to save the data to a different
+						provider.
 					</CardDescription>
 				</div>
 
@@ -63,8 +63,8 @@ export const ShowBackupPostgres = ({ postgresId }: Props) => {
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
-							To create a backup is required to set at least 1 provider. Please,
-							go to{" "}
+							To create a backup it is required to set at least 1 provider.
+							Please, go to{" "}
 							<Link
 								href="/dashboard/settings/server"
 								className="text-foreground"

apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx

@@ -48,6 +48,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 	const { data, refetch } = api.postgres.one.useQuery({ postgresId });
 	const { mutateAsync, isLoading } =
 		api.postgres.saveExternalPort.useMutation();
+	const getIp = data?.server?.ipAddress || ip;
 	const [connectionUrl, setConnectionUrl] = useState("");
 
 	const form = useForm<DockerProvider>({
@@ -79,10 +80,9 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 
 	useEffect(() => {
 		const buildConnectionUrl = () => {
-			const hostname = window.location.hostname;
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${ip}:${port}/${data?.databaseName}`;
+			return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());
@@ -92,7 +92,7 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 		data?.databasePassword,
 		form,
 		data?.databaseName,
-		ip,
+		getIp,
 	]);
 
 	return (

apps/dokploy/components/dashboard/project/add-compose.tsx

@@ -39,7 +39,7 @@ import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CircuitBoard, HelpCircle } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -71,6 +71,7 @@ interface Props {
 
 export const AddCompose = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
+	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { mutateAsync, isLoading, error, isError } =
@@ -101,6 +102,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 		})
 			.then(async () => {
 				toast.success("Compose Created");
+				setVisible(false);
 				await utils.project.one.invalidate({
 					projectId,
 				});
@@ -111,7 +113,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 	};
 
 	return (
-		<Dialog>
+		<Dialog open={visible} onOpenChange={setVisible}>
 			<DialogTrigger className="w-full">
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"

apps/dokploy/components/dashboard/projects/show.tsx

@@ -15,20 +15,25 @@ import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
+	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
 import {
 	AlertTriangle,
 	BookIcon,
+	CircuitBoard,
+	ExternalLink,
 	ExternalLinkIcon,
 	FolderInput,
 	MoreHorizontalIcon,
 	TrashIcon,
 } from "lucide-react";
 import Link from "next/link";
+import { Fragment } from "react";
 import { toast } from "sonner";
 import { UpdateProject } from "./update";
 
@@ -45,6 +50,7 @@ export const ShowProjects = () => {
 		},
 	);
 	const { mutateAsync } = api.project.remove.useMutation();
+
 	return (
 		<>
 			{data?.length === 0 && (
@@ -74,17 +80,87 @@ export const ShowProjects = () => {
 						project?.redis.length +
 						project?.applications.length +
 						project?.compose.length;
+
+					const flattedDomains = [
+						...project.applications.flatMap((a) => a.domains),
+						...project.compose.flatMap((a) => a.domains),
+					];
+
+					const renderDomainsDropdown = (
+						item: typeof project.compose | typeof project.applications,
+					) =>
+						item[0] ? (
+							<DropdownMenuGroup>
+								<DropdownMenuLabel>
+									{"applicationId" in item[0] ? "Applications" : "Compose"}
+								</DropdownMenuLabel>
+								{item.map((a) => (
+									<Fragment
+										key={"applicationId" in a ? a.applicationId : a.composeId}
+									>
+										<DropdownMenuSeparator />
+										<DropdownMenuGroup>
+											<DropdownMenuLabel className="font-normal capitalize text-xs ">
+												{a.name}
+											</DropdownMenuLabel>
+											<DropdownMenuSeparator />
+											{a.domains.map((domain) => (
+												<DropdownMenuItem key={domain.domainId} asChild>
+													<Link
+														className="space-x-4 text-xs cursor-pointer justify-between"
+														target="_blank"
+														href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+													>
+														<span>{domain.host}</span>
+														<ExternalLink className="size-4 shrink-0" />
+													</Link>
+												</DropdownMenuItem>
+											))}
+										</DropdownMenuGroup>
+									</Fragment>
+								))}
+							</DropdownMenuGroup>
+						) : null;
+
 					return (
 						<div key={project.projectId} className="w-full lg:max-w-md">
 							<Link href={`/dashboard/project/${project.projectId}`}>
 								<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
-									<Button
-										className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-										size="sm"
-										variant="default"
-									>
-										<ExternalLinkIcon className="size-3.5" />
-									</Button>
+									{flattedDomains.length > 1 ? (
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button
+													className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+													size="sm"
+													variant="default"
+												>
+													<ExternalLinkIcon className="size-3.5" />
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent
+												className="w-[200px] space-y-2"
+												onClick={(e) => e.stopPropagation()}
+											>
+												{renderDomainsDropdown(project.applications)}
+												{renderDomainsDropdown(project.compose)}
+											</DropdownMenuContent>
+										</DropdownMenu>
+									) : flattedDomains[0] ? (
+										<Button
+											className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+											size="sm"
+											variant="default"
+											onClick={(e) => e.stopPropagation()}
+										>
+											<Link
+												href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
+												target="_blank"
+											>
+												<ExternalLinkIcon className="size-3.5" />
+											</Link>
+										</Button>
+									) : null}
+
 									<CardHeader>
 										<CardTitle className="flex items-center justify-between gap-2">
 											<span className="flex flex-col gap-1.5">

apps/dokploy/components/dashboard/redis/advanced/show-redis-resources.tsx

@@ -79,7 +79,7 @@ export const ShowRedisResources = ({ redisId }: Props) => {
 			<CardHeader>
 				<CardTitle className="text-xl">Resources</CardTitle>
 				<CardDescription>
-					If you want to decrease or increase the resources to a specific
+					If you want to decrease or increase the resources to a specific.
 					application or database
 				</CardDescription>
 			</CardHeader>

apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx

@@ -48,6 +48,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 	const { data, refetch } = api.redis.one.useQuery({ redisId });
 	const { mutateAsync, isLoading } = api.redis.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
+	const getIp = data?.server?.ipAddress || ip;
 
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
@@ -81,11 +82,11 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 			const hostname = window.location.hostname;
 			const port = form.watch("externalPort") || data?.externalPort;
 
-			return `redis://default:${data?.databasePassword}@${ip}:${port}`;
+			return `redis://default:${data?.databasePassword}@${getIp}:${port}`;
 		};
 
 		setConnectionUrl(buildConnectionUrl());
-	}, [data?.appName, data?.externalPort, data?.databasePassword, form, ip]);
+	}, [data?.appName, data?.externalPort, data?.databasePassword, form, getIp]);
 	return (
 		<>
 			<div className="flex w-full flex-col gap-5 ">

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -0,0 +1,241 @@
+import { Button } from "@/components/ui/button";
+import { NumberInput } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { loadStripe } from "@stripe/stripe-js";
+import clsx from "clsx";
+import { AlertTriangle, CheckIcon, MinusIcon, PlusIcon } from "lucide-react";
+import React, { useState } from "react";
+
+const stripePromise = loadStripe(
+	"pk_test_51QAm7bF3cxQuHeOz0xg04o9teeyTbbNHQPJ5Tr98MlTEan9MzewT3gwh0jSWBNvrRWZ5vASoBgxUSF4gPWsJwATk00Ir2JZ0S1",
+);
+
+export const calculatePrice = (count: number, isAnnual = false) => {
+	if (isAnnual) {
+		if (count <= 1) return 45.9;
+		return 35.7 * count;
+	}
+	if (count <= 1) return 4.5;
+	return count * 3.5;
+};
+// 178.156.147.118
+export const ShowBilling = () => {
+	const { data: servers } = api.server.all.useQuery(undefined);
+	const { data: admin } = api.admin.one.useQuery();
+	const { data } = api.stripe.getProducts.useQuery();
+	const { mutateAsync: createCheckoutSession } =
+		api.stripe.createCheckoutSession.useMutation();
+
+	const { mutateAsync: createCustomerPortalSession } =
+		api.stripe.createCustomerPortalSession.useMutation();
+
+	const [serverQuantity, setServerQuantity] = useState(3);
+	const [isAnnual, setIsAnnual] = useState(false);
+
+	const handleCheckout = async (productId: string) => {
+		const stripe = await stripePromise;
+		if (data && data.subscriptions.length === 0) {
+			createCheckoutSession({
+				productId,
+				serverQuantity: serverQuantity,
+				isAnnual,
+			}).then(async (session) => {
+				await stripe?.redirectToCheckout({
+					sessionId: session.sessionId,
+				});
+			});
+		}
+	};
+	const products = data?.products.filter((product) => {
+		// @ts-ignore
+		const interval = product?.default_price?.recurring?.interval;
+		return isAnnual ? interval === "year" : interval === "month";
+	});
+
+	const maxServers = admin?.serversQuantity ?? 1;
+	const percentage = ((servers?.length ?? 0) / maxServers) * 100;
+	const safePercentage = Math.min(percentage, 100);
+
+	return (
+		<div className="flex flex-col gap-4 w-full">
+			<Tabs
+				defaultValue="monthly"
+				value={isAnnual ? "annual" : "monthly"}
+				className="w-full"
+				onValueChange={(e) => setIsAnnual(e === "annual")}
+			>
+				<TabsList>
+					<TabsTrigger value="monthly">Monthly</TabsTrigger>
+					<TabsTrigger value="annual">Annual</TabsTrigger>
+				</TabsList>
+			</Tabs>
+			{admin?.stripeSubscriptionId && (
+				<div className="space-y-2">
+					<h3 className="text-lg font-medium">Servers Plan</h3>
+					<p className="text-sm text-muted-foreground">
+						You have {servers?.length} server on your plan of{" "}
+						{admin?.serversQuantity} servers
+					</p>
+					<div className="pb-5">
+						<Progress value={safePercentage} className="max-w-lg" />
+					</div>
+					{admin && (
+						<>
+							{admin.serversQuantity! <= servers?.length! && (
+								<div className="flex flex-row gap-4 p-2 bg-yellow-50 dark:bg-yellow-950 rounded-lg items-center">
+									<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
+									<span className="text-sm text-yellow-600 dark:text-yellow-400">
+										You have reached the maximum number of servers you can
+										create, please upgrade your plan to add more servers.
+									</span>
+								</div>
+							)}
+						</>
+					)}
+				</div>
+			)}
+			{products?.map((product) => {
+				const featured = true;
+				return (
+					<div key={product.id}>
+						<section
+							className={clsx(
+								"flex flex-col rounded-3xl  border-dashed border-2 px-4 max-w-sm",
+								featured
+									? "order-first bg-black border py-8 lg:order-none"
+									: "lg:py-8",
+							)}
+						>
+							{isAnnual ? (
+								<div className="flex flex-row gap-2 items-center">
+									<p className=" text-2xl font-semibold tracking-tight text-primary ">
+										$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
+									</p>
+									|
+									<p className=" text-base font-semibold tracking-tight text-muted-foreground">
+										${" "}
+										{(calculatePrice(serverQuantity, isAnnual) / 12).toFixed(2)}{" "}
+										/ Month USD
+									</p>
+								</div>
+							) : (
+								<p className=" text-2xl font-semibold tracking-tight text-primary ">
+									$ {calculatePrice(serverQuantity, isAnnual).toFixed(2)} USD
+								</p>
+							)}
+							<h3 className="mt-5 font-medium text-lg text-white">
+								{product.name}
+							</h3>
+							<p
+								className={clsx(
+									"text-sm",
+									featured ? "text-white" : "text-slate-400",
+								)}
+							>
+								{product.description}
+							</p>
+
+							<ul
+								role="list"
+								className={clsx(
+									" mt-4 flex flex-col gap-y-2 text-sm",
+									featured ? "text-white" : "text-slate-200",
+								)}
+							>
+								{[
+									"All the features of Dokploy",
+									"Unlimited deployments",
+									"Self-hosted on your own infrastructure",
+									"Full access to all deployment features",
+									"Dokploy integration",
+									"Backups",
+									"All Incoming features",
+								].map((feature) => (
+									<li key={feature} className="flex text-muted-foreground">
+										<CheckIcon />
+										<span className="ml-4">{feature}</span>
+									</li>
+								))}
+							</ul>
+							<div className="flex flex-col gap-2 mt-4">
+								<div className="flex items-center gap-2 justify-center">
+									<span className="text-sm text-muted-foreground">
+										{serverQuantity} Servers
+									</span>
+								</div>
+
+								<div className="flex items-center space-x-2">
+									<Button
+										disabled={serverQuantity <= 1}
+										variant="outline"
+										onClick={() => {
+											if (serverQuantity <= 1) return;
+
+											setServerQuantity(serverQuantity - 1);
+										}}
+									>
+										<MinusIcon className="h-4 w-4" />
+									</Button>
+									<NumberInput
+										value={serverQuantity}
+										onChange={(e) => {
+											setServerQuantity(e.target.value as unknown as number);
+										}}
+									/>
+
+									<Button
+										variant="outline"
+										onClick={() => {
+											setServerQuantity(serverQuantity + 1);
+										}}
+									>
+										<PlusIcon className="h-4 w-4" />
+									</Button>
+								</div>
+								<div
+									className={cn(
+										data?.subscriptions && data?.subscriptions?.length > 0
+											? "justify-between"
+											: "justify-end",
+										"flex flex-row  items-center gap-2 mt-4",
+									)}
+								>
+									{admin?.stripeCustomerId && (
+										<Button
+											variant="secondary"
+											className="w-full"
+											onClick={async () => {
+												const session = await createCustomerPortalSession();
+
+												window.open(session.url);
+											}}
+										>
+											Manage Subscription
+										</Button>
+									)}
+
+									{data?.subscriptions?.length === 0 && (
+										<div className="justify-end w-full">
+											<Button
+												className="w-full"
+												onClick={async () => {
+													handleCheckout(product.id);
+												}}
+												disabled={serverQuantity < 1}
+											>
+												Subscribe
+											</Button>
+										</div>
+									)}
+								</div>
+							</div>
+						</section>
+					</div>
+				);
+			})}
+		</div>
+	);
+};

apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx

@@ -18,10 +18,25 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, HelpCircle } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -35,6 +50,7 @@ const addCertificate = z.object({
 	certificateData: z.string().min(1, "Certificate data is required"),
 	privateKey: z.string().min(1, "Private key is required"),
 	autoRenew: z.boolean().optional(),
+	serverId: z.string().optional(),
 });
 
 type AddCertificate = z.infer<typeof addCertificate>;
@@ -44,6 +60,7 @@ export const AddCertificate = () => {
 
 	const { mutateAsync, isError, error, isLoading } =
 		api.certificates.create.useMutation();
+	const { data: servers } = api.server.withSSHKey.useQuery();
 
 	const form = useForm<AddCertificate>({
 		defaultValues: {
@@ -64,6 +81,7 @@ export const AddCertificate = () => {
 			certificateData: data.certificateData,
 			privateKey: data.privateKey,
 			autoRenew: data.autoRenew,
+			serverId: data.serverId,
 		})
 			.then(async () => {
 				toast.success("Certificate Created");
@@ -144,6 +162,47 @@ export const AddCertificate = () => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="serverId"
+							render={({ field }) => (
+								<FormItem>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+													Select a Server (Optional)
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormLabel>
+											</TooltipTrigger>
+										</Tooltip>
+									</TooltipProvider>
+
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a Server" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{servers?.map((server) => (
+													<SelectItem
+														key={server.serverId}
+														value={server.serverId}
+													>
+														{server.name}
+													</SelectItem>
+												))}
+												<SelectLabel>Servers ({servers?.length})</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
 					</form>
 
 					<DialogFooter className="flex w-full flex-row !justify-between pt-3">

apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx

@@ -27,7 +27,8 @@ export const ShowCertificates = () => {
 						<div className="flex flex-col items-center gap-3">
 							<ShieldCheck className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To create a certificate is required to upload your certificate
+								To create a certificate it is required to upload an existing
+								certificate
 							</span>
 							<AddCertificate />
 						</div>

apps/dokploy/components/dashboard/settings/cluster/registry/add-docker-registry.tsx

@@ -17,10 +17,18 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { AlertTriangle, Container } from "lucide-react";
-import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -36,10 +44,9 @@ const AddRegistrySchema = z.object({
 	password: z.string().min(1, {
 		message: "Password is required",
 	}),
-	registryUrl: z.string().min(1, {
-		message: "Registry URL is required",
-	}),
+	registryUrl: z.string(),
 	imagePrefix: z.string(),
+	serverId: z.string().optional(),
 });
 
 type AddRegistry = z.infer<typeof AddRegistrySchema>;
@@ -48,9 +55,9 @@ export const AddRegistry = () => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, error, isError } = api.registry.create.useMutation();
+	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { mutateAsync: testRegistry, isLoading } =
 		api.registry.testRegistry.useMutation();
-	const router = useRouter();
 	const form = useForm<AddRegistry>({
 		defaultValues: {
 			username: "",
@@ -58,6 +65,7 @@ export const AddRegistry = () => {
 			registryUrl: "",
 			imagePrefix: "",
 			registryName: "",
+			serverId: "",
 		},
 		resolver: zodResolver(AddRegistrySchema),
 	});
@@ -67,6 +75,7 @@ export const AddRegistry = () => {
 	const registryUrl = form.watch("registryUrl");
 	const registryName = form.watch("registryName");
 	const imagePrefix = form.watch("imagePrefix");
+	const serverId = form.watch("serverId");
 
 	useEffect(() => {
 		form.reset({
@@ -74,6 +83,7 @@ export const AddRegistry = () => {
 			password: "",
 			registryUrl: "",
 			imagePrefix: "",
+			serverId: "",
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
@@ -85,6 +95,7 @@ export const AddRegistry = () => {
 			registryUrl: data.registryUrl,
 			registryType: "cloud",
 			imagePrefix: data.imagePrefix,
+			serverId: data.serverId,
 		})
 			.then(async (data) => {
 				await utils.registry.all.invalidate();
@@ -211,34 +222,77 @@ export const AddRegistry = () => {
 								)}
 							/>
 						</div>
-						<DialogFooter className="flex flex-row w-full sm:justify-between gap-4 flex-wrap">
-							<Button
-								type="button"
-								variant={"secondary"}
-								isLoading={isLoading}
-								onClick={async () => {
-									await testRegistry({
-										username: username,
-										password: password,
-										registryUrl: registryUrl,
-										registryName: registryName,
-										registryType: "cloud",
-										imagePrefix: imagePrefix,
-									})
-										.then((data) => {
-											if (data) {
-												toast.success("Registry Tested Successfully");
-											} else {
-												toast.error("Registry Test Failed");
-											}
+						<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col">
+							<div className="flex flex-col gap-4 border p-2 rounded-lg">
+								<span className="text-sm text-muted-foreground">
+									Select a server to test the registry. If you don't have a
+									server choose the default one.
+								</span>
+								<FormField
+									control={form.control}
+									name="serverId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Server (Optional)</FormLabel>
+											<FormControl>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value}
+												>
+													<SelectTrigger className="w-full">
+														<SelectValue placeholder="Select a server" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															<SelectLabel>Servers</SelectLabel>
+															{servers?.map((server) => (
+																<SelectItem
+																	key={server.serverId}
+																	value={server.serverId}
+																>
+																	{server.name}
+																</SelectItem>
+															))}
+															<SelectItem value={"none"}>None</SelectItem>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<Button
+									type="button"
+									variant={"secondary"}
+									isLoading={isLoading}
+									onClick={async () => {
+										await testRegistry({
+											username: username,
+											password: password,
+											registryUrl: registryUrl,
+											registryName: registryName,
+											registryType: "cloud",
+											imagePrefix: imagePrefix,
+											serverId: serverId,
 										})
-										.catch(() => {
-											toast.error("Error to test the registry");
-										});
-								}}
-							>
-								Test Registry
-							</Button>
+											.then((data) => {
+												if (data) {
+													toast.success("Registry Tested Successfully");
+												} else {
+													toast.error("Registry Test Failed");
+												}
+											})
+											.catch(() => {
+												toast.error("Error to test the registry");
+											});
+									}}
+								>
+									Test Registry
+								</Button>
+							</div>
+
 							<Button isLoading={form.formState.isSubmitting} type="submit">
 								Create
 							</Button>

apps/dokploy/components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx

@@ -1,181 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Container } from "lucide-react";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const AddRegistrySchema = z.object({
-	username: z
-		.string()
-		.min(1, {
-			message: "Username is required",
-		})
-		.regex(/^[a-zA-Z0-9]+$/, {
-			message: "Username can only contain letters and numbers",
-		}),
-	password: z.string().min(1, {
-		message: "Password is required",
-	}),
-	registryUrl: z.string().min(1, {
-		message: "Registry URL is required",
-	}),
-});
-
-type AddRegistry = z.infer<typeof AddRegistrySchema>;
-
-export const AddSelfHostedRegistry = () => {
-	const utils = api.useUtils();
-	const [isOpen, setIsOpen] = useState(false);
-	const { mutateAsync, error, isError, isLoading } =
-		api.registry.enableSelfHostedRegistry.useMutation();
-	const router = useRouter();
-	const form = useForm<AddRegistry>({
-		defaultValues: {
-			username: "",
-			password: "",
-			registryUrl: "",
-		},
-		resolver: zodResolver(AddRegistrySchema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			registryUrl: "",
-			username: "",
-			password: "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
-
-	const onSubmit = async (data: AddRegistry) => {
-		await mutateAsync({
-			registryUrl: data.registryUrl,
-			username: data.username,
-			password: data.password,
-		})
-			.then(async (data) => {
-				await utils.registry.all.invalidate();
-				toast.success("Self Hosted Registry Created");
-				setIsOpen(false);
-			})
-			.catch(() => {
-				toast.error("Error to create a self hosted registry");
-			});
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button className="max-sm:w-full">
-					<Container className="h-4 w-4" />
-					Enable Self Hosted Registry
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:m:max-w-lg ">
-				<DialogHeader>
-					<DialogTitle>Add a self hosted registry</DialogTitle>
-					<DialogDescription>
-						Fill the next fields to add a self hosted registry.
-					</DialogDescription>
-				</DialogHeader>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
-				<Form {...form}>
-					<form
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<div className="flex flex-col gap-4">
-							<FormField
-								control={form.control}
-								name="username"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Username</FormLabel>
-										<FormControl>
-											<Input placeholder="Username" {...field} />
-										</FormControl>
-
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						<div className="flex flex-col gap-4">
-							<FormField
-								control={form.control}
-								name="password"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Password</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Password"
-												{...field}
-												type="password"
-											/>
-										</FormControl>
-
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						<div className="flex flex-col gap-4">
-							<FormField
-								control={form.control}
-								name="registryUrl"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Registry URL</FormLabel>
-										<FormControl>
-											<Input placeholder="registry.dokploy.com" {...field} />
-										</FormControl>
-										<FormDescription>
-											Point a DNS record to the VPS IP address.
-										</FormDescription>
-
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</div>
-						<DialogFooter>
-							<Button isLoading={isLoading} type="submit">
-								Create
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx

@@ -8,7 +8,6 @@ import {
 import { api } from "@/utils/api";
 import { Server } from "lucide-react";
 import { AddRegistry } from "./add-docker-registry";
-import { AddSelfHostedRegistry } from "./add-self-docker-registry";
 import { DeleteRegistry } from "./delete-registry";
 import { UpdateDockerRegistry } from "./update-docker-registry";
 
@@ -31,8 +30,6 @@ export const ShowRegistry = () => {
 					<div className="flex flex-row gap-2">
 						{data && data?.length > 0 && (
 							<>
-								{!haveSelfHostedRegistry && <AddSelfHostedRegistry />}
-
 								<AddRegistry />
 							</>
 						)}
@@ -43,11 +40,10 @@ export const ShowRegistry = () => {
 						<div className="flex flex-col items-center gap-3">
 							<Server className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground text-center">
-								To create a cluster is required to set a registry.
+								To create a cluster it is required to set a registry.
 							</span>
 
 							<div className="flex flex-row md:flex-row gap-2 flex-wrap w-full justify-center">
-								<AddSelfHostedRegistry />
 								<AddRegistry />
 							</div>
 						</div>

apps/dokploy/components/dashboard/settings/cluster/registry/update-docker-registry.tsx

@@ -17,6 +17,15 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -34,10 +43,9 @@ const updateRegistry = z.object({
 		message: "Username is required",
 	}),
 	password: z.string(),
-	registryUrl: z.string().min(1, {
-		message: "Registry URL is required",
-	}),
+	registryUrl: z.string(),
 	imagePrefix: z.string(),
+	serverId: z.string().optional(),
 });
 
 type UpdateRegistry = z.infer<typeof updateRegistry>;
@@ -48,6 +56,8 @@ interface Props {
 
 export const UpdateDockerRegistry = ({ registryId }: Props) => {
 	const utils = api.useUtils();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+
 	const { mutateAsync: testRegistry, isLoading } =
 		api.registry.testRegistry.useMutation();
 	const { data, refetch } = api.registry.one.useQuery(
@@ -69,15 +79,19 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 			username: "",
 			password: "",
 			registryUrl: "",
+			serverId: "",
 		},
 		resolver: zodResolver(updateRegistry),
 	});
 
+	console.log(form.formState.errors);
+
 	const password = form.watch("password");
 	const username = form.watch("username");
 	const registryUrl = form.watch("registryUrl");
 	const registryName = form.watch("registryName");
 	const imagePrefix = form.watch("imagePrefix");
+	const serverId = form.watch("serverId");
 
 	useEffect(() => {
 		if (data) {
@@ -87,6 +101,7 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 				username: data.username || "",
 				password: "",
 				registryUrl: data.registryUrl || "",
+				serverId: "",
 			});
 		}
 	}, [form, form.reset, data]);
@@ -99,6 +114,7 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 			username: data.username,
 			registryUrl: data.registryUrl,
 			imagePrefix: data.imagePrefix,
+			serverId: data.serverId,
 		})
 			.then(async (data) => {
 				toast.success("Registry Updated");
@@ -224,13 +240,47 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 						</div>
 					</form>
 
-					<DialogFooter
-						className={cn(
-							isCloud ? "sm:justify-between " : "",
-							"flex flex-row w-full gap-4 flex-wrap",
-						)}
-					>
-						{isCloud && (
+					<DialogFooter className="flex flex-col w-full sm:justify-between gap-4 flex-wrap sm:flex-col">
+						<div className="flex flex-col gap-4 border p-2 rounded-lg">
+							<span className="text-sm text-muted-foreground">
+								Select a server to test the registry. If you don't have a server
+								choose the default one.
+							</span>
+							<FormField
+								control={form.control}
+								name="serverId"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Server (Optional)</FormLabel>
+										<FormControl>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<SelectTrigger className="w-full">
+													<SelectValue placeholder="Select a server" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														<SelectLabel>Servers</SelectLabel>
+														{servers?.map((server) => (
+															<SelectItem
+																key={server.serverId}
+																value={server.serverId}
+															>
+																{server.name}
+															</SelectItem>
+														))}
+														<SelectItem value={"none"}>None</SelectItem>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<Button
 								type="button"
 								variant={"secondary"}
@@ -243,6 +293,7 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 										registryName: registryName,
 										registryType: "cloud",
 										imagePrefix: imagePrefix,
+										serverId: serverId,
 									})
 										.then((data) => {
 											if (data) {
@@ -258,12 +309,12 @@ export const UpdateDockerRegistry = ({ registryId }: Props) => {
 							>
 								Test Registry
 							</Button>
-						)}
+						</div>
 
 						<Button
 							isLoading={form.formState.isSubmitting}
-							form="hook-form"
 							type="submit"
+							form="hook-form"
 						>
 							Update
 						</Button>

apps/dokploy/components/dashboard/settings/destination/add-destination.tsx

@@ -18,6 +18,16 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
@@ -32,12 +42,15 @@ const addDestination = z.object({
 	bucket: z.string(),
 	region: z.string(),
 	endpoint: z.string(),
+	serverId: z.string().optional(),
 });
 
 type AddDestination = z.infer<typeof addDestination>;
 
 export const AddDestination = () => {
 	const utils = api.useUtils();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	const { mutateAsync, isError, error, isLoading } =
 		api.destination.create.useMutation();
@@ -189,30 +202,106 @@ export const AddDestination = () => {
 						/>
 					</form>
 
-					<DialogFooter className="flex w-full flex-row !justify-between pt-3">
-						<Button
-							isLoading={isLoadingConnection}
-							type="button"
-							variant="secondary"
-							onClick={async () => {
-								await testConnection({
-									accessKey: form.getValues("accessKeyId"),
-									bucket: form.getValues("bucket"),
-									endpoint: form.getValues("endpoint"),
-									name: "Test",
-									region: form.getValues("region"),
-									secretAccessKey: form.getValues("secretAccessKey"),
-								})
-									.then(async () => {
-										toast.success("Connection Success");
+					<DialogFooter
+						className={cn(
+							isCloud ? "!flex-col" : "flex-row",
+							"flex w-full  !justify-between pt-3 gap-4",
+						)}
+					>
+						{isCloud ? (
+							<div className="flex flex-col gap-4 border p-2 rounded-lg">
+								<span className="text-sm text-muted-foreground">
+									Select a server to test the destination. If you don't have a
+									server choose the default one.
+								</span>
+								<FormField
+									control={form.control}
+									name="serverId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Server (Optional)</FormLabel>
+											<FormControl>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value}
+												>
+													<SelectTrigger className="w-full">
+														<SelectValue placeholder="Select a server" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															<SelectLabel>Servers</SelectLabel>
+															{servers?.map((server) => (
+																<SelectItem
+																	key={server.serverId}
+																	value={server.serverId}
+																>
+																	{server.name}
+																</SelectItem>
+															))}
+															<SelectItem value={"none"}>None</SelectItem>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<Button
+									type="button"
+									variant={"secondary"}
+									isLoading={isLoading}
+									onClick={async () => {
+										await testConnection({
+											accessKey: form.getValues("accessKeyId"),
+											bucket: form.getValues("bucket"),
+											endpoint: form.getValues("endpoint"),
+											name: "Test",
+											region: form.getValues("region"),
+											secretAccessKey: form.getValues("secretAccessKey"),
+											serverId: form.getValues("serverId"),
+										})
+											.then(async () => {
+												toast.success("Connection Success");
+											})
+											.catch((e) => {
+												toast.error("Error to connect the provider", {
+													description: e.message,
+												});
+											});
+									}}
+								>
+									Test Connection
+								</Button>
+							</div>
+						) : (
+							<Button
+								isLoading={isLoadingConnection}
+								type="button"
+								variant="secondary"
+								onClick={async () => {
+									await testConnection({
+										accessKey: form.getValues("accessKeyId"),
+										bucket: form.getValues("bucket"),
+										endpoint: form.getValues("endpoint"),
+										name: "Test",
+										region: form.getValues("region"),
+										secretAccessKey: form.getValues("secretAccessKey"),
 									})
-									.catch(() => {
-										toast.error("Error to connect the provider");
-									});
-							}}
-						>
-							Test connection
-						</Button>
+										.then(async () => {
+											toast.success("Connection Success");
+										})
+										.catch(() => {
+											toast.error("Error to connect the provider");
+										});
+								}}
+							>
+								Test connection
+							</Button>
+						)}
+
 						<Button
 							isLoading={isLoading}
 							form="hook-form-destination-add"

apps/dokploy/components/dashboard/settings/destination/show-destinations.tsx

@@ -29,7 +29,7 @@ export const ShowDestinations = () => {
 						<div className="flex flex-col items-center gap-3">
 							<FolderUp className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To create a backup is required to set at least 1 provider.
+								To create a backup it is required to set at least 1 provider.
 							</span>
 							<AddDestination />
 						</div>

apps/dokploy/components/dashboard/settings/destination/update-destination.tsx

@@ -18,6 +18,16 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PenBoxIcon } from "lucide-react";
@@ -33,6 +43,7 @@ const updateDestination = z.object({
 	bucket: z.string(),
 	region: z.string(),
 	endpoint: z.string(),
+	serverId: z.string().optional(),
 });
 
 type UpdateDestination = z.infer<typeof updateDestination>;
@@ -43,6 +54,8 @@ interface Props {
 
 export const UpdateDestination = ({ destinationId }: Props) => {
 	const utils = api.useUtils();
+	const { data: servers } = api.server.withSSHKey.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const [isOpen, setIsOpen] = useState(false);
 	const { data, refetch } = api.destination.one.useQuery(
 		{
@@ -220,34 +233,107 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 						</div>
 					</form>
 
-					<DialogFooter className="flex w-full flex-row !justify-between pt-3">
-						<Button
-							isLoading={isLoadingConnection}
-							type="button"
-							variant="secondary"
-							onClick={async () => {
-								await testConnection({
-									accessKey: form.getValues("accessKeyId"),
-									bucket: form.getValues("bucket"),
-									endpoint: form.getValues("endpoint"),
-									name: "Test",
-									region: form.getValues("region"),
-									secretAccessKey: form.getValues("secretAccessKey"),
-								})
-									.then(async () => {
-										toast.success("Connection Success");
+					<DialogFooter
+						className={cn(
+							isCloud ? "!flex-col" : "flex-row",
+							"flex w-full  !justify-between pt-3 gap-4",
+						)}
+					>
+						{isCloud ? (
+							<div className="flex flex-col gap-4 border p-2 rounded-lg">
+								<span className="text-sm text-muted-foreground">
+									Select a server to test the destination. If you don't have a
+									server choose the default one.
+								</span>
+								<FormField
+									control={form.control}
+									name="serverId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Server (Optional)</FormLabel>
+											<FormControl>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value}
+												>
+													<SelectTrigger className="w-full">
+														<SelectValue placeholder="Select a server" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															<SelectLabel>Servers</SelectLabel>
+															{servers?.map((server) => (
+																<SelectItem
+																	key={server.serverId}
+																	value={server.serverId}
+																>
+																	{server.name}
+																</SelectItem>
+															))}
+															<SelectItem value={"none"}>None</SelectItem>
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<Button
+									type="button"
+									variant={"secondary"}
+									onClick={async () => {
+										await testConnection({
+											accessKey: form.getValues("accessKeyId"),
+											bucket: form.getValues("bucket"),
+											endpoint: form.getValues("endpoint"),
+											name: "Test",
+											region: form.getValues("region"),
+											secretAccessKey: form.getValues("secretAccessKey"),
+											serverId: form.getValues("serverId"),
+										})
+											.then(async () => {
+												toast.success("Connection Success");
+											})
+											.catch(() => {
+												toast.error("Error to connect the provider");
+											});
+									}}
+								>
+									Test Connection
+								</Button>
+							</div>
+						) : (
+							<Button
+								isLoading={isLoadingConnection}
+								type="button"
+								variant="secondary"
+								onClick={async () => {
+									await testConnection({
+										accessKey: form.getValues("accessKeyId"),
+										bucket: form.getValues("bucket"),
+										endpoint: form.getValues("endpoint"),
+										name: "Test",
+										region: form.getValues("region"),
+										secretAccessKey: form.getValues("secretAccessKey"),
 									})
-									.catch(() => {
-										toast.error("Error to connect the provider");
-									});
-							}}
-						>
-							Test connection
-						</Button>
+										.then(async () => {
+											toast.success("Connection Success");
+										})
+										.catch(() => {
+											toast.error("Error to connect the provider");
+										});
+								}}
+							>
+								Test connection
+							</Button>
+						)}
+
 						<Button
-							isLoading={form.formState.isSubmitting}
 							form="hook-form"
 							type="submit"
+							isLoading={form.formState.isSubmitting}
 						>
 							Update
 						</Button>

apps/dokploy/components/dashboard/settings/git/github/add-github-provider.tsx

@@ -11,13 +11,11 @@ import {
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { useUrl } from "@/utils/hooks/use-url";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
 
 export const AddGithubProvider = () => {
 	const [isOpen, setIsOpen] = useState(false);
-	const url = useUrl();
 	const { data } = api.auth.get.useQuery();
 	const [manifest, setManifest] = useState("");
 	const [isOrganization, setIsOrganization] = useState(false);

apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx

@@ -109,7 +109,7 @@ export type NotificationSchema = z.infer<typeof notificationSchema>;
 export const AddNotification = () => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
-
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { mutateAsync: testSlackConnection, isLoading: isLoadingSlack } =
 		api.notification.testSlackConnection.useMutation();
 
@@ -660,26 +660,28 @@ export const AddNotification = () => {
 									)}
 								/>
 
-								<FormField
-									control={form.control}
-									name="dokployRestart"
-									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
-											<div className="space-y-0.5">
-												<FormLabel>Dokploy Restart</FormLabel>
-												<FormDescription>
-													Trigger the action when a dokploy is restarted.
-												</FormDescription>
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
+								{!isCloud && (
+									<FormField
+										control={form.control}
+										name="dokployRestart"
+										render={({ field }) => (
+											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+												<div className="space-y-0.5">
+													<FormLabel>Dokploy Restart</FormLabel>
+													<FormDescription>
+														Trigger the action when a dokploy is restarted.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								)}
 							</div>
 						</div>
 					</form>

apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx

@@ -34,7 +34,7 @@ export const ShowNotifications = () => {
 						<div className="flex flex-col items-center gap-3">
 							<BellRing className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To send notifications is required to set at least 1 provider.
+								To send notifications it is required to set at least 1 provider.
 							</span>
 							<AddNotification />
 						</div>

apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx

@@ -63,7 +63,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	const telegramMutation = api.notification.updateTelegram.useMutation();
 	const discordMutation = api.notification.updateDiscord.useMutation();
 	const emailMutation = api.notification.updateEmail.useMutation();
-
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const form = useForm<NotificationSchema>({
 		defaultValues: {
 			type: "slack",
@@ -618,27 +618,29 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 										</FormItem>
 									)}
 								/>
-								<FormField
-									control={form.control}
-									defaultValue={form.control._defaultValues.dokployRestart}
-									name="dokployRestart"
-									render={({ field }) => (
-										<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
-											<div className="space-y-0.5">
-												<FormLabel>Dokploy Restart</FormLabel>
-												<FormDescription>
-													Trigger the action when a dokploy is restarted.
-												</FormDescription>
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
+								{!isCloud && (
+									<FormField
+										control={form.control}
+										defaultValue={form.control._defaultValues.dokployRestart}
+										name="dokployRestart"
+										render={({ field }) => (
+											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+												<div className="space-y-0.5">
+													<FormLabel>Dokploy Restart</FormLabel>
+													<FormDescription>
+														Trigger the action when a dokploy is restarted.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								)}
 							</div>
 						</div>
 					</form>

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -95,7 +95,7 @@ export const ProfileForm = () => {
 				<div>
 					<CardTitle className="text-xl">Account</CardTitle>
 					<CardDescription>
-						Change your details of your profile here.
+						Change the details of your profile here.
 					</CardDescription>
 				</div>
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
@@ -145,7 +145,6 @@ export const ProfileForm = () => {
 										<FormControl>
 											<RadioGroup
 												onValueChange={(e) => {
-													console.log(e);
 													field.onChange(e);
 												}}
 												defaultValue={field.value}

apps/dokploy/components/dashboard/settings/servers/add-server.tsx

@@ -31,6 +31,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -57,6 +58,9 @@ type Schema = z.infer<typeof Schema>;
 export const AddServer = () => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
+	const { data: canCreateMoreServers, refetch } =
+		api.stripe.canCreateMoreServers.useQuery();
+
 	const { data: sshKeys } = api.sshKey.all.useQuery();
 	const { mutateAsync, error, isError } = api.server.create.useMutation();
 	const form = useForm<Schema>({
@@ -82,6 +86,10 @@ export const AddServer = () => {
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
+	useEffect(() => {
+		refetch();
+	}, [isOpen]);
+
 	const onSubmit = async (data: Schema) => {
 		await mutateAsync({
 			name: data.name,
@@ -116,6 +124,14 @@ export const AddServer = () => {
 						Add a server to deploy your applications remotely.
 					</DialogDescription>
 				</DialogHeader>
+				{!canCreateMoreServers && (
+					<AlertBlock type="warning">
+						You cannot create more servers,{" "}
+						<Link href="/dashboard/settings/billing" className="text-primary">
+							Please upgrade your plan
+						</Link>
+					</AlertBlock>
+				)}
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 				<Form {...form}>
 					<form
@@ -212,7 +228,21 @@ export const AddServer = () => {
 									<FormItem>
 										<FormLabel>Port</FormLabel>
 										<FormControl>
-											<Input placeholder="22" {...field} />
+											<Input
+												placeholder="22"
+												{...field}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
 										</FormControl>
 
 										<FormMessage />
@@ -240,6 +270,7 @@ export const AddServer = () => {
 					<DialogFooter>
 						<Button
 							isLoading={form.formState.isSubmitting}
+							disabled={!canCreateMoreServers}
 							form="hook-form-add-server"
 							type="submit"
 						>

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -19,7 +19,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -36,6 +36,9 @@ export const ShowServers = () => {
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
 	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: canCreateMoreServers } =
+		api.stripe.canCreateMoreServers.useQuery();
 
 	return (
 		<div className="p-6 space-y-6">
@@ -74,8 +77,22 @@ export const ShowServers = () => {
 						<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 							<ServerIcon className="size-8" />
 							<span className="text-base text-muted-foreground">
-								No Servers found. Add a server to deploy your applications
-								remotely.
+								{!canCreateMoreServers ? (
+									<div>
+										You cannot create more servers,{" "}
+										<Link
+											href="/dashboard/settings/billing"
+											className="text-primary"
+										>
+											Please upgrade your plan
+										</Link>
+									</div>
+								) : (
+									<span>
+										No Servers found. Add a server to deploy your applications
+										remotely.
+									</span>
+								)}
 							</span>
 						</div>
 					)
@@ -87,6 +104,9 @@ export const ShowServers = () => {
 							<TableHeader>
 								<TableRow>
 									<TableHead className="w-[100px]">Name</TableHead>
+									{isCloud && (
+										<TableHead className="text-center">Status</TableHead>
+									)}
 									<TableHead className="text-center">IP Address</TableHead>
 									<TableHead className="text-center">Port</TableHead>
 									<TableHead className="text-center">Username</TableHead>
@@ -98,9 +118,23 @@ export const ShowServers = () => {
 							<TableBody>
 								{data?.map((server) => {
 									const canDelete = server.totalSum === 0;
+									const isActive = server.serverStatus === "active";
 									return (
 										<TableRow key={server.serverId}>
 											<TableCell className="w-[100px]">{server.name}</TableCell>
+											{isCloud && (
+												<TableHead className="text-center">
+													<Badge
+														variant={
+															server.serverStatus === "active"
+																? "default"
+																: "destructive"
+														}
+													>
+														{server.serverStatus}
+													</Badge>
+												</TableHead>
+											)}
 											<TableCell className="text-center">
 												<Badge>{server.ipAddress}</Badge>
 											</TableCell>
@@ -131,18 +165,25 @@ export const ShowServers = () => {
 													</DropdownMenuTrigger>
 													<DropdownMenuContent align="end">
 														<DropdownMenuLabel>Actions</DropdownMenuLabel>
-														{server.sshKeyId && (
-															<TerminalModal serverId={server.serverId}>
-																<span>Enter the terminal</span>
-															</TerminalModal>
+
+														{isActive && (
+															<>
+																{server.sshKeyId && (
+																	<TerminalModal serverId={server.serverId}>
+																		<span>Enter the terminal</span>
+																	</TerminalModal>
+																)}
+																<SetupServer serverId={server.serverId} />
+
+																<UpdateServer serverId={server.serverId} />
+																{server.sshKeyId && (
+																	<ShowServerActions
+																		serverId={server.serverId}
+																	/>
+																)}
+															</>
 														)}
 
-														<SetupServer serverId={server.serverId} />
-
-														<UpdateServer serverId={server.serverId} />
-														{server.sshKeyId && (
-															<ShowServerActions serverId={server.serverId} />
-														)}
 														<DialogAction
 															disabled={!canDelete}
 															title={
@@ -187,17 +228,21 @@ export const ShowServers = () => {
 															</DropdownMenuItem>
 														</DialogAction>
 
-														{server.sshKeyId && (
+														{isActive && (
 															<>
-																<DropdownMenuSeparator />
-																<DropdownMenuLabel>Extra</DropdownMenuLabel>
+																{server.sshKeyId && (
+																	<>
+																		<DropdownMenuSeparator />
+																		<DropdownMenuLabel>Extra</DropdownMenuLabel>
 
-																<ShowTraefikFileSystemModal
-																	serverId={server.serverId}
-																/>
-																<ShowDockerContainersModal
-																	serverId={server.serverId}
-																/>
+																		<ShowTraefikFileSystemModal
+																			serverId={server.serverId}
+																		/>
+																		<ShowDockerContainersModal
+																			serverId={server.serverId}
+																		/>
+																	</>
+																)}
 															</>
 														)}
 													</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/servers/update-server.tsx

@@ -228,7 +228,21 @@ export const UpdateServer = ({ serverId }: Props) => {
 									<FormItem>
 										<FormLabel>Port</FormLabel>
 										<FormControl>
-											<Input placeholder="22" {...field} />
+											<Input
+												placeholder="22"
+												{...field}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
 										</FormControl>
 
 										<FormMessage />