feat(applications): add support for Docker build secrets

- Implement build secrets functionality for Dockerfile builds
- Add new `buildSecrets` field to application schema
- Update UI and backend to handle build-time secrets
- Modify Docker build process to support secret injection during build

CONTRIBUTING.md

@@ -165,8 +165,86 @@ Thank you for your contribution!
 
 ## Templates
 
-To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
+To add a new template, go to `templates` folder and create a new folder with the name of the template.
 
+Let's take the example of `plausible` template.
+
+1. create a folder in `templates/plausible`
+2. create a `docker-compose.yml` file inside the folder with the content of compose.
+3. create a `index.ts` file inside the folder with the following code as base:
+4. When creating a pull request, please provide a video of the template working in action.
+
+```typescript
+// EXAMPLE
+import {
+  generateBase64,
+  generateHash,
+  generateRandomDomain,
+  type Template,
+  type Schema,
+  type DomainSchema,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+  // do your stuff here, like create a new domain, generate random passwords, mounts.
+  const mainServiceHash = generateHash(schema.projectName);
+  const mainDomain = generateRandomDomain(schema);
+  const secretBase = generateBase64(64);
+  const toptKeyBase = generateBase64(32);
+
+  const domains: DomainSchema[] = [
+    {
+      host: mainDomain,
+      port: 8000,
+      serviceName: "plausible",
+    },
+  ];
+
+  const envs = [
+    `BASE_URL=http://${mainDomain}`,
+    `SECRET_KEY_BASE=${secretBase}`,
+    `TOTP_VAULT_KEY=${toptKeyBase}`,
+    `HASH=${mainServiceHash}`,
+  ];
+
+  const mounts: Template["mounts"] = [
+    {
+      filePath: "./clickhouse/clickhouse-config.xml",
+      content: "some content......",
+    },
+  ];
+
+  return {
+    envs,
+    mounts,
+    domains,
+  };
+}
+```
+
+4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
+
+**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
+
+```typescript
+{
+	id: "plausible",
+	name: "Plausible",
+	version: "v2.1.0",
+	description:
+		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
+	logo: "plausible.svg", // we defined the name and the extension of the logo
+	links: {
+		github: "https://github.com/plausible/plausible",
+		website: "https://plausible.io/",
+		docs: "https://plausible.io/docs",
+	},
+	tags: ["analytics"],
+	load: () => import("./plausible/index").then((m) => m.generate),
+},
+```
+
+5. Add the logo or image of the template to `public/templates/plausible.svg`
 
 ### Recommendations
 

apps/dokploy/CONTRIBUTING.md

@@ -0,0 +1,242 @@
+
+
+# Contributing
+
+Hey, thanks for your interest in contributing to Dokploy! We appreciate your help and taking your time to contribute.
+
+
+Before you start, please first discuss the feature/bug you want to add with the owners and comunity via github issues.
+
+We have a few guidelines to follow when contributing to this project:
+
+- [Commit Convention](#commit-convention)
+- [Setup](#setup)
+- [Development](#development)
+- [Build](#build)
+- [Pull Request](#pull-request)
+
+## Commit Convention
+
+Before you craete a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+### Commit Message Format
+```
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+#### Type
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing tests or correcting existing tests
+* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+* **chore**: Other changes that don't modify `src` or `test` files
+* **revert**: Reverts a previous commit
+
+Example:
+```
+feat: add new feature
+```
+
+
+
+
+## Setup
+
+Before you start, please make the clone based on the `canary` branch, since the `main` branch is the source of truth and should always reflect the latest stable release, also the PRs will be merged to the `canary` branch.
+
+```bash
+git clone https://github.com/dokploy/dokploy.git
+cd dokploy
+pnpm install
+cp .env.example .env
+```
+
+## Development
+
+Is required to have **Docker** installed on your machine.
+
+
+### Setup
+
+Run the command that will spin up all the required services and files.
+
+```bash
+pnpm run setup
+```
+
+Now run the development server.
+
+```bash
+pnpm run dev
+```
+
+
+Go to http://localhost:3000 to see the development server
+
+## Build
+
+```bash
+pnpm run build
+```
+
+## Docker
+
+To build the docker image
+```bash
+pnpm run docker:build
+```
+
+To push the docker image
+```bash
+pnpm run docker:push
+```
+
+## Password Reset
+
+In the case you lost your password, you can reset it using the following command
+
+```bash
+pnpm run reset-password
+```
+
+If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
+
+```bash
+bunx lt --port 3000
+```
+
+If you run into permission issues of docker run the following command
+
+```bash
+sudo chown -R USERNAME dokploy or sudo chown -R $(whoami) ~/.docker
+```
+
+## Application deploy
+
+In case you want to deploy the application on your machine and you selected nixpacks or buildpacks, you need to install first.
+
+```bash
+# Install Nixpacks
+curl -sSL https://nixpacks.com/install.sh -o install.sh \
+    && chmod +x install.sh \
+    && ./install.sh
+```
+
+```bash
+# Install Buildpacks
+curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
+```
+
+
+## Pull Request
+
+- The `main` branch is the source of truth and should always reflect the latest stable release.
+- Create a new branch for each feature or bug fix.
+- Make sure to add tests for your changes.
+- Make sure to update the documentation for any changes Go to the [docs.dokploy.com](https://docs.dokploy.com) website to see the changes.
+- When creating a pull request, please provide a clear and concise description of the changes made.
+- If you include a video or screenshot, would be awesome so we can see the changes in action.
+- If your pull request fixes an open issue, please reference the issue in the pull request description.
+- Once your pull request is merged, you will be automatically added as a contributor to the project.
+
+Thank you for your contribution!
+
+
+
+
+
+## Templates
+
+To add a new template, go to `templates` folder and create a new folder with the name of the template.
+
+Let's take the example of `plausible` template.
+
+1. create a folder in `templates/plausible`
+2. create a `docker-compose.yml` file inside the folder with the content of compose.
+3. create a `index.ts` file inside the folder with the following code as base:
+4. When creating a pull request, please provide a video of the template working in action.
+
+```typescript
+// EXAMPLE
+import {
+	generateHash,
+	generateRandomDomain,
+	type Template,
+	type Schema,
+} from "../utils";
+
+
+export function generate(schema: Schema): Template {
+
+	// do your stuff here, like create a new domain, generate random passwords, mounts.
+	const mainServiceHash = generateHash(schema.projectName);
+	const randomDomain = generateRandomDomain(schema);
+	const secretBase = generateBase64(64);
+	const toptKeyBase = generateBase64(32);
+
+	const envs = [
+// If you want to show a domain in the UI, please add the prefix _HOST at the end of the variable name.
+		`PLAUSIBLE_HOST=${randomDomain}`,
+		"PLAUSIBLE_PORT=8000",
+		`BASE_URL=http://${randomDomain}`,
+		`SECRET_KEY_BASE=${secretBase}`,
+		`TOTP_VAULT_KEY=${toptKeyBase}`,
+		`HASH=${mainServiceHash}`,
+	];
+
+    const mounts: Template["mounts"] = [
+		{
+			mountPath: "./clickhouse/clickhouse-config.xml",
+			content: `some content......`,
+		},
+	];
+
+	return {
+		envs,
+        mounts,
+	};
+}
+```
+
+4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
+
+**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
+
+```typescript
+{
+	id: "plausible",
+	name: "Plausible",
+	version: "v2.1.0",
+	description:
+		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
+	logo: "plausible.svg", // we defined the name and the extension of the logo
+	links: {
+		github: "https://github.com/plausible/plausible",
+		website: "https://plausible.io/",
+		docs: "https://plausible.io/docs",
+	},
+	tags: ["analytics"],
+	load: () => import("./plausible/index").then((m) => m.generate),
+},
+```
+
+5. Add the logo or image of the template to `public/templates/plausible.svg`
+
+
+### Recomendations
+- Use the same name of the folder as the id of the template.
+- The logo should be in the public folder.
+- If you want to show a domain in the UI, please add the prefix _HOST at the end of the variable name.
+- Test first on a vps or a server to make sure the template works.
+

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

@@ -9,7 +9,6 @@ describe("createDomainLabels", () => {
 		port: 8080,
 		https: false,
 		uniqueConfigKey: 1,
-		customCertResolver: null,
 		certificateType: "none",
 		applicationId: "",
 		composeId: "",

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

@@ -27,8 +27,6 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
-	cleanCache: false,
-	watchPaths: [],
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
@@ -39,7 +37,6 @@ const baseApp: ApplicationNested = {
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
 	previewCertificateType: "none",
-	previewCustomCertResolver: null,
 	previewEnv: null,
 	previewHttps: false,
 	previewPath: "/",

apps/dokploy/__test__/templates/config.template.test.ts

@@ -1,425 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { CompleteTemplate } from "@dokploy/server/templates/processors";
-import { processTemplate } from "@dokploy/server/templates/processors";
-import type { Schema } from "@dokploy/server/templates";
-
-describe("processTemplate", () => {
-	// Mock schema for testing
-	const mockSchema: Schema = {
-		projectName: "test",
-		serverIp: "127.0.0.1",
-	};
-
-	describe("variables processing", () => {
-		it("should process basic variables with utility functions", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					main_domain: "${domain}",
-					secret_base: "${base64:64}",
-					totp_key: "${base64:32}",
-					password: "${password:32}",
-					hash: "${hash:16}",
-				},
-				config: {
-					domains: [],
-					env: {},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(0);
-			expect(result.domains).toHaveLength(0);
-			expect(result.mounts).toHaveLength(0);
-		});
-
-		it("should allow referencing variables in other variables", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					main_domain: "${domain}",
-					api_domain: "api.${main_domain}",
-				},
-				config: {
-					domains: [],
-					env: {},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(0);
-			expect(result.domains).toHaveLength(0);
-			expect(result.mounts).toHaveLength(0);
-		});
-	});
-
-	describe("domains processing", () => {
-		it("should process domains with explicit host", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					main_domain: "${domain}",
-				},
-				config: {
-					domains: [
-						{
-							serviceName: "plausible",
-							port: 8000,
-							host: "${main_domain}",
-						},
-					],
-					env: {},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.domains).toHaveLength(1);
-			const domain = result.domains[0];
-			expect(domain).toBeDefined();
-			if (!domain) return;
-			expect(domain).toMatchObject({
-				serviceName: "plausible",
-				port: 8000,
-			});
-			expect(domain.host).toBeDefined();
-			expect(domain.host).toContain(mockSchema.projectName);
-		});
-
-		it("should generate random domain if host is not specified", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [
-						{
-							serviceName: "plausible",
-							port: 8000,
-						},
-					],
-					env: {},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.domains).toHaveLength(1);
-			const domain = result.domains[0];
-			expect(domain).toBeDefined();
-			if (!domain || !domain.host) return;
-			expect(domain.host).toBeDefined();
-			expect(domain.host).toContain(mockSchema.projectName);
-		});
-
-		it("should allow using ${domain} directly in host", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [
-						{
-							serviceName: "plausible",
-							port: 8000,
-							host: "${domain}",
-						},
-					],
-					env: {},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.domains).toHaveLength(1);
-			const domain = result.domains[0];
-			expect(domain).toBeDefined();
-			if (!domain || !domain.host) return;
-			expect(domain.host).toBeDefined();
-			expect(domain.host).toContain(mockSchema.projectName);
-		});
-	});
-
-	describe("environment variables processing", () => {
-		it("should process env vars with variable references", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					main_domain: "${domain}",
-					secret_base: "${base64:64}",
-				},
-				config: {
-					domains: [],
-					env: {
-						BASE_URL: "http://${main_domain}",
-						SECRET_KEY_BASE: "${secret_base}",
-					},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(2);
-			const baseUrl = result.envs.find((env: string) =>
-				env.startsWith("BASE_URL="),
-			);
-			const secretKey = result.envs.find((env: string) =>
-				env.startsWith("SECRET_KEY_BASE="),
-			);
-
-			expect(baseUrl).toBeDefined();
-			expect(secretKey).toBeDefined();
-			if (!baseUrl || !secretKey) return;
-
-			expect(baseUrl).toContain(mockSchema.projectName);
-			const base64Value = secretKey.split("=")[1];
-			expect(base64Value).toBeDefined();
-			if (!base64Value) return;
-			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
-			expect(base64Value.length).toBeGreaterThanOrEqual(86);
-			expect(base64Value.length).toBeLessThanOrEqual(88);
-		});
-
-		it("should process env vars when provided as an array", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [],
-					env: [
-						'CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"',
-						'ANOTHER_VAR="some value"',
-						"DOMAIN=${domain}",
-					],
-					mounts: [],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(3);
-
-			// Should preserve exact format for static values
-			expect(result.envs[0]).toBe('CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"');
-			expect(result.envs[1]).toBe('ANOTHER_VAR="some value"');
-
-			// Should process variables in array items
-			expect(result.envs[2]).toContain(mockSchema.projectName);
-		});
-
-		it("should allow using utility functions directly in env vars", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [],
-					env: {
-						RANDOM_DOMAIN: "${domain}",
-						SECRET_KEY: "${base64:32}",
-					},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(2);
-			const randomDomainEnv = result.envs.find((env: string) =>
-				env.startsWith("RANDOM_DOMAIN="),
-			);
-			const secretKeyEnv = result.envs.find((env: string) =>
-				env.startsWith("SECRET_KEY="),
-			);
-			expect(randomDomainEnv).toBeDefined();
-			expect(secretKeyEnv).toBeDefined();
-			if (!randomDomainEnv || !secretKeyEnv) return;
-
-			expect(randomDomainEnv).toContain(mockSchema.projectName);
-			const base64Value = secretKeyEnv.split("=")[1];
-			expect(base64Value).toBeDefined();
-			if (!base64Value) return;
-			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
-			expect(base64Value.length).toBeGreaterThanOrEqual(42);
-			expect(base64Value.length).toBeLessThanOrEqual(44);
-		});
-	});
-
-	describe("mounts processing", () => {
-		it("should process mounts with variable references", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					config_path: "/etc/config",
-					secret_key: "${base64:32}",
-				},
-				config: {
-					domains: [],
-					env: {},
-					mounts: [
-						{
-							filePath: "${config_path}/config.xml",
-							content: "secret_key=${secret_key}",
-						},
-					],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.mounts).toHaveLength(1);
-			const mount = result.mounts[0];
-			expect(mount).toBeDefined();
-			if (!mount) return;
-			expect(mount.filePath).toContain("/etc/config");
-			expect(mount.content).toMatch(/secret_key=[A-Za-z0-9+/]{32}/);
-		});
-
-		it("should allow using utility functions directly in mount content", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [],
-					env: {},
-					mounts: [
-						{
-							filePath: "/config/secrets.txt",
-							content: "random_domain=${domain}\nsecret=${base64:32}",
-						},
-					],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.mounts).toHaveLength(1);
-			const mount = result.mounts[0];
-			expect(mount).toBeDefined();
-			if (!mount) return;
-			expect(mount.content).toContain(mockSchema.projectName);
-			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{32}/);
-		});
-	});
-
-	describe("complex template processing", () => {
-		it("should process a complete template with all features", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					main_domain: "${domain}",
-					secret_base: "${base64:64}",
-					totp_key: "${base64:32}",
-				},
-				config: {
-					domains: [
-						{
-							serviceName: "plausible",
-							port: 8000,
-							host: "${main_domain}",
-						},
-						{
-							serviceName: "api",
-							port: 3000,
-							host: "api.${main_domain}",
-						},
-					],
-					env: {
-						BASE_URL: "http://${main_domain}",
-						SECRET_KEY_BASE: "${secret_base}",
-						TOTP_VAULT_KEY: "${totp_key}",
-					},
-					mounts: [
-						{
-							filePath: "/config/app.conf",
-							content: `
-                domain=\${main_domain}
-                secret=\${secret_base}
-                totp=\${totp_key}
-              `,
-						},
-					],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-
-			// Check domains
-			expect(result.domains).toHaveLength(2);
-			const [domain1, domain2] = result.domains;
-			expect(domain1).toBeDefined();
-			expect(domain2).toBeDefined();
-			if (!domain1 || !domain2) return;
-			expect(domain1.host).toBeDefined();
-			expect(domain1.host).toContain(mockSchema.projectName);
-			expect(domain2.host).toContain("api.");
-			expect(domain2.host).toContain(mockSchema.projectName);
-
-			// Check env vars
-			expect(result.envs).toHaveLength(3);
-			const baseUrl = result.envs.find((env: string) =>
-				env.startsWith("BASE_URL="),
-			);
-			const secretKey = result.envs.find((env: string) =>
-				env.startsWith("SECRET_KEY_BASE="),
-			);
-			const totpKey = result.envs.find((env: string) =>
-				env.startsWith("TOTP_VAULT_KEY="),
-			);
-
-			expect(baseUrl).toBeDefined();
-			expect(secretKey).toBeDefined();
-			expect(totpKey).toBeDefined();
-			if (!baseUrl || !secretKey || !totpKey) return;
-
-			expect(baseUrl).toContain(mockSchema.projectName);
-
-			// Check base64 lengths and format
-			const secretKeyValue = secretKey.split("=")[1];
-			const totpKeyValue = totpKey.split("=")[1];
-
-			expect(secretKeyValue).toBeDefined();
-			expect(totpKeyValue).toBeDefined();
-			if (!secretKeyValue || !totpKeyValue) return;
-
-			expect(secretKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
-			expect(secretKeyValue.length).toBeGreaterThanOrEqual(86);
-			expect(secretKeyValue.length).toBeLessThanOrEqual(88);
-
-			expect(totpKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
-			expect(totpKeyValue.length).toBeGreaterThanOrEqual(42);
-			expect(totpKeyValue.length).toBeLessThanOrEqual(44);
-
-			// Check mounts
-			expect(result.mounts).toHaveLength(1);
-			const mount = result.mounts[0];
-			expect(mount).toBeDefined();
-			if (!mount) return;
-			expect(mount.content).toContain(mockSchema.projectName);
-			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{86,88}/);
-			expect(mount.content).toMatch(/totp=[A-Za-z0-9+/]{42,44}/);
-		});
-	});
-
-	describe("Should populate envs, domains and mounts in the case we didn't used any variable", () => {
-		it("should populate envs, domains and mounts in the case we didn't used any variable", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [
-						{
-							serviceName: "plausible",
-							port: 8000,
-							host: "${hash}",
-						},
-					],
-					env: {
-						BASE_URL: "http://${domain}",
-						SECRET_KEY_BASE: "${password:32}",
-						TOTP_VAULT_KEY: "${base64:128}",
-					},
-					mounts: [
-						{
-							filePath: "/config/secrets.txt",
-							content: "random_domain=${domain}\nsecret=${password:32}",
-						},
-					],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(3);
-			expect(result.domains).toHaveLength(1);
-			expect(result.mounts).toHaveLength(1);
-		});
-	});
-});

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

@@ -7,7 +7,6 @@ import { expect, test } from "vitest";
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
-	cleanCache: false,
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
@@ -15,7 +14,6 @@ const baseApp: ApplicationNested = {
 	branch: null,
 	dockerBuildStage: "",
 	registryUrl: "",
-	watchPaths: [],
 	buildArgs: null,
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
@@ -25,7 +23,6 @@ const baseApp: ApplicationNested = {
 	previewPath: "/",
 	previewPort: 3000,
 	previewLimit: 0,
-	previewCustomCertResolver: null,
 	previewWildcard: "",
 	project: {
 		env: "",
@@ -106,7 +103,6 @@ const baseDomain: Domain = {
 	port: null,
 	serviceName: "",
 	composeId: "",
-	customCertResolver: null,
 	domainType: "application",
 	uniqueConfigKey: 1,
 	previewDeploymentId: "",

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

@@ -1,347 +0,0 @@
-import { CodeEditor } from "@/components/shared/code-editor";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Code2, Globe2, HardDrive } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-
-const ImportSchema = z.object({
-	base64: z.string(),
-});
-
-type ImportType = z.infer<typeof ImportSchema>;
-
-interface Props {
-	composeId: string;
-}
-
-export const ShowImport = ({ composeId }: Props) => {
-	const [showModal, setShowModal] = useState(false);
-	const [showMountContent, setShowMountContent] = useState(false);
-	const [selectedMount, setSelectedMount] = useState<{
-		filePath: string;
-		content: string;
-	} | null>(null);
-	const [templateInfo, setTemplateInfo] = useState<{
-		compose: string;
-		template: {
-			domains: Array<{
-				serviceName: string;
-				port: number;
-				path?: string;
-				host?: string;
-			}>;
-			envs: string[];
-			mounts: Array<{
-				filePath: string;
-				content: string;
-			}>;
-		};
-	} | null>(null);
-
-	const utils = api.useUtils();
-	const { mutateAsync: processTemplate, isLoading: isLoadingTemplate } =
-		api.compose.processTemplate.useMutation();
-	const {
-		mutateAsync: importTemplate,
-		isLoading: isImporting,
-		isSuccess: isImportSuccess,
-	} = api.compose.import.useMutation();
-
-	const form = useForm<ImportType>({
-		defaultValues: {
-			base64: "",
-		},
-		resolver: zodResolver(ImportSchema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			base64: "",
-		});
-	}, [isImportSuccess]);
-
-	const onSubmit = async () => {
-		const base64 = form.getValues("base64");
-		if (!base64) {
-			toast.error("Please enter a base64 template");
-			return;
-		}
-
-		try {
-			await importTemplate({
-				composeId,
-				base64,
-			});
-			toast.success("Template imported successfully");
-			await utils.compose.one.invalidate({
-				composeId,
-			});
-			setShowModal(false);
-		} catch (_error) {
-			toast.error("Error importing template");
-		}
-	};
-
-	const handleLoadTemplate = async () => {
-		const base64 = form.getValues("base64");
-		if (!base64) {
-			toast.error("Please enter a base64 template");
-			return;
-		}
-
-		try {
-			const result = await processTemplate({
-				composeId,
-				base64,
-			});
-			setTemplateInfo(result);
-			setShowModal(true);
-		} catch (_error) {
-			toast.error("Error processing template");
-		}
-	};
-
-	const handleShowMountContent = (mount: {
-		filePath: string;
-		content: string;
-	}) => {
-		setSelectedMount(mount);
-		setShowMountContent(true);
-	};
-
-	return (
-		<>
-			<Card className="bg-background">
-				<CardHeader>
-					<CardTitle className="text-xl">Import</CardTitle>
-					<CardDescription>Import your Template configuration</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-4">
-					<AlertBlock type="warning">
-						Warning: Importing a template will remove all existing environment
-						variables, mounts, and domains from this service.
-					</AlertBlock>
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="base64"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Configuration (Base64)</FormLabel>
-										<FormControl>
-											<Textarea
-												placeholder="Enter your Base64 configuration here..."
-												className="font-mono min-h-[200px]"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<div className="flex justify-end gap-2">
-								<Button
-									type="button"
-									className="w-fit"
-									variant="outline"
-									isLoading={isLoadingTemplate}
-									onClick={handleLoadTemplate}
-								>
-									Load
-								</Button>
-							</div>
-							<Dialog open={showModal} onOpenChange={setShowModal}>
-								<DialogContent className="max-h-[80vh] max-w-[50vw] overflow-y-auto">
-									<DialogHeader>
-										<DialogTitle className="text-2xl font-bold">
-											Template Information
-										</DialogTitle>
-										<DialogDescription className="space-y-2">
-											<p>Review the template information before importing</p>
-											<AlertBlock type="warning">
-												Warning: This will remove all existing environment
-												variables, mounts, and domains from this service.
-											</AlertBlock>
-										</DialogDescription>
-									</DialogHeader>
-
-									<div className="flex flex-col gap-6">
-										<div className="space-y-4">
-											<div className="flex items-center gap-2">
-												<Code2 className="h-5 w-5 text-primary" />
-												<h3 className="text-lg font-semibold">
-													Docker Compose
-												</h3>
-											</div>
-											<CodeEditor
-												language="yaml"
-												value={templateInfo?.compose || ""}
-												className="font-mono"
-												readOnly
-											/>
-										</div>
-
-										<Separator />
-
-										{templateInfo?.template.domains &&
-											templateInfo.template.domains.length > 0 && (
-												<div className="space-y-4">
-													<div className="flex items-center gap-2">
-														<Globe2 className="h-5 w-5 text-primary" />
-														<h3 className="text-lg font-semibold">Domains</h3>
-													</div>
-													<div className="grid grid-cols-1 gap-3">
-														{templateInfo.template.domains.map(
-															(domain, index) => (
-																<div
-																	key={index}
-																	className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
-																>
-																	<div className="font-medium">
-																		{domain.serviceName}
-																	</div>
-																	<div className="text-sm text-muted-foreground space-y-1">
-																		<div>Port: {domain.port}</div>
-																		{domain.host && (
-																			<div>Host: {domain.host}</div>
-																		)}
-																		{domain.path && (
-																			<div>Path: {domain.path}</div>
-																		)}
-																	</div>
-																</div>
-															),
-														)}
-													</div>
-												</div>
-											)}
-
-										{templateInfo?.template.envs &&
-											templateInfo.template.envs.length > 0 && (
-												<div className="space-y-4">
-													<div className="flex items-center gap-2">
-														<Code2 className="h-5 w-5 text-primary" />
-														<h3 className="text-lg font-semibold">
-															Environment Variables
-														</h3>
-													</div>
-													<div className="grid grid-cols-1 gap-2">
-														{templateInfo.template.envs.map((env, index) => (
-															<div
-																key={index}
-																className="rounded-lg border bg-card p-2 font-mono text-sm"
-															>
-																{env}
-															</div>
-														))}
-													</div>
-												</div>
-											)}
-
-										{templateInfo?.template.mounts &&
-											templateInfo.template.mounts.length > 0 && (
-												<div className="space-y-4">
-													<div className="flex items-center gap-2">
-														<HardDrive className="h-5 w-5 text-primary" />
-														<h3 className="text-lg font-semibold">Mounts</h3>
-													</div>
-													<div className="grid grid-cols-1 gap-2">
-														{templateInfo.template.mounts.map(
-															(mount, index) => (
-																<div
-																	key={index}
-																	className="rounded-lg border bg-card p-2 font-mono text-sm hover:bg-accent cursor-pointer transition-colors"
-																	onClick={() => handleShowMountContent(mount)}
-																>
-																	{mount.filePath}
-																</div>
-															),
-														)}
-													</div>
-												</div>
-											)}
-									</div>
-
-									<div className="flex justify-end gap-2 pt-4">
-										<Button
-											variant="outline"
-											onClick={() => setShowModal(false)}
-										>
-											Cancel
-										</Button>
-										<Button
-											isLoading={isImporting}
-											type="submit"
-											onClick={form.handleSubmit(onSubmit)}
-											className="w-fit"
-										>
-											Import
-										</Button>
-									</div>
-								</DialogContent>
-							</Dialog>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-
-			<Dialog open={showMountContent} onOpenChange={setShowMountContent}>
-				<DialogContent className="max-w-[50vw]">
-					<DialogHeader>
-						<DialogTitle className="text-xl font-bold">
-							{selectedMount?.filePath}
-						</DialogTitle>
-						<DialogDescription>Mount File Content</DialogDescription>
-					</DialogHeader>
-
-					<ScrollArea className="h-[25vh] pr-4">
-						<CodeEditor
-							language="yaml"
-							value={selectedMount?.content || ""}
-							className="font-mono"
-							readOnly
-						/>
-					</ScrollArea>
-
-					<div className="flex justify-end gap-2 pt-4">
-						<Button onClick={() => setShowMountContent(false)}>Close</Button>
-					</div>
-				</DialogContent>
-			</Dialog>
-		</>
-	);
-};

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

@@ -85,20 +85,8 @@ export const AddDomain = ({
 
 	const form = useForm<Domain>({
 		resolver: zodResolver(domain),
-		defaultValues: {
-			host: "",
-			path: undefined,
-			port: undefined,
-			https: false,
-			certificateType: undefined,
-			customCertResolver: undefined,
-		},
-		mode: "onChange",
 	});
 
-	const certificateType = form.watch("certificateType");
-	const https = form.watch("https");
-
 	useEffect(() => {
 		if (data) {
 			form.reset({
@@ -106,29 +94,13 @@ export const AddDomain = ({
 				/* Convert null to undefined */
 				path: data?.path || undefined,
 				port: data?.port || undefined,
-				certificateType: data?.certificateType || undefined,
-				customCertResolver: data?.customCertResolver || undefined,
 			});
 		}
 
 		if (!domainId) {
-			form.reset({
-				host: "",
-				path: undefined,
-				port: undefined,
-				https: false,
-				certificateType: undefined,
-				customCertResolver: undefined,
-			});
+			form.reset({});
 		}
-	}, [form, data, isLoading, domainId]);
-
-	// Separate effect for handling custom cert resolver validation
-	useEffect(() => {
-		if (certificateType === "custom") {
-			form.trigger("customCertResolver");
-		}
-	}, [certificateType, form]);
+	}, [form, form.reset, data, isLoading]);
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
@@ -284,73 +256,34 @@ export const AddDomain = ({
 									)}
 								/>
 
-								{https && (
-									<>
-										<FormField
-											control={form.control}
-											name="certificateType"
-											render={({ field }) => {
-												return (
-													<FormItem>
-														<FormLabel>Certificate Provider</FormLabel>
-														<Select
-															onValueChange={(value) => {
-																field.onChange(value);
-																if (value !== "custom") {
-																	form.setValue(
-																		"customCertResolver",
-																		undefined,
-																	);
-																}
-															}}
-															value={field.value}
-														>
-															<FormControl>
-																<SelectTrigger>
-																	<SelectValue placeholder="Select a certificate provider" />
-																</SelectTrigger>
-															</FormControl>
-															<SelectContent>
-																<SelectItem value={"none"}>None</SelectItem>
-																<SelectItem value={"letsencrypt"}>
-																	Let's Encrypt
-																</SelectItem>
-																<SelectItem value={"custom"}>Custom</SelectItem>
-															</SelectContent>
-														</Select>
-														<FormMessage />
-													</FormItem>
-												);
-											}}
-										/>
+								{form.getValues().https && (
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate Provider</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate provider" />
+														</SelectTrigger>
+													</FormControl>
 
-										{certificateType === "custom" && (
-											<FormField
-												control={form.control}
-												name="customCertResolver"
-												render={({ field }) => {
-													return (
-														<FormItem>
-															<FormLabel>Custom Certificate Resolver</FormLabel>
-															<FormControl>
-																<Input
-																	className="w-full"
-																	placeholder="Enter your custom certificate resolver"
-																	{...field}
-																	value={field.value || ""}
-																	onChange={(e) => {
-																		field.onChange(e);
-																		form.trigger("customCertResolver");
-																	}}
-																/>
-															</FormControl>
-															<FormMessage />
-														</FormItem>
-													);
-												}}
-											/>
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Let's Encrypt
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
 										)}
-									</>
+									/>
 								)}
 							</div>
 						</div>

apps/dokploy/components/dashboard/application/environment/show-enviroment.tsx

@@ -71,19 +71,15 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	// Watch form value
-	const currentEnvironment = form.watch("environment");
-	const hasChanges = currentEnvironment !== (data?.env || "");
-
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				environment: data.env || "",
 			});
 		}
-	}, [data, form]);
+	}, [form.reset, data, form]);
 
-	const onSubmit = async (formData: EnvironmentSchema) => {
+	const onSubmit = async (data: EnvironmentSchema) => {
 		mutateAsync({
 			mongoId: id || "",
 			postgresId: id || "",
@@ -91,7 +87,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			mysqlId: id || "",
 			mariadbId: id || "",
 			composeId: id || "",
-			env: formData.environment,
+			env: data.environment,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -102,12 +98,6 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			});
 	};
 
-	const handleCancel = () => {
-		form.reset({
-			environment: data?.env || "",
-		});
-	};
-
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -116,11 +106,6 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 						<CardTitle className="text-xl">Environment Settings</CardTitle>
 						<CardDescription>
 							You can add environment variables to your resource.
-							{hasChanges && (
-								<span className="text-yellow-500 ml-2">
-									(You have unsaved changes)
-								</span>
-							)}
 						</CardDescription>
 					</div>
 
@@ -170,22 +155,8 @@ PORT=3000
 								)}
 							/>
 
-							<div className="flex flex-row justify-end gap-2">
-								{hasChanges && (
-									<Button
-										type="button"
-										variant="outline"
-										onClick={handleCancel}
-									>
-										Cancel
-									</Button>
-								)}
-								<Button
-									isLoading={isLoading}
-									className="w-fit"
-									type="submit"
-									disabled={!hasChanges}
-								>
+							<div className="flex flex-row justify-end">
+								<Button isLoading={isLoading} className="w-fit" type="submit">
 									Save
 								</Button>
 							</div>

apps/dokploy/components/dashboard/application/environment/show.tsx

@@ -7,11 +7,11 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { useEffect } from "react";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),
 	buildArgs: z.string(),
+	buildSecrets: z.record(z.string(), z.string()),
 });
 
 type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
@@ -35,32 +35,18 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
-			env: "",
-			buildArgs: "",
+			env: data?.env || "",
+			buildArgs: data?.buildArgs || "",
+			buildSecrets: data?.buildSecrets || {},
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	// Watch form values
-	const currentEnv = form.watch("env");
-	const currentBuildArgs = form.watch("buildArgs");
-	const hasChanges =
-		currentEnv !== (data?.env || "") ||
-		currentBuildArgs !== (data?.buildArgs || "");
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				env: data.env || "",
-				buildArgs: data.buildArgs || "",
-			});
-		}
-	}, [data, form]);
-
-	const onSubmit = async (formData: EnvironmentSchema) => {
+	const onSubmit = async (data: EnvironmentSchema) => {
 		mutateAsync({
-			env: formData.env,
-			buildArgs: formData.buildArgs,
+			env: data.env,
+			buildArgs: data.buildArgs,
+			buildSecrets: data.buildSecrets,
 			applicationId,
 		})
 			.then(async () => {
@@ -72,13 +58,6 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 			});
 	};
 
-	const handleCancel = () => {
-		form.reset({
-			env: data?.env || "",
-			buildArgs: data?.buildArgs || "",
-		});
-	};
-
 	return (
 		<Card className="bg-background px-6 pb-6">
 			<Form {...form}>
@@ -89,51 +68,70 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 					<Secrets
 						name="env"
 						title="Environment Settings"
-						description={
-							<span>
-								You can add environment variables to your resource.
-								{hasChanges && (
-									<span className="text-yellow-500 ml-2">
-										(You have unsaved changes)
-									</span>
-								)}
-							</span>
-						}
+						description="You can add environment variables to your resource."
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
-						<Secrets
-							name="buildArgs"
-							title="Build-time Variables"
-							description={
-								<span>
-									Available only at build-time. See documentation&nbsp;
-									<a
-										className="text-primary"
-										href="https://docs.docker.com/build/guide/build-args/"
-										target="_blank"
-										rel="noopener noreferrer"
-									>
-										here
-									</a>
-									.
-								</span>
-							}
-							placeholder="NPM_TOKEN=xyz"
-						/>
+						<>
+							<Secrets
+								name="buildArgs"
+								title="Build-time Variables"
+								description={
+									<span>
+										Available only at build-time. See documentation&nbsp;
+										<a
+											className="text-primary"
+											href="https://docs.docker.com/build/guide/build-args/"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											here
+										</a>
+										.
+									</span>
+								}
+								placeholder="NPM_TOKEN=xyz"
+							/>
+							<Secrets
+								name="buildSecrets"
+								title="Build Secrets"
+								description={
+									<span>
+										Secrets available only during build-time and not in the
+										final image. See documentation&nbsp;
+										<a
+											className="text-primary"
+											href="https://docs.docker.com/build/building/secrets/"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											here
+										</a>
+										.
+									</span>
+								}
+								placeholder="API_TOKEN=xyz"
+								transformValue={(value) => {
+									// Convert the string format to object
+									const lines = value.split("\n").filter((line) => line.trim());
+									return Object.fromEntries(
+										lines.map((line) => {
+											const [key, ...valueParts] = line.split("=");
+											return [key.trim(), valueParts.join("=").trim()];
+										}),
+									);
+								}}
+								formatValue={(value) => {
+									// Convert the object back to string format
+									return Object.entries(value as Record<string, string>)
+										.map(([key, val]) => `${key}=${val}`)
+										.join("\n");
+								}}
+							/>
+						</>
 					)}
-					<div className="flex flex-row justify-end gap-2">
-						{hasChanges && (
-							<Button type="button" variant="outline" onClick={handleCancel}>
-								Cancel
-							</Button>
-						)}
-						<Button
-							isLoading={isLoading}
-							className="w-fit"
-							type="submit"
-							disabled={!hasChanges}
-						>
+					<div className="flex flex-row justify-end">
+						<Button isLoading={isLoading} className="w-fit" type="submit">
 							Save
 						</Button>
 					</div>

apps/dokploy/components/dashboard/application/general/generic/save-bitbucket-provider.tsx

@@ -29,23 +29,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const BitbucketProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -57,7 +48,6 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -83,7 +73,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
-			watchPaths: [],
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -129,7 +118,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.bitbucketBuildPath || "/",
 				bitbucketId: data.bitbucketId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -142,7 +130,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketBuildPath: data.buildPath,
 			bitbucketId: data.bitbucketId,
 			applicationId,
-			watchPaths: data.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -208,20 +195,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<BitbucketIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -389,84 +363,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const value = input.value.trim();
-														if (value) {
-															const newPaths = [...(field.value || []), value];
-															form.setValue("watchPaths", newPaths);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

apps/dokploy/components/dashboard/application/general/generic/save-docker-provider.tsx

@@ -115,7 +115,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Username</FormLabel>
 									<FormControl>
-										<Input placeholder="Username" autoComplete="username" {...field} />
+										<Input placeholder="username" {...field} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -130,7 +130,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Password</FormLabel>
 									<FormControl>
-										<Input placeholder="Password" autoComplete="one-time-code" {...field} type="password" />
+										<Input placeholder="Password" {...field} type="password" />
 									</FormControl>
 									<FormMessage />
 								</FormItem>

apps/dokploy/components/dashboard/application/general/generic/save-git-provider.tsx

@@ -17,33 +17,23 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import { KeyRoundIcon, LockIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import Link from "next/link";
 
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { GitIcon } from "@/components/icons/data-tools-icons";
 
 const GitProviderSchema = z.object({
-	buildPath: z.string().min(1, "Path is required").default("/"),
 	repositoryURL: z.string().min(1, {
 		message: "Repository URL is required",
 	}),
 	branch: z.string().min(1, "Branch required"),
+	buildPath: z.string().min(1, "Build Path required"),
 	sshKey: z.string().optional(),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -66,7 +56,6 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			buildPath: "/",
 			repositoryURL: "",
 			sshKey: undefined,
-			watchPaths: [],
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -78,7 +67,6 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				branch: data.customGitBranch || "",
 				buildPath: data.customGitBuildPath || "/",
 				repositoryURL: data.customGitUrl || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -90,7 +78,6 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			customGitUrl: values.repositoryURL,
 			customGitSSHKeyId: values.sshKey === "none" ? null : values.sshKey,
 			applicationId,
-			watchPaths: values.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -115,22 +102,9 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<div className="flex items-center justify-between">
-											<FormLabel>Repository URL</FormLabel>
-											{field.value?.startsWith("https://") && (
-												<Link
-													href={field.value}
-													target="_blank"
-													rel="noopener noreferrer"
-													className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-												>
-													<GitIcon className="h-4 w-4" />
-													<span>View Repository</span>
-												</Link>
-											)}
-										</div>
+										<FormLabel>Repository URL</FormLabel>
 										<FormControl>
-											<Input placeholder="Repository URL" {...field} />
+											<Input placeholder="git@bitbucket.org" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -186,22 +160,19 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</Button>
 						)}
 					</div>
-					<div className="space-y-4">
-						<FormField
-							control={form.control}
-							name="branch"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Branch</FormLabel>
-									<FormControl>
-										<Input placeholder="Branch" {...field} />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</div>
-
+					<FormField
+						control={form.control}
+						name="branch"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Branch</FormLabel>
+								<FormControl>
+									<Input placeholder="Branch" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
 					<FormField
 						control={form.control}
 						name="buildPath"
@@ -215,85 +186,6 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</FormItem>
 						)}
 					/>
-					<FormField
-						control={form.control}
-						name="watchPaths"
-						render={({ field }) => (
-							<FormItem className="md:col-span-2">
-								<div className="flex items-center gap-2">
-									<FormLabel>Watch Paths</FormLabel>
-									<TooltipProvider>
-										<Tooltip>
-											<TooltipTrigger>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-													?
-												</div>
-											</TooltipTrigger>
-											<TooltipContent className="max-w-[300px]">
-												<p>
-													Add paths to watch for changes. When files in these
-													paths change, a new deployment will be triggered. This
-													will work only when manual webhook is setup.
-												</p>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								</div>
-								<div className="flex flex-wrap gap-2 mb-2">
-									{field.value?.map((path, index) => (
-										<Badge key={index} variant="secondary">
-											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
-												onClick={() => {
-													const newPaths = [...(field.value || [])];
-													newPaths.splice(index, 1);
-													form.setValue("watchPaths", newPaths);
-												}}
-											/>
-										</Badge>
-									))}
-								</div>
-								<FormControl>
-									<div className="flex gap-2">
-										<Input
-											placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-											onKeyDown={(e) => {
-												if (e.key === "Enter") {
-													e.preventDefault();
-													const input = e.currentTarget;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}
-											}}
-										/>
-										<Button
-											type="button"
-											variant="secondary"
-											onClick={() => {
-												const input = document.querySelector(
-													'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-												) as HTMLInputElement;
-												const value = input.value.trim();
-												if (value) {
-													const newPaths = [...(field.value || []), value];
-													form.setValue("watchPaths", newPaths);
-													input.value = "";
-												}
-											}}
-										>
-											Add
-										</Button>
-									</div>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
 				</div>
 
 				<div className="flex flex-row justify-end">

apps/dokploy/components/dashboard/application/general/generic/save-github-provider.tsx

@@ -28,23 +28,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -56,7 +47,6 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -123,7 +113,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.buildPath || "/",
 				githubId: data.githubId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -136,7 +125,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			owner: data.repository.owner,
 			buildPath: data.buildPath,
 			githubId: data.githubId,
-			watchPaths: data.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -199,20 +187,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GithubIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -375,85 +350,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 									<FormControl>
 										<Input placeholder="/" {...field} />
 									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge
-												key={index}
-												variant="secondary"
-												className="flex items-center gap-1"
-											>
-												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														field.onChange(newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<div className="flex gap-2">
-										<FormControl>
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const path = input.value.trim();
-														if (path) {
-															field.onChange([...(field.value || []), path]);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-										</FormControl>
-										<Button
-											type="button"
-											variant="outline"
-											size="icon"
-											onClick={() => {
-												const input = document.querySelector(
-													'input[placeholder*="Enter a path"]',
-												) as HTMLInputElement;
-												const path = input.value.trim();
-												if (path) {
-													field.onChange([...(field.value || []), path]);
-													input.value = "";
-												}
-											}}
-										>
-											<Plus className="size-4" />
-										</Button>
-									</div>
+
 									<FormMessage />
 								</FormItem>
 							)}

apps/dokploy/components/dashboard/application/general/generic/save-gitlab-provider.tsx

@@ -29,23 +29,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import Link from "next/link";
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
 
 const GitlabProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -59,7 +50,6 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -134,7 +124,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.gitlabBuildPath || "/",
 				gitlabId: data.gitlabId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -149,7 +138,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			applicationId,
 			gitlabProjectId: data.repository.id,
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
-			watchPaths: data.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -215,20 +203,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GitlabIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -400,85 +375,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 									<FormControl>
 										<Input placeholder="/" {...field} />
 									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge
-												key={index}
-												variant="secondary"
-												className="flex items-center gap-1"
-											>
-												{path}
-												<X
-													className="size-3 cursor-pointer hover:text-destructive"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														field.onChange(newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<div className="flex gap-2">
-										<FormControl>
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const path = input.value.trim();
-														if (path) {
-															field.onChange([...(field.value || []), path]);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-										</FormControl>
-										<Button
-											type="button"
-											variant="outline"
-											size="icon"
-											onClick={() => {
-												const input = document.querySelector(
-													'input[placeholder*="Enter a path"]',
-												) as HTMLInputElement;
-												const path = input.value.trim();
-												if (path) {
-													field.onChange([...(field.value || []), path]);
-													input.value = "";
-												}
-											}}
-										>
-											<Plus className="size-4" />
-										</Button>
-									</div>
+
 									<FormMessage />
 								</FormItem>
 							)}

apps/dokploy/components/dashboard/application/general/show.tsx

@@ -10,14 +10,14 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { api } from "@/utils/api";
 import {
 	Ban,
 	CheckCircle2,
 	Hammer,
+	HelpCircle,
 	RefreshCcw,
-	Rocket,
 	Terminal,
 } from "lucide-react";
 import { useRouter } from "next/router";
@@ -55,7 +55,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
+					<TooltipProvider delayDuration={0}>
 						<DialogAction
 							title="Deploy Application"
 							description="Are you sure you want to deploy this application?"
@@ -76,25 +76,25 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									});
 							}}
 						>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="default"
-										isLoading={data?.applicationStatus === "running"}
-										className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Rocket className="size-4 mr-1" />
-										Deploy
-									</Button>
-								</TooltipTrigger>
-								<TooltipPrimitive.Portal>
-									<TooltipContent sideOffset={5} className="z-[60]">
-										<p>
-											Downloads the source code and performs a complete build
-										</p>
-									</TooltipContent>
-								</TooltipPrimitive.Portal>
-							</Tooltip>
+							<Button
+								variant="default"
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5"
+							>
+								Deploy
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Downloads the source code and performs a complete build
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
 						</DialogAction>
 						<DialogAction
 							title="Reload Application"
@@ -114,23 +114,10 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									});
 							}}
 						>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="secondary"
-										isLoading={isReloading}
-										className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<RefreshCcw className="size-4 mr-1" />
-										Reload
-									</Button>
-								</TooltipTrigger>
-								<TooltipPrimitive.Portal>
-									<TooltipContent sideOffset={5} className="z-[60]">
-										<p>Reload the application without rebuilding it</p>
-									</TooltipContent>
-								</TooltipPrimitive.Portal>
-							</Tooltip>
+							<Button variant="secondary" isLoading={isReloading}>
+								Reload
+								<RefreshCcw className="size-4" />
+							</Button>
 						</DialogAction>
 						<DialogAction
 							title="Rebuild Application"
@@ -149,25 +136,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									});
 							}}
 						>
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<Button
-										variant="secondary"
-										isLoading={data?.applicationStatus === "running"}
-										className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Hammer className="size-4 mr-1" />
-										Rebuild
-									</Button>
-								</TooltipTrigger>
-								<TooltipPrimitive.Portal>
-									<TooltipContent sideOffset={5} className="z-[60]">
-										<p>
-											Only rebuilds the application without downloading new code
-										</p>
-									</TooltipContent>
-								</TooltipPrimitive.Portal>
-							</Tooltip>
+							<Button
+								variant="secondary"
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5"
+							>
+								Rebuild
+								<Hammer className="size-4" />
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Only rebuilds the application without downloading new
+												code
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
 						</DialogAction>
 
 						{data?.applicationStatus === "idle" ? (
@@ -188,26 +177,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										});
 								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="secondary"
-											isLoading={isStarting}
-											className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-										>
-											<CheckCircle2 className="size-4 mr-1" />
-											Start
-										</Button>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>
-												Start the application (requires a previous successful
-												build)
-											</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
+								<Button
+									variant="secondary"
+									isLoading={isStarting}
+									className="flex items-center gap-1.5"
+								>
+									Start
+									<CheckCircle2 className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>
+													Start the application (requires a previous successful
+													build)
+												</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
 							</DialogAction>
 						) : (
 							<DialogAction
@@ -226,23 +216,24 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										});
 								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="destructive"
-											isLoading={isStopping}
-											className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-										>
-											<Ban className="size-4 mr-1" />
-											Stop
-										</Button>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>Stop the currently running application</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
+								<Button
+									variant="destructive"
+									isLoading={isStopping}
+									className="flex items-center gap-1.5"
+								>
+									Stop
+									<Ban className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Stop the currently running application</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
 							</DialogAction>
 						)}
 					</TooltipProvider>
@@ -250,18 +241,15 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
 					>
-						<Button
-							variant="outline"
-							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-						>
-							<Terminal className="size-4 mr-1" />
+						<Button variant="outline">
+							<Terminal />
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
 					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
 						<span className="text-sm font-medium">Autodeploy</span>
 						<Switch
-							aria-label="Toggle autodeploy"
+							aria-label="Toggle italic"
 							checked={data?.autoDeploy || false}
 							onCheckedChange={async (enabled) => {
 								await update({
@@ -276,29 +264,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.error("Error updating Auto Deploy");
 									});
 							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
-						/>
-					</div>
-
-					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<span className="text-sm font-medium">Clean Cache</span>
-						<Switch
-							aria-label="Toggle clean cache"
-							checked={data?.cleanCache || false}
-							onCheckedChange={async (enabled) => {
-								await update({
-									applicationId,
-									cleanCache: enabled,
-								})
-									.then(async () => {
-										toast.success("Clean Cache Updated");
-										await refetch();
-									})
-									.catch(() => {
-										toast.error("Error updating Clean Cache");
-									});
-							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+							className="flex flex-row gap-2 items-center"
 						/>
 					</div>
 				</CardContent>

apps/dokploy/components/dashboard/application/preview-deployments/add-preview-domain.tsx

@@ -94,7 +94,6 @@ export const AddPreviewDomain = ({
 				/* Convert null to undefined */
 				path: data?.path || undefined,
 				port: data?.port || undefined,
-				customCertResolver: data?.customCertResolver || undefined,
 			});
 		}
 

apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx

@@ -35,30 +35,16 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-const schema = z
-	.object({
-		env: z.string(),
-		buildArgs: z.string(),
-		wildcardDomain: z.string(),
-		port: z.number(),
-		previewLimit: z.number(),
-		previewHttps: z.boolean(),
-		previewPath: z.string(),
-		previewCertificateType: z.enum(["letsencrypt", "none", "custom"]),
-		previewCustomCertResolver: z.string().optional(),
-	})
-	.superRefine((input, ctx) => {
-		if (
-			input.previewCertificateType === "custom" &&
-			!input.previewCustomCertResolver
-		) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				path: ["previewCustomCertResolver"],
-				message: "Required",
-			});
-		}
-	});
+const schema = z.object({
+	env: z.string(),
+	buildArgs: z.string(),
+	wildcardDomain: z.string(),
+	port: z.number(),
+	previewLimit: z.number(),
+	previewHttps: z.boolean(),
+	previewPath: z.string(),
+	previewCertificateType: z.enum(["letsencrypt", "none"]),
+});
 
 type Schema = z.infer<typeof schema>;
 
@@ -104,7 +90,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				previewHttps: data.previewHttps || false,
 				previewPath: data.previewPath || "/",
 				previewCertificateType: data.previewCertificateType || "none",
-				previewCustomCertResolver: data.previewCustomCertResolver || "",
 			});
 		}
 	}, [data]);
@@ -120,7 +105,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewHttps: formData.previewHttps,
 			previewPath: formData.previewPath,
 			previewCertificateType: formData.previewCertificateType,
-			previewCustomCertResolver: formData.previewCustomCertResolver,
 		})
 			.then(() => {
 				toast.success("Preview Deployments settings updated");
@@ -200,6 +184,10 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 										render={({ field }) => (
 											<FormItem>
 												<FormLabel>Preview Limit</FormLabel>
+												{/* <FormDescription>
+													Set the limit of preview deployments that can be
+													created for this app.
+												</FormDescription> */}
 												<FormControl>
 													<NumberInput placeholder="3000" {...field} />
 												</FormControl>
@@ -250,7 +238,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 															<SelectItem value={"letsencrypt"}>
 																Let's Encrypt
 															</SelectItem>
-															<SelectItem value={"custom"}>Custom</SelectItem>
 														</SelectContent>
 													</Select>
 													<FormMessage />
@@ -258,25 +245,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											)}
 										/>
 									)}
-
-									{form.watch("previewCertificateType") === "custom" && (
-										<FormField
-											control={form.control}
-											name="previewCustomCertResolver"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Certificate Provider</FormLabel>
-													<FormControl>
-														<Input
-															placeholder="my-custom-resolver"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									)}
 								</div>
 								<div className="grid gap-4 lg:grid-cols-2">
 									<div className="flex flex-row items-center justify-between rounded-lg border p-4 col-span-2">

apps/dokploy/components/dashboard/application/update-application.tsx

@@ -121,7 +121,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -104,15 +104,6 @@ export const AddDomainCompose = ({
 
 	const form = useForm<Domain>({
 		resolver: zodResolver(domainCompose),
-		defaultValues: {
-			host: "",
-			path: undefined,
-			port: undefined,
-			https: false,
-			certificateType: undefined,
-			customCertResolver: undefined,
-			serviceName: "",
-		},
 	});
 
 	const https = form.watch("https");
@@ -125,21 +116,11 @@ export const AddDomainCompose = ({
 				path: data?.path || undefined,
 				port: data?.port || undefined,
 				serviceName: data?.serviceName || undefined,
-				certificateType: data?.certificateType || undefined,
-				customCertResolver: data?.customCertResolver || undefined,
 			});
 		}
 
 		if (!domainId) {
-			form.reset({
-				host: "",
-				path: undefined,
-				port: undefined,
-				https: false,
-				certificateType: undefined,
-				customCertResolver: undefined,
-				serviceName: "",
-			});
+			form.reset({});
 		}
 	}, [form, form.reset, data, isLoading]);
 
@@ -412,55 +393,33 @@ export const AddDomainCompose = ({
 								/>
 
 								{https && (
-									<>
-										<FormField
-											control={form.control}
-											name="certificateType"
-											render={({ field }) => (
-												<FormItem className="col-span-2">
-													<FormLabel>Certificate Provider</FormLabel>
-													<Select
-														onValueChange={field.onChange}
-														defaultValue={field.value || ""}
-													>
-														<FormControl>
-															<SelectTrigger>
-																<SelectValue placeholder="Select a certificate provider" />
-															</SelectTrigger>
-														</FormControl>
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate Provider</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate provider" />
+														</SelectTrigger>
+													</FormControl>
 
-														<SelectContent>
-															<SelectItem value="none">None</SelectItem>
-															<SelectItem value={"letsencrypt"}>
-																Let's Encrypt
-															</SelectItem>
-															<SelectItem value={"custom"}>Custom</SelectItem>
-														</SelectContent>
-													</Select>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										{form.getValues().certificateType === "custom" && (
-											<FormField
-												control={form.control}
-												name="customCertResolver"
-												render={({ field }) => (
-													<FormItem className="col-span-2">
-														<FormLabel>Custom Certificate Resolver</FormLabel>
-														<FormControl>
-															<Input
-																placeholder="Enter your custom certificate resolver"
-																{...field}
-															/>
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Let's Encrypt
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
 										)}
-									</>
+									/>
 								)}
 							</div>
 						</div>

apps/dokploy/components/dashboard/compose/general/actions.tsx

@@ -7,9 +7,9 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import { Ban, CheckCircle2, Hammer, HelpCircle, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -34,7 +34,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<TooltipProvider delayDuration={0} disableHoverableContent={false}>
+			<TooltipProvider delayDuration={0}>
 				<DialogAction
 					title="Deploy Compose"
 					description="Are you sure you want to deploy this compose?"
@@ -55,58 +55,59 @@ export const ComposeActions = ({ composeId }: Props) => {
 							});
 					}}
 				>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="default"
-								isLoading={data?.composeStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<Rocket className="size-4 mr-1" />
-								Deploy
-							</Button>
-						</TooltipTrigger>
-						<TooltipPrimitive.Portal>
-							<TooltipContent sideOffset={5} className="z-[60]">
-								<p>Downloads the source code and performs a complete build</p>
-							</TooltipContent>
-						</TooltipPrimitive.Portal>
-					</Tooltip>
+					<Button
+						variant="default"
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5"
+					>
+						Deploy
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Downloads the source code and performs a complete build</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
+					</Button>
 				</DialogAction>
 				<DialogAction
-					title="Reload Compose"
-					description="Are you sure you want to reload this compose?"
+					title="Rebuild Compose"
+					description="Are you sure you want to rebuild this compose?"
 					type="default"
 					onClick={async () => {
 						await redeploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose reloaded successfully");
+								toast.success("Compose rebuilt successfully");
 								refetch();
 							})
 							.catch(() => {
-								toast.error("Error reloading compose");
+								toast.error("Error rebuilding compose");
 							});
 					}}
 				>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button
-								variant="secondary"
-								isLoading={data?.composeStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<RefreshCcw className="size-4 mr-1" />
-								Reload
-							</Button>
-						</TooltipTrigger>
-						<TooltipPrimitive.Portal>
-							<TooltipContent sideOffset={5} className="z-[60]">
-								<p>Reload the compose without rebuilding it</p>
-							</TooltipContent>
-						</TooltipPrimitive.Portal>
-					</Tooltip>
+					<Button
+						variant="secondary"
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5"
+					>
+						Rebuild
+						<Hammer className="size-4" />
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Only rebuilds the compose without downloading new code</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
+					</Button>
 				</DialogAction>
 				{data?.composeType === "docker-compose" &&
 				data?.composeStatus === "idle" ? (
@@ -127,25 +128,26 @@ export const ComposeActions = ({ composeId }: Props) => {
 								});
 						}}
 					>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<Button
-									variant="secondary"
-									isLoading={isStarting}
-									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<CheckCircle2 className="size-4 mr-1" />
-									Start
-								</Button>
-							</TooltipTrigger>
-							<TooltipPrimitive.Portal>
-								<TooltipContent sideOffset={5} className="z-[60]">
-									<p>
-										Start the compose (requires a previous successful build)
-									</p>
-								</TooltipContent>
-							</TooltipPrimitive.Portal>
-						</Tooltip>
+						<Button
+							variant="secondary"
+							isLoading={isStarting}
+							className="flex items-center gap-1.5"
+						>
+							Start
+							<CheckCircle2 className="size-4" />
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>
+											Start the compose (requires a previous successful build)
+										</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
 					</DialogAction>
 				) : (
 					<DialogAction
@@ -164,23 +166,24 @@ export const ComposeActions = ({ composeId }: Props) => {
 								});
 						}}
 					>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<Button
-									variant="destructive"
-									isLoading={isStopping}
-									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Ban className="size-4 mr-1" />
-									Stop
-								</Button>
-							</TooltipTrigger>
-							<TooltipPrimitive.Portal>
-								<TooltipContent sideOffset={5} className="z-[60]">
-									<p>Stop the currently running compose</p>
-								</TooltipContent>
-							</TooltipPrimitive.Portal>
-						</Tooltip>
+						<Button
+							variant="destructive"
+							isLoading={isStopping}
+							className="flex items-center gap-1.5"
+						>
+							Stop
+							<Ban className="size-4" />
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>Stop the currently running compose</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
 					</DialogAction>
 				)}
 			</TooltipProvider>
@@ -188,18 +191,15 @@ export const ComposeActions = ({ composeId }: Props) => {
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
 			>
-				<Button
-					variant="outline"
-					className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-				>
-					<Terminal className="size-4 mr-1" />
+				<Button variant="outline">
+					<Terminal />
 					Open Terminal
 				</Button>
 			</DockerTerminalModal>
 			<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
 				<span className="text-sm font-medium">Autodeploy</span>
 				<Switch
-					aria-label="Toggle autodeploy"
+					aria-label="Toggle italic"
 					checked={data?.autoDeploy || false}
 					onCheckedChange={async (enabled) => {
 						await update({
@@ -214,7 +214,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								toast.error("Error updating Auto Deploy");
 							});
 					}}
-					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+					className="flex flex-row gap-2 items-center"
 				/>
 			</div>
 		</div>

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

@@ -97,7 +97,6 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 										<div className="flex flex-col gap-4 w-full outline-none focus:outline-none overflow-auto">
 											<CodeEditor
 												// disabled
-												language="yaml"
 												value={field.value}
 												className="font-mono"
 												wrapperClassName="compose-file-editor"

apps/dokploy/components/dashboard/compose/general/generic/save-bitbucket-provider-compose.tsx

@@ -29,23 +29,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const BitbucketProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -57,7 +48,6 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -83,7 +73,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
-			watchPaths: [],
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -129,7 +118,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				bitbucketId: data.bitbucketId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -144,7 +132,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "bitbucket",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -210,20 +197,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<BitbucketIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -391,84 +365,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const value = input.value.trim();
-														if (value) {
-															const newPaths = [...(field.value || []), value];
-															form.setValue("watchPaths", newPaths);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

apps/dokploy/components/dashboard/compose/general/generic/save-git-provider-compose.tsx

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -18,22 +17,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import { KeyRoundIcon, LockIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { GitIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GitProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -42,7 +33,6 @@ const GitProviderSchema = z.object({
 	}),
 	branch: z.string().min(1, "Branch required"),
 	sshKey: z.string().optional(),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -64,7 +54,6 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			repositoryURL: "",
 			composePath: "./docker-compose.yml",
 			sshKey: undefined,
-			watchPaths: [],
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -76,7 +65,6 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				branch: data.customGitBranch || "",
 				repositoryURL: data.customGitUrl || "",
 				composePath: data.composePath,
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -89,8 +77,6 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "git",
 			composePath: values.composePath,
-			composeStatus: "idle",
-			watchPaths: values.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -115,22 +101,11 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<div className="flex items-center justify-between">
-											<FormLabel>Repository URL</FormLabel>
-											{field.value?.startsWith("https://") && (
-												<Link
-													href={field.value}
-													target="_blank"
-													rel="noopener noreferrer"
-													className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-												>
-													<GitIcon className="h-4 w-4" />
-													<span>View Repository</span>
-												</Link>
-											)}
-										</div>
+										<FormLabel className="flex flex-row justify-between">
+											Repository URL
+										</FormLabel>
 										<FormControl>
-											<Input placeholder="Repository URL" {...field} />
+											<Input placeholder="git@bitbucket.org" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -216,85 +191,6 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 							</FormItem>
 						)}
 					/>
-					<FormField
-						control={form.control}
-						name="watchPaths"
-						render={({ field }) => (
-							<FormItem className="md:col-span-2">
-								<div className="flex items-center gap-2">
-									<FormLabel>Watch Paths</FormLabel>
-									<TooltipProvider>
-										<Tooltip>
-											<TooltipTrigger>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-													?
-												</div>
-											</TooltipTrigger>
-											<TooltipContent className="max-w-[300px]">
-												<p>
-													Add paths to watch for changes. When files in these
-													paths change, a new deployment will be triggered. This
-													will work only when manual webhook is setup.
-												</p>
-											</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								</div>
-								<div className="flex flex-wrap gap-2 mb-2">
-									{field.value?.map((path, index) => (
-										<Badge key={index} variant="secondary">
-											{path}
-											<X
-												className="ml-1 size-3 cursor-pointer"
-												onClick={() => {
-													const newPaths = [...(field.value || [])];
-													newPaths.splice(index, 1);
-													form.setValue("watchPaths", newPaths);
-												}}
-											/>
-										</Badge>
-									))}
-								</div>
-								<FormControl>
-									<div className="flex gap-2">
-										<Input
-											placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-											onKeyDown={(e) => {
-												if (e.key === "Enter") {
-													e.preventDefault();
-													const input = e.currentTarget;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}
-											}}
-										/>
-										<Button
-											type="button"
-											variant="secondary"
-											onClick={() => {
-												const input = document.querySelector(
-													'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-												) as HTMLInputElement;
-												const value = input.value.trim();
-												if (value) {
-													const newPaths = [...(field.value || []), value];
-													form.setValue("watchPaths", newPaths);
-													input.value = "";
-												}
-											}}
-										>
-											Add
-										</Button>
-									</div>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
 				</div>
 
 				<div className="flex flex-row justify-end">

apps/dokploy/components/dashboard/compose/general/generic/save-github-provider-compose.tsx

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -29,22 +28,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -56,7 +47,6 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -81,7 +71,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
-			watchPaths: [],
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
@@ -124,7 +113,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				githubId: data.githubId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -139,7 +127,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			githubId: data.githubId,
 			sourceType: "github",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -196,25 +183,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GithubIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -382,84 +357,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const value = input.value.trim();
-														if (value) {
-															const newPaths = [...(field.value || []), value];
-															form.setValue("watchPaths", newPaths);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

apps/dokploy/components/dashboard/compose/general/generic/save-gitlab-provider-compose.tsx

@@ -29,23 +29,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GitlabProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -59,7 +50,6 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -86,7 +76,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
-			watchPaths: [],
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -135,7 +124,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				gitlabId: data.gitlabId || "",
-				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -152,7 +140,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 			sourceType: "gitlab",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -212,25 +199,13 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GitlabIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -407,84 +382,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const value = input.value.trim();
-														if (value) {
-															const newPaths = [...(field.value || []), value];
-															form.setValue("watchPaths", newPaths);
-															input.value = "";
-														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

apps/dokploy/components/dashboard/compose/general/isolated-deployment.tsx

@@ -147,9 +147,9 @@ export const IsolatedDeployment = ({ composeId }: Props) => {
 								render={({ field }) => (
 									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 										<div className="space-y-0.5">
-											<FormLabel>Enable Isolated Deployment ({data?.appName})</FormLabel>
+											<FormLabel>Enable Randomize ({data?.appName})</FormLabel>
 											<FormDescription>
-												Enable isolated deployment to the compose file.
+												Enable randomize to the compose file.
 											</FormDescription>
 										</div>
 										<FormControl>

apps/dokploy/components/dashboard/compose/update-compose.tsx

@@ -121,7 +121,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/database/backups/add-backup.tsx

@@ -54,7 +54,6 @@ const AddPostgresBackup1Schema = z.object({
 	prefix: z.string().min(1, "Prefix required"),
 	enabled: z.boolean(),
 	database: z.string().min(1, "Database required"),
-	keepLatestCount: z.coerce.number().optional(),
 });
 
 type AddPostgresBackup = z.infer<typeof AddPostgresBackup1Schema>;
@@ -78,7 +77,6 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
-			keepLatestCount: undefined,
 		},
 		resolver: zodResolver(AddPostgresBackup1Schema),
 	});
@@ -90,7 +88,6 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
-			keepLatestCount: undefined,
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
@@ -120,7 +117,6 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			schedule: data.schedule,
 			enabled: data.enabled,
 			database: data.database,
-			keepLatestCount: data.keepLatestCount,
 			databaseType,
 			...getDatabaseId,
 		})
@@ -269,7 +265,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 												<Input placeholder={"dokploy/"} {...field} />
 											</FormControl>
 											<FormDescription>
-												Use if you want to back up in a specific path of your
+												Use if you want to storage in a specific path of your
 												destination/bucket
 											</FormDescription>
 
@@ -278,24 +274,6 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 									);
 								}}
 							/>
-							<FormField
-								control={form.control}
-								name="keepLatestCount"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Keep the latest</FormLabel>
-											<FormControl>
-												<Input type="number" placeholder={"keeps all the backups if left empty"} {...field} />
-											</FormControl>
-											<FormDescription>
-												Optional. If provided, only keeps the latest N backups in the cloud.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>							
 							<FormField
 								control={form.control}
 								name="enabled"

apps/dokploy/components/dashboard/database/backups/restore-backup.tsx

@@ -1,367 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import type { ServiceType } from "../../application/advanced/show-resources";
-import { debounce } from "lodash";
-import { Input } from "@/components/ui/input";
-import { type LogLine, parseLogs } from "../../docker/logs/utils";
-import { DrawerLogs } from "@/components/shared/drawer-logs";
-import { Badge } from "@/components/ui/badge";
-import copy from "copy-to-clipboard";
-import { toast } from "sonner";
-
-interface Props {
-	databaseId: string;
-	databaseType: Exclude<ServiceType, "application" | "redis">;
-}
-
-const RestoreBackupSchema = z.object({
-	destinationId: z
-		.string({
-			required_error: "Please select a destination",
-		})
-		.min(1, {
-			message: "Destination is required",
-		}),
-	backupFile: z
-		.string({
-			required_error: "Please select a backup file",
-		})
-		.min(1, {
-			message: "Backup file is required",
-		}),
-	databaseName: z
-		.string({
-			required_error: "Please enter a database name",
-		})
-		.min(1, {
-			message: "Database name is required",
-		}),
-});
-
-type RestoreBackup = z.infer<typeof RestoreBackupSchema>;
-
-export const RestoreBackup = ({ databaseId, databaseType }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [search, setSearch] = useState("");
-
-	const { data: destinations = [] } = api.destination.all.useQuery();
-
-	const form = useForm<RestoreBackup>({
-		defaultValues: {
-			destinationId: "",
-			backupFile: "",
-			databaseName: "",
-		},
-		resolver: zodResolver(RestoreBackupSchema),
-	});
-
-	const destionationId = form.watch("destinationId");
-
-	const debouncedSetSearch = debounce((value: string) => {
-		setSearch(value);
-	}, 300);
-
-	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
-		{
-			destinationId: destionationId,
-			search,
-		},
-		{
-			enabled: isOpen && !!destionationId,
-		},
-	);
-
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-	const [isDeploying, setIsDeploying] = useState(false);
-
-	// const { mutateAsync: restore, isLoading: isRestoring } =
-	// 	api.backup.restoreBackup.useMutation();
-
-	api.backup.restoreBackupWithLogs.useSubscription(
-		{
-			databaseId,
-			databaseType,
-			databaseName: form.watch("databaseName"),
-			backupFile: form.watch("backupFile"),
-			destinationId: form.watch("destinationId"),
-		},
-		{
-			enabled: isDeploying,
-			onData(log) {
-				if (!isDrawerOpen) {
-					setIsDrawerOpen(true);
-				}
-
-				if (log === "Restore completed successfully!") {
-					setIsDeploying(false);
-				}
-				const parsedLogs = parseLogs(log);
-				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
-			},
-			onError(error) {
-				console.error("Restore logs error:", error);
-				setIsDeploying(false);
-			},
-		},
-	);
-
-	const onSubmit = async (_data: RestoreBackup) => {
-		setIsDeploying(true);
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline">
-					<RotateCcw className="mr-2 size-4" />
-					Restore Backup
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle className="flex items-center">
-						<RotateCcw className="mr-2 size-4" />
-						Restore Backup
-					</DialogTitle>
-					<DialogDescription>
-						Select a destination and search for backup files
-					</DialogDescription>
-				</DialogHeader>
-
-				<Form {...form}>
-					<form
-						id="hook-form-restore-backup"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<FormField
-							control={form.control}
-							name="destinationId"
-							render={({ field }) => (
-								<FormItem className="">
-									<FormLabel>Destination</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														"w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{field.value
-														? destinations.find(
-																(d) => d.destinationId === field.value,
-															)?.name
-														: "Select Destination"}
-													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-												</Button>
-											</FormControl>
-										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
-											<Command>
-												<CommandInput
-													placeholder="Search destinations..."
-													className="h-9"
-												/>
-												<CommandEmpty>No destinations found.</CommandEmpty>
-												<ScrollArea className="h-64">
-													<CommandGroup>
-														{destinations.map((destination) => (
-															<CommandItem
-																value={destination.destinationId}
-																key={destination.destinationId}
-																onSelect={() => {
-																	form.setValue(
-																		"destinationId",
-																		destination.destinationId,
-																	);
-																}}
-															>
-																{destination.name}
-																<CheckIcon
-																	className={cn(
-																		"ml-auto h-4 w-4",
-																		destination.destinationId === field.value
-																			? "opacity-100"
-																			: "opacity-0",
-																	)}
-																/>
-															</CommandItem>
-														))}
-													</CommandGroup>
-												</ScrollArea>
-											</Command>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="backupFile"
-							render={({ field }) => (
-								<FormItem className="">
-									<FormLabel className="flex items-center justify-between">
-										Search Backup Files
-										{field.value && (
-											<Badge variant="outline">
-												{field.value}
-												<Copy
-													className="ml-2 size-4 cursor-pointer"
-													onClick={(e) => {
-														e.stopPropagation();
-														e.preventDefault();
-														copy(field.value);
-														toast.success("Backup file copied to clipboard");
-													}}
-												/>
-											</Badge>
-										)}
-									</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														"w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{field.value || "Search and select a backup file"}
-													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-												</Button>
-											</FormControl>
-										</PopoverTrigger>
-										<PopoverContent className="p-0" align="start">
-											<Command>
-												<CommandInput
-													placeholder="Search backup files..."
-													onValueChange={debouncedSetSearch}
-													className="h-9"
-												/>
-												{isLoading ? (
-													<div className="py-6 text-center text-sm">
-														Loading backup files...
-													</div>
-												) : files.length === 0 && search ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files found for "{search}"
-													</div>
-												) : files.length === 0 ? (
-													<div className="py-6 text-center text-sm text-muted-foreground">
-														No backup files available
-													</div>
-												) : (
-													<ScrollArea className="h-64">
-														<CommandGroup>
-															{files.map((file) => (
-																<CommandItem
-																	value={file}
-																	key={file}
-																	onSelect={() => {
-																		form.setValue("backupFile", file);
-																	}}
-																>
-																	{file}
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			file === field.value
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																</CommandItem>
-															))}
-														</CommandGroup>
-													</ScrollArea>
-												)}
-											</Command>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="databaseName"
-							render={({ field }) => (
-								<FormItem className="">
-									<FormLabel>Database Name</FormLabel>
-									<FormControl>
-										<Input {...field} placeholder="Enter database name" />
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<DialogFooter>
-							<Button
-								isLoading={isDeploying}
-								form="hook-form-restore-backup"
-								type="submit"
-								disabled={!form.watch("backupFile")}
-							>
-								Restore
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-
-				<DrawerLogs
-					isOpen={isDrawerOpen}
-					onClose={() => {
-						setIsDrawerOpen(false);
-						setFilteredLogs([]);
-						setIsDeploying(false);
-						// refetch();
-					}}
-					filteredLogs={filteredLogs}
-				/>
-			</DialogContent>
-		</Dialog>
-	);
-};

apps/dokploy/components/dashboard/database/backups/show-backups.tsx

@@ -20,17 +20,12 @@ import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";
 import { UpdateBackup } from "./update-backup";
-import { RestoreBackup } from "./restore-backup";
-import { useState } from "react";
 
 interface Props {
 	id: string;
 	type: Exclude<ServiceType, "application" | "redis">;
 }
 export const ShowBackups = ({ id, type }: Props) => {
-	const [activeManualBackup, setActiveManualBackup] = useState<
-		string | undefined
-	>();
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -72,10 +67,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
-						<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
-						<RestoreBackup databaseId={id} databaseType={type} />
-					</div>
+					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -102,14 +94,11 @@ export const ShowBackups = ({ id, type }: Props) => {
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-									<AddBackup
-										databaseId={id}
-										databaseType={type}
-										refetch={refetch}
-									/>
-									<RestoreBackup databaseId={id} databaseType={type} />
-								</div>
+								<AddBackup
+									databaseId={id}
+									databaseType={type}
+									refetch={refetch}
+								/>
 							</div>
 						) : (
 							<div className="flex flex-col pt-2">
@@ -117,7 +106,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 									{postgres?.backups.map((backup) => (
 										<div key={backup.backupId}>
 											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
-												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8">
+												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
 													<div className="flex flex-col gap-1">
 														<span className="font-medium">Destination</span>
 														<span className="text-sm text-muted-foreground">
@@ -148,12 +137,6 @@ export const ShowBackups = ({ id, type }: Props) => {
 															{backup.enabled ? "Yes" : "No"}
 														</span>
 													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Keep Latest</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || "All"}
-														</span>
-													</div>
 												</div>
 												<div className="flex flex-row gap-4">
 													<TooltipProvider delayDuration={0}>
@@ -162,12 +145,8 @@ export const ShowBackups = ({ id, type }: Props) => {
 																<Button
 																	type="button"
 																	variant="ghost"
-																	isLoading={
-																		isManualBackup &&
-																		activeManualBackup === backup.backupId
-																	}
+																	isLoading={isManualBackup}
 																	onClick={async () => {
-																		setActiveManualBackup(backup.backupId);
 																		await manualBackup({
 																			backupId: backup.backupId as string,
 																		})
@@ -181,7 +160,6 @@ export const ShowBackups = ({ id, type }: Props) => {
 																					"Error creating the manual backup",
 																				);
 																			});
-																		setActiveManualBackup(undefined);
 																	}}
 																>
 																	<Play className="size-5  text-muted-foreground" />
@@ -190,7 +168,6 @@ export const ShowBackups = ({ id, type }: Props) => {
 															<TooltipContent>Run Manual Backup</TooltipContent>
 														</Tooltip>
 													</TooltipProvider>
-
 													<UpdateBackup
 														backupId={backup.backupId}
 														refetch={refetch}

apps/dokploy/components/dashboard/database/backups/update-backup.tsx

@@ -47,7 +47,6 @@ const UpdateBackupSchema = z.object({
 	prefix: z.string().min(1, "Prefix required"),
 	enabled: z.boolean(),
 	database: z.string().min(1, "Database required"),
-	keepLatestCount: z.coerce.number().optional(),
 });
 
 type UpdateBackup = z.infer<typeof UpdateBackupSchema>;
@@ -79,7 +78,6 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
-			keepLatestCount: undefined,
 		},
 		resolver: zodResolver(UpdateBackupSchema),
 	});
@@ -92,7 +90,6 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 				enabled: backup.enabled || false,
 				prefix: backup.prefix,
 				schedule: backup.schedule,
-				keepLatestCount: backup.keepLatestCount ? Number(backup.keepLatestCount) : undefined,
 			});
 		}
 	}, [form, form.reset, backup]);
@@ -105,7 +102,6 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 			schedule: data.schedule,
 			enabled: data.enabled,
 			database: data.database,
-			keepLatestCount: data.keepLatestCount as number | null,
 		})
 			.then(async () => {
 				toast.success("Backup Updated");
@@ -257,7 +253,7 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 												<Input placeholder={"dokploy/"} {...field} />
 											</FormControl>
 											<FormDescription>
-												Use if you want to back up in a specific path of your
+												Use if you want to storage in a specific path of your
 												destination/bucket
 											</FormDescription>
 
@@ -266,24 +262,6 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 									);
 								}}
 							/>
-							<FormField
-								control={form.control}
-								name="keepLatestCount"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Keep the latest</FormLabel>
-											<FormControl>
-												<Input type="number" placeholder={"keeps all the backups if left empty"} {...field} />
-											</FormControl>
-											<FormDescription>
-												Optional. If provided, only keeps the latest N backups in the cloud.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
 							<FormField
 								control={form.control}
 								name="enabled"

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

@@ -119,6 +119,7 @@ export const DockerLogsId: React.FC<Props> = ({
 		const wsUrl = `${protocol}//${
 			window.location.host
 		}/docker-container-logs?${params.toString()}`;
+		console.log("Connecting to WebSocket:", wsUrl);
 		const ws = new WebSocket(wsUrl);
 
 		const resetNoDataTimeout = () => {
@@ -135,6 +136,7 @@ export const DockerLogsId: React.FC<Props> = ({
 				ws.close();
 				return;
 			}
+			console.log("WebSocket connected");
 			resetNoDataTimeout();
 		};
 

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,152 +19,141 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const DockerProviderSchema = z.object({
-  externalPort: z.preprocess((a) => {
-    if (a !== null) {
-      const parsed = Number.parseInt(z.string().parse(a), 10);
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-    return null;
-  }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
 
 interface Props {
-  mariadbId: string;
+	mariadbId: string;
 }
 export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
-  const { data: ip } = api.settings.getIp.useQuery();
-  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),
-  });
+	const { data: ip } = api.settings.getIp.useQuery();
+	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),
+	});
 
-  useEffect(() => {
-    if (data?.externalPort) {
-      form.reset({
-        externalPort: data.externalPort,
-      });
-    }
-  }, [form.reset, data, form]);
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
 
-  const onSubmit = async (values: DockerProvider) => {
-    await mutateAsync({
-      externalPort: values.externalPort,
-      mariadbId,
-    })
-      .then(async () => {
-        toast.success("External Port updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error saving the external port");
-      });
-  };
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			mariadbId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the external port");
+			});
+	};
 
-  useEffect(() => {
-    const buildConnectionUrl = () => {
-      const port = form.watch("externalPort") || data?.externalPort;
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const port = form.watch("externalPort") || data?.externalPort;
 
-      return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
-    };
+			return `mariadb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+		};
 
-    setConnectionUrl(buildConnectionUrl());
-  }, [
-    data?.appName,
-    data?.externalPort,
-    data?.databasePassword,
-    form,
-    data?.databaseName,
-    data?.databaseUser,
-    getIp,
-  ]);
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">External Credentials</CardTitle>
-            <CardDescription>
-              In order to make the database reachable trought internet is
-              required to set a port, make sure the port is not used by another
-              application or database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex w-full flex-col gap-4">
-            {!getIp && (
-              <AlertBlock type="warning">
-                You need to set an IP address in your{" "}
-                <Link
-                  href="/dashboard/settings/server"
-                  className="text-primary"
-                >
-                  {data?.serverId
-                    ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
-                    : "Web Server -> Server -> Update Server IP"}
-                </Link>{" "}
-                to fix the database url connection.
-              </AlertBlock>
-            )}
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="flex flex-col gap-4"
-              >
-                <div className="grid md:grid-cols-2 gap-4 ">
-                  <div className="md:col-span-2 space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="externalPort"
-                      render={({ field }) => {
-                        return (
-                          <FormItem>
-                            <FormLabel>External Port (Internet)</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="3306"
-                                {...field}
-                                value={field.value || ""}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-                {!!data?.externalPort && (
-                  <div className="grid w-full gap-8">
-                    <div className="flex flex-col gap-3">
-                      {/* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */}
-                      <Label>External Host</Label>
-                      <ToggleVisibilityInput value={connectionUrl} disabled />
-                    </div>
-                  </div>
-                )}
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		form,
+		data?.databaseName,
+		data?.databaseUser,
+		getIp,
+	]);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid md:grid-cols-2 gap-4 ">
+									<div className="md:col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="3306"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											{/* jdbc:mariadb://5.161.59.207:3306/pixel-calculate?user=mariadb&password=HdVXfq6hM7W7F1 */}
+											<Label>External Host</Label>
+											<ToggleVisibilityInput value={connectionUrl} disabled />
+										</div>
+									</div>
+								)}
 
-                <div className="flex justify-end">
-                  <Button type="submit" isLoading={isLoading}>
-                    Save
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };

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

@@ -8,245 +8,242 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 
 interface Props {
-  mariadbId: string;
+	mariadbId: string;
 }
 
 export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
-  const { data, refetch } = api.mariadb.one.useQuery(
-    {
-      mariadbId,
-    },
-    { enabled: !!mariadbId }
-  );
+	const { data, refetch } = api.mariadb.one.useQuery(
+		{
+			mariadbId,
+		},
+		{ enabled: !!mariadbId },
+	);
 
-  const { mutateAsync: reload, isLoading: isReloading } =
-    api.mariadb.reload.useMutation();
+	const { mutateAsync: reload, isLoading: isReloading } =
+		api.mariadb.reload.useMutation();
 
-  const { mutateAsync: start, isLoading: isStarting } =
-    api.mariadb.start.useMutation();
+	const { mutateAsync: start, isLoading: isStarting } =
+		api.mariadb.start.useMutation();
 
-  const { mutateAsync: stop, isLoading: isStopping } =
-    api.mariadb.stop.useMutation();
+	const { mutateAsync: stop, isLoading: isStopping } =
+		api.mariadb.stop.useMutation();
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-  const [isDeploying, setIsDeploying] = useState(false);
-  api.mariadb.deployWithLogs.useSubscription(
-    {
-      mariadbId: mariadbId,
-    },
-    {
-      enabled: isDeploying,
-      onData(log) {
-        if (!isDrawerOpen) {
-          setIsDrawerOpen(true);
-        }
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+	api.mariadb.deployWithLogs.useSubscription(
+		{
+			mariadbId: mariadbId,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
 
-        if (log === "Deployment completed successfully!") {
-          setIsDeploying(false);
-        }
-        const parsedLogs = parseLogs(log);
-        setFilteredLogs((prev) => [...prev, ...parsedLogs]);
-      },
-      onError(error) {
-        console.error("Deployment logs error:", error);
-        setIsDeploying(false);
-      },
-    }
-  );
+				if (log === "Deployment completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Deployment logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
 
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">Deploy Settings</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-row gap-4 flex-wrap">
-            <TooltipProvider delayDuration={0}>
-              <DialogAction
-                title="Deploy Mariadb"
-                description="Are you sure you want to deploy this mariadb?"
-                type="default"
-                onClick={async () => {
-                  setIsDeploying(true);
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                  refetch();
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="default"
-                      isLoading={data?.applicationStatus === "running"}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <Rocket className="size-4 mr-1" />
-                      Deploy
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Downloads and sets up the MariaDB database</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              <DialogAction
-                title="Reload Mariadb"
-                description="Are you sure you want to reload this mariadb?"
-                type="default"
-                onClick={async () => {
-                  await reload({
-                    mariadbId: mariadbId,
-                    appName: data?.appName || "",
-                  })
-                    .then(() => {
-                      toast.success("Mariadb reloaded successfully");
-                      refetch();
-                    })
-                    .catch(() => {
-                      toast.error("Error reloading Mariadb");
-                    });
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="secondary"
-                      isLoading={isReloading}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <RefreshCcw className="size-4 mr-1" />
-                      Reload
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Restart the MariaDB service without rebuilding</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              {data?.applicationStatus === "idle" ? (
-                <DialogAction
-                  title="Start Mariadb"
-                  description="Are you sure you want to start this mariadb?"
-                  type="default"
-                  onClick={async () => {
-                    await start({
-                      mariadbId: mariadbId,
-                    })
-                      .then(() => {
-                        toast.success("Mariadb started successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error starting Mariadb");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="secondary"
-                        isLoading={isStarting}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <CheckCircle2 className="size-4 mr-1" />
-                        Start
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>
-                          Start the MariaDB database (requires a previous
-                          successful setup)
-                        </p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              ) : (
-                <DialogAction
-                  title="Stop Mariadb"
-                  description="Are you sure you want to stop this mariadb?"
-                  onClick={async () => {
-                    await stop({
-                      mariadbId: mariadbId,
-                    })
-                      .then(() => {
-                        toast.success("Mariadb stopped successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error stopping Mariadb");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="destructive"
-                        isLoading={isStopping}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <Ban className="size-4 mr-1" />
-                        Stop
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>Stop the currently running MariaDB database</p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              )}
-            </TooltipProvider>
-            <DockerTerminalModal
-              appName={data?.appName || ""}
-              serverId={data?.serverId || ""}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2"
-                  >
-                    <Terminal className="size-4" />
-                    Open Terminal
-                  </Button>
-                </TooltipTrigger>
-                <TooltipPrimitive.Portal>
-                  <TooltipContent sideOffset={5} className="z-[60]">
-                    <p>Open a terminal to the MariaDB container</p>
-                  </TooltipContent>
-                </TooltipPrimitive.Portal>
-              </Tooltip>
-            </DockerTerminalModal>
-          </CardContent>
-        </Card>
-        <DrawerLogs
-          isOpen={isDrawerOpen}
-          onClose={() => {
-            setIsDrawerOpen(false);
-            setFilteredLogs([]);
-            setIsDeploying(false);
-            refetch();
-          }}
-          filteredLogs={filteredLogs}
-        />
-      </div>
-    </>
-  );
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Mariadb"
+								description="Are you sure you want to deploy this mariadb?"
+								type="default"
+								onClick={async () => {
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MariaDB database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Mariadb"
+								description="Are you sure you want to reload this mariadb?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										mariadbId: mariadbId,
+										appName: data?.appName || "",
+									})
+										.then(() => {
+											toast.success("Mariadb reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Mariadb");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MariaDB service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mariadb"
+									description="Are you sure you want to start this mariadb?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mariadbId: mariadbId,
+										})
+											.then(() => {
+												toast.success("Mariadb started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mariadb");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MariaDB database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mariadb"
+									description="Are you sure you want to stop this mariadb?"
+									onClick={async () => {
+										await stop({
+											mariadbId: mariadbId,
+										})
+											.then(() => {
+												toast.success("Mariadb stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mariadb");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MariaDB database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
+	);
 };

apps/dokploy/components/dashboard/mariadb/update-mariadb.tsx

@@ -119,7 +119,7 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,151 +19,140 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const DockerProviderSchema = z.object({
-  externalPort: z.preprocess((a) => {
-    if (a !== null) {
-      const parsed = Number.parseInt(z.string().parse(a), 10);
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-    return null;
-  }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
 
 interface Props {
-  mongoId: string;
+	mongoId: string;
 }
 export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
-  const { data: ip } = api.settings.getIp.useQuery();
-  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),
-  });
+	const { data: ip } = api.settings.getIp.useQuery();
+	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),
+	});
 
-  useEffect(() => {
-    if (data?.externalPort) {
-      form.reset({
-        externalPort: data.externalPort,
-      });
-    }
-  }, [form.reset, data, form]);
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
 
-  const onSubmit = async (values: DockerProvider) => {
-    await mutateAsync({
-      externalPort: values.externalPort,
-      mongoId,
-    })
-      .then(async () => {
-        toast.success("External Port updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error saving the external port");
-      });
-  };
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			mongoId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the external port");
+			});
+	};
 
-  useEffect(() => {
-    const buildConnectionUrl = () => {
-      const port = form.watch("externalPort") || data?.externalPort;
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const port = form.watch("externalPort") || data?.externalPort;
 
-      return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
-    };
+			return `mongodb://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`;
+		};
 
-    setConnectionUrl(buildConnectionUrl());
-  }, [
-    data?.appName,
-    data?.externalPort,
-    data?.databasePassword,
-    form,
-    data?.databaseUser,
-    getIp,
-  ]);
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		form,
+		data?.databaseUser,
+		getIp,
+	]);
 
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">External Credentials</CardTitle>
-            <CardDescription>
-              In order to make the database reachable trought internet is
-              required to set a port, make sure the port is not used by another
-              application or database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex w-full flex-col gap-4">
-            {!getIp && (
-              <AlertBlock type="warning">
-                You need to set an IP address in your{" "}
-                <Link
-                  href="/dashboard/settings/server"
-                  className="text-primary"
-                >
-                  {data?.serverId
-                    ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
-                    : "Web Server -> Server -> Update Server IP"}
-                </Link>{" "}
-                to fix the database url connection.
-              </AlertBlock>
-            )}
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="flex flex-col gap-4"
-              >
-                <div className="grid grid-cols-2 gap-4 ">
-                  <div className="col-span-2 space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="externalPort"
-                      render={({ field }) => {
-                        return (
-                          <FormItem>
-                            <FormLabel>External Port (Internet)</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="27017"
-                                {...field}
-                                value={field.value || ""}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-                {!!data?.externalPort && (
-                  <div className="grid w-full gap-8">
-                    <div className="flex flex-col gap-3">
-                      <Label>External Host</Label>
-                      <ToggleVisibilityInput value={connectionUrl} disabled />
-                    </div>
-                  </div>
-                )}
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid grid-cols-2 gap-4 ">
+									<div className="col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="27017"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											<Label>External Host</Label>
+											<ToggleVisibilityInput value={connectionUrl} disabled />
+										</div>
+									</div>
+								)}
 
-                <div className="flex justify-end">
-                  <Button type="submit" isLoading={isLoading}>
-                    Save
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };

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

@@ -3,249 +3,246 @@ import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 interface Props {
-  mongoId: string;
+	mongoId: string;
 }
 
 export const ShowGeneralMongo = ({ mongoId }: Props) => {
-  const { data, refetch } = api.mongo.one.useQuery(
-    {
-      mongoId,
-    },
-    { enabled: !!mongoId }
-  );
+	const { data, refetch } = api.mongo.one.useQuery(
+		{
+			mongoId,
+		},
+		{ enabled: !!mongoId },
+	);
 
-  const { mutateAsync: reload, isLoading: isReloading } =
-    api.mongo.reload.useMutation();
+	const { mutateAsync: reload, isLoading: isReloading } =
+		api.mongo.reload.useMutation();
 
-  const { mutateAsync: start, isLoading: isStarting } =
-    api.mongo.start.useMutation();
+	const { mutateAsync: start, isLoading: isStarting } =
+		api.mongo.start.useMutation();
 
-  const { mutateAsync: stop, isLoading: isStopping } =
-    api.mongo.stop.useMutation();
+	const { mutateAsync: stop, isLoading: isStopping } =
+		api.mongo.stop.useMutation();
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-  const [isDeploying, setIsDeploying] = useState(false);
-  api.mongo.deployWithLogs.useSubscription(
-    {
-      mongoId: mongoId,
-    },
-    {
-      enabled: isDeploying,
-      onData(log) {
-        if (!isDrawerOpen) {
-          setIsDrawerOpen(true);
-        }
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+	api.mongo.deployWithLogs.useSubscription(
+		{
+			mongoId: mongoId,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
 
-        if (log === "Deployment completed successfully!") {
-          setIsDeploying(false);
-        }
+				if (log === "Deployment completed successfully!") {
+					setIsDeploying(false);
+				}
 
-        const parsedLogs = parseLogs(log);
-        setFilteredLogs((prev) => [...prev, ...parsedLogs]);
-      },
-      onError(error) {
-        console.error("Deployment logs error:", error);
-        setIsDeploying(false);
-      },
-    }
-  );
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">Deploy Settings</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-row gap-4 flex-wrap">
-            <TooltipProvider delayDuration={0}>
-              <DialogAction
-                title="Deploy Mongo"
-                description="Are you sure you want to deploy this mongo?"
-                type="default"
-                onClick={async () => {
-                  setIsDeploying(true);
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                  refetch();
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="default"
-                      isLoading={data?.applicationStatus === "running"}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <Rocket className="size-4 mr-1" />
-                      Deploy
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Downloads and sets up the MongoDB database</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              <DialogAction
-                title="Reload Mongo"
-                description="Are you sure you want to reload this mongo?"
-                type="default"
-                onClick={async () => {
-                  await reload({
-                    mongoId: mongoId,
-                    appName: data?.appName || "",
-                  })
-                    .then(() => {
-                      toast.success("Mongo reloaded successfully");
-                      refetch();
-                    })
-                    .catch(() => {
-                      toast.error("Error reloading Mongo");
-                    });
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="secondary"
-                      isLoading={isReloading}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <RefreshCcw className="size-4 mr-1" />
-                      Reload
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Restart the MongoDB service without rebuilding</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              {data?.applicationStatus === "idle" ? (
-                <DialogAction
-                  title="Start Mongo"
-                  description="Are you sure you want to start this mongo?"
-                  type="default"
-                  onClick={async () => {
-                    await start({
-                      mongoId: mongoId,
-                    })
-                      .then(() => {
-                        toast.success("Mongo started successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error starting Mongo");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="secondary"
-                        isLoading={isStarting}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <CheckCircle2 className="size-4 mr-1" />
-                        Start
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>
-                          Start the MongoDB database (requires a previous
-                          successful setup)
-                        </p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              ) : (
-                <DialogAction
-                  title="Stop Mongo"
-                  description="Are you sure you want to stop this mongo?"
-                  onClick={async () => {
-                    await stop({
-                      mongoId: mongoId,
-                    })
-                      .then(() => {
-                        toast.success("Mongo stopped successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error stopping Mongo");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="destructive"
-                        isLoading={isStopping}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <Ban className="size-4 mr-1" />
-                        Stop
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>Stop the currently running MongoDB database</p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              )}
-            </TooltipProvider>
-            <DockerTerminalModal
-              appName={data?.appName || ""}
-              serverId={data?.serverId || ""}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2"
-                  >
-                    <Terminal className="size-4" />
-                    Open Terminal
-                  </Button>
-                </TooltipTrigger>
-                <TooltipPrimitive.Portal>
-                  <TooltipContent sideOffset={5} className="z-[60]">
-                    <p>Open a terminal to the MongoDB container</p>
-                  </TooltipContent>
-                </TooltipPrimitive.Portal>
-              </Tooltip>
-            </DockerTerminalModal>
-          </CardContent>
-        </Card>
-        <DrawerLogs
-          isOpen={isDrawerOpen}
-          onClose={() => {
-            setIsDrawerOpen(false);
-            setFilteredLogs([]);
-            setIsDeploying(false);
-            refetch();
-          }}
-          filteredLogs={filteredLogs}
-        />
-      </div>
-    </>
-  );
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Deployment logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Mongo"
+								description="Are you sure you want to deploy this mongo?"
+								type="default"
+								onClick={async () => {
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MongoDB database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Mongo"
+								description="Are you sure you want to reload this mongo?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										mongoId: mongoId,
+										appName: data?.appName || "",
+									})
+										.then(() => {
+											toast.success("Mongo reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Mongo");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MongoDB service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mongo"
+									description="Are you sure you want to start this mongo?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mongoId: mongoId,
+										})
+											.then(() => {
+												toast.success("Mongo started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mongo");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MongoDB database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mongo"
+									description="Are you sure you want to stop this mongo?"
+									onClick={async () => {
+										await stop({
+											mongoId: mongoId,
+										})
+											.then(() => {
+												toast.success("Mongo stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mongo");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MongoDB database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
+	);
 };

apps/dokploy/components/dashboard/mongo/update-mongo.tsx

@@ -121,7 +121,7 @@ export const UpdateMongo = ({ mongoId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/monitoring/free/container/show-free-container-monitoring.tsx

@@ -218,7 +218,7 @@ export const ContainerFreeMonitoring = ({
 					<CardContent>
 						<div className="flex flex-col gap-2 w-full">
 							<span className="text-sm text-muted-foreground">
-								Used: {currentData.cpu.value}
+								Used: {currentData.cpu.value}%
 							</span>
 							<Progress value={currentData.cpu.value} className="w-[100%]" />
 							<DockerCpuChart acummulativeData={acummulativeData.cpu} />

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,151 +19,140 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const DockerProviderSchema = z.object({
-  externalPort: z.preprocess((a) => {
-    if (a !== null) {
-      const parsed = Number.parseInt(z.string().parse(a), 10);
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-    return null;
-  }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
 
 interface Props {
-  mysqlId: string;
+	mysqlId: string;
 }
 export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
-  const { data: ip } = api.settings.getIp.useQuery();
-  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),
-  });
+	const { data: ip } = api.settings.getIp.useQuery();
+	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),
+	});
 
-  useEffect(() => {
-    if (data?.externalPort) {
-      form.reset({
-        externalPort: data.externalPort,
-      });
-    }
-  }, [form.reset, data, form]);
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
 
-  const onSubmit = async (values: DockerProvider) => {
-    await mutateAsync({
-      externalPort: values.externalPort,
-      mysqlId,
-    })
-      .then(async () => {
-        toast.success("External Port updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error saving the external port");
-      });
-  };
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			mysqlId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the external port");
+			});
+	};
 
-  useEffect(() => {
-    const buildConnectionUrl = () => {
-      const port = form.watch("externalPort") || data?.externalPort;
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const port = form.watch("externalPort") || data?.externalPort;
 
-      return `mysql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
-    };
+			return `mysql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+		};
 
-    setConnectionUrl(buildConnectionUrl());
-  }, [
-    data?.appName,
-    data?.externalPort,
-    data?.databasePassword,
-    data?.databaseName,
-    data?.databaseUser,
-    form,
-    getIp,
-  ]);
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">External Credentials</CardTitle>
-            <CardDescription>
-              In order to make the database reachable trought internet is
-              required to set a port, make sure the port is not used by another
-              application or database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex w-full flex-col gap-4">
-            {!getIp && (
-              <AlertBlock type="warning">
-                You need to set an IP address in your{" "}
-                <Link
-                  href="/dashboard/settings/server"
-                  className="text-primary"
-                >
-                  {data?.serverId
-                    ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
-                    : "Web Server -> Server -> Update Server IP"}
-                </Link>{" "}
-                to fix the database url connection.
-              </AlertBlock>
-            )}
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="flex flex-col gap-4"
-              >
-                <div className="grid grid-cols-2 gap-4 ">
-                  <div className="col-span-2 space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="externalPort"
-                      render={({ field }) => {
-                        return (
-                          <FormItem>
-                            <FormLabel>External Port (Internet)</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="3306"
-                                {...field}
-                                value={field.value || ""}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-                {!!data?.externalPort && (
-                  <div className="grid w-full gap-8">
-                    <div className="flex flex-col gap-3">
-                      <Label>External Host</Label>
-                      <ToggleVisibilityInput disabled value={connectionUrl} />
-                    </div>
-                  </div>
-                )}
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		data?.databaseName,
+		data?.databaseUser,
+		form,
+		getIp,
+	]);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid grid-cols-2 gap-4 ">
+									<div className="col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="3306"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											<Label>External Host</Label>
+											<ToggleVisibilityInput disabled value={connectionUrl} />
+										</div>
+									</div>
+								)}
 
-                <div className="flex justify-end">
-                  <Button type="submit" isLoading={isLoading}>
-                    Save
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };

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

@@ -8,242 +8,239 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 interface Props {
-  mysqlId: string;
+	mysqlId: string;
 }
 
 export const ShowGeneralMysql = ({ mysqlId }: Props) => {
-  const { data, refetch } = api.mysql.one.useQuery(
-    {
-      mysqlId,
-    },
-    { enabled: !!mysqlId }
-  );
+	const { data, refetch } = api.mysql.one.useQuery(
+		{
+			mysqlId,
+		},
+		{ enabled: !!mysqlId },
+	);
 
-  const { mutateAsync: reload, isLoading: isReloading } =
-    api.mysql.reload.useMutation();
-  const { mutateAsync: start, isLoading: isStarting } =
-    api.mysql.start.useMutation();
+	const { mutateAsync: reload, isLoading: isReloading } =
+		api.mysql.reload.useMutation();
+	const { mutateAsync: start, isLoading: isStarting } =
+		api.mysql.start.useMutation();
 
-  const { mutateAsync: stop, isLoading: isStopping } =
-    api.mysql.stop.useMutation();
+	const { mutateAsync: stop, isLoading: isStopping } =
+		api.mysql.stop.useMutation();
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-  const [isDeploying, setIsDeploying] = useState(false);
-  api.mysql.deployWithLogs.useSubscription(
-    {
-      mysqlId: mysqlId,
-    },
-    {
-      enabled: isDeploying,
-      onData(log) {
-        if (!isDrawerOpen) {
-          setIsDrawerOpen(true);
-        }
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+	api.mysql.deployWithLogs.useSubscription(
+		{
+			mysqlId: mysqlId,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
 
-        if (log === "Deployment completed successfully!") {
-          setIsDeploying(false);
-        }
-        const parsedLogs = parseLogs(log);
-        setFilteredLogs((prev) => [...prev, ...parsedLogs]);
-      },
-      onError(error) {
-        console.error("Deployment logs error:", error);
-        setIsDeploying(false);
-      },
-    }
-  );
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">Deploy Settings</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-row gap-4 flex-wrap">
-            <TooltipProvider delayDuration={0}>
-              <DialogAction
-                title="Deploy Mysql"
-                description="Are you sure you want to deploy this mysql?"
-                type="default"
-                onClick={async () => {
-                  setIsDeploying(true);
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                  refetch();
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="default"
-                      isLoading={data?.applicationStatus === "running"}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <Rocket className="size-4 mr-1" />
-                      Deploy
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Downloads and sets up the MySQL database</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              <DialogAction
-                title="Reload Mysql"
-                description="Are you sure you want to reload this mysql?"
-                type="default"
-                onClick={async () => {
-                  await reload({
-                    mysqlId: mysqlId,
-                    appName: data?.appName || "",
-                  })
-                    .then(() => {
-                      toast.success("Mysql reloaded successfully");
-                      refetch();
-                    })
-                    .catch(() => {
-                      toast.error("Error reloading Mysql");
-                    });
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="secondary"
-                      isLoading={isReloading}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <RefreshCcw className="size-4 mr-1" />
-                      Reload
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Restart the MySQL service without rebuilding</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              {data?.applicationStatus === "idle" ? (
-                <DialogAction
-                  title="Start Mysql"
-                  description="Are you sure you want to start this mysql?"
-                  type="default"
-                  onClick={async () => {
-                    await start({
-                      mysqlId: mysqlId,
-                    })
-                      .then(() => {
-                        toast.success("Mysql started successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error starting Mysql");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="secondary"
-                        isLoading={isStarting}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <CheckCircle2 className="size-4 mr-1" />
-                        Start
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>
-                          Start the MySQL database (requires a previous
-                          successful setup)
-                        </p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              ) : (
-                <DialogAction
-                  title="Stop Mysql"
-                  description="Are you sure you want to stop this mysql?"
-                  onClick={async () => {
-                    await stop({
-                      mysqlId: mysqlId,
-                    })
-                      .then(() => {
-                        toast.success("Mysql stopped successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error stopping Mysql");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="destructive"
-                        isLoading={isStopping}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <Ban className="size-4 mr-1" />
-                        Stop
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>Stop the currently running MySQL database</p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              )}
-            </TooltipProvider>
-            <DockerTerminalModal
-              appName={data?.appName || ""}
-              serverId={data?.serverId || ""}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2"
-                  >
-                    <Terminal className="size-4" />
-                    Open Terminal
-                  </Button>
-                </TooltipTrigger>
-                <TooltipPrimitive.Portal>
-                  <TooltipContent sideOffset={5} className="z-[60]">
-                    <p>Open a terminal to the MySQL container</p>
-                  </TooltipContent>
-                </TooltipPrimitive.Portal>
-              </Tooltip>
-            </DockerTerminalModal>
-          </CardContent>
-        </Card>
-        <DrawerLogs
-          isOpen={isDrawerOpen}
-          onClose={() => {
-            setIsDrawerOpen(false);
-            setFilteredLogs([]);
-            setIsDeploying(false);
-            refetch();
-          }}
-          filteredLogs={filteredLogs}
-        />
-      </div>
-    </>
-  );
+				if (log === "Deployment completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Deployment logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Mysql"
+								description="Are you sure you want to deploy this mysql?"
+								type="default"
+								onClick={async () => {
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MySQL database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Mysql"
+								description="Are you sure you want to reload this mysql?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										mysqlId: mysqlId,
+										appName: data?.appName || "",
+									})
+										.then(() => {
+											toast.success("Mysql reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Mysql");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MySQL service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mysql"
+									description="Are you sure you want to start this mysql?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mysqlId: mysqlId,
+										})
+											.then(() => {
+												toast.success("Mysql started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mysql");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MySQL database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mysql"
+									description="Are you sure you want to stop this mysql?"
+									onClick={async () => {
+										await stop({
+											mysqlId: mysqlId,
+										})
+											.then(() => {
+												toast.success("Mysql stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mysql");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MySQL database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
+	);
 };

apps/dokploy/components/dashboard/mysql/update-mysql.tsx

@@ -119,7 +119,7 @@ export const UpdateMysql = ({ mysqlId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,153 +19,142 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const DockerProviderSchema = z.object({
-  externalPort: z.preprocess((a) => {
-    if (a !== null) {
-      const parsed = Number.parseInt(z.string().parse(a), 10);
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-    return null;
-  }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
 
 interface Props {
-  postgresId: string;
+	postgresId: string;
 }
 export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
-  const { data: ip } = api.settings.getIp.useQuery();
-  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 { data: ip } = api.settings.getIp.useQuery();
+	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>({
-    defaultValues: {},
-    resolver: zodResolver(DockerProviderSchema),
-  });
+	const form = useForm<DockerProvider>({
+		defaultValues: {},
+		resolver: zodResolver(DockerProviderSchema),
+	});
 
-  useEffect(() => {
-    if (data?.externalPort) {
-      form.reset({
-        externalPort: data.externalPort,
-      });
-    }
-  }, [form.reset, data, form]);
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
 
-  const onSubmit = async (values: DockerProvider) => {
-    await mutateAsync({
-      externalPort: values.externalPort,
-      postgresId,
-    })
-      .then(async () => {
-        toast.success("External Port updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error saving the external port");
-      });
-  };
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			postgresId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the external port");
+			});
+	};
 
-  useEffect(() => {
-    const buildConnectionUrl = () => {
-      const port = form.watch("externalPort") || data?.externalPort;
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const port = form.watch("externalPort") || data?.externalPort;
 
-      return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
-    };
+			return `postgresql://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}/${data?.databaseName}`;
+		};
 
-    setConnectionUrl(buildConnectionUrl());
-  }, [
-    data?.appName,
-    data?.externalPort,
-    data?.databasePassword,
-    form,
-    data?.databaseName,
-    getIp,
-  ]);
+		setConnectionUrl(buildConnectionUrl());
+	}, [
+		data?.appName,
+		data?.externalPort,
+		data?.databasePassword,
+		form,
+		data?.databaseName,
+		getIp,
+	]);
 
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">External Credentials</CardTitle>
-            <CardDescription>
-              In order to make the database reachable trought internet is
-              required to set a port, make sure the port is not used by another
-              application or database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex w-full flex-col gap-4">
-            {!getIp && (
-              <AlertBlock type="warning">
-                You need to set an IP address in your{" "}
-                <Link
-                  href="/dashboard/settings/server"
-                  className="text-primary"
-                >
-                  {data?.serverId
-                    ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
-                    : "Web Server -> Server -> Update Server IP"}
-                </Link>{" "}
-                to fix the database url connection.
-              </AlertBlock>
-            )}
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="flex flex-col gap-4"
-              >
-                <div className="grid grid-cols-2 gap-4 ">
-                  <div className="col-span-2 space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="externalPort"
-                      render={({ field }) => {
-                        return (
-                          <FormItem>
-                            <FormLabel>External Port (Internet)</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="5432"
-                                {...field}
-                                value={field.value || ""}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-                {!!data?.externalPort && (
-                  <div className="grid w-full gap-8">
-                    <div className="flex flex-col gap-3">
-                      <Label>External Host</Label>
-                      <ToggleVisibilityInput value={connectionUrl} disabled />
-                    </div>
-                  </div>
-                )}
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid grid-cols-2 gap-4 ">
+									<div className="col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="5432"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											<Label>External Host</Label>
+											<ToggleVisibilityInput value={connectionUrl} disabled />
+										</div>
+									</div>
+								)}
 
-                <div className="flex justify-end">
-                  <Button type="submit" isLoading={isLoading}>
-                    Save
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };

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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -72,7 +78,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<TooltipProvider disableHoverableContent={false}>
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
 								title="Deploy Postgres"
 								description="Are you sure you want to deploy this postgres?"
@@ -83,23 +89,23 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 									refetch();
 								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="default"
-											isLoading={data?.applicationStatus === "running"}
-											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-										>
-											<Rocket className="size-4 mr-1" />
-											Deploy
-										</Button>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>Downloads and sets up the PostgreSQL database</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the PostgreSQL database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
 							</DialogAction>
 							<DialogAction
 								title="Reload Postgres"
@@ -119,23 +125,24 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 										});
 								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="secondary"
-											isLoading={isReloading}
-											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-										>
-											<RefreshCcw className="size-4 mr-1" />
-											Reload
-										</Button>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>Reload the PostgreSQL without rebuilding it</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the PostgreSQL service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
 							</DialogAction>
 							{data?.applicationStatus === "idle" ? (
 								<DialogAction
@@ -155,26 +162,27 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 											});
 									}}
 								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												variant="secondary"
-												isLoading={isStarting}
-												className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-											>
-												<CheckCircle2 className="size-4 mr-1" />
-												Start
-											</Button>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>
-													Start the PostgreSQL database (requires a previous
-													successful setup)
-												</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the PostgreSQL database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
 								</DialogAction>
 							) : (
 								<DialogAction
@@ -193,23 +201,24 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 											});
 									}}
 								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												variant="destructive"
-												isLoading={isStopping}
-												className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-											>
-												<Ban className="size-4 mr-1" />
-												Stop
-											</Button>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Stop the currently running PostgreSQL database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running PostgreSQL database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
 								</DialogAction>
 							)}
 						</TooltipProvider>
@@ -217,11 +226,8 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<Terminal className="size-4 mr-1" />
+							<Button variant="outline">
+								<Terminal />
 								Open Terminal
 							</Button>
 						</DockerTerminalModal>

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

@@ -5,58 +5,58 @@ import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 
 interface Props {
-  postgresId: string;
+	postgresId: string;
 }
 export const ShowInternalPostgresCredentials = ({ postgresId }: Props) => {
-  const { data } = api.postgres.one.useQuery({ postgresId });
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">Internal Credentials</CardTitle>
-          </CardHeader>
-          <CardContent className="flex w-full flex-row gap-4">
-            <div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
-              <div className="flex flex-col gap-2">
-                <Label>User</Label>
-                <Input disabled value={data?.databaseUser} />
-              </div>
-              <div className="flex flex-col gap-2">
-                <Label>Database Name</Label>
-                <Input disabled value={data?.databaseName} />
-              </div>
-              <div className="flex flex-col gap-2">
-                <Label>Password</Label>
-                <div className="flex flex-row gap-4">
-                  <ToggleVisibilityInput
-                    value={data?.databasePassword}
-                    disabled
-                  />
-                </div>
-              </div>
-              <div className="flex flex-col gap-2">
-                <Label>Internal Port (Container)</Label>
-                <Input disabled value="5432" />
-              </div>
+	const { data } = api.postgres.one.useQuery({ postgresId });
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Internal Credentials</CardTitle>
+					</CardHeader>
+					<CardContent className="flex w-full flex-row gap-4">
+						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
+							<div className="flex flex-col gap-2">
+								<Label>User</Label>
+								<Input disabled value={data?.databaseUser} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Database Name</Label>
+								<Input disabled value={data?.databaseName} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Password</Label>
+								<div className="flex flex-row gap-4">
+									<ToggleVisibilityInput
+										value={data?.databasePassword}
+										disabled
+									/>
+								</div>
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Internal Port (Container)</Label>
+								<Input disabled value="5432" />
+							</div>
 
-              <div className="flex flex-col gap-2">
-                <Label>Internal Host</Label>
-                <Input disabled value={data?.appName} />
-              </div>
+							<div className="flex flex-col gap-2">
+								<Label>Internal Host</Label>
+								<Input disabled value={data?.appName} />
+							</div>
 
-              <div className="flex flex-col gap-2">
-                <Label>Internal Connection URL </Label>
-                <ToggleVisibilityInput
-                  disabled
-                  value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
-                />
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+							<div className="flex flex-col gap-2">
+								<Label>Internal Connection URL </Label>
+								<ToggleVisibilityInput
+									disabled
+									value={`postgresql://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5432/${data?.databaseName}`}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };
 // ReplyError: MISCONF Redis is configured to save RDB snapshots, but it's currently unable to persist to disk. Commands that may modify the data set are disabled, because this instance is configured to report errors during writes if RDB snapshotting fails (stop-w

apps/dokploy/components/dashboard/postgres/update-postgres.tsx

@@ -21,146 +21,145 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBox } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const updatePostgresSchema = z.object({
-  name: z.string().min(1, {
-    message: "Name is required",
-  }),
-  description: z.string().optional(),
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
 });
 
 type UpdatePostgres = z.infer<typeof updatePostgresSchema>;
 
 interface Props {
-  postgresId: string;
+	postgresId: string;
 }
 
 export const UpdatePostgres = ({ postgresId }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const utils = api.useUtils();
-  const { mutateAsync, error, isError, isLoading } =
-    api.postgres.update.useMutation();
-  const { data } = api.postgres.one.useQuery(
-    {
-      postgresId,
-    },
-    {
-      enabled: !!postgresId,
-    }
-  );
-  const form = useForm<UpdatePostgres>({
-    defaultValues: {
-      description: data?.description ?? "",
-      name: data?.name ?? "",
-    },
-    resolver: zodResolver(updatePostgresSchema),
-  });
-  useEffect(() => {
-    if (data) {
-      form.reset({
-        description: data.description ?? "",
-        name: data.name,
-      });
-    }
-  }, [data, form, form.reset]);
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isLoading } =
+		api.postgres.update.useMutation();
+	const { data } = api.postgres.one.useQuery(
+		{
+			postgresId,
+		},
+		{
+			enabled: !!postgresId,
+		},
+	);
+	const form = useForm<UpdatePostgres>({
+		defaultValues: {
+			description: data?.description ?? "",
+			name: data?.name ?? "",
+		},
+		resolver: zodResolver(updatePostgresSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				description: data.description ?? "",
+				name: data.name,
+			});
+		}
+	}, [data, form, form.reset]);
 
-  const onSubmit = async (formData: UpdatePostgres) => {
-    await mutateAsync({
-      name: formData.name,
-      postgresId: postgresId,
-      description: formData.description || "",
-    })
-      .then(() => {
-        toast.success("Postgres updated successfully");
-        utils.postgres.one.invalidate({
-          postgresId: postgresId,
-        });
-        setIsOpen(false);
-      })
-      .catch(() => {
-        toast.error("Error updating Postgres");
-      })
-      .finally(() => {});
-  };
+	const onSubmit = async (formData: UpdatePostgres) => {
+		await mutateAsync({
+			name: formData.name,
+			postgresId: postgresId,
+			description: formData.description || "",
+		})
+			.then(() => {
+				toast.success("Postgres updated successfully");
+				utils.postgres.one.invalidate({
+					postgresId: postgresId,
+				});
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error updating Postgres");
+			})
+			.finally(() => {});
+	};
 
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="group hover:bg-blue-500/10 focus-visible:ring-2 focus-visible:ring-offset-2"
-        >
-          <PenBox className="size-3.5 text-primary group-hover:text-blue-500" />
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Modify Postgres</DialogTitle>
-          <DialogDescription>Update the Postgres data</DialogDescription>
-        </DialogHeader>
-        {isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="group hover:bg-blue-500/10 "
+				>
+					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Modify Postgres</DialogTitle>
+					<DialogDescription>Update the Postgres data</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-        <div className="grid gap-4">
-          <div className="grid items-center gap-4">
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                id="hook-form-update-postgres"
-                className="grid w-full gap-4 "
-              >
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Name</FormLabel>
-                      <FormControl>
-                        <Input placeholder="Vandelay Industries" {...field} />
-                      </FormControl>
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-update-postgres"
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Tesla" {...field} />
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="description"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Description</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          placeholder="Description about your project..."
-                          className="resize-none"
-                          {...field}
-                        />
-                      </FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Description about your project..."
+													className="resize-none"
+													{...field}
+												/>
+											</FormControl>
 
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <DialogFooter>
-                  <Button
-                    isLoading={isLoading}
-                    form="hook-form-update-postgres"
-                    type="submit"
-                    className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                  >
-                    Update
-                  </Button>
-                </DialogFooter>
-              </form>
-            </Form>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isLoading}
+										form="hook-form-update-postgres"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
 };

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

@@ -494,7 +494,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 												<Input
 													type="password"
 													placeholder="******************"
-													autoComplete="one-time-code"
+													autoComplete="off"
 													{...field}
 												/>
 											</FormControl>

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

@@ -1,4 +1,3 @@
-import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	AlertDialog,
@@ -58,67 +57,32 @@ import {
 	BookText,
 	CheckIcon,
 	ChevronsUpDown,
+	Github,
 	Globe,
 	HelpCircle,
 	LayoutGrid,
 	List,
-	Loader2,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 
-const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
-
 interface Props {
 	projectId: string;
-	baseUrl?: string;
 }
 
-export const AddTemplate = ({ projectId, baseUrl }: Props) => {
+export const AddTemplate = ({ projectId }: Props) => {
 	const [query, setQuery] = useState("");
 	const [open, setOpen] = useState(false);
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const [customBaseUrl, setCustomBaseUrl] = useState<string | undefined>(() => {
-		// Try to get from props first, then localStorage
-		if (baseUrl) return baseUrl;
-		if (typeof window !== "undefined") {
-			return localStorage.getItem(TEMPLATE_BASE_URL_KEY) || undefined;
-		}
-		return undefined;
-	});
-
-	// Save to localStorage when customBaseUrl changes
-	useEffect(() => {
-		if (customBaseUrl) {
-			localStorage.setItem(TEMPLATE_BASE_URL_KEY, customBaseUrl);
-		} else {
-			localStorage.removeItem(TEMPLATE_BASE_URL_KEY);
-		}
-	}, [customBaseUrl]);
-
-	const {
-		data,
-		isLoading: isLoadingTemplates,
-		error: errorTemplates,
-		isError: isErrorTemplates,
-	} = api.compose.templates.useQuery(
-		{ baseUrl: customBaseUrl },
-		{
-			enabled: open,
-		},
-	);
+	const { data } = api.compose.templates.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
-		{ baseUrl: customBaseUrl },
-		{
-			enabled: open,
-		},
-	);
+	const { data: tags, isLoading: isLoadingTags } =
+		api.compose.getTags.useQuery();
 	const utils = api.useUtils();
 
 	const [serverId, setServerId] = useState<string | undefined>(undefined);
@@ -165,14 +129,6 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 									className="w-full sm:w-[200px]"
 									value={query}
 								/>
-								<Input
-									placeholder="Base URL (optional)"
-									onChange={(e) =>
-										setCustomBaseUrl(e.target.value || undefined)
-									}
-									className="w-full sm:w-[300px]"
-									value={customBaseUrl || ""}
-								/>
 								<Popover modal={true}>
 									<PopoverTrigger asChild>
 										<Button
@@ -276,20 +232,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 							</AlertBlock>
 						)}
 
-						{isErrorTemplates && (
-							<AlertBlock type="error" className="mb-4">
-								{errorTemplates?.message}
-							</AlertBlock>
-						)}
-
-						{isLoadingTemplates ? (
-							<div className="flex justify-center items-center w-full h-full flex-row gap-4">
-								<Loader2 className="size-8 text-muted-foreground animate-spin min-h-[60vh]" />
-								<div className="text-lg font-medium text-muted-foreground">
-									Loading templates...
-								</div>
-							</div>
-						) : templates.length === 0 ? (
+						{templates.length === 0 ? (
 							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
 								<SearchIcon className="text-muted-foreground size-6" />
 								<div className="text-xl font-medium text-muted-foreground">
@@ -305,9 +248,9 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
 								)}
 							>
-								{templates?.map((template) => (
+								{templates?.map((template, index) => (
 									<div
-										key={template.id}
+										key={`template-${index}`}
 										className={cn(
 											"flex flex-col border rounded-lg overflow-hidden relative",
 											viewMode === "icon" && "h-[200px]",
@@ -317,6 +260,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										<Badge className="absolute top-2 right-2" variant="blue">
 											{template.version}
 										</Badge>
+										{/* Template Header */}
 										<div
 											className={cn(
 												"flex-none p-6 pb-3 flex flex-col items-center gap-4 bg-muted/30",
@@ -324,7 +268,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 											)}
 										>
 											<img
-												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
+												src={`/templates/${template.logo}`}
 												className={cn(
 													"object-contain",
 													viewMode === "detailed" ? "size-24" : "size-16",
@@ -377,7 +321,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 														target="_blank"
 														className="text-muted-foreground hover:text-foreground transition-colors"
 													>
-														<GithubIcon className="size-5" />
+														<Github className="size-5" />
 													</Link>
 													{template.links.website && (
 														<Link
@@ -439,9 +383,8 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 																		side="top"
 																	>
 																		<span>
-																			If no server is selected, the application
-																			will be deployed on the server where the
-																			user is logged in.
+																			If no server is selected, the application will be
+																			deployed on the server where the user is logged in.
 																		</span>
 																	</TooltipContent>
 																</Tooltip>
@@ -487,19 +430,18 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 																	projectId,
 																	serverId: serverId || undefined,
 																	id: template.id,
-																	baseUrl: customBaseUrl,
 																});
 																toast.promise(promise, {
 																	loading: "Setting up...",
-																	success: () => {
+																	success: (_data) => {
 																		utils.project.one.invalidate({
 																			projectId,
 																		});
 																		setOpen(false);
 																		return `${template.name} template created successfully`;
 																	},
-																	error: () => {
-																		return `An error occurred deploying ${template.name} template`;
+																	error: (_err) => {
+																		return `An error ocurred deploying ${template.name} template`;
 																	},
 																});
 															}}

apps/dokploy/components/dashboard/projects/handle-project.tsx

@@ -148,7 +148,7 @@ export const HandleProject = ({ projectId }: Props) => {
 									<FormItem>
 										<FormLabel>Name</FormLabel>
 										<FormControl>
-											<Input placeholder="Vandelay Industries" {...field} />
+											<Input placeholder="Tesla" {...field} />
 										</FormControl>
 
 										<FormMessage />

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

@@ -115,7 +115,7 @@ export const ShowProjects = () => {
 											</span>
 										</div>
 									)}
-									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
+									<div className="w-full  grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 flex-wrap gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices =
 												project?.mariadb.length === 0 &&
@@ -186,7 +186,7 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span className="truncate">{domain.host}</span>
+																										<span>{domain.host}</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>
@@ -222,7 +222,7 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span className="truncate">{domain.host}</span>
+																										<span>{domain.host}</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,145 +19,134 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const DockerProviderSchema = z.object({
-  externalPort: z.preprocess((a) => {
-    if (a !== null) {
-      const parsed = Number.parseInt(z.string().parse(a), 10);
-      return Number.isNaN(parsed) ? null : parsed;
-    }
-    return null;
-  }, z.number().gte(0, "Range must be 0 - 65535").lte(65535, "Range must be 0 - 65535").nullable()),
+	externalPort: z.preprocess((a) => {
+		if (a !== null) {
+			const parsed = Number.parseInt(z.string().parse(a), 10);
+			return Number.isNaN(parsed) ? null : parsed;
+		}
+		return null;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
 
 interface Props {
-  redisId: string;
+	redisId: string;
 }
 export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
-  const { data: ip } = api.settings.getIp.useQuery();
-  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 { data: ip } = api.settings.getIp.useQuery();
+	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: {},
-    resolver: zodResolver(DockerProviderSchema),
-  });
+	const form = useForm<DockerProvider>({
+		defaultValues: {},
+		resolver: zodResolver(DockerProviderSchema),
+	});
 
-  useEffect(() => {
-    if (data?.externalPort) {
-      form.reset({
-        externalPort: data.externalPort,
-      });
-    }
-  }, [form.reset, data, form]);
+	useEffect(() => {
+		if (data?.externalPort) {
+			form.reset({
+				externalPort: data.externalPort,
+			});
+		}
+	}, [form.reset, data, form]);
 
-  const onSubmit = async (values: DockerProvider) => {
-    await mutateAsync({
-      externalPort: values.externalPort,
-      redisId,
-    })
-      .then(async () => {
-        toast.success("External Port updated");
-        await refetch();
-      })
-      .catch(() => {
-        toast.error("Error saving the external port");
-      });
-  };
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			redisId,
+		})
+			.then(async () => {
+				toast.success("External Port updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the external port");
+			});
+	};
 
-  useEffect(() => {
-    const buildConnectionUrl = () => {
-      const _hostname = window.location.hostname;
-      const port = form.watch("externalPort") || data?.externalPort;
+	useEffect(() => {
+		const buildConnectionUrl = () => {
+			const _hostname = window.location.hostname;
+			const port = form.watch("externalPort") || data?.externalPort;
 
-      return `redis://default:${data?.databasePassword}@${getIp}:${port}`;
-    };
+			return `redis://default:${data?.databasePassword}@${getIp}:${port}`;
+		};
 
-    setConnectionUrl(buildConnectionUrl());
-  }, [data?.appName, data?.externalPort, data?.databasePassword, form, getIp]);
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">External Credentials</CardTitle>
-            <CardDescription>
-              In order to make the database reachable trought internet is
-              required to set a port, make sure the port is not used by another
-              application or database
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="flex w-full flex-col gap-4">
-            {!getIp && (
-              <AlertBlock type="warning">
-                You need to set an IP address in your{" "}
-                <Link
-                  href="/dashboard/settings/server"
-                  className="text-primary"
-                >
-                  {data?.serverId
-                    ? "Remote Servers -> Server -> Edit Server -> Update IP Address"
-                    : "Web Server -> Server -> Update Server IP"}
-                </Link>{" "}
-                to fix the database url connection.
-              </AlertBlock>
-            )}
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="flex flex-col gap-4"
-              >
-                <div className="grid grid-cols-2 gap-4 ">
-                  <div className="col-span-2 space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="externalPort"
-                      render={({ field }) => {
-                        return (
-                          <FormItem>
-                            <FormLabel>External Port (Internet)</FormLabel>
-                            <FormControl>
-                              <Input
-                                placeholder="6379"
-                                {...field}
-                                value={field.value || ""}
-                              />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  </div>
-                </div>
-                {!!data?.externalPort && (
-                  <div className="grid w-full gap-8">
-                    <div className="flex flex-col gap-3">
-                      <Label>External Host</Label>
-                      <ToggleVisibilityInput value={connectionUrl} disabled />
-                    </div>
-                  </div>
-                )}
+		setConnectionUrl(buildConnectionUrl());
+	}, [data?.appName, data?.externalPort, data?.databasePassword, form, getIp]);
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">External Credentials</CardTitle>
+						<CardDescription>
+							In order to make the database reachable trought internet is
+							required to set a port, make sure the port is not used by another
+							application or database
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex w-full flex-col gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="flex flex-col gap-4"
+							>
+								<div className="grid grid-cols-2 gap-4 ">
+									<div className="col-span-2 space-y-4">
+										<FormField
+											control={form.control}
+											name="externalPort"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>External Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="6379"
+																{...field}
+																value={field.value || ""}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+									</div>
+								</div>
+								{!!data?.externalPort && (
+									<div className="grid w-full gap-8">
+										<div className="flex flex-col gap-3">
+											<Label>External Host</Label>
+											<ToggleVisibilityInput value={connectionUrl} disabled />
+										</div>
+									</div>
+								)}
 
-                <div className="flex justify-end">
-                  <Button type="submit" isLoading={isLoading}>
-                    Save
-                  </Button>
-                </div>
-              </form>
-            </Form>
-          </CardContent>
-        </Card>
-      </div>
-    </>
-  );
+								<div className="flex justify-end">
+									<Button type="submit" isLoading={isLoading}>
+										Save
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
 };

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

@@ -8,244 +8,241 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 
 interface Props {
-  redisId: string;
+	redisId: string;
 }
 
 export const ShowGeneralRedis = ({ redisId }: Props) => {
-  const { data, refetch } = api.redis.one.useQuery(
-    {
-      redisId,
-    },
-    { enabled: !!redisId }
-  );
+	const { data, refetch } = api.redis.one.useQuery(
+		{
+			redisId,
+		},
+		{ enabled: !!redisId },
+	);
 
-  const { mutateAsync: reload, isLoading: isReloading } =
-    api.redis.reload.useMutation();
-  const { mutateAsync: start, isLoading: isStarting } =
-    api.redis.start.useMutation();
+	const { mutateAsync: reload, isLoading: isReloading } =
+		api.redis.reload.useMutation();
+	const { mutateAsync: start, isLoading: isStarting } =
+		api.redis.start.useMutation();
 
-  const { mutateAsync: stop, isLoading: isStopping } =
-    api.redis.stop.useMutation();
+	const { mutateAsync: stop, isLoading: isStopping } =
+		api.redis.stop.useMutation();
 
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-  const [isDeploying, setIsDeploying] = useState(false);
-  api.redis.deployWithLogs.useSubscription(
-    {
-      redisId: redisId,
-    },
-    {
-      enabled: isDeploying,
-      onData(log) {
-        if (!isDrawerOpen) {
-          setIsDrawerOpen(true);
-        }
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+	api.redis.deployWithLogs.useSubscription(
+		{
+			redisId: redisId,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
 
-        if (log === "Deployment completed successfully!") {
-          setIsDeploying(false);
-        }
-        const parsedLogs = parseLogs(log);
-        setFilteredLogs((prev) => [...prev, ...parsedLogs]);
-      },
-      onError(error) {
-        console.error("Deployment logs error:", error);
-        setIsDeploying(false);
-      },
-    }
-  );
+				if (log === "Deployment completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Deployment logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
 
-  return (
-    <>
-      <div className="flex w-full flex-col gap-5 ">
-        <Card className="bg-background">
-          <CardHeader>
-            <CardTitle className="text-xl">Deploy Settings</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-row gap-4 flex-wrap">
-            <TooltipProvider delayDuration={0}>
-              <DialogAction
-                title="Deploy Redis"
-                description="Are you sure you want to deploy this redis?"
-                type="default"
-                onClick={async () => {
-                  setIsDeploying(true);
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                  refetch();
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="default"
-                      isLoading={data?.applicationStatus === "running"}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <Rocket className="size-4 mr-1" />
-                      Deploy
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Downloads and sets up the Redis database</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              <DialogAction
-                title="Reload Redis"
-                description="Are you sure you want to reload this redis?"
-                type="default"
-                onClick={async () => {
-                  await reload({
-                    redisId: redisId,
-                    appName: data?.appName || "",
-                  })
-                    .then(() => {
-                      toast.success("Redis reloaded successfully");
-                      refetch();
-                    })
-                    .catch(() => {
-                      toast.error("Error reloading Redis");
-                    });
-                }}
-              >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      variant="secondary"
-                      isLoading={isReloading}
-                      className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                    >
-                      <RefreshCcw className="size-4 mr-1" />
-                      Reload
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipPrimitive.Portal>
-                    <TooltipContent sideOffset={5} className="z-[60]">
-                      <p>Restart the Redis service without rebuilding</p>
-                    </TooltipContent>
-                  </TooltipPrimitive.Portal>
-                </Tooltip>
-              </DialogAction>
-              {data?.applicationStatus === "idle" ? (
-                <DialogAction
-                  title="Start Redis"
-                  description="Are you sure you want to start this redis?"
-                  type="default"
-                  onClick={async () => {
-                    await start({
-                      redisId: redisId,
-                    })
-                      .then(() => {
-                        toast.success("Redis started successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error starting Redis");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="secondary"
-                        isLoading={isStarting}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <CheckCircle2 className="size-4 mr-1" />
-                        Start
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>
-                          Start the Redis database (requires a previous
-                          successful setup)
-                        </p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              ) : (
-                <DialogAction
-                  title="Stop Redis"
-                  description="Are you sure you want to stop this redis?"
-                  onClick={async () => {
-                    await stop({
-                      redisId: redisId,
-                    })
-                      .then(() => {
-                        toast.success("Redis stopped successfully");
-                        refetch();
-                      })
-                      .catch(() => {
-                        toast.error("Error stopping Redis");
-                      });
-                  }}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button
-                        variant="destructive"
-                        isLoading={isStopping}
-                        className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-                      >
-                        <Ban className="size-4 mr-1" />
-                        Stop
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipPrimitive.Portal>
-                      <TooltipContent sideOffset={5} className="z-[60]">
-                        <p>Stop the currently running Redis database</p>
-                      </TooltipContent>
-                    </TooltipPrimitive.Portal>
-                  </Tooltip>
-                </DialogAction>
-              )}
-            </TooltipProvider>
-            <DockerTerminalModal
-              appName={data?.appName || ""}
-              serverId={data?.serverId || ""}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-offset-2"
-                  >
-                    <Terminal className="size-4" />
-                    Open Terminal
-                  </Button>
-                </TooltipTrigger>
-                <TooltipPrimitive.Portal>
-                  <TooltipContent sideOffset={5} className="z-[60]">
-                    <p>Open a terminal to the Redis container</p>
-                  </TooltipContent>
-                </TooltipPrimitive.Portal>
-              </Tooltip>
-            </DockerTerminalModal>
-          </CardContent>
-        </Card>
-        <DrawerLogs
-          isOpen={isDrawerOpen}
-          onClose={() => {
-            setIsDrawerOpen(false);
-            setFilteredLogs([]);
-            setIsDeploying(false);
-            refetch();
-          }}
-          filteredLogs={filteredLogs}
-        />
-      </div>
-    </>
-  );
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Redis"
+								description="Are you sure you want to deploy this redis?"
+								type="default"
+								onClick={async () => {
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the Redis database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Redis"
+								description="Are you sure you want to reload this redis?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										redisId: redisId,
+										appName: data?.appName || "",
+									})
+										.then(() => {
+											toast.success("Redis reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Redis");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the Redis service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Redis"
+									description="Are you sure you want to start this redis?"
+									type="default"
+									onClick={async () => {
+										await start({
+											redisId: redisId,
+										})
+											.then(() => {
+												toast.success("Redis started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Redis");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the Redis database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Redis"
+									description="Are you sure you want to stop this redis?"
+									onClick={async () => {
+										await stop({
+											redisId: redisId,
+										})
+											.then(() => {
+												toast.success("Redis stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Redis");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running Redis database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						>
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
+	);
 };

apps/dokploy/components/dashboard/redis/update-redis.tsx

@@ -119,7 +119,7 @@ export const UpdateRedis = ({ redisId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

apps/dokploy/components/dashboard/settings/api/add-api-key.tsx

@@ -31,8 +31,6 @@ import {
 	FormDescription,
 } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
-import copy from "copy-to-clipboard";
-import { CodeEditor } from "@/components/shared/code-editor";
 
 const formSchema = z.object({
 	name: z.string().min(1, "Name is required"),
@@ -443,16 +441,13 @@ export const AddApiKey = () => {
 						</DialogDescription>
 					</DialogHeader>
 					<div className="mt-4 space-y-4">
-						<CodeEditor
-							className="font-mono text-sm break-all"
-							language="properties"
-							value={newApiKey}
-							readOnly
-						/>
+						<div className="rounded-md bg-muted p-4 font-mono text-sm break-all">
+							{newApiKey}
+						</div>
 						<div className="flex justify-end gap-3">
 							<Button
 								onClick={() => {
-									copy(newApiKey);
+									navigator.clipboard.writeText(newApiKey);
 									toast.success("API key copied to clipboard");
 								}}
 							>

apps/dokploy/components/dashboard/settings/cluster/nodes/add-node.tsx

@@ -13,11 +13,7 @@ import Link from "next/link";
 import { AddManager } from "./manager/add-manager";
 import { AddWorker } from "./workers/add-worker";
 
-interface Props {
-	serverId?: string;
-}
-
-export const AddNode = ({ serverId }: Props) => {
+export const AddNode = () => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -57,10 +53,10 @@ export const AddNode = ({ serverId }: Props) => {
 							<TabsTrigger value="manager">Manager</TabsTrigger>
 						</TabsList>
 						<TabsContent value="worker" className="pt-4">
-							<AddWorker serverId={serverId} />
+							<AddWorker />
 						</TabsContent>
 						<TabsContent value="manager" className="pt-4">
-							<AddManager serverId={serverId} />
+							<AddManager />
 						</TabsContent>
 					</Tabs>
 				</div>

apps/dokploy/components/dashboard/settings/cluster/nodes/manager/add-manager.tsx

@@ -9,12 +9,8 @@ import copy from "copy-to-clipboard";
 import { CopyIcon } from "lucide-react";
 import { toast } from "sonner";
 
-interface Props {
-	serverId?: string;
-}
-
-export const AddManager = ({ serverId }: Props) => {
-	const { data } = api.cluster.addManager.useQuery({ serverId });
+export const AddManager = () => {
+	const { data } = api.cluster.addManager.useQuery();
 
 	return (
 		<>

apps/dokploy/components/dashboard/settings/cluster/nodes/show-nodes-modal.tsx

@@ -1,30 +0,0 @@
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { useState } from "react";
-import { ShowNodes } from "./show-nodes";
-
-interface Props {
-	serverId: string;
-}
-
-export const ShowNodesModal = ({ serverId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<DropdownMenuItem
-					className="w-full cursor-pointer "
-					onSelect={(e) => e.preventDefault()}
-				>
-					Show Nodes
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl  overflow-y-auto max-h-screen ">
-				<div className="grid w-full gap-1">
-					<ShowNodes serverId={serverId} />
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -32,25 +32,13 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	Boxes,
-	HelpCircle,
-	LockIcon,
-	MoreHorizontal,
-	Loader2,
-} from "lucide-react";
+import { Boxes, HelpCircle, LockIcon, MoreHorizontal } from "lucide-react";
 import { toast } from "sonner";
 import { AddNode } from "./add-node";
 import { ShowNodeData } from "./show-node-data";
 
-interface Props {
-	serverId?: string;
-}
-
-export const ShowNodes = ({ serverId }: Props) => {
-	const { data, isLoading, refetch } = api.cluster.getNodes.useQuery({
-		serverId,
-	});
+export const ShowNodes = () => {
+	const { data, isLoading, refetch } = api.cluster.getNodes.useQuery();
 	const { data: registry } = api.registry.all.useQuery();
 
 	const { mutateAsync: deleteNode } = api.cluster.removeWorker.useMutation();
@@ -70,17 +58,14 @@ export const ShowNodes = ({ serverId }: Props) => {
 						</div>
 						{haveAtLeastOneRegistry && (
 							<div className="flex flex-row gap-2">
-								<AddNode serverId={serverId} />
+								<AddNode />
 							</div>
 						)}
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t min-h-[35vh]">
-						{isLoading ? (
-							<div className="flex items-center justify-center w-full h-[40vh]">
-								<Loader2 className="size-8 animate-spin text-muted-foreground" />
-							</div>
-						) : haveAtLeastOneRegistry ? (
+						{haveAtLeastOneRegistry ? (
 							<div className="grid md:grid-cols-1 gap-4">
+								{isLoading && <div>Loading...</div>}
 								<Table>
 									<TableCaption>
 										A list of your managers / workers.
@@ -152,7 +137,6 @@ export const ShowNodes = ({ serverId }: Props) => {
 																		onClick={async () => {
 																			await deleteNode({
 																				nodeId: node.ID,
-																				serverId,
 																			})
 																				.then(() => {
 																					refetch();

apps/dokploy/components/dashboard/settings/cluster/nodes/workers/add-worker.tsx

@@ -9,12 +9,8 @@ import copy from "copy-to-clipboard";
 import { CopyIcon } from "lucide-react";
 import { toast } from "sonner";
 
-interface Props {
-	serverId?: string;
-}
-
-export const AddWorker = ({ serverId }: Props) => {
-	const { data } = api.cluster.addWorker.useQuery({ serverId });
+export const AddWorker = () => {
+	const { data } = api.cluster.addWorker.useQuery();
 
 	return (
 		<div>

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

@@ -207,7 +207,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 										<FormControl>
 											<Input
 												placeholder="Username"
-												autoComplete="username"
+												autoComplete="off"
 												{...field}
 											/>
 										</FormControl>
@@ -227,7 +227,7 @@ export const HandleRegistry = ({ registryId }: Props) => {
 										<FormControl>
 											<Input
 												placeholder="Password"
-												autoComplete="one-time-code"
+												autoComplete="off"
 												{...field}
 												type="password"
 											/>

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -64,12 +64,12 @@ export const Enable2FA = () => {
 	const handlePasswordSubmit = async (formData: PasswordForm) => {
 		setIsPasswordLoading(true);
 		try {
-			const { data: enableData, error } = await authClient.twoFactor.enable({
+			const { data: enableData } = await authClient.twoFactor.enable({
 				password: formData.password,
 			});
 
 			if (!enableData) {
-				throw new Error(error?.message || "Error enabling 2FA");
+				throw new Error("No data received from server");
 			}
 
 			if (enableData.backupCodes) {
@@ -95,8 +95,7 @@ export const Enable2FA = () => {
 				error instanceof Error ? error.message : "Error setting up 2FA",
 			);
 			passwordForm.setError("password", {
-				message:
-					error instanceof Error ? error.message : "Error setting up 2FA",
+				message: "Error verifying password",
 			});
 		} finally {
 			setIsPasswordLoading(false);

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

@@ -59,17 +59,15 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 								.then(async () => {
 									toast.success("Traefik Reloaded");
 								})
-								.catch(() => {});
+								.catch(() => {
+									toast.error("Error reloading Traefik");
+								});
 						}}
 						className="cursor-pointer"
 					>
 						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
-					<ShowModalLogs
-						appName="dokploy-traefik"
-						serverId={serverId}
-						type="standalone"
-					>
+					<ShowModalLogs appName="dokploy-traefik" serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}
 							className="cursor-pointer"
@@ -110,6 +108,15 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 							{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"} Dashboard
 						</span>
 					</DropdownMenuItem>
+					{/* 
+								<DockerTerminalModal appName="dokploy-traefik">
+									<DropdownMenuItem
+										className="w-full cursor-pointer space-x-3"
+										onSelect={(e) => e.preventDefault()}
+									>
+										<span>Enter the terminal</span>
+									</DropdownMenuItem>
+								</DockerTerminalModal> */}
 					<ManageTraefikPorts serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}

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

@@ -42,7 +42,6 @@ import { ShowMonitoringModal } from "./show-monitoring-modal";
 import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
-import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 
 export const ShowServers = () => {
 	const { t } = useTranslation("settings");
@@ -329,9 +328,6 @@ export const ShowServers = () => {
 																						<ShowSwarmOverviewModal
 																							serverId={server.serverId}
 																						/>
-																						<ShowNodesModal
-																							serverId={server.serverId}
-																						/>
 																					</>
 																				)}
 																			</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/web-domain.tsx

@@ -35,7 +35,7 @@ const addServerDomain = z
 	.object({
 		domain: z.string().min(1, { message: "URL is required" }),
 		letsEncryptEmail: z.string(),
-		certificateType: z.enum(["letsencrypt", "none", "custom"]),
+		certificateType: z.enum(["letsencrypt", "none"]),
 	})
 	.superRefine((data, ctx) => {
 		if (data.certificateType === "letsencrypt" && !data.letsEncryptEmail) {
@@ -193,7 +193,6 @@ export const WebDomain = () => {
 										);
 									}}
 								/>
-
 								<div className="flex w-full justify-end col-span-2">
 									<Button isLoading={isLoading} type="submit">
 										{t("settings.common.save")}

apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -24,7 +23,6 @@ import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { badgeStateColor } from "../../application/logs/show";
 
 const Terminal = dynamic(
 	() =>
@@ -111,10 +109,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}){" "}
-									<Badge variant={badgeStateColor(container.state)}>
-										{container.state}
-									</Badge>
+									{container.name} ({container.containerId}) {container.state}
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -19,6 +19,13 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
@@ -37,6 +44,7 @@ interface Props {
 const PortSchema = z.object({
 	targetPort: z.number().min(1, "Target port is required"),
 	publishedPort: z.number().min(1, "Published port is required"),
+	publishMode: z.enum(["ingress", "host"]),
 });
 
 const TraefikPortsSchema = z.object({
@@ -80,7 +88,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 	}, [currentPorts, form]);
 
 	const handleAddPort = () => {
-		append({ targetPort: 0, publishedPort: 0 });
+		append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
 	};
 
 	const onSubmit = async (data: TraefikPortsForm) => {
@@ -91,7 +99,9 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 			});
 			toast.success(t("settings.server.webServer.traefik.portsUpdated"));
 			setOpen(false);
-		} catch (_error) {}
+		} catch (_error) {
+			toast.error(t("settings.server.webServer.traefik.portsUpdateError"));
+		}
 	};
 
 	return (
@@ -144,7 +154,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
 												<Card key={field.id}>
-													<CardContent className="grid grid-cols-[1fr_1fr_auto] gap-4 p-4 transparent">
+													<CardContent className="grid grid-cols-[1fr_1fr_1.5fr_auto] gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -197,6 +207,39 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 															)}
 														/>
 
+														<FormField
+															control={form.control}
+															name={`ports.${index}.publishMode`}
+															render={({ field }) => (
+																<FormItem>
+																	<FormLabel className="text-sm font-medium text-muted-foreground">
+																		{t(
+																			"settings.server.webServer.traefik.publishMode",
+																		)}
+																	</FormLabel>
+																	<Select
+																		onValueChange={field.onChange}
+																		value={field.value}
+																	>
+																		<FormControl>
+																			<SelectTrigger className="dark:bg-black">
+																				<SelectValue />
+																			</SelectTrigger>
+																		</FormControl>
+																		<SelectContent>
+																			<SelectItem value="host">
+																				Host Mode
+																			</SelectItem>
+																			<SelectItem value="ingress">
+																				Ingress Mode
+																			</SelectItem>
+																		</SelectContent>
+																	</Select>
+																	<FormMessage />
+																</FormItem>
+															)}
+														/>
+
 														<div className="flex items-end">
 															<Button
 																onClick={() => remove(index)}
@@ -220,23 +263,30 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 											<span className="text-sm">
 												<strong>
 													Each port mapping defines how external traffic reaches
-													your containers through Traefik.
+													your containers.
 												</strong>
 												<ul className="pt-2">
 													<li>
-														<strong>Target Port:</strong> The port inside your
-														container that the service is listening on.
+														<strong>Host Mode:</strong> Directly binds the port
+														to the host machine.
+														<ul className="p-2 list-inside list-disc">
+															<li>
+																Best for single-node deployments or when you
+																need guaranteed port availability.
+															</li>
+														</ul>
 													</li>
 													<li>
-														<strong>Published Port:</strong> The port on your
-														host machine that will be mapped to the target port.
+														<strong>Ingress Mode:</strong> Routes through Docker
+														Swarm's load balancer.
+														<ul className="p-2 list-inside list-disc">
+															<li>
+																Recommended for multi-node deployments and
+																better scalability.
+															</li>
+														</ul>
 													</li>
 												</ul>
-												<p className="mt-2">
-													All ports are bound directly to the host machine,
-													allowing Traefik to handle incoming traffic and route
-													it appropriately to your services.
-												</p>
 											</span>
 										</div>
 									</AlertBlock>

apps/dokploy/components/dashboard/settings/web-server/show-modal-logs.tsx

@@ -21,8 +21,6 @@ import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
-import { badgeStateColor } from "../../application/logs/show";
-import { Badge } from "@/components/ui/badge";
 
 export const DockerLogsId = dynamic(
 	() =>
@@ -38,20 +36,13 @@ interface Props {
 	appName: string;
 	children?: React.ReactNode;
 	serverId?: string;
-	type?: "standalone" | "swarm";
 }
 
-export const ShowModalLogs = ({
-	appName,
-	children,
-	serverId,
-	type = "swarm",
-}: Props) => {
+export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 	const { data, isLoading } = api.docker.getContainersByAppLabel.useQuery(
 		{
 			appName,
 			serverId,
-			type,
 		},
 		{
 			enabled: !!appName,
@@ -92,10 +83,7 @@ export const ShowModalLogs = ({
 										key={container.containerId}
 										value={container.containerId}
 									>
-										{container.name} ({container.containerId}){" "}
-										<Badge variant={badgeStateColor(container.state)}>
-											{container.state}
-										</Badge>
+										{container.name} ({container.containerId}) {container.state}
 									</SelectItem>
 								))}
 								<SelectLabel>Containers ({data?.length})</SelectLabel>

apps/dokploy/components/dashboard/shared/rebuild-database.tsx

@@ -1,119 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { DatabaseIcon, AlertTriangle } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	id: string;
-	type: "postgres" | "mysql" | "mariadb" | "mongo" | "redis";
-}
-
-export const RebuildDatabase = ({ id, type }: Props) => {
-	const utils = api.useUtils();
-
-	const mutationMap = {
-		postgres: () => api.postgres.rebuild.useMutation(),
-		mysql: () => api.mysql.rebuild.useMutation(),
-		mariadb: () => api.mariadb.rebuild.useMutation(),
-		mongo: () => api.mongo.rebuild.useMutation(),
-		redis: () => api.redis.rebuild.useMutation(),
-	};
-
-	const { mutateAsync, isLoading } = mutationMap[type]();
-
-	const handleRebuild = async () => {
-		try {
-			await mutateAsync({
-				postgresId: type === "postgres" ? id : "",
-				mysqlId: type === "mysql" ? id : "",
-				mariadbId: type === "mariadb" ? id : "",
-				mongoId: type === "mongo" ? id : "",
-				redisId: type === "redis" ? id : "",
-			});
-			toast.success("Database rebuilt successfully");
-			await utils.invalidate();
-		} catch (error) {
-			toast.error("Error rebuilding database", {
-				description: error instanceof Error ? error.message : "Unknown error",
-			});
-		}
-	};
-
-	return (
-		<Card className="bg-background border-destructive/50">
-			<CardHeader>
-				<CardTitle className="text-xl flex items-center gap-2">
-					<AlertTriangle className="h-5 w-5 text-destructive" />
-					Danger Zone
-				</CardTitle>
-			</CardHeader>
-			<CardContent>
-				<div className="flex flex-col gap-4">
-					<div className="flex flex-col gap-2">
-						<h3 className="text-base font-semibold">Rebuild Database</h3>
-						<p className="text-sm text-muted-foreground">
-							This action will completely reset your database to its initial
-							state. All data, tables, and configurations will be removed.
-						</p>
-					</div>
-					<AlertDialog>
-						<AlertDialogTrigger asChild>
-							<Button
-								isLoading={isLoading}
-								variant="outline"
-								className="w-full border-destructive/50 hover:bg-destructive/10 hover:text-destructive text-destructive"
-							>
-								<DatabaseIcon className="mr-2 h-4 w-4" />
-								Rebuild Database
-							</Button>
-						</AlertDialogTrigger>
-						<AlertDialogContent>
-							<AlertDialogHeader>
-								<AlertDialogTitle className="flex items-center gap-2">
-									<AlertTriangle className="h-5 w-5 text-destructive" />
-									Are you absolutely sure?
-								</AlertDialogTitle>
-								<AlertDialogDescription className="space-y-2">
-									<p>This action will:</p>
-									<ul className="list-disc list-inside space-y-1">
-										<li>Stop the current database service</li>
-										<li>Delete all existing data and volumes</li>
-										<li>Reset to the default configuration</li>
-										<li>Restart the service with a clean state</li>
-									</ul>
-									<p className="font-medium text-destructive mt-4">
-										This action cannot be undone.
-									</p>
-								</AlertDialogDescription>
-							</AlertDialogHeader>
-							<AlertDialogFooter>
-								<AlertDialogCancel>Cancel</AlertDialogCancel>
-								<AlertDialogAction
-									onClick={handleRebuild}
-									className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-									asChild
-								>
-									<Button isLoading={isLoading} type="submit">
-										Yes, rebuild database
-									</Button>
-								</AlertDialogAction>
-							</AlertDialogFooter>
-						</AlertDialogContent>
-					</AlertDialog>
-				</div>
-			</CardContent>
-		</Card>
-	);
-};

apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx

@@ -1,20 +0,0 @@
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
-import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
-import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
-import { RebuildDatabase } from "./rebuild-database";
-
-interface Props {
-	id: string;
-	type: "postgres" | "mysql" | "mariadb" | "mongo" | "redis";
-}
-
-export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
-	return (
-		<div className="flex w-full flex-col gap-5">
-			<ShowCustomCommand id={id} type={type} />
-			<ShowVolumes id={id} type={type} />
-			<ShowResources id={id} type={type} />
-			<RebuildDatabase id={id} type={type} />
-		</div>
-	);
-};

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -176,7 +176,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 					</Card>
 				</div>
 
-				<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
+				<div className="flex flex-row gap-4">
 					{nodes.map((node) => (
 						<NodeCard key={node.ID} node={node} serverId={serverId} />
 					))}

apps/dokploy/components/layouts/side.tsx

@@ -496,6 +496,7 @@ function SidebarLogo() {
 	const { state } = useSidebar();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: user } = api.user.get.useQuery();
+	// const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 	const { data: session } = authClient.useSession();
 
 	const {
@@ -771,7 +772,6 @@ export default function Page({ children }: Props) {
 	const pathname = usePathname();
 	const _currentPath = router.pathname;
 	const { data: auth } = api.user.get.useQuery();
-	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 
 	const includesProjects = pathname?.includes("/dashboard/project");
 	const { data: isCloud } = api.settings.isCloud.useQuery();
@@ -908,7 +908,7 @@ export default function Page({ children }: Props) {
 					</SidebarGroup>
 					<SidebarGroup>
 						<SidebarGroupLabel>Settings</SidebarGroupLabel>
-						<SidebarMenu className="gap-1">
+						<SidebarMenu className="gap-2">
 							{filteredSettings.map((item) => {
 								const isSingle = item.isSingle !== false;
 								const isActive = isSingle
@@ -1028,16 +1028,6 @@ export default function Page({ children }: Props) {
 						<SidebarMenuItem>
 							<UserNav />
 						</SidebarMenuItem>
-						{dokployVersion && (
-							<>
-								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
-									Version {dokployVersion}
-								</div>
-								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
-									{dokployVersion}
-								</div>
-							</>
-						)}
 					</SidebarMenu>
 				</SidebarFooter>
 				<SidebarRail />
@@ -1068,7 +1058,7 @@ export default function Page({ children }: Props) {
 					</header>
 				)}
 
-				<div className="flex flex-col w-full p-4 pt-0">{children}</div>
+				<div className="flex flex-col w-full gap-4 p-4 pt-0">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);

apps/dokploy/components/shared/code-editor.tsx

@@ -9,116 +9,6 @@ import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
-import {
-	autocompletion,
-	type CompletionContext,
-	type CompletionResult,
-	type Completion,
-} from "@codemirror/autocomplete";
-
-// Docker Compose completion options
-const dockerComposeServices = [
-	{ label: "services", type: "keyword", info: "Define services" },
-	{ label: "version", type: "keyword", info: "Specify compose file version" },
-	{ label: "volumes", type: "keyword", info: "Define volumes" },
-	{ label: "networks", type: "keyword", info: "Define networks" },
-	{ label: "configs", type: "keyword", info: "Define configuration files" },
-	{ label: "secrets", type: "keyword", info: "Define secrets" },
-].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}:`;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
-}));
-
-const dockerComposeServiceOptions = [
-	{
-		label: "image",
-		type: "keyword",
-		info: "Specify the image to start the container from",
-	},
-	{ label: "build", type: "keyword", info: "Build configuration" },
-	{ label: "command", type: "keyword", info: "Override the default command" },
-	{ label: "container_name", type: "keyword", info: "Custom container name" },
-	{
-		label: "depends_on",
-		type: "keyword",
-		info: "Express dependency between services",
-	},
-	{ label: "environment", type: "keyword", info: "Add environment variables" },
-	{
-		label: "env_file",
-		type: "keyword",
-		info: "Add environment variables from a file",
-	},
-	{
-		label: "expose",
-		type: "keyword",
-		info: "Expose ports without publishing them",
-	},
-	{ label: "ports", type: "keyword", info: "Expose ports" },
-	{
-		label: "volumes",
-		type: "keyword",
-		info: "Mount host paths or named volumes",
-	},
-	{ label: "restart", type: "keyword", info: "Restart policy" },
-	{ label: "networks", type: "keyword", info: "Networks to join" },
-].map((opt) => ({
-	...opt,
-	apply: (view: EditorView, completion: Completion) => {
-		const insert = `${completion.label}: `;
-		view.dispatch({
-			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
-				insert,
-			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
-		});
-	},
-}));
-
-function dockerComposeComplete(
-	context: CompletionContext,
-): CompletionResult | null {
-	const word = context.matchBefore(/\w*/);
-	if (!word) return null;
-
-	if (!word.text && !context.explicit) return null;
-
-	// Check if we're at the root level
-	const line = context.state.doc.lineAt(context.pos);
-	const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
-
-	if (indentation === 0) {
-		return {
-			from: word.from,
-			options: dockerComposeServices,
-			validFor: /^\w*$/,
-		};
-	}
-
-	// If we're inside a service definition
-	if (indentation === 4) {
-		return {
-			from: word.from,
-			options: dockerComposeServiceOptions,
-			validFor: /^\w*$/,
-		};
-	}
-
-	return null;
-}
-
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
@@ -155,11 +45,6 @@ export const CodeEditor = ({
 								? StreamLanguage.define(shell)
 								: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
-					language === "yaml"
-						? autocompletion({
-								override: [dockerComposeComplete],
-							})
-						: [],
 				]}
 				{...props}
 				editable={!props.disabled}
@@ -170,7 +55,7 @@ export const CodeEditor = ({
 				)}
 			/>
 			{props.disabled && (
-				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)] h-full" />
+				<div className="absolute top-0 rounded-md left-0 w-full h-full  flex items-center justify-center z-[10] [background:var(--overlay)]" />
 			)}
 		</div>
 	);

apps/dokploy/components/ui/input.tsx

@@ -39,7 +39,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
 				className={cn("text-left", className)}
 				ref={ref}
 				{...props}
-				value={props.value === undefined || props.value === "" ? "" : String(props.value)}
+				value={props.value === undefined ? undefined : String(props.value)}
 				onChange={(e) => {
 					const value = e.target.value;
 					if (value === "") {
@@ -60,21 +60,6 @@ const NumberInput = React.forwardRef<HTMLInputElement, InputProps>(
 						}
 					}
 				}}
-				onBlur={(e) => {
-					// If input is empty, make 0 when focus is lost
-					if (e.target.value === "") {
-						const syntheticEvent = {
-							...e,
-							target: {
-								...e.target,
-								value: "0",
-							},
-						};
-						props.onChange?.(
-							syntheticEvent as unknown as React.ChangeEvent<HTMLInputElement>,
-						);
-					}
-				}}
 			/>
 		);
 	},

apps/dokploy/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/80",
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
 			className,
 		)}
 		{...props}

apps/dokploy/drizzle/0072_green_susan_delgado.sql

@@ -1,2 +0,0 @@
-ALTER TYPE "public"."certificateType" ADD VALUE 'custom';--> statement-breakpoint
-ALTER TABLE "domain" ADD COLUMN "customCertResolver" text;--> statement-breakpoint

apps/dokploy/drizzle/0072_milky_lyja.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "application" ADD COLUMN "buildSecrets" text;--> statement-breakpoint
+ALTER TABLE "user_temp" DROP COLUMN "enableLogRotation";

apps/dokploy/drizzle/0073_hot_domino.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ADD COLUMN "previewCertificateProvider" text;

apps/dokploy/drizzle/0074_black_quasar.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" RENAME COLUMN "previewCertificateProvider" TO "previewCustomCertResolver";

apps/dokploy/drizzle/0075_young_typhoid_mary.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ADD COLUMN "watchPaths" text[];

apps/dokploy/drizzle/0076_young_sharon_ventura.sql

@@ -1 +0,0 @@
-ALTER TABLE "compose" ADD COLUMN "watchPaths" text[];

apps/dokploy/drizzle/0077_chemical_dreadnoughts.sql

@@ -1 +0,0 @@
-ALTER TABLE "backup" ADD COLUMN "keepLatestCount" integer;

apps/dokploy/drizzle/0078_uneven_omega_sentinel.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ADD COLUMN "cleanCache" boolean DEFAULT false;

apps/dokploy/drizzle/meta/0072_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "ad43c733-01c3-4841-b600-252421350fb9",
+  "id": "296e7d9b-f8fb-4375-86b2-474fd1b5d53a",
   "prevId": "44cb886c-d31a-4b3d-b70e-da306c74dcf5",
   "version": "7",
   "dialect": "postgresql",
@@ -105,6 +105,12 @@
           "primaryKey": false,
           "notNull": false
         },
+        "buildSecrets": {
+          "name": "buildSecrets",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
         "memoryReservation": {
           "name": "memoryReservation",
           "type": "text",
@@ -1090,12 +1096,6 @@
           "primaryKey": false,
           "notNull": true,
           "default": "'none'"
-        },
-        "customCertResolver": {
-          "name": "customCertResolver",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
         }
       },
       "indexes": {},
@@ -5059,8 +5059,7 @@
       "schema": "public",
       "values": [
         "letsencrypt",
-        "none",
-        "custom"
+        "none"
       ]
     },
     "public.composeType": {

apps/dokploy/drizzle/meta/_journal.json

@@ -509,50 +509,8 @@
     {
       "idx": 72,
       "version": "7",
-      "when": 1741487009559,
-      "tag": "0072_green_susan_delgado",
-      "breakpoints": true
-    },
-    {
-      "idx": 73,
-      "version": "7",
-      "when": 1741489681190,
-      "tag": "0073_hot_domino",
-      "breakpoints": true
-    },
-    {
-      "idx": 74,
-      "version": "7",
-      "when": 1741490064139,
-      "tag": "0074_black_quasar",
-      "breakpoints": true
-    },
-    {
-      "idx": 75,
-      "version": "7",
-      "when": 1741491527516,
-      "tag": "0075_young_typhoid_mary",
-      "breakpoints": true
-    },
-    {
-      "idx": 76,
-      "version": "7",
-      "when": 1741493754270,
-      "tag": "0076_young_sharon_ventura",
-      "breakpoints": true
-    },
-    {
-      "idx": 77,
-      "version": "7",
-      "when": 1741510086231,
-      "tag": "0077_chemical_dreadnoughts",
-      "breakpoints": true
-    },
-    {
-      "idx": 78,
-      "version": "7",
-      "when": 1742112194375,
-      "tag": "0078_uneven_omega_sentinel",
+      "when": 1741481694393,
+      "tag": "0072_milky_lyja",
       "breakpoints": true
     }
   ]

apps/dokploy/next.config.mjs

@@ -3,25 +3,54 @@
  * for Docker builds.
  */
 
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  transpilePackages: ["@dokploy/server"],
-  /**
-   * If you are using `appDir` then you must comment the below `i18n` config out.
-   *
-   * @see https://github.com/vercel/next.js/issues/41980
-   */
-  i18n: {
-    locales: ["en"],
-    defaultLocale: "en",
-  },
+	reactStrictMode: true,
+	eslint: {
+		ignoreDuringBuilds: true,
+	},
+	typescript: {
+		ignoreBuildErrors: true,
+	},
+	transpilePackages: ["@dokploy/server"],
+	webpack: (config) => {
+		config.plugins.push(
+			new CopyWebpackPlugin({
+				patterns: [
+					{
+						from: path.resolve(__dirname, "templates/**/*.yml"),
+						to: ({ context, absoluteFilename }) => {
+							const relativePath = path.relative(
+								path.resolve(__dirname, "templates"),
+								absoluteFilename || context,
+							);
+							return path.join(__dirname, ".next", "templates", relativePath);
+						},
+						globOptions: {
+							ignore: ["**/node_modules/**"],
+						},
+					},
+				],
+			}),
+		);
+		return config;
+	},
+
+	/**
+	 * If you are using `appDir` then you must comment the below `i18n` config out.
+	 *
+	 * @see https://github.com/vercel/next.js/issues/41980
+	 */
+	i18n: {
+		locales: ["en"],
+		defaultLocale: "en",
+	},
 };
 
 export default nextConfig;

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.20.5",
+	"version": "v0.19.1",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -36,6 +36,7 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
+		"ai": "^4.0.23",
 		"@ai-sdk/anthropic": "^1.0.6",
 		"@ai-sdk/azure": "^1.0.15",
 		"@ai-sdk/cohere": "^1.0.6",
@@ -43,7 +44,20 @@
 		"@ai-sdk/mistral": "^1.0.6",
 		"@ai-sdk/openai": "^1.0.12",
 		"@ai-sdk/openai-compatible": "^0.0.13",
-		"@codemirror/autocomplete": "^6.18.6",
+		"ollama-ai-provider": "^1.1.0",
+		"better-auth": "1.2.0",
+		"bl": "6.0.11",
+		"rotating-file-stream": "3.2.3",
+		"qrcode": "^1.5.3",
+		"otpauth": "^9.2.3",
+		"hi-base32": "^0.5.1",
+		"boxen": "^7.1.1",
+		"@octokit/auth-app": "^6.0.4",
+		"nodemailer": "6.9.14",
+		"@react-email/components": "^0.0.21",
+		"node-os-utils": "1.3.7",
+		"@lucia-auth/adapter-drizzle": "1.0.7",
+		"dockerode": "4.0.2",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",
@@ -51,10 +65,7 @@
 		"@codemirror/view": "6.29.0",
 		"@dokploy/server": "workspace:*",
 		"@dokploy/trpc-openapi": "0.0.4",
-		"@faker-js/faker": "^8.4.1",
 		"@hookform/resolvers": "^3.9.0",
-		"@lucia-auth/adapter-drizzle": "1.0.7",
-		"@octokit/auth-app": "^6.0.4",
 		"@octokit/webhooks": "^13.2.7",
 		"@radix-ui/react-accordion": "1.1.2",
 		"@radix-ui/react-alert-dialog": "^1.0.5",
@@ -75,10 +86,8 @@
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-toggle": "^1.0.3",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@react-email/components": "^0.0.21",
 		"@stepperize/react": "4.0.1",
 		"@stripe/stripe-js": "4.8.0",
-		"@tailwindcss/typography": "0.5.16",
 		"@tanstack/react-query": "^4.36.1",
 		"@tanstack/react-table": "^8.16.0",
 		"@trpc/client": "^10.43.6",
@@ -88,26 +97,21 @@
 		"@uiw/codemirror-theme-github": "^4.22.1",
 		"@uiw/react-codemirror": "^4.22.1",
 		"@xterm/addon-attach": "0.10.0",
-		"@xterm/addon-clipboard": "0.1.0",
 		"@xterm/xterm": "^5.4.0",
+		"@xterm/addon-clipboard": "0.1.0",
 		"adm-zip": "^0.5.14",
-		"ai": "^4.0.23",
 		"bcrypt": "5.1.1",
-		"better-auth": "1.2.4",
-		"bl": "6.0.11",
-		"boxen": "^7.1.1",
 		"bullmq": "5.4.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
 		"cmdk": "^0.2.0",
 		"copy-to-clipboard": "^3.3.3",
+		"copy-webpack-plugin": "^12.0.2",
 		"date-fns": "3.6.0",
-		"dockerode": "4.0.2",
 		"dotenv": "16.4.5",
 		"drizzle-orm": "^0.39.1",
 		"drizzle-zod": "0.5.1",
 		"fancy-ansi": "^0.1.3",
-		"hi-base32": "^0.5.1",
 		"i18next": "^23.16.4",
 		"input-otp": "^1.2.4",
 		"js-cookie": "^3.0.5",
@@ -115,21 +119,15 @@
 		"lodash": "4.17.21",
 		"lucia": "^3.0.1",
 		"lucide-react": "^0.469.0",
-		"micromatch": "4.0.8",
 		"nanoid": "3",
 		"next": "^15.0.1",
 		"next-i18next": "^15.3.1",
 		"next-themes": "^0.2.1",
-		"node-os-utils": "1.3.7",
 		"node-pty": "1.0.0",
 		"node-schedule": "2.1.1",
-		"nodemailer": "6.9.14",
 		"octokit": "3.1.2",
-		"ollama-ai-provider": "^1.1.0",
-		"otpauth": "^9.2.3",
 		"postgres": "3.4.4",
 		"public-ip": "6.0.2",
-		"qrcode": "^1.5.3",
 		"react": "18.2.0",
 		"react-confetti-explosion": "2.1.2",
 		"react-day-picker": "8.10.1",
@@ -138,7 +136,6 @@
 		"react-i18next": "^15.1.0",
 		"react-markdown": "^9.0.1",
 		"recharts": "^2.12.7",
-		"rotating-file-stream": "3.2.3",
 		"slugify": "^1.6.6",
 		"sonner": "^1.5.0",
 		"ssh2": "1.15.0",
@@ -152,20 +149,21 @@
 		"ws": "8.16.0",
 		"xterm-addon-fit": "^0.8.0",
 		"zod": "^3.23.4",
-		"zod-form-data": "^2.0.2"
+		"zod-form-data": "^2.0.2",
+		"@faker-js/faker": "^8.4.1",
+		"@tailwindcss/typography": "0.5.16"
 	},
 	"devDependencies": {
+		"@types/qrcode": "^1.5.5",
+		"@types/nodemailer": "^6.4.15",
+		"@types/node-os-utils": "1.3.4",
 		"@types/adm-zip": "^0.5.5",
 		"@types/bcrypt": "5.0.2",
 		"@types/js-cookie": "^3.0.6",
 		"@types/js-yaml": "4.0.9",
 		"@types/lodash": "4.17.4",
-		"@types/micromatch": "4.0.9",
 		"@types/node": "^18.17.0",
-		"@types/node-os-utils": "1.3.4",
 		"@types/node-schedule": "2.1.6",
-		"@types/nodemailer": "^6.4.15",
-		"@types/qrcode": "^1.5.5",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",
 		"@types/ssh2": "1.15.1",

apps/dokploy/pages/api/deploy/[refreshToken].ts

@@ -3,7 +3,7 @@ import { applications } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
-import { IS_CLOUD, shouldDeploy } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server";
 import { eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 
@@ -21,7 +21,6 @@ export default async function handler(
 			where: eq(applications.refreshToken, refreshToken as string),
 			with: {
 				project: true,
-				bitbucket: true,
 			},
 		});
 
@@ -58,20 +57,6 @@ export default async function handler(
 				return;
 			}
 		} else if (sourceType === "github") {
-			const normalizedCommits = req.body?.commits?.flatMap(
-				(commit: any) => commit.modified,
-			);
-
-			const shouldDeployPaths = shouldDeploy(
-				application.watchPaths,
-				normalizedCommits,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
-
 			const branchName = extractBranchName(req.headers, req.body);
 			if (!branchName || branchName !== application.branch) {
 				res.status(301).json({ message: "Branch Not Match" });
@@ -79,55 +64,22 @@ export default async function handler(
 			}
 		} else if (sourceType === "git") {
 			const branchName = extractBranchName(req.headers, req.body);
-
 			if (!branchName || branchName !== application.customGitBranch) {
 				res.status(301).json({ message: "Branch Not Match" });
 				return;
 			}
 		} else if (sourceType === "gitlab") {
 			const branchName = extractBranchName(req.headers, req.body);
-
-			const normalizedCommits = req.body?.commits?.flatMap(
-				(commit: any) => commit.modified,
-			);
-
-			const shouldDeployPaths = shouldDeploy(
-				application.watchPaths,
-				normalizedCommits,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
-
 			if (!branchName || branchName !== application.gitlabBranch) {
 				res.status(301).json({ message: "Branch Not Match" });
 				return;
 			}
 		} else if (sourceType === "bitbucket") {
 			const branchName = extractBranchName(req.headers, req.body);
-
 			if (!branchName || branchName !== application.bitbucketBranch) {
 				res.status(301).json({ message: "Branch Not Match" });
 				return;
 			}
-
-			const commitedPaths = await extractCommitedPaths(
-				req.body,
-				application.bitbucketOwner,
-				application.bitbucket?.appPassword || "",
-				application.bitbucketRepository || "",
-			);
-			const shouldDeployPaths = shouldDeploy(
-				application.watchPaths,
-				commitedPaths,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
 		}
 
 		try {
@@ -279,42 +231,3 @@ export const extractBranchName = (headers: any, body: any) => {
 
 	return null;
 };
-
-export const extractCommitedPaths = async (
-	body: any,
-	bitbucketUsername: string | null,
-	bitbucketAppPassword: string | null,
-	repository: string | null,
-) => {
-	const changes = body.push?.changes || [];
-
-	const commitHashes = changes
-		.map((change: any) => change.new?.target?.hash)
-		.filter(Boolean);
-	const commitedPaths: string[] = [];
-	for (const commit of commitHashes) {
-		const url = `https://api.bitbucket.org/2.0/repositories/${bitbucketUsername}/${repository}/diffstat/${commit}`;
-
-		try {
-			const response = await fetch(url, {
-				headers: {
-					Authorization: `Basic ${Buffer.from(`${bitbucketUsername}:${bitbucketAppPassword}`).toString("base64")}`,
-				},
-			});
-
-			const data = await response.json();
-			for (const value of data.values) {
-				commitedPaths.push(value.new?.path);
-			}
-		} catch (error) {
-			console.error(
-				`Error fetching Bitbucket diffstat for commit ${commit}:`,
-				error instanceof Error ? error.message : "Unknown error",
-			);
-
-			return [];
-		}
-	}
-
-	return commitedPaths;
-};

apps/dokploy/pages/api/deploy/compose/[refreshToken].ts

@@ -3,12 +3,11 @@ import { compose } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
-import { IS_CLOUD, shouldDeploy } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server";
 import { eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 import {
 	extractBranchName,
-	extractCommitedPaths,
 	extractCommitMessage,
 	extractHash,
 } from "../[refreshToken]";
@@ -27,7 +26,6 @@ export default async function handler(
 			where: eq(compose.refreshToken, refreshToken as string),
 			with: {
 				project: true,
-				bitbucket: true,
 			},
 		});
 
@@ -48,71 +46,16 @@ export default async function handler(
 
 		if (sourceType === "github") {
 			const branchName = extractBranchName(req.headers, req.body);
-			const normalizedCommits = req.body?.commits?.flatMap(
-				(commit: any) => commit.modified,
-			);
-
-			const shouldDeployPaths = shouldDeploy(
-				composeResult.watchPaths,
-				normalizedCommits,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
-
 			if (!branchName || branchName !== composeResult.branch) {
 				res.status(301).json({ message: "Branch Not Match" });
 				return;
 			}
-		} else if (sourceType === "gitlab") {
-			const branchName = extractBranchName(req.headers, req.body);
-			const normalizedCommits = req.body?.commits?.flatMap(
-				(commit: any) => commit.modified,
-			);
-
-			const shouldDeployPaths = shouldDeploy(
-				composeResult.watchPaths,
-				normalizedCommits,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
-			if (!branchName || branchName !== composeResult.gitlabBranch) {
-				res.status(301).json({ message: "Branch Not Match" });
-				return;
-			}
-		} else if (sourceType === "bitbucket") {
-			const branchName = extractBranchName(req.headers, req.body);
-			if (!branchName || branchName !== composeResult.bitbucketBranch) {
-				res.status(301).json({ message: "Branch Not Match" });
-				return;
-			}
 		} else if (sourceType === "git") {
 			const branchName = extractBranchName(req.headers, req.body);
 			if (!branchName || branchName !== composeResult.customGitBranch) {
 				res.status(301).json({ message: "Branch Not Match" });
 				return;
 			}
-
-			const commitedPaths = await extractCommitedPaths(
-				req.body,
-				composeResult.bitbucketOwner,
-				composeResult.bitbucket?.appPassword || "",
-				composeResult.bitbucketRepository || "",
-			);
-			const shouldDeployPaths = shouldDeploy(
-				composeResult.watchPaths,
-				commitedPaths,
-			);
-
-			if (!shouldDeployPaths) {
-				res.status(301).json({ message: "Watch Paths Not Match" });
-				return;
-			}
 		}
 
 		try {

apps/dokploy/pages/api/deploy/github.ts

@@ -9,7 +9,6 @@ import {
 	findPreviewDeploymentByApplicationId,
 	findPreviewDeploymentsByPullRequestId,
 	removePreviewDeployment,
-	shouldDeploy,
 } from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
@@ -93,13 +92,9 @@ export default async function handler(
 		try {
 			const branchName = githubBody?.ref?.replace("refs/heads/", "");
 			const repository = githubBody?.repository?.name;
-
 			const deploymentTitle = extractCommitMessage(req.headers, req.body);
 			const deploymentHash = extractHash(req.headers, req.body);
 			const owner = githubBody?.repository?.owner?.name;
-			const normalizedCommits = githubBody?.commits?.flatMap(
-				(commit: any) => commit.modified,
-			);
 
 			const apps = await db.query.applications.findMany({
 				where: and(
@@ -108,7 +103,6 @@ export default async function handler(
 					eq(applications.branch, branchName),
 					eq(applications.repository, repository),
 					eq(applications.owner, owner),
-					eq(applications.githubId, githubResult.githubId),
 				),
 			});
 
@@ -122,15 +116,6 @@ export default async function handler(
 					server: !!app.serverId,
 				};
 
-				const shouldDeployPaths = shouldDeploy(
-					app.watchPaths,
-					normalizedCommits,
-				);
-
-				if (!shouldDeployPaths) {
-					continue;
-				}
-
 				if (IS_CLOUD && app.serverId) {
 					jobData.serverId = app.serverId;
 					await deploy(jobData);
@@ -153,7 +138,6 @@ export default async function handler(
 					eq(compose.branch, branchName),
 					eq(compose.repository, repository),
 					eq(compose.owner, owner),
-					eq(compose.githubId, githubResult.githubId),
 				),
 			});
 
@@ -167,14 +151,6 @@ export default async function handler(
 					server: !!composeApp.serverId,
 				};
 
-				const shouldDeployPaths = shouldDeploy(
-					composeApp.watchPaths,
-					normalizedCommits,
-				);
-
-				if (!shouldDeployPaths) {
-					continue;
-				}
 				if (IS_CLOUD && composeApp.serverId) {
 					jobData.serverId = composeApp.serverId;
 					await deploy(jobData);
@@ -243,7 +219,6 @@ export default async function handler(
 					eq(applications.branch, branch),
 					eq(applications.isPreviewDeploymentsActive, true),
 					eq(applications.owner, owner),
-					eq(applications.githubId, githubResult.githubId),
 				),
 				with: {
 					previewDeployments: true,

apps/dokploy/pages/dashboard/project/[projectId].tsx

@@ -244,7 +244,7 @@ const Project = (
 					break;
 				case "createdAt":
 					comparison =
-						new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+						new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
 					break;
 				default:
 					comparison = 0;

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

@@ -47,7 +47,6 @@ import { useRouter } from "next/router";
 import { type ReactElement, useEffect, useState } from "react";
 import { toast } from "sonner";
 import superjson from "superjson";
-import { ShowImport } from "@/components/dashboard/application/advanced/import/show-import";
 
 type TabState =
 	| "projects"
@@ -331,7 +330,6 @@ const Service = (
 										<div className="flex flex-col gap-4 pt-2.5">
 											<AddCommandCompose composeId={composeId} />
 											<ShowVolumes id={composeId} type="compose" />
-											<ShowImport composeId={composeId} />
 										</div>
 									</TabsContent>
 								</Tabs>

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

@@ -1,3 +1,5 @@
+import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
+import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
@@ -8,7 +10,7 @@ import { ShowInternalMariadbCredentials } from "@/components/dashboard/mariadb/g
 import { UpdateMariadb } from "@/components/dashboard/mariadb/update-mariadb";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
-import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
+import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { MariadbIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
@@ -276,10 +278,11 @@ const Mariadb = (
 									</TabsContent>
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDatabaseAdvancedSettings
-												id={mariadbId}
-												type="mariadb"
-											/>
+											<div className="flex w-full flex-col gap-5">
+												<ShowCustomCommand id={mariadbId} type="mariadb" />
+												<ShowVolumes id={mariadbId} type="mariadb" />
+												<ShowResources id={mariadbId} type="mariadb" />
+											</div>
 										</div>
 									</TabsContent>
 								</Tabs>