Merge pull request #1465 from zaaakher/docs/guides

docs: update `CONTRIBUTING.md` and add `GUIDES.md`

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report
-labels: ["bug"]
+labels: ["needs-triage🔍"]
 body:
   - type: markdown
     attributes:
@@ -62,6 +62,7 @@ body:
         - "Docker"
         - "Remote server"
         - "Local Development"
+        - "Cloud Version"
     validations:
       required: true
   - type: dropdown

.github/workflows/dokploy.yml

@@ -2,7 +2,7 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary, "feat/better-auth-2"]
+    branches: [main, canary, "1061-custom-docker-service-hostname"]
 
 env:
   IMAGE_NAME: dokploy/dokploy

.github/workflows/format.yml

@@ -0,0 +1,22 @@
+name: autofix.ci
+
+on:
+  push:
+    branches: [canary]
+  pull_request:
+    branches: [canary]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup biomeJs
+        uses: biomejs/setup-biome@v2  
+
+      - name: Run Biome formatter
+        run:  biome format . --write
+
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef

CONTRIBUTING.md

@@ -61,9 +61,9 @@ pnpm install
 cp apps/dokploy/.env.example apps/dokploy/.env
 ```
 
-## Development
+## Requirements
 
-Is required to have **Docker** installed on your machine.
+- [Docker](/GUIDES.md#docker)
 
 ### Setup
 
@@ -165,86 +165,8 @@ 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.
+To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
 
-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
 

GUIDES.md

@@ -0,0 +1,49 @@
+# Docker
+
+Here's how to install docker on different operating systems:
+
+## macOS
+
+1. Visit [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop)
+2. Download the Docker Desktop installer
+3. Double-click the downloaded `.dmg` file
+4. Drag Docker to your Applications folder
+5. Open Docker Desktop from Applications
+6. Follow the onboarding tutorial if desired
+
+## Linux
+
+### Ubuntu
+
+```bash
+# Update package index
+sudo apt-get update
+
+# Install prerequisites
+sudo apt-get install \
+    apt-transport-https \
+    ca-certificates \
+    curl \
+    gnupg \
+    lsb-release
+
+# Add Docker's official GPG key
+curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
+
+# Set up stable repository
+echo \
+  "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
+  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker Engine
+sudo apt-get update
+sudo apt-get install docker-ce docker-ce-cli containerd.io
+```
+
+## Windows
+
+1. Enable WSL2 if not already enabled
+2. Visit [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
+3. Download the installer
+4. Run the installer and follow the prompts
+5. Start Docker Desktop from the Start menu

apps/dokploy/CONTRIBUTING.md

@@ -1,242 +0,0 @@
-
-
-# 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,6 +9,7 @@ describe("createDomainLabels", () => {
 		port: 8080,
 		https: false,
 		uniqueConfigKey: 1,
+		customCertResolver: null,
 		certificateType: "none",
 		applicationId: "",
 		composeId: "",

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

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

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

@@ -0,0 +1,425 @@
+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/server/update-server-config.test.ts

@@ -47,7 +47,7 @@ const baseAdmin: User = {
 	letsEncryptEmail: null,
 	sshPrivateKey: null,
 	enableDockerCleanup: false,
-	enableLogRotation: false,
+	logCleanupCron: null,
 	serversQuantity: 0,
 	stripeCustomerId: "",
 	stripeSubscriptionId: "",

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

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

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

@@ -40,7 +40,7 @@ interface Props {
 }
 
 const AddRedirectchema = z.object({
-	replicas: z.number(),
+	replicas: z.number().min(1, "Replicas must be at least 1"),
 	registryId: z.string(),
 });
 
@@ -130,9 +130,11 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 												placeholder="1"
 												{...field}
 												onChange={(e) => {
-													field.onChange(Number(e.target.value));
+													const value = e.target.value;
+													field.onChange(value === "" ? 0 : Number(value));
 												}}
 												type="number"
+												value={field.value || ""}
 											/>
 										</FormControl>
 

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

@@ -0,0 +1,347 @@
+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

@@ -42,6 +42,7 @@ import { domain } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Dices } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domain>;
 
@@ -83,10 +84,29 @@ export const AddDomain = ({
 	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
 		api.domain.generateDomain.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: application?.serverId || "",
+		});
+
+	console.log("canGenerateTraefikMeDomains", canGenerateTraefikMeDomains);
+
 	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({
@@ -94,13 +114,29 @@ 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({});
+			form.reset({
+				host: "",
+				path: undefined,
+				port: undefined,
+				https: false,
+				certificateType: undefined,
+				customCertResolver: undefined,
+			});
 		}
-	}, [form, form.reset, data, isLoading]);
+	}, [form, data, isLoading, domainId]);
+
+	// Separate effect for handling custom cert resolver validation
+	useEffect(() => {
+		if (certificateType === "custom") {
+			form.trigger("customCertResolver");
+		}
+	}, [certificateType, form]);
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
@@ -158,6 +194,21 @@ export const AddDomain = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{application?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>
@@ -256,34 +307,73 @@ export const AddDomain = ({
 									)}
 								/>
 
-								{form.getValues().https && (
+								{https && (
-									<FormField
+									<>
-										control={form.control}
+										<FormField
-										name="certificateType"
+											control={form.control}
-										render={({ field }) => (
+											name="certificateType"
-											<FormItem className="col-span-2">
+											render={({ field }) => {
-												<FormLabel>Certificate Provider</FormLabel>
+												return (
-												<Select
+													<FormItem>
-													onValueChange={field.onChange}
+														<FormLabel>Certificate Provider</FormLabel>
-													defaultValue={field.value || ""}
+														<Select
-												>
+															onValueChange={(value) => {
-													<FormControl>
+																field.onChange(value);
-														<SelectTrigger>
+																if (value !== "custom") {
-															<SelectValue placeholder="Select a certificate provider" />
+																	form.setValue(
-														</SelectTrigger>
+																		"customCertResolver",
-													</FormControl>
+																		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>
+												);
+											}}
+										/>
 
-													<SelectContent>
+										{certificateType === "custom" && (
-														<SelectItem value="none">None</SelectItem>
+											<FormField
-														<SelectItem value={"letsencrypt"}>
+												control={form.control}
-															Let's Encrypt
+												name="customCertResolver"
-														</SelectItem>
+												render={({ field }) => {
-													</SelectContent>
+													return (
-												</Select>
+														<FormItem>
-												<FormMessage />
+															<FormLabel>Custom Certificate Resolver</FormLabel>
-											</FormItem>
+															<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>
+													);
+												}}
+											/>
 										)}
-									/>
+									</>
 								)}
 							</div>
 						</div>

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

@@ -71,15 +71,19 @@ 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 || "",
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [data, form]);
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
 			mongoId: id || "",
 			postgresId: id || "",
@@ -87,7 +91,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			mysqlId: id || "",
 			mariadbId: id || "",
 			composeId: id || "",
-			env: data.environment,
+			env: formData.environment,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -98,6 +102,12 @@ 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">
@@ -106,6 +116,11 @@ 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>
 
@@ -132,8 +147,8 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 								control={form.control}
 								name="environment"
 								render={({ field }) => (
-									<FormItem className="w-full">
+									<FormItem>
-										<FormControl>
+										<FormControl className="">
 											<CodeEditor
 												style={
 													{
@@ -142,21 +157,35 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 												}
 												language="properties"
 												disabled={isEnvVisible}
+												className="font-mono"
+												wrapperClassName="compose-file-editor"
 												placeholder={`NODE_ENV=production
 PORT=3000
-`}
+														`}
-												className="h-96 font-mono"
 												{...field}
 											/>
 										</FormControl>
-
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
 
-							<div className="flex flex-row justify-end">
+							<div className="flex flex-row justify-end gap-2">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+								{hasChanges && (
+									<Button
+										type="button"
+										variant="outline"
+										onClick={handleCancel}
+									>
+										Cancel
+									</Button>
+								)}
+								<Button
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+									disabled={!hasChanges}
+								>
 									Save
 								</Button>
 							</div>

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

@@ -7,6 +7,7 @@ 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(),
@@ -34,16 +35,32 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
-			env: data?.env || "",
+			env: "",
-			buildArgs: data?.buildArgs || "",
+			buildArgs: "",
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	// 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) => {
 		mutateAsync({
-			env: data.env,
+			env: formData.env,
-			buildArgs: data.buildArgs,
+			buildArgs: formData.buildArgs,
 			applicationId,
 		})
 			.then(async () => {
@@ -55,6 +72,13 @@ 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}>
@@ -65,7 +89,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 					<Secrets
 						name="env"
 						title="Environment Settings"
-						description="You can add environment variables to your resource."
+						description={
+							<span>
+								You can add environment variables to your resource.
+								{hasChanges && (
+									<span className="text-yellow-500 ml-2">
+										(You have unsaved changes)
+									</span>
+								)}
+							</span>
+						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
@@ -89,8 +122,18 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							placeholder="NPM_TOKEN=xyz"
 						/>
 					)}
-					<div className="flex flex-row justify-end">
+					<div className="flex flex-row justify-end gap-2">
-						<Button isLoading={isLoading} className="w-fit" type="submit">
+						{hasChanges && (
+							<Button type="button" variant="outline" onClick={handleCancel}>
+								Cancel
+							</Button>
+						)}
+						<Button
+							isLoading={isLoading}
+							className="w-fit"
+							type="submit"
+							disabled={!hasChanges}
+						>
 							Save
 						</Button>
 					</div>

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

@@ -29,14 +29,23 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } 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("/"),
@@ -48,6 +57,7 @@ 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>;
@@ -73,6 +83,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
+			watchPaths: [],
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -118,6 +129,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.bitbucketBuildPath || "/",
 				bitbucketId: data.bitbucketId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -130,6 +142,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketBuildPath: data.buildPath,
 			bitbucketId: data.bitbucketId,
 			applicationId,
+			watchPaths: data.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -195,7 +208,20 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -363,6 +389,84 @@ 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,11 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Username</FormLabel>
 									<FormControl>
-										<Input placeholder="username" {...field} />
+										<Input
+											placeholder="Username"
+											autoComplete="username"
+											{...field}
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -130,7 +134,12 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Password</FormLabel>
 									<FormControl>
-										<Input placeholder="Password" {...field} type="password" />
+										<Input
+											placeholder="Password"
+											autoComplete="one-time-code"
+											{...field}
+											type="password"
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>

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

@@ -17,23 +17,33 @@ 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 } from "lucide-react";
+import { KeyRoundIcon, LockIcon, X } 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>;
@@ -56,6 +66,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			buildPath: "/",
 			repositoryURL: "",
 			sshKey: undefined,
+			watchPaths: [],
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -67,6 +78,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				branch: data.customGitBranch || "",
 				buildPath: data.customGitBuildPath || "/",
 				repositoryURL: data.customGitUrl || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -78,6 +90,7 @@ 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");
@@ -102,9 +115,22 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Repository URL</FormLabel>
+										<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>
 										<FormControl>
-											<Input placeholder="git@bitbucket.org" {...field} />
+											<Input placeholder="Repository URL" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -160,19 +186,22 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</Button>
 						)}
 					</div>
-					<FormField
+					<div className="space-y-4">
-						control={form.control}
+						<FormField
-						name="branch"
+							control={form.control}
-						render={({ field }) => (
+							name="branch"
-							<FormItem>
+							render={({ field }) => (
-								<FormLabel>Branch</FormLabel>
+								<FormItem>
-								<FormControl>
+									<FormLabel>Branch</FormLabel>
-									<Input placeholder="Branch" {...field} />
+									<FormControl>
-								</FormControl>
+										<Input placeholder="Branch" {...field} />
-								<FormMessage />
+									</FormControl>
-							</FormItem>
+									<FormMessage />
-						)}
+								</FormItem>
-					/>
+							)}
+						/>
+					</div>
+
 					<FormField
 						control={form.control}
 						name="buildPath"
@@ -186,6 +215,85 @@ 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,14 +28,23 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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("/"),
@@ -47,6 +56,7 @@ 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>;
@@ -113,6 +123,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.buildPath || "/",
 				githubId: data.githubId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -125,6 +136,7 @@ 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");
@@ -187,7 +199,20 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -350,7 +375,85 @@ 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,14 +29,23 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } 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("/"),
@@ -50,6 +59,7 @@ 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>;
@@ -124,6 +134,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.gitlabBuildPath || "/",
 				gitlabId: data.gitlabId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -138,6 +149,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			applicationId,
 			gitlabProjectId: data.repository.id,
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
+			watchPaths: data.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -203,7 +215,20 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -375,7 +400,85 @@ 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

@@ -4,8 +4,22 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+	Ban,
+	CheckCircle2,
+	Hammer,
+	RefreshCcw,
+	Rocket,
+	Terminal,
+} from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -41,141 +55,224 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<DialogAction
+					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-						title="Deploy Application"
-						description="Are you sure you want to deploy this application?"
-						type="default"
-						onClick={async () => {
-							await deploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application deployed successfully");
-									refetch();
-									router.push(
-										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-									);
-								})
-								.catch(() => {
-									toast.error("Error deploying application");
-								});
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Reload Application"
-						description="Are you sure you want to reload this application?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								applicationId: applicationId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Application reloaded successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error reloading application");
-								});
-						}}
-					>
-						<Button variant="secondary" isLoading={isReloading}>
-							Reload
-							<RefreshCcw className="size-4" />
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Rebuild Application"
-						description="Are you sure you want to rebuild this application?"
-						type="default"
-						onClick={async () => {
-							await redeploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application rebuilt successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error rebuilding application");
-								});
-						}}
-					>
-						<Button
-							variant="secondary"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Rebuild
-							<Hammer className="size-4" />
-						</Button>
-					</DialogAction>
-
-					{data?.applicationStatus === "idle" ? (
 						<DialogAction
-							title="Start Application"
+							title="Deploy Application"
-							description="Are you sure you want to start this application?"
+							description="Are you sure you want to deploy this application?"
 							type="default"
 							onClick={async () => {
-								await start({
+								await deploy({
 									applicationId: applicationId,
 								})
 									.then(() => {
-										toast.success("Application started successfully");
+										toast.success("Application deployed successfully");
 										refetch();
+										router.push(
+											`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+										);
 									})
 									.catch(() => {
-										toast.error("Error starting application");
+										toast.error("Error deploying application");
 									});
 							}}
 						>
-							<Button variant="secondary" isLoading={isStarting}>
+							<Button
-								Start
+								variant="default"
-								<CheckCircle2 className="size-4" />
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Rocket className="size-4 mr-1" />
+											Deploy
+										</div>
+									</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="Stop Application"
+							title="Reload Application"
-							description="Are you sure you want to stop this application?"
+							description="Are you sure you want to reload this application?"
+							type="default"
 							onClick={async () => {
-								await stop({
+								await reload({
 									applicationId: applicationId,
+									appName: data?.appName || "",
 								})
 									.then(() => {
-										toast.success("Application stopped successfully");
+										toast.success("Application reloaded successfully");
 										refetch();
 									})
 									.catch(() => {
-										toast.error("Error stopping application");
+										toast.error("Error reloading application");
 									});
 							}}
 						>
-							<Button variant="destructive" isLoading={isStopping}>
+							<Button
-								Stop
+								variant="secondary"
-								<Ban className="size-4" />
+								isLoading={isReloading}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<RefreshCcw className="size-4 mr-1" />
+											Reload
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Reload the application without rebuilding it</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DialogAction>
-					)}
+						<DialogAction
+							title="Rebuild Application"
+							description="Are you sure you want to rebuild this application?"
+							type="default"
+							onClick={async () => {
+								await redeploy({
+									applicationId: applicationId,
+								})
+									.then(() => {
+										toast.success("Application rebuilt successfully");
+										refetch();
+									})
+									.catch(() => {
+										toast.error("Error rebuilding application");
+									});
+							}}
+						>
+							<Button
+								variant="secondary"
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Hammer className="size-4 mr-1" />
+											Rebuild
+										</div>
+									</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" ? (
+							<DialogAction
+								title="Start Application"
+								description="Are you sure you want to start this application?"
+								type="default"
+								onClick={async () => {
+									await start({
+										applicationId: applicationId,
+									})
+										.then(() => {
+											toast.success("Application started successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error starting application");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isStarting}
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<CheckCircle2 className="size-4 mr-1" />
+												Start
+											</div>
+										</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
+								title="Stop Application"
+								description="Are you sure you want to stop this application?"
+								onClick={async () => {
+									await stop({
+										applicationId: applicationId,
+									})
+										.then(() => {
+											toast.success("Application stopped successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error stopping application");
+										});
+								}}
+							>
+								<Button
+									variant="destructive"
+									isLoading={isStopping}
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Ban className="size-4 mr-1" />
+												Stop
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Stop the currently running application</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
+					</TooltipProvider>
 					<DockerTerminalModal
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
 					>
-						<Button variant="outline">
+						<Button
-							<Terminal />
+							variant="outline"
+							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Terminal className="size-4 mr-1" />
 							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 italic"
+							aria-label="Toggle autodeploy"
 							checked={data?.autoDeploy || false}
 							onCheckedChange={async (enabled) => {
 								await update({
@@ -190,7 +287,29 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.error("Error updating Auto Deploy");
 									});
 							}}
-							className="flex flex-row gap-2 items-center"
+							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"
 						/>
 					</div>
 				</CardContent>

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

@@ -94,6 +94,7 @@ 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,16 +35,30 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-const schema = z.object({
+const schema = z
-	env: z.string(),
+	.object({
-	buildArgs: z.string(),
+		env: z.string(),
-	wildcardDomain: z.string(),
+		buildArgs: z.string(),
-	port: z.number(),
+		wildcardDomain: z.string(),
-	previewLimit: z.number(),
+		port: z.number(),
-	previewHttps: z.boolean(),
+		previewLimit: z.number(),
-	previewPath: z.string(),
+		previewHttps: z.boolean(),
-	previewCertificateType: z.enum(["letsencrypt", "none"]),
+		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",
+			});
+		}
+	});
 
 type Schema = z.infer<typeof schema>;
 
@@ -90,6 +104,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				previewHttps: data.previewHttps || false,
 				previewPath: data.previewPath || "/",
 				previewCertificateType: data.previewCertificateType || "none",
+				previewCustomCertResolver: data.previewCustomCertResolver || "",
 			});
 		}
 	}, [data]);
@@ -105,6 +120,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewHttps: formData.previewHttps,
 			previewPath: formData.previewPath,
 			previewCertificateType: formData.previewCertificateType,
+			previewCustomCertResolver: formData.previewCustomCertResolver,
 		})
 			.then(() => {
 				toast.success("Preview Deployments settings updated");
@@ -184,10 +200,6 @@ 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>
@@ -238,6 +250,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 															<SelectItem value={"letsencrypt"}>
 																Let's Encrypt
 															</SelectItem>
+															<SelectItem value={"custom"}>Custom</SelectItem>
 														</SelectContent>
 													</Select>
 													<FormMessage />
@@ -245,6 +258,25 @@ 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="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -42,6 +42,7 @@ import { domainCompose } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domainCompose>;
 
@@ -102,8 +103,22 @@ export const AddDomainCompose = ({
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: compose?.serverId || "",
+		});
+
 	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");
@@ -116,11 +131,21 @@ 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({});
+			form.reset({
+				host: "",
+				path: undefined,
+				port: undefined,
+				https: false,
+				certificateType: undefined,
+				customCertResolver: undefined,
+				serviceName: "",
+			});
 		}
 	}, [form, form.reset, data, isLoading]);
 
@@ -294,6 +319,21 @@ export const AddDomainCompose = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{compose?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>
@@ -393,33 +433,55 @@ export const AddDomainCompose = ({
 								/>
 
 								{https && (
-									<FormField
+									<>
-										control={form.control}
+										<FormField
-										name="certificateType"
+											control={form.control}
-										render={({ field }) => (
+											name="certificateType"
-											<FormItem className="col-span-2">
+											render={({ field }) => (
-												<FormLabel>Certificate Provider</FormLabel>
+												<FormItem className="col-span-2">
-												<Select
+													<FormLabel>Certificate Provider</FormLabel>
-													onValueChange={field.onChange}
+													<Select
-													defaultValue={field.value || ""}
+														onValueChange={field.onChange}
-												>
+														defaultValue={field.value || ""}
-													<FormControl>
+													>
-														<SelectTrigger>
+														<FormControl>
-															<SelectValue placeholder="Select a certificate provider" />
+															<SelectTrigger>
-														</SelectTrigger>
+																<SelectValue placeholder="Select a certificate provider" />
-													</FormControl>
+															</SelectTrigger>
+														</FormControl>
 
-													<SelectContent>
+														<SelectContent>
-														<SelectItem value="none">None</SelectItem>
+															<SelectItem value="none">None</SelectItem>
-														<SelectItem value={"letsencrypt"}>
+															<SelectItem value={"letsencrypt"}>
-															Let's Encrypt
+																Let's Encrypt
-														</SelectItem>
+															</SelectItem>
-													</SelectContent>
+															<SelectItem value={"custom"}>Custom</SelectItem>
-												</Select>
+														</SelectContent>
-												<FormMessage />
+													</Select>
-											</FormItem>
+													<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>
+												)}
+											/>
 										)}
-									/>
+									</>
 								)}
 							</div>
 						</div>

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

@@ -1,8 +1,15 @@
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -27,116 +34,180 @@ export const ComposeActions = ({ composeId }: Props) => {
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<DialogAction
+			<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-				title="Deploy Compose"
-				description="Are you sure you want to deploy this compose?"
-				type="default"
-				onClick={async () => {
-					await deploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose deployed successfully");
-							refetch();
-							router.push(
-								`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
-							);
-						})
-						.catch(() => {
-							toast.error("Error deploying compose");
-						});
-				}}
-			>
-				<Button variant="default" isLoading={data?.composeStatus === "running"}>
-					Deploy
-				</Button>
-			</DialogAction>
-			<DialogAction
-				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 rebuilt successfully");
-							refetch();
-						})
-						.catch(() => {
-							toast.error("Error rebuilding compose");
-						});
-				}}
-			>
-				<Button
-					variant="secondary"
-					isLoading={data?.composeStatus === "running"}
-				>
-					Rebuild
-					<Hammer className="size-4" />
-				</Button>
-			</DialogAction>
-			{data?.composeType === "docker-compose" &&
-			data?.composeStatus === "idle" ? (
 				<DialogAction
-					title="Start Compose"
+					title="Deploy Compose"
-					description="Are you sure you want to start this compose?"
+					description="Are you sure you want to deploy this compose?"
 					type="default"
 					onClick={async () => {
-						await start({
+						await deploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose started successfully");
+								toast.success("Compose deployed successfully");
 								refetch();
+								router.push(
+									`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+								);
 							})
 							.catch(() => {
-								toast.error("Error starting compose");
+								toast.error("Error deploying compose");
 							});
 					}}
 				>
-					<Button variant="secondary" isLoading={isStarting}>
+					<Button
-						Start
+						variant="default"
-						<CheckCircle2 className="size-4" />
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+					>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<div className="flex items-center">
+									<Rocket className="size-4 mr-1" />
+									Deploy
+								</div>
+							</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="Stop Compose"
+					title="Reload Compose"
-					description="Are you sure you want to stop this compose?"
+					description="Are you sure you want to reload this compose?"
+					type="default"
 					onClick={async () => {
-						await stop({
+						await redeploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose stopped successfully");
+								toast.success("Compose reloaded successfully");
 								refetch();
 							})
 							.catch(() => {
-								toast.error("Error stopping compose");
+								toast.error("Error reloading compose");
 							});
 					}}
 				>
-					<Button variant="destructive" isLoading={isStopping}>
+					<Button
-						Stop
+						variant="secondary"
-						<Ban className="size-4" />
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+					>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<div className="flex items-center">
+									<RefreshCcw className="size-4 mr-1" />
+									Reload
+								</div>
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Reload the compose without rebuilding it</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
 					</Button>
 				</DialogAction>
-			)}
+				{data?.composeType === "docker-compose" &&
-
+				data?.composeStatus === "idle" ? (
+					<DialogAction
+						title="Start Compose"
+						description="Are you sure you want to start this compose?"
+						type="default"
+						onClick={async () => {
+							await start({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose started successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error starting compose");
+								});
+						}}
+					>
+						<Button
+							variant="secondary"
+							isLoading={isStarting}
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center">
+										<CheckCircle2 className="size-4 mr-1" />
+										Start
+									</div>
+								</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
+						title="Stop Compose"
+						description="Are you sure you want to stop this compose?"
+						onClick={async () => {
+							await stop({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose stopped successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error stopping compose");
+								});
+						}}
+					>
+						<Button
+							variant="destructive"
+							isLoading={isStopping}
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center">
+										<Ban className="size-4 mr-1" />
+										Stop
+									</div>
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>Stop the currently running compose</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
+					</DialogAction>
+				)}
+			</TooltipProvider>
 			<DockerTerminalModal
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
 			>
-				<Button variant="outline">
+				<Button
-					<Terminal />
+					variant="outline"
+					className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+				>
+					<Terminal className="size-4 mr-1" />
 					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 italic"
+					aria-label="Toggle autodeploy"
 					checked={data?.autoDeploy || false}
 					onCheckedChange={async (enabled) => {
 						await update({
@@ -151,7 +222,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								toast.error("Error updating Auto Deploy");
 							});
 					}}
-					className="flex flex-row gap-2 items-center"
+					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
 				/>
 			</div>
 		</div>

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

@@ -97,6 +97,7 @@ 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,14 +29,23 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } 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),
@@ -48,6 +57,7 @@ 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>;
@@ -73,6 +83,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
+			watchPaths: [],
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -118,6 +129,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				bitbucketId: data.bitbucketId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -132,6 +144,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "bitbucket",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -197,7 +210,20 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -365,6 +391,84 @@ 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,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -17,14 +18,22 @@ 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 } from "lucide-react";
+import { KeyRoundIcon, LockIcon, X } 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),
@@ -33,6 +42,7 @@ 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>;
@@ -54,6 +64,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			repositoryURL: "",
 			composePath: "./docker-compose.yml",
 			sshKey: undefined,
+			watchPaths: [],
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -65,6 +76,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				branch: data.customGitBranch || "",
 				repositoryURL: data.customGitUrl || "",
 				composePath: data.composePath,
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -77,6 +89,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "git",
 			composePath: values.composePath,
+			composeStatus: "idle",
+			watchPaths: values.watchPaths || [],
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -101,11 +115,22 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel className="flex flex-row justify-between">
+										<div className="flex items-center justify-between">
-											Repository URL
+											<FormLabel>Repository URL</FormLabel>
-										</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>
 										<FormControl>
-											<Input placeholder="git@bitbucket.org" {...field} />
+											<Input placeholder="Repository URL" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -191,6 +216,85 @@ 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,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -28,14 +29,22 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } 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),
@@ -47,6 +56,7 @@ 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>;
@@ -71,6 +81,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
+			watchPaths: [],
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
@@ -113,6 +124,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				githubId: data.githubId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -127,6 +139,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			githubId: data.githubId,
 			sourceType: "github",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -183,13 +196,25 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -357,6 +382,84 @@ 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,14 +29,23 @@ 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 } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } 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),
@@ -50,6 +59,7 @@ 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>;
@@ -76,6 +86,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
+			watchPaths: [],
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -124,6 +135,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				gitlabId: data.gitlabId || "",
+				watchPaths: data.watchPaths || [],
 			});
 		}
 	}, [form.reset, data, form]);
@@ -140,6 +152,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 			sourceType: "gitlab",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -199,13 +212,25 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<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>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -382,6 +407,84 @@ 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,11 @@ 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 Randomize ({data?.appName})</FormLabel>
+											<FormLabel>
+												Enable Isolated Deployment ({data?.appName})
+											</FormLabel>
 											<FormDescription>
-												Enable randomize to the compose file.
+												Enable isolated deployment to the compose file.
 											</FormDescription>
 										</div>
 										<FormControl>

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

@@ -62,6 +62,11 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
+				<AlertBlock type="info">
+					Preview your docker-compose file with added domains. Note: At least
+					one domain must be specified for this conversion to take effect.
+				</AlertBlock>
+
 				<div className="flex flex-row gap-2 justify-end">
 					<Button
 						variant="secondary"

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

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

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

@@ -54,6 +54,7 @@ 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>;
@@ -77,6 +78,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
+			keepLatestCount: undefined,
 		},
 		resolver: zodResolver(AddPostgresBackup1Schema),
 	});
@@ -88,6 +90,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
+			keepLatestCount: undefined,
 		});
 	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
@@ -117,6 +120,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 			schedule: data.schedule,
 			enabled: data.enabled,
 			database: data.database,
+			keepLatestCount: data.keepLatestCount,
 			databaseType,
 			...getDatabaseId,
 		})
@@ -265,7 +269,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 												<Input placeholder={"dokploy/"} {...field} />
 											</FormControl>
 											<FormDescription>
-												Use if you want to storage in a specific path of your
+												Use if you want to back up in a specific path of your
 												destination/bucket
 											</FormDescription>
 
@@ -274,6 +278,29 @@ 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

@@ -0,0 +1,375 @@
+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">;
+	serverId: string | null;
+}
+
+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,
+	serverId,
+}: 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,
+			serverId: serverId ?? "",
+		},
+		{
+			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);
+																	}}
+																>
+																	<div className="flex w-full justify-between">
+																		<span>{file}</span>
+																	</div>
+																	<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,12 +20,17 @@ 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 }),
@@ -67,7 +72,14 @@ export const ShowBackups = ({ id, type }: Props) => {
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+					<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}
+							serverId={postgres.serverId}
+						/>
+					</div>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -94,11 +106,18 @@ export const ShowBackups = ({ id, type }: Props) => {
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<AddBackup
+								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-									databaseId={id}
+									<AddBackup
-									databaseType={type}
+										databaseId={id}
-									refetch={refetch}
+										databaseType={type}
-								/>
+										refetch={refetch}
+									/>
+									<RestoreBackup
+										databaseId={id}
+										databaseType={type}
+										serverId={postgres.serverId}
+									/>
+								</div>
 							</div>
 						) : (
 							<div className="flex flex-col pt-2">
@@ -106,7 +125,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-5 flex-col gap-8">
+												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8">
 													<div className="flex flex-col gap-1">
 														<span className="font-medium">Destination</span>
 														<span className="text-sm text-muted-foreground">
@@ -137,6 +156,12 @@ 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}>
@@ -145,8 +170,12 @@ export const ShowBackups = ({ id, type }: Props) => {
 																<Button
 																	type="button"
 																	variant="ghost"
-																	isLoading={isManualBackup}
+																	isLoading={
+																		isManualBackup &&
+																		activeManualBackup === backup.backupId
+																	}
 																	onClick={async () => {
+																		setActiveManualBackup(backup.backupId);
 																		await manualBackup({
 																			backupId: backup.backupId as string,
 																		})
@@ -160,6 +189,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 																					"Error creating the manual backup",
 																				);
 																			});
+																		setActiveManualBackup(undefined);
 																	}}
 																>
 																	<Play className="size-5  text-muted-foreground" />
@@ -168,6 +198,7 @@ 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,6 +47,7 @@ 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>;
@@ -78,6 +79,7 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 			enabled: true,
 			prefix: "/",
 			schedule: "",
+			keepLatestCount: undefined,
 		},
 		resolver: zodResolver(UpdateBackupSchema),
 	});
@@ -90,6 +92,9 @@ 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]);
@@ -102,6 +107,7 @@ 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");
@@ -253,7 +259,7 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 												<Input placeholder={"dokploy/"} {...field} />
 											</FormControl>
 											<FormDescription>
-												Use if you want to storage in a specific path of your
+												Use if you want to back up in a specific path of your
 												destination/bucket
 											</FormDescription>
 
@@ -262,6 +268,29 @@ 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,7 +119,6 @@ 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 = () => {
@@ -136,7 +135,6 @@ 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,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ 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";
@@ -106,6 +108,20 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 						</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)}

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

@@ -2,8 +2,15 @@ import { DialogAction } from "@/components/shared/dialog-action";
 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,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -65,99 +72,182 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
+						<TooltipProvider delayDuration={0}>
-							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"}
-							>
-								Deploy
-							</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}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
 							<DialogAction
-								title="Start Mariadb"
+								title="Deploy Mariadb"
-								description="Are you sure you want to start this mariadb?"
+								description="Are you sure you want to deploy this mariadb?"
 								type="default"
 								onClick={async () => {
-									await start({
+									setIsDeploying(true);
-										mariadbId: mariadbId,
+									await new Promise((resolve) => setTimeout(resolve, 1000));
-									})
+									refetch();
-										.then(() => {
-											toast.success("Mariadb started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Mariadb");
-										});
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
+								<Button
-									Start
+									variant="default"
-									<CheckCircle2 className="size-4" />
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MariaDB database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
+						</TooltipProvider>
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Stop Mariadb"
+								title="Reload Mariadb"
-								description="Are you sure you want to stop this mariadb?"
+								description="Are you sure you want to reload this mariadb?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										mariadbId: mariadbId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mariadb stopped successfully");
+											toast.success("Mariadb reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Mariadb");
+											toast.error("Error reloading Mariadb");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
+								<Button
-									Stop
+									variant="secondary"
-									<Ban className="size-4" />
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MariaDB service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
+						</TooltipProvider>
+						{data?.applicationStatus === "idle" ? (
+							<TooltipProvider delayDuration={0}>
+								<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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
+											</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>
+							</TooltipProvider>
+						) : (
+							<TooltipProvider delayDuration={0}>
+								<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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
+											</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">
+							<Button
-								<Terminal />
+								variant="outline"
-								Open Terminal
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MariaDB container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

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

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

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ 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";
@@ -106,6 +108,20 @@ export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
 						</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)}

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

@@ -2,8 +2,15 @@ import { DialogAction } from "@/components/shared/dialog-action";
 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,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -64,100 +71,176 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
+						<TooltipProvider delayDuration={0}>
-							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"}
-							>
-								Deploy
-							</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}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
 							<DialogAction
-								title="Start Mongo"
+								title="Deploy Mongo"
-								description="Are you sure you want to start this mongo?"
+								description="Are you sure you want to deploy this mongo?"
 								type="default"
 								onClick={async () => {
-									await start({
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
+										</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 started successfully");
+											toast.success("Mongo reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error starting Mongo");
+											toast.error("Error reloading Mongo");
 										});
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
+								<Button
-									Start
+									variant="secondary"
-									<CheckCircle2 className="size-4" />
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</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
+								<DialogAction
-								title="Stop Mongo"
+									title="Start Mongo"
-								description="Are you sure you want to stop this mongo?"
+									description="Are you sure you want to start this mongo?"
-								type="default"
+									type="default"
-								onClick={async () => {
+									onClick={async () => {
-									await stop({
+										await start({
-										mongoId: mongoId,
+											mongoId: mongoId,
-									})
-										.then(() => {
-											toast.success("Mongo stopped successfully");
-											refetch();
 										})
-										.catch(() => {
+											.then(() => {
-											toast.error("Error stopping Mongo");
+												toast.success("Mongo started successfully");
-										});
+												refetch();
-								}}
+											})
-							>
+											.catch(() => {
-								<Button variant="destructive" isLoading={isStopping}>
+												toast.error("Error starting Mongo");
-									Stop
+											});
-									<Ban className="size-4" />
+									}}
-								</Button>
+								>
-							</DialogAction>
+									<Button
-						)}
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
+											</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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
+											</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">
+							<Button
-								<Terminal />
+								variant="outline"
-								Open Terminal
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MongoDB container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

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

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

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

@@ -200,7 +200,7 @@ export const ContainerFreeMonitoring = ({
 	}, [appName]);
 
 	return (
-		<div className="rounded-xl bg-background shadow-md flex flex-col gap-4">
+		<div className="rounded-xl bg-background flex flex-col gap-4">
 			<header className="flex items-center justify-between">
 				<div className="space-y-1">
 					<h1 className="text-2xl font-semibold tracking-tight">Monitoring</h1>
@@ -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,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ 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";
@@ -106,6 +108,20 @@ export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
 						</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)}

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

@@ -2,8 +2,15 @@ import { DialogAction } from "@/components/shared/dialog-action";
 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,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -62,100 +69,176 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
+						<TooltipProvider delayDuration={0}>
-							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"}
-							>
-								Deploy
-							</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}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
 							<DialogAction
-								title="Start Mysql"
+								title="Deploy MySQL"
-								description="Are you sure you want to start this mysql?"
+								description="Are you sure you want to deploy this mysql?"
 								type="default"
 								onClick={async () => {
-									await start({
+									setIsDeploying(true);
-										mysqlId: mysqlId,
+									await new Promise((resolve) => setTimeout(resolve, 1000));
-									})
+									refetch();
-										.then(() => {
-											toast.success("Mysql started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Mysql");
-										});
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
+								<Button
-									Start
+									variant="default"
-									<CheckCircle2 className="size-4" />
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
+										</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="Stop Mysql"
+								title="Reload MySQL"
-								description="Are you sure you want to stop this mysql?"
+								description="Are you sure you want to reload this mysql?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										mysqlId: mysqlId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mysql stopped successfully");
+											toast.success("MySQL reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Mysql");
+											toast.error("Error reloading MySQL");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
+								<Button
-									Stop
+									variant="secondary"
-									<Ban className="size-4" />
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
+											</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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
+											</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">
+							<Button
-								<Terminal />
+								variant="outline"
-								Open Terminal
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the MySQL container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

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

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

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ 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";
@@ -108,6 +110,20 @@ export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
 						</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)}

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

@@ -2,12 +2,20 @@ import { DialogAction } from "@/components/shared/dialog-action";
 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,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, 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 {
 	postgresId: string;
 }
@@ -57,122 +65,198 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 	);
 
 	return (
-		<div className="flex w-full flex-col gap-5 ">
+		<>
-			<Card className="bg-background">
+			<div className="flex w-full flex-col gap-5 ">
-				<CardHeader className="pb-4">
+				<Card className="bg-background">
-					<CardTitle className="text-xl">General</CardTitle>
+					<CardHeader>
-				</CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
-				<CardContent className="flex gap-4">
+					</CardHeader>
-					<DialogAction
+					<CardContent className="flex flex-row gap-4 flex-wrap">
-						title="Deploy Postgres"
+						<TooltipProvider disableHoverableContent={false}>
-						description="Are you sure you want to deploy this postgres?"
+							<DialogAction
-						type="default"
+								title="Deploy PostgreSQL"
-						onClick={async () => {
+								description="Are you sure you want to deploy this postgres?"
-							setIsDeploying(true);
+								type="default"
-
+								onClick={async () => {
-							await new Promise((resolve) => setTimeout(resolve, 1000));
+									setIsDeploying(true);
-							refetch();
+									await new Promise((resolve) => setTimeout(resolve, 1000));
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-
-					<DialogAction
-						title="Reload Postgres"
-						description="Are you sure you want to reload this postgres?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								postgresId: postgresId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Postgres reloaded successfully");
 									refetch();
-								})
+								}}
-								.catch(() => {
+							>
-									toast.error("Error reloading Postgres");
+								<Button
-								});
+									variant="default"
-						}}
+									isLoading={data?.applicationStatus === "running"}
-					>
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-						<Button variant="secondary" isLoading={isReloading}>
+								>
-							Reload
+									<Tooltip>
-							<RefreshCcw className="size-4" />
+										<TooltipTrigger asChild>
-						</Button>
+											<div className="flex items-center">
-					</DialogAction>
+												<Rocket className="size-4 mr-1" />
-					{data?.applicationStatus === "idle" ? (
+												Deploy
-						<DialogAction
+											</div>
-							title="Start Postgres"
+										</TooltipTrigger>
-							description="Are you sure you want to start this postgres?"
+										<TooltipPrimitive.Portal>
-							type="default"
+											<TooltipContent sideOffset={5} className="z-[60]">
-							onClick={async () => {
+												<p>Downloads and sets up the PostgreSQL database</p>
-								await start({
+											</TooltipContent>
-									postgresId: postgresId,
+										</TooltipPrimitive.Portal>
-								})
+									</Tooltip>
-									.then(() => {
+								</Button>
-										toast.success("Postgres started successfully");
+							</DialogAction>
-										refetch();
+							<DialogAction
+								title="Reload PostgreSQL"
+								description="Are you sure you want to reload this postgres?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										postgresId: postgresId,
+										appName: data?.appName || "",
 									})
-									.catch(() => {
+										.then(() => {
-										toast.error("Error starting Postgres");
+											toast.success("PostgreSQL reloaded successfully");
-									});
+											refetch();
-							}}
+										})
+										.catch(() => {
+											toast.error("Error reloading PostgreSQL");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</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
+									title="Start PostgreSQL"
+									description="Are you sure you want to start this postgres?"
+									type="default"
+									onClick={async () => {
+										await start({
+											postgresId: postgresId,
+										})
+											.then(() => {
+												toast.success("PostgreSQL started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting PostgreSQL");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
+											</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
+									title="Stop PostgreSQL"
+									description="Are you sure you want to stop this postgres?"
+									onClick={async () => {
+										await stop({
+											postgresId: postgresId,
+										})
+											.then(() => {
+												toast.success("PostgreSQL stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping PostgreSQL");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running PostgreSQL database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
 						>
-							<Button variant="secondary" isLoading={isStarting}>
+							<Button
-								Start
+								variant="outline"
-								<CheckCircle2 className="size-4" />
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the PostgreSQL container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
-						</DialogAction>
+						</DockerTerminalModal>
-					) : (
+					</CardContent>
-						<DialogAction
+				</Card>
-							title="Stop Postgres"
+				<DrawerLogs
-							description="Are you sure you want to stop this postgres?"
+					isOpen={isDrawerOpen}
-							onClick={async () => {
+					onClose={() => {
-								await stop({
+						setIsDrawerOpen(false);
-									postgresId: postgresId,
+						setFilteredLogs([]);
-								})
+						setIsDeploying(false);
-									.then(() => {
+						refetch();
-										toast.success("Postgres stopped successfully");
+					}}
-										refetch();
+					filteredLogs={filteredLogs}
-									})
+				/>
-									.catch(() => {
+			</div>
-										toast.error("Error stopping Postgres");
+		</>
-									});
-							}}
-						>
-							<Button variant="destructive" isLoading={isStopping}>
-								Stop
-								<Ban className="size-4" />
-							</Button>
-						</DialogAction>
-					)}
-
-					<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/postgres/update-postgres.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
+import { PenBox } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -94,9 +94,9 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 				<Button
 					variant="ghost"
 					size="icon"
-					className="group hover:bg-blue-500/10 "
+					className="group hover:bg-blue-500/10 focus-visible:ring-2 focus-visible:ring-offset-2"
 				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+					<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">
@@ -121,7 +121,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />
@@ -151,6 +151,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 										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>

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

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

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

@@ -1,3 +1,4 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	AlertDialog,
@@ -57,32 +58,67 @@ import {
 	BookText,
 	CheckIcon,
 	ChevronsUpDown,
-	Github,
 	Globe,
 	HelpCircle,
 	LayoutGrid,
 	List,
+	Loader2,
 	PuzzleIcon,
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, useEffect } 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 }: Props) => {
+export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 	const [query, setQuery] = useState("");
 	const [open, setOpen] = useState(false);
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
-	const { data } = api.compose.templates.useQuery();
+	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: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const { data: tags, isLoading: isLoadingTags } =
+	const { data: tags, isLoading: isLoadingTags } = api.compose.getTags.useQuery(
-		api.compose.getTags.useQuery();
+		{ baseUrl: customBaseUrl },
+		{
+			enabled: open,
+		},
+	);
 	const utils = api.useUtils();
 
 	const [serverId, setServerId] = useState<string | undefined>(undefined);
@@ -129,6 +165,14 @@ export const AddTemplate = ({ projectId }: 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
@@ -232,7 +276,20 @@ export const AddTemplate = ({ projectId }: Props) => {
 							</AlertBlock>
 						)}
 
-						{templates.length === 0 ? (
+						{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 ? (
 							<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">
@@ -248,9 +305,9 @@ export const AddTemplate = ({ projectId }: Props) => {
 										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
 								)}
 							>
-								{templates?.map((template, index) => (
+								{templates?.map((template) => (
 									<div
-										key={`template-${index}`}
+										key={template.id}
 										className={cn(
 											"flex flex-col border rounded-lg overflow-hidden relative",
 											viewMode === "icon" && "h-[200px]",
@@ -260,7 +317,6 @@ export const AddTemplate = ({ projectId }: 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",
@@ -268,7 +324,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 											)}
 										>
 											<img
-												src={`/templates/${template.logo}`}
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
 												className={cn(
 													"object-contain",
 													viewMode === "detailed" ? "size-24" : "size-16",
@@ -321,7 +377,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 														target="_blank"
 														className="text-muted-foreground hover:text-foreground transition-colors"
 													>
-														<Github className="size-5" />
+														<GithubIcon className="size-5" />
 													</Link>
 													{template.links.website && (
 														<Link
@@ -383,7 +439,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 																		side="top"
 																	>
 																		<span>
-																			If ot server is selected, the application
+																			If no server is selected, the application
 																			will be deployed on the server where the
 																			user is logged in.
 																		</span>
@@ -431,18 +487,19 @@ export const AddTemplate = ({ projectId }: Props) => {
 																	projectId,
 																	serverId: serverId || undefined,
 																	id: template.id,
+																	baseUrl: customBaseUrl,
 																});
 																toast.promise(promise, {
 																	loading: "Setting up...",
-																	success: (_data) => {
+																	success: () => {
 																		utils.project.one.invalidate({
 																			projectId,
 																		});
 																		setOpen(false);
 																		return `${template.name} template created successfully`;
 																	},
-																	error: (_err) => {
+																	error: () => {
-																		return `An error ocurred deploying ${template.name} template`;
+																		return `An error occurred 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="Tesla" {...field} />
+											<Input placeholder="Vandelay Industries" {...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 flex-wrap gap-5">
+									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices =
 												project?.mariadb.length === 0 &&
@@ -186,7 +186,9 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span>{domain.host}</span>
+																										<span className="truncate">
+																											{domain.host}
+																										</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>
@@ -222,7 +224,9 @@ export const ShowProjects = () => {
 																										target="_blank"
 																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
 																									>
-																										<span>{domain.host}</span>
+																										<span className="truncate">
+																											{domain.host}
+																										</span>
 																										<ExternalLinkIcon className="size-4 shrink-0" />
 																									</Link>
 																								</DropdownMenuItem>

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +20,7 @@ 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";
@@ -100,6 +102,20 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 						</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)}

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

@@ -2,12 +2,20 @@ import { DialogAction } from "@/components/shared/dialog-action";
 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,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, 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;
 }
@@ -63,101 +71,176 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
+						<TooltipProvider delayDuration={0}>
-							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"}
-							>
-								Deploy
-							</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}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{/* <ResetRedis redisId={redisId} appName={data?.appName || ""} /> */}
-						{data?.applicationStatus === "idle" ? (
 							<DialogAction
-								title="Start Redis"
+								title="Deploy Redis"
-								description="Are you sure you want to start this redis?"
+								description="Are you sure you want to deploy this redis?"
 								type="default"
 								onClick={async () => {
-									await start({
+									setIsDeploying(true);
-										redisId: redisId,
+									await new Promise((resolve) => setTimeout(resolve, 1000));
-									})
+									refetch();
-										.then(() => {
-											toast.success("Redis started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Redis");
-										});
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
+								<Button
-									Start
+									variant="default"
-									<CheckCircle2 className="size-4" />
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
+										</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="Stop Redis"
+								title="Reload Redis"
-								description="Are you sure you want to stop this redis?"
+								description="Are you sure you want to reload this redis?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										redisId: redisId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Redis stopped successfully");
+											toast.success("Redis reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Redis");
+											toast.error("Error reloading Redis");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
+								<Button
-									Stop
+									variant="secondary"
-									<Ban className="size-4" />
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<CheckCircle2 className="size-4 mr-1" />
+													Start
+												</div>
+											</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 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<Ban className="size-4 mr-1" />
+													Stop
+												</div>
+											</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">
+							<Button
-								<Terminal />
+								variant="outline"
-								Open Terminal
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the Redis container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

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

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

apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx

@@ -1,10 +1,10 @@
+import { api } from "@/utils/api";
 import {
 	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 	ChartTooltipContent,
 } from "@/components/ui/chart";
-import { api } from "@/utils/api";
 import {
 	Area,
 	AreaChart,
@@ -14,6 +14,13 @@ import {
 	YAxis,
 } from "recharts";
 
+export interface RequestDistributionChartProps {
+	dateRange?: {
+		from: Date | undefined;
+		to: Date | undefined;
+	};
+}
+
 const chartConfig = {
 	views: {
 		label: "Page Views",
@@ -24,10 +31,22 @@ const chartConfig = {
 	},
 } satisfies ChartConfig;
 
-export const RequestDistributionChart = () => {
+export const RequestDistributionChart = ({
-	const { data: stats } = api.settings.readStats.useQuery(undefined, {
+	dateRange,
-		refetchInterval: 1333,
+}: RequestDistributionChartProps) => {
-	});
+	const { data: stats } = api.settings.readStats.useQuery(
+		{
+			dateRange: dateRange
+				? {
+						start: dateRange.from?.toISOString(),
+						end: dateRange.to?.toISOString(),
+					}
+				: undefined,
+		},
+		{
+			refetchInterval: 1333,
+		},
+	);
 
 	return (
 		<ResponsiveContainer width="100%" height={200}>

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -79,7 +79,15 @@ export const priorities = [
 		icon: Server,
 	},
 ];
-export const RequestsTable = () => {
+
+export interface RequestsTableProps {
+	dateRange?: {
+		from: Date | undefined;
+		to: Date | undefined;
+	};
+}
+
+export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 	const [statusFilter, setStatusFilter] = useState<string[]>([]);
 	const [search, setSearch] = useState("");
 	const [selectedRow, setSelectedRow] = useState<LogEntry>();
@@ -98,6 +106,12 @@ export const RequestsTable = () => {
 			page: pagination,
 			search,
 			status: statusFilter,
+			dateRange: dateRange
+				? {
+						start: dateRange.from?.toISOString(),
+						end: dateRange.to?.toISOString(),
+					}
+				: undefined,
 		},
 		{
 			refetchInterval: 1333,

apps/dokploy/components/dashboard/requests/show-requests.tsx

@@ -1,6 +1,7 @@
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
 	Card,
 	CardContent,
@@ -8,9 +9,29 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { type RouterOutputs, api } from "@/utils/api";
-import { ArrowDownUp } from "lucide-react";
+import { format } from "date-fns";
+import {
+	ArrowDownUp,
+	AlertCircle,
+	InfoIcon,
+	Calendar as CalendarIcon,
+} from "lucide-react";
 import Link from "next/link";
+import { useState, useEffect } from "react";
 import { toast } from "sonner";
 import { RequestDistributionChart } from "./request-distribution-chart";
 import { RequestsTable } from "./requests-table";
@@ -20,17 +41,30 @@ export type LogEntry = NonNullable<
 >[0];
 
 export const ShowRequests = () => {
-	const { data: isLogRotateActive, refetch: refetchLogRotate } =
-		api.settings.getLogRotateStatus.useQuery();
-
-	const { mutateAsync: toggleLogRotate } =
-		api.settings.toggleLogRotate.useMutation();
-
 	const { data: isActive, refetch } =
 		api.settings.haveActivateRequests.useQuery();
 	const { mutateAsync: toggleRequests } =
 		api.settings.toggleRequests.useMutation();
 
+	const { data: logCleanupStatus } =
+		api.settings.getLogCleanupStatus.useQuery();
+	const { mutateAsync: updateLogCleanup } =
+		api.settings.updateLogCleanup.useMutation();
+	const [cronExpression, setCronExpression] = useState<string | null>(null);
+	const [dateRange, setDateRange] = useState<{
+		from: Date | undefined;
+		to: Date | undefined;
+	}>({
+		from: undefined,
+		to: undefined,
+	});
+
+	useEffect(() => {
+		if (logCleanupStatus) {
+			setCronExpression(logCleanupStatus.cronExpression || "0 0 * * *");
+		}
+	}, [logCleanupStatus]);
+
 	return (
 		<>
 			<div className="w-full">
@@ -57,7 +91,60 @@ export const ShowRequests = () => {
 							</AlertBlock>
 						</CardHeader>
 						<CardContent className="space-y-2 py-8 border-t">
-							<div className="flex w-full gap-4 justify-end">
+							<div className="flex w-full gap-4 justify-end items-center">
+								<div className="flex-1 flex items-center gap-4">
+									<div className="flex items-center gap-2">
+										<Label htmlFor="cron" className="min-w-32">
+											Log Cleanup Schedule
+										</Label>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<InfoIcon className="size-4 text-muted-foreground" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p className="max-w-80">
+														At the scheduled time, the cleanup job will keep
+														only the last 1000 entries in the access log file
+														and signal Traefik to reopen its log files. The
+														default schedule is daily at midnight (0 0 * * *).
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex-1 flex gap-4">
+										<Input
+											id="cron"
+											placeholder="0 0 * * *"
+											value={cronExpression || ""}
+											onChange={(e) => setCronExpression(e.target.value)}
+											className="max-w-60"
+											required
+										/>
+										<Button
+											variant="outline"
+											onClick={async () => {
+												if (!cronExpression?.trim()) {
+													toast.error("Please enter a valid cron expression");
+													return;
+												}
+												try {
+													await updateLogCleanup({
+														cronExpression: cronExpression,
+													});
+													toast.success("Log cleanup schedule updated");
+												} catch (error) {
+													toast.error(
+														`Failed to update log cleanup schedule: ${error instanceof Error ? error.message : "Unknown error"}`,
+													);
+												}
+											}}
+										>
+											Update Schedule
+										</Button>
+									</div>
+								</div>
 								<DialogAction
 									title={isActive ? "Deactivate Requests" : "Activate Requests"}
 									description="You will also need to restart Traefik to apply the changes"
@@ -77,53 +164,81 @@ export const ShowRequests = () => {
 								>
 									<Button>{isActive ? "Deactivate" : "Activate"}</Button>
 								</DialogAction>
-
-								<DialogAction
-									title={
-										isLogRotateActive
-											? "Activate Log Rotate"
-											: "Deactivate Log Rotate"
-									}
-									description={
-										isLogRotateActive
-											? "This will make the logs rotate on interval 1 day and maximum size of 100 MB and maximum 6 logs"
-											: "The log rotation will be disabled"
-									}
-									onClick={() => {
-										toggleLogRotate({
-											enable: !isLogRotateActive,
-										})
-											.then(() => {
-												toast.success(
-													`Log rotate ${isLogRotateActive ? "activated" : "deactivated"}`,
-												);
-												refetchLogRotate();
-											})
-											.catch((err) => {
-												toast.error(err.message);
-											});
-									}}
-								>
-									<Button variant="secondary">
-										{isLogRotateActive
-											? "Activate Log Rotate"
-											: "Deactivate Log Rotate"}
-									</Button>
-								</DialogAction>
 							</div>
 
-							<div>
+							{isActive ? (
-								{isActive ? (
+								<>
-									<RequestDistributionChart />
+									<div className="flex justify-end mb-4 gap-2">
-								) : (
+										{(dateRange.from || dateRange.to) && (
-									<div className="flex items-center justify-center min-h-[25vh]">
+											<Button
-										<span className="text-muted-foreground py-6">
+												variant="outline"
-											You need to activate requests
+												onClick={() =>
-										</span>
+													setDateRange({ from: undefined, to: undefined })
+												}
+												className="px-3"
+											>
+												Clear dates
+											</Button>
+										)}
+										<Popover>
+											<PopoverTrigger asChild>
+												<Button
+													variant="outline"
+													className="w-[300px] justify-start text-left font-normal"
+												>
+													<CalendarIcon className="mr-2 h-4 w-4" />
+													{dateRange.from ? (
+														dateRange.to ? (
+															<>
+																{format(dateRange.from, "LLL dd, y")} -{" "}
+																{format(dateRange.to, "LLL dd, y")}
+															</>
+														) : (
+															format(dateRange.from, "LLL dd, y")
+														)
+													) : (
+														<span>Pick a date range</span>
+													)}
+												</Button>
+											</PopoverTrigger>
+											<PopoverContent className="w-auto p-0" align="end">
+												<Calendar
+													initialFocus
+													mode="range"
+													defaultMonth={dateRange.from}
+													selected={{
+														from: dateRange.from,
+														to: dateRange.to,
+													}}
+													onSelect={(range) => {
+														setDateRange({
+															from: range?.from,
+															to: range?.to,
+														});
+													}}
+													numberOfMonths={2}
+												/>
+											</PopoverContent>
+										</Popover>
 									</div>
-								)}
+									<RequestDistributionChart dateRange={dateRange} />
-								{isActive && <RequestsTable />}
+									<RequestsTable dateRange={dateRange} />
-							</div>
+								</>
+							) : (
+								<div className="flex flex-col items-center justify-center py-12 gap-4 text-muted-foreground">
+									<AlertCircle className="size-12 text-muted-foreground/50" />
+									<div className="text-center space-y-2">
+										<h3 className="text-lg font-medium">
+											Requests are not activated
+										</h3>
+										<p className="text-sm max-w-md">
+											Activate requests to see incoming traffic statistics and
+											monitor your application's usage. After activation, you'll
+											need to reload Traefik for the changes to take effect.
+										</p>
+									</div>
+								</div>
+							)}
 						</CardContent>
 					</div>
 				</Card>

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

@@ -31,6 +31,8 @@ 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"),
@@ -441,13 +443,16 @@ export const AddApiKey = () => {
 						</DialogDescription>
 					</DialogHeader>
 					<div className="mt-4 space-y-4">
-						<div className="rounded-md bg-muted p-4 font-mono text-sm break-all">
+						<CodeEditor
-							{newApiKey}
+							className="font-mono text-sm break-all"
-						</div>
+							language="properties"
+							value={newApiKey}
+							readOnly
+						/>
 						<div className="flex justify-end gap-3">
 							<Button
 								onClick={() => {
-									navigator.clipboard.writeText(newApiKey);
+									copy(newApiKey);
 									toast.success("API key copied to clipboard");
 								}}
 							>

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

@@ -12,8 +12,13 @@ import { ExternalLink, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { AddManager } from "./manager/add-manager";
 import { AddWorker } from "./workers/add-worker";
+import { AlertBlock } from "@/components/shared/alert-block";
 
-export const AddNode = () => {
+interface Props {
+	serverId?: string;
+}
+
+export const AddNode = ({ serverId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -44,6 +49,10 @@ export const AddNode = () => {
 							Architecture
 							<ExternalLink className="h-4 w-4" />
 						</Link>
+						<AlertBlock type="warning">
+							Make sure you use the same architecture as the node you are
+							adding.
+						</AlertBlock>
 					</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-2">
@@ -52,11 +61,11 @@ export const AddNode = () => {
 							<TabsTrigger value="worker">Worker</TabsTrigger>
 							<TabsTrigger value="manager">Manager</TabsTrigger>
 						</TabsList>
-						<TabsContent value="worker" className="pt-4">
+						<TabsContent value="worker" className="pt-4 overflow-hidden">
-							<AddWorker />
+							<AddWorker serverId={serverId} />
 						</TabsContent>
-						<TabsContent value="manager" className="pt-4">
+						<TabsContent value="manager" className="pt-4 overflow-hidden">
-							<AddManager />
+							<AddManager serverId={serverId} />
 						</TabsContent>
 					</Tabs>
 				</div>

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,60 +7,74 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
-export const AddManager = () => {
+interface Props {
-	const { data } = api.cluster.addManager.useQuery();
+	serverId?: string;
+}
+
+export const AddManager = ({ serverId }: Props) => {
+	const { data, isLoading, error, isError } = api.cluster.addManager.useQuery({
+		serverId,
+	});
 
 	return (
 		<>
-			<div>
+			<CardContent className="sm:max-w-4xl  flex flex-col gap-4 px-0">
-				<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+				<DialogHeader>
-					<DialogHeader>
+					<DialogTitle>Add a new manager</DialogTitle>
-						<DialogTitle>Add a new manager</DialogTitle>
+					<DialogDescription>Add a new manager</DialogDescription>
-						<DialogDescription>Add a new manager</DialogDescription>
+				</DialogHeader>
-					</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					<div className="flex flex-col gap-2.5 text-sm">
+				{isLoading ? (
-						<span>1. Go to your new server and run the following command</span>
+					<Loader2 className="w-full animate-spin text-muted-foreground" />
-						<span className="bg-muted rounded-lg p-2 flex justify-between">
+				) : (
-							curl https://get.docker.com | sh -s -- --version {data?.version}
+					<>
-							<button
+						<div className="flex flex-col gap-2.5 text-sm">
-								type="button"
+							<span>
-								className="self-center"
+								1. Go to your new server and run the following command
-								onClick={() => {
+							</span>
-									copy(
+							<span className="bg-muted rounded-lg p-2 flex justify-between">
-										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+								curl https://get.docker.com | sh -s -- --version {data?.version}
-									);
+								<button
-									toast.success("Copied to clipboard");
+									type="button"
-								}}
+									className="self-center"
-							>
+									onClick={() => {
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
+										copy(
-							</button>
+											`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-						</span>
+										);
-					</div>
+										toast.success("Copied to clipboard");
+									}}
+								>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
+								</button>
+							</span>
+						</div>
 
-					<div className="flex flex-col gap-2.5 text-sm">
+						<div className="flex flex-col gap-2.5 text-sm">
-						<span>
+							<span>
-							2. Run the following command to add the node(manager) to your
+								2. Run the following command to add the node(manager) to your
-							cluster
+								cluster
-						</span>
+							</span>
-						<span className="bg-muted rounded-lg p-2  flex">
+
-							{data?.command}
+							<span className="bg-muted rounded-lg p-2  flex">
-							<button
+								{data?.command}
-								type="button"
+								<button
-								className="self-start"
+									type="button"
-								onClick={() => {
+									className="self-start"
-									copy(data?.command || "");
+									onClick={() => {
-									toast.success("Copied to clipboard");
+										copy(data?.command || "");
-								}}
+										toast.success("Copied to clipboard");
-							>
+									}}
-								<CopyIcon className="h-4 w-4 cursor-pointer" />
+								>
-							</button>
+									<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</span>
+								</button>
-					</div>
+							</span>
-				</CardContent>
+						</div>
-			</div>
+					</>
+				)}
+			</CardContent>
 		</>
 	);
 };

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

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

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CardContent } from "@/components/ui/card";
 import {
 	DialogDescription,
@@ -6,58 +7,70 @@ import {
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 
-export const AddWorker = () => {
+interface Props {
-	const { data } = api.cluster.addWorker.useQuery();
+	serverId?: string;
+}
+
+export const AddWorker = ({ serverId }: Props) => {
+	const { data, isLoading, error, isError } = api.cluster.addWorker.useQuery({
+		serverId,
+	});
 
 	return (
-		<div>
+		<CardContent className="sm:max-w-4xl   flex flex-col gap-4 px-0">
-			<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+			<DialogHeader>
-				<DialogHeader>
+				<DialogTitle>Add a new worker</DialogTitle>
-					<DialogTitle>Add a new worker</DialogTitle>
+				<DialogDescription>Add a new worker</DialogDescription>
-					<DialogDescription>Add a new worker</DialogDescription>
+			</DialogHeader>
-				</DialogHeader>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<div className="flex flex-col gap-2.5 text-sm">
+			{isLoading ? (
-					<span>1. Go to your new server and run the following command</span>
+				<Loader2 className="w-full animate-spin text-muted-foreground" />
-					<span className="bg-muted rounded-lg p-2 flex justify-between">
+			) : (
-						curl https://get.docker.com | sh -s -- --version {data?.version}
+				<>
-						<button
+					<div className="flex flex-col gap-2.5 text-sm">
-							type="button"
+						<span>1. Go to your new server and run the following command</span>
-							className="self-center"
+						<span className="bg-muted rounded-lg p-2 flex justify-between">
-							onClick={() => {
+							curl https://get.docker.com | sh -s -- --version {data?.version}
-								copy(
+							<button
-									`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
+								type="button"
-								);
+								className="self-center"
-								toast.success("Copied to clipboard");
+								onClick={() => {
-							}}
+									copy(
-						>
+										`curl https://get.docker.com | sh -s -- --version ${data?.version}`,
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
+									);
-						</button>
+									toast.success("Copied to clipboard");
-					</span>
+								}}
-				</div>
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
 
-				<div className="flex flex-col gap-2.5 text-sm">
+					<div className="flex flex-col gap-2.5 text-sm">
-					<span>
+						<span>
-						2. Run the following command to add the node(worker) to your cluster
+							2. Run the following command to add the node(worker) to your
-					</span>
+							cluster
+						</span>
 
-					<span className="bg-muted rounded-lg p-2  flex">
+						<span className="bg-muted rounded-lg p-2  flex">
-						{data?.command}
+							{data?.command}
-						<button
+							<button
-							type="button"
+								type="button"
-							className="self-start"
+								className="self-start"
-							onClick={() => {
+								onClick={() => {
-								copy(data?.command || "");
+									copy(data?.command || "");
-								toast.success("Copied to clipboard");
+									toast.success("Copied to clipboard");
-							}}
+								}}
-						>
+							>
-							<CopyIcon className="h-4 w-4 cursor-pointer" />
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
-						</button>
+							</button>
-					</span>
+						</span>
-				</div>
+					</div>
-			</CardContent>
+				</>
-		</div>
+			)}
+		</CardContent>
 	);
 };

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

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

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

@@ -39,12 +39,12 @@ import { S3_PROVIDERS } from "./constants";
 
 const addDestination = z.object({
 	name: z.string().min(1, "Name is required"),
-	provider: z.string().optional(),
+	provider: z.string().min(1, "Provider is required"),
-	accessKeyId: z.string(),
+	accessKeyId: z.string().min(1, "Access Key Id is required"),
-	secretAccessKey: z.string(),
+	secretAccessKey: z.string().min(1, "Secret Access Key is required"),
-	bucket: z.string(),
+	bucket: z.string().min(1, "Bucket is required"),
 	region: z.string(),
-	endpoint: z.string(),
+	endpoint: z.string().min(1, "Endpoint is required"),
 	serverId: z.string().optional(),
 });
 
@@ -129,6 +129,63 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 				);
 			});
 	};
+
+	const handleTestConnection = async (serverId?: string) => {
+		const result = await form.trigger([
+			"provider",
+			"accessKeyId",
+			"secretAccessKey",
+			"bucket",
+			"endpoint",
+		]);
+
+		if (!result) {
+			const errors = form.formState.errors;
+			const errorFields = Object.entries(errors)
+				.map(([field, error]) => `${field}: ${error?.message}`)
+				.filter(Boolean)
+				.join("\n");
+
+			toast.error("Please fill all required fields", {
+				description: errorFields,
+			});
+			return;
+		}
+
+		if (isCloud && !serverId) {
+			toast.error("Please select a server");
+			return;
+		}
+
+		const provider = form.getValues("provider");
+		const accessKey = form.getValues("accessKeyId");
+		const secretKey = form.getValues("secretAccessKey");
+		const bucket = form.getValues("bucket");
+		const endpoint = form.getValues("endpoint");
+		const region = form.getValues("region");
+
+		const connectionString = `:s3,provider=${provider},access_key_id=${accessKey},secret_access_key=${secretKey},endpoint=${endpoint}${region ? `,region=${region}` : ""}:${bucket}`;
+
+		await testConnection({
+			provider,
+			accessKey,
+			bucket,
+			endpoint,
+			name: "Test",
+			region,
+			secretAccessKey: secretKey,
+			serverId,
+		})
+			.then(() => {
+				toast.success("Connection Success");
+			})
+			.catch((e) => {
+				toast.error("Error connecting to provider", {
+					description: `${e.message}\n\nTry manually: rclone ls ${connectionString}`,
+				});
+			});
+	};
+
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="" asChild>
@@ -349,26 +406,9 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 								<Button
 									type="button"
 									variant={"secondary"}
-									isLoading={isLoading}
+									isLoading={isLoadingConnection}
 									onClick={async () => {
-										await testConnection({
+										await handleTestConnection(form.getValues("serverId"));
-											provider: form.getValues("provider") || "",
-											accessKey: form.getValues("accessKeyId"),
-											bucket: form.getValues("bucket"),
-											endpoint: form.getValues("endpoint"),
-											name: "Test",
-											region: form.getValues("region"),
-											secretAccessKey: form.getValues("secretAccessKey"),
-											serverId: form.getValues("serverId"),
-										})
-											.then(async () => {
-												toast.success("Connection Success");
-											})
-											.catch((e) => {
-												toast.error("Error connecting the provider", {
-													description: e.message,
-												});
-											});
 									}}
 								>
 									Test Connection
@@ -380,21 +420,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 								type="button"
 								variant="secondary"
 								onClick={async () => {
-									await testConnection({
+									await handleTestConnection();
-										provider: form.getValues("provider") || "",
-										accessKey: form.getValues("accessKeyId"),
-										bucket: form.getValues("bucket"),
-										endpoint: form.getValues("endpoint"),
-										name: "Test",
-										region: form.getValues("region"),
-										secretAccessKey: form.getValues("secretAccessKey"),
-									})
-										.then(async () => {
-											toast.success("Connection Success");
-										})
-										.catch(() => {
-											toast.error("Error connecting the provider");
-										});
 								}}
 							>
 								Test connection

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

@@ -56,9 +56,17 @@ export const ShowDestinations = () => {
 													className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
 												>
 													<div className="flex items-center justify-between  p-3.5 rounded-lg bg-background border  w-full">
-														<span className="text-sm">
+														<div className="flex flex-col gap-1">
-															{index + 1}. {destination.name}
+															<span className="text-sm">
-														</span>
+																{index + 1}. {destination.name}
+															</span>
+															<span className="text-xs text-muted-foreground">
+																Created at:{" "}
+																{new Date(
+																	destination.createdAt,
+																).toLocaleDateString()}
+															</span>
+														</div>
 														<div className="flex flex-row gap-1">
 															<HandleDestinations
 																destinationId={destination.destinationId}

apps/dokploy/components/dashboard/settings/handle-ai.tsx

@@ -45,21 +45,12 @@ const Schema = z.object({
 
 type Schema = z.infer<typeof Schema>;
 
-interface Model {
-	id: string;
-	object: string;
-	created: number;
-	owned_by: string;
-}
-
 interface Props {
 	aiId?: string;
 }
 
 export const HandleAi = ({ aiId }: Props) => {
-	const [models, setModels] = useState<Model[]>([]);
 	const utils = api.useUtils();
-	const [isLoadingModels, setIsLoadingModels] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const [open, setOpen] = useState(false);
 	const { data, refetch } = api.ai.one.useQuery(
@@ -73,6 +64,7 @@ export const HandleAi = ({ aiId }: Props) => {
 	const { mutateAsync, isLoading } = aiId
 		? api.ai.update.useMutation()
 		: api.ai.create.useMutation();
+
 	const form = useForm<Schema>({
 		resolver: zodResolver(Schema),
 		defaultValues: {
@@ -94,50 +86,33 @@ export const HandleAi = ({ aiId }: Props) => {
 		});
 	}, [aiId, form, data]);
 
-	const fetchModels = async (apiUrl: string, apiKey: string) => {
+	const apiUrl = form.watch("apiUrl");
-		setIsLoadingModels(true);
+	const apiKey = form.watch("apiKey");
-		setError(null);
-		try {
-			const response = await fetch(`${apiUrl}/models`, {
-				headers: {
-					Authorization: `Bearer ${apiKey}`,
-				},
-			});
-			if (!response.ok) {
-				throw new Error("Failed to fetch models");
-			}
-			const res = await response.json();
-			setModels(res.data);
 
-			// Set default model to gpt-4 if present
+	const { data: models, isLoading: isLoadingServerModels } =
-			const defaultModel = res.data.find(
+		api.ai.getModels.useQuery(
-				(model: Model) => model.id === "gpt-4",
+			{
-			);
+				apiUrl: apiUrl ?? "",
-			if (defaultModel) {
+				apiKey: apiKey ?? "",
-				form.setValue("model", defaultModel.id);
+			},
-				return defaultModel.id;
+			{
-			}
+				enabled: !!apiUrl && !!apiKey,
-		} catch (error) {
+				onError: (error) => {
-			setError("Failed to fetch models. Please check your API URL and Key.");
+					setError(`Failed to fetch models: ${error.message}`);
-			setModels([]);
+				},
-		} finally {
+			},
-			setIsLoadingModels(false);
+		);
-		}
-	};
 
 	useEffect(() => {
 		const apiUrl = form.watch("apiUrl");
 		const apiKey = form.watch("apiKey");
 		if (apiUrl && apiKey) {
 			form.setValue("model", "");
-			fetchModels(apiUrl, apiKey);
 		}
 	}, [form.watch("apiUrl"), form.watch("apiKey")]);
 
 	const onSubmit = async (data: Schema) => {
 		try {
-			console.log("Form data:", data);
-			console.log("Current model value:", form.getValues("model"));
 			await mutateAsync({
 				...data,
 				aiId: aiId || "",
@@ -148,8 +123,9 @@ export const HandleAi = ({ aiId }: Props) => {
 			refetch();
 			setOpen(false);
 		} catch (error) {
-			console.error("Submit error:", error);
+			toast.error("Failed to save AI settings", {
-			toast.error("Failed to save AI settings");
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
 		}
 	};
 
@@ -232,13 +208,13 @@ export const HandleAi = ({ aiId }: Props) => {
 							)}
 						/>
 
-						{isLoadingModels && (
+						{isLoadingServerModels && (
 							<span className="text-sm text-muted-foreground">
 								Loading models...
 							</span>
 						)}
 
-						{!isLoadingModels && models.length > 0 && (
+						{!isLoadingServerModels && models && models.length > 0 && (
 							<FormField
 								control={form.control}
 								name="model"

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

@@ -663,13 +663,16 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 																{...field}
 																onChange={(e) => {
 																	const value = e.target.value;
-																	if (value) {
+																	if (value === "") {
+																		field.onChange(undefined);
+																	} else {
 																		const port = Number.parseInt(value);
 																		if (port > 0 && port < 65536) {
 																			field.onChange(port);
 																		}
 																	}
 																}}
+																value={field.value || ""}
 																type="number"
 															/>
 														</FormControl>

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

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

@@ -59,15 +59,17 @@ 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}>
+					<ShowModalLogs
+						appName="dokploy-traefik"
+						serverId={serverId}
+						type="standalone"
+					>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}
 							className="cursor-pointer"
@@ -108,15 +110,6 @@ 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,6 +42,7 @@ 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");
@@ -328,6 +329,9 @@ export const ShowServers = () => {
 																						<ShowSwarmOverviewModal
 																							serverId={server.serverId}
 																						/>
+																						<ShowNodesModal
+																							serverId={server.serverId}
+																						/>
 																					</>
 																				)}
 																			</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx

@@ -112,15 +112,17 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 				toast.error("Error generating the SSH Key");
 			});
 
-	const downloadKey = (
+	const downloadKey = (content: string, keyType: "private" | "public") => {
-		content: string,
-		defaultFilename: string,
-		keyType: "private" | "public",
-	) => {
 		const keyName = form.watch("name");
+		const publicKey = form.watch("publicKey");
+
+		// Extract algorithm type from public key
+		const isEd25519 = publicKey.startsWith("ssh-ed25519");
+		const defaultName = isEd25519 ? "id_ed25519" : "id_rsa";
+
 		const filename = keyName
-			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultFilename}`
+			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultName}${keyType === "public" ? ".pub" : ""}`
-			: `${keyType}_${defaultFilename}`;
+			: `${defaultName}${keyType === "public" ? ".pub" : ""}`;
 		const blob = new Blob([content], { type: "text/plain" });
 		const url = window.URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -273,7 +275,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 										variant="outline"
 										size="default"
 										onClick={() =>
-											downloadKey(form.watch("privateKey"), "id_rsa", "private")
+											downloadKey(form.watch("privateKey"), "private")
 										}
 										className="flex items-center gap-2"
 									>
@@ -287,11 +289,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 										variant="outline"
 										size="default"
 										onClick={() =>
-											downloadKey(
+											downloadKey(form.watch("publicKey"), "public")
-												form.watch("publicKey"),
-												"id_rsa.pub",
-												"public",
-											)
 										}
 										className="flex items-center gap-2"
 									>

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"]),
+		certificateType: z.enum(["letsencrypt", "none", "custom"]),
 	})
 	.superRefine((data, ctx) => {
 		if (data.certificateType === "letsencrypt" && !data.letsEncryptEmail) {
@@ -193,6 +193,7 @@ 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,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -23,6 +24,7 @@ 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(
 	() =>
@@ -109,7 +111,10 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}) {container.state}
+									{container.name} ({container.containerId}){" "}
+									<Badge variant={badgeStateColor(container.state)}>
+										{container.state}
+									</Badge>
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>

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

@@ -19,13 +19,6 @@ 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";
@@ -44,7 +37,6 @@ 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({
@@ -88,7 +80,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 	}, [currentPorts, form]);
 
 	const handleAddPort = () => {
-		append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
+		append({ targetPort: 0, publishedPort: 0 });
 	};
 
 	const onSubmit = async (data: TraefikPortsForm) => {
@@ -99,9 +91,7 @@ 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 (
@@ -154,7 +144,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_1.5fr_auto] gap-4 p-4 transparent">
+													<CardContent className="grid grid-cols-[1fr_1fr_auto] gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -169,9 +159,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
+																			onChange={(e) => {
-																				field.onChange(Number(e.target.value))
+																				const value = e.target.value;
-																			}
+																				field.onChange(
+																					value === ""
+																						? undefined
+																						: Number(value),
+																				);
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 8080"
 																		/>
@@ -195,9 +191,15 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																		<Input
 																			type="number"
 																			{...field}
-																			onChange={(e) =>
+																			onChange={(e) => {
-																				field.onChange(Number(e.target.value))
+																				const value = e.target.value;
-																			}
+																				field.onChange(
+																					value === ""
+																						? undefined
+																						: Number(value),
+																				);
+																			}}
+																			value={field.value || ""}
 																			className="w-full dark:bg-black"
 																			placeholder="e.g. 80"
 																		/>
@@ -207,39 +209,6 @@ 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)}
@@ -263,30 +232,23 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 											<span className="text-sm">
 												<strong>
 													Each port mapping defines how external traffic reaches
-													your containers.
+													your containers through Traefik.
 												</strong>
 												<ul className="pt-2">
 													<li>
-														<strong>Host Mode:</strong> Directly binds the port
+														<strong>Target Port:</strong> The port inside your
-														to the host machine.
+														container that the service is listening on.
-														<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>Ingress Mode:</strong> Routes through Docker
+														<strong>Published Port:</strong> The port on your
-														Swarm's load balancer.
+														host machine that will be mapped to the target port.
-														<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,6 +21,8 @@ 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(
 	() =>
@@ -36,13 +38,20 @@ interface Props {
 	appName: string;
 	children?: React.ReactNode;
 	serverId?: string;
+	type?: "standalone" | "swarm";
 }
 
-export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
+export const ShowModalLogs = ({
+	appName,
+	children,
+	serverId,
+	type = "swarm",
+}: Props) => {
 	const { data, isLoading } = api.docker.getContainersByAppLabel.useQuery(
 		{
 			appName,
 			serverId,
+			type,
 		},
 		{
 			enabled: !!appName,
@@ -83,7 +92,10 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 										key={container.containerId}
 										value={container.containerId}
 									>
-										{container.name} ({container.containerId}) {container.state}
+										{container.name} ({container.containerId}){" "}
+										<Badge variant={badgeStateColor(container.state)}>
+											{container.state}
+										</Badge>
 									</SelectItem>
 								))}
 								<SelectLabel>Containers ({data?.length})</SelectLabel>

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

@@ -5,6 +5,12 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import type { IUpdateData } from "@dokploy/server/index";
 import {
@@ -24,9 +30,17 @@ import { UpdateWebServer } from "./update-webserver";
 
 interface Props {
 	updateData?: IUpdateData;
+	children?: React.ReactNode;
+	isOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
 }
 
-export const UpdateServer = ({ updateData }: Props) => {
+export const UpdateServer = ({
+	updateData,
+	children,
+	isOpen: isOpenProp,
+	onOpenChange: onOpenChangeProp,
+}: Props) => {
 	const [hasCheckedUpdate, setHasCheckedUpdate] = useState(!!updateData);
 	const [isUpdateAvailable, setIsUpdateAvailable] = useState(
 		!!updateData?.updateAvailable,
@@ -35,10 +49,10 @@ export const UpdateServer = ({ updateData }: Props) => {
 		api.settings.getUpdateData.useMutation();
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 	const { data: releaseTag } = api.settings.getReleaseTag.useQuery();
-	const [isOpen, setIsOpen] = useState(false);
 	const [latestVersion, setLatestVersion] = useState(
 		updateData?.latestVersion ?? "",
 	);
+	const [isOpenInternal, setIsOpenInternal] = useState(false);
 
 	const handleCheckUpdates = async () => {
 		try {
@@ -65,28 +79,52 @@ export const UpdateServer = ({ updateData }: Props) => {
 		}
 	};
 
+	const isOpen = isOpenInternal || isOpenProp;
+	const onOpenChange = (open: boolean) => {
+		setIsOpenInternal(open);
+		onOpenChangeProp?.(open);
+	};
+
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
 			<DialogTrigger asChild>
-				<Button
+				{children ? (
-					variant={updateData ? "outline" : "secondary"}
+					children
-					className="gap-2"
+				) : (
-				>
+					<TooltipProvider delayDuration={0}>
-					{updateData ? (
+						<Tooltip>
-						<>
+							<TooltipTrigger asChild>
-							<span className="flex h-2 w-2">
+								<Button
-								<span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75" />
+									variant={updateData ? "outline" : "secondary"}
-								<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+									size="sm"
-							</span>
+									onClick={() => onOpenChange?.(true)}
-							Update available
+								>
-						</>
+									<Download className="h-4 w-4 flex-shrink-0" />
-					) : (
+									{updateData ? (
-						<>
+										<span className="font-medium truncate group-data-[collapsible=icon]:hidden">
-							<Sparkles className="h-4 w-4" />
+											Update Available
-							Updates
+										</span>
-						</>
+									) : (
-					)}
+										<span className="font-medium truncate group-data-[collapsible=icon]:hidden">
-				</Button>
+											Check for updates
+										</span>
+									)}
+									{updateData && (
+										<span className="absolute right-2 flex h-2 w-2 group-data-[collapsible=icon]:hidden">
+											<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+											<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+										</span>
+									)}
+								</Button>
+							</TooltipTrigger>
+							{updateData && (
+								<TooltipContent side="right" sideOffset={10}>
+									<p>Update Available</p>
+								</TooltipContent>
+							)}
+						</Tooltip>
+					</TooltipProvider>
+				)}
 			</DialogTrigger>
 			<DialogContent className="max-w-lg p-6">
 				<div className="flex items-center justify-between mb-8">
@@ -217,7 +255,7 @@ export const UpdateServer = ({ updateData }: Props) => {
 
 				<div className="space-y-4 flex items-center justify-end">
 					<div className="flex items-center gap-2">
-						<Button variant="outline" onClick={() => setIsOpen(false)}>
+						<Button variant="outline" onClick={() => onOpenChange?.(false)}>
 							Cancel
 						</Button>
 						{isUpdateAvailable ? (

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

@@ -0,0 +1,119 @@
+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

@@ -0,0 +1,20 @@
+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="flex flex-row gap-4">
+				<div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
 					{nodes.map((node) => (
 						<NodeCard key={node.ID} node={node} serverId={serverId} />
 					))}

apps/dokploy/components/layouts/side.tsx

@@ -37,8 +37,6 @@ import {
 	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import {
 	Collapsible,
@@ -498,7 +496,6 @@ 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 {
@@ -774,6 +771,7 @@ 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();
@@ -910,7 +908,7 @@ export default function Page({ children }: Props) {
 					</SidebarGroup>
 					<SidebarGroup>
 						<SidebarGroupLabel>Settings</SidebarGroupLabel>
-						<SidebarMenu className="gap-2">
+						<SidebarMenu className="gap-1">
 							{filteredSettings.map((item) => {
 								const isSingle = item.isSingle !== false;
 								const isActive = isSingle
@@ -1017,21 +1015,29 @@ export default function Page({ children }: Props) {
 									</SidebarMenuButton>
 								</SidebarMenuItem>
 							))}
-							{!isCloud && auth?.role === "owner" && (
-								<SidebarMenuItem>
-									<SidebarMenuButton asChild>
-										<UpdateServerButton />
-									</SidebarMenuButton>
-								</SidebarMenuItem>
-							)}
 						</SidebarMenu>
 					</SidebarGroup>
 				</SidebarContent>
 				<SidebarFooter>
-					<SidebarMenu>
+					<SidebarMenu className="flex flex-col gap-2">
+						{!isCloud && auth?.role === "owner" && (
+							<SidebarMenuItem>
+								<UpdateServerButton />
+							</SidebarMenuItem>
+						)}
 						<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 />
@@ -1055,10 +1061,6 @@ export default function Page({ children }: Props) {
 												</Link>
 											</BreadcrumbLink>
 										</BreadcrumbItem>
-										<BreadcrumbSeparator className="block" />
-										<BreadcrumbItem>
-											<BreadcrumbPage>{activeItem?.title}</BreadcrumbPage>
-										</BreadcrumbItem>
 									</BreadcrumbList>
 								</Breadcrumb>
 							</div>
@@ -1066,7 +1068,7 @@ export default function Page({ children }: Props) {
 					</header>
 				)}
 
-				<div className="flex flex-col w-full gap-4 p-4 pt-0">{children}</div>
+				<div className="flex flex-col w-full p-4 pt-0">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);

apps/dokploy/components/layouts/update-server.tsx

@@ -3,7 +3,14 @@ import type { IUpdateData } from "@dokploy/server/index";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import UpdateServer from "../dashboard/settings/web-server/update-server";
-
+import { Button } from "../ui/button";
+import { Download } from "lucide-react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "../ui/tooltip";
 const AUTO_CHECK_UPDATES_INTERVAL_MINUTES = 7;
 
 export const UpdateServerButton = () => {
@@ -15,6 +22,7 @@ export const UpdateServerButton = () => {
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { mutateAsync: getUpdateData } =
 		api.settings.getUpdateData.useMutation();
+	const [isOpen, setIsOpen] = useState(false);
 
 	const checkUpdatesIntervalRef = useRef<null | NodeJS.Timeout>(null);
 
@@ -69,11 +77,47 @@ export const UpdateServerButton = () => {
 		};
 	}, []);
 
-	return (
+	return updateData.updateAvailable ? (
-		updateData.updateAvailable && (
+		<div className="border-t pt-4">
-			<div>
+			<UpdateServer
-				<UpdateServer updateData={updateData} />
+				updateData={updateData}
-			</div>
+				isOpen={isOpen}
-		)
+				onOpenChange={setIsOpen}
-	);
+			>
+				<TooltipProvider delayDuration={0}>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant={updateData ? "outline" : "secondary"}
+								className="w-full"
+								onClick={() => setIsOpen(true)}
+							>
+								<Download className="h-4 w-4 flex-shrink-0" />
+								{updateData ? (
+									<span className="font-medium truncate group-data-[collapsible=icon]:hidden">
+										Update Available
+									</span>
+								) : (
+									<span className="font-medium truncate group-data-[collapsible=icon]:hidden">
+										Check for updates
+									</span>
+								)}
+								{updateData && (
+									<span className="absolute right-2 flex h-2 w-2 group-data-[collapsible=icon]:hidden">
+										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+										<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+									</span>
+								)}
+							</Button>
+						</TooltipTrigger>
+						{updateData && (
+							<TooltipContent side="right" sideOffset={10}>
+								<p>Update Available</p>
+							</TooltipContent>
+						)}
+					</Tooltip>
+				</TooltipProvider>
+			</UpdateServer>
+		</div>
+	) : null;
 };

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -37,7 +37,9 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 											)}
 										</BreadcrumbLink>
 									</BreadcrumbItem>
-									<BreadcrumbSeparator className="block" />
+									{_index + 1 < list.length && (
+										<BreadcrumbSeparator className="block" />
+									)}
 								</Fragment>
 							))}
 						</BreadcrumbList>

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

@@ -9,6 +9,116 @@ 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;
@@ -45,6 +155,11 @@ export const CodeEditor = ({
 								? StreamLanguage.define(shell)
 								: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
+					language === "yaml"
+						? autocompletion({
+								override: [dockerComposeComplete],
+							})
+						: [],
 				]}
 				{...props}
 				editable={!props.disabled}
@@ -55,7 +170,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)]" />
+				<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>
 	);

apps/dokploy/components/ui/calendar.tsx

@@ -0,0 +1,68 @@
+import type * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: CalendarProps) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+				day: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft className={cn("h-4 w-4", className)} {...props} />
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight className={cn("h-4 w-4", className)} {...props} />
+				),
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

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-input",
+			"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",
 			className,
 		)}
 		{...props}

apps/dokploy/drizzle/0070_useful_serpent_society.sql

@@ -0,0 +1 @@
+ALTER TABLE "destination" ADD COLUMN "createdAt" timestamp DEFAULT now() NOT NULL;

apps/dokploy/drizzle/0071_flaky_black_queen.sql

@@ -0,0 +1 @@
+ALTER TABLE "user_temp" ADD COLUMN "logCleanupCron" text;

apps/dokploy/drizzle/0072_green_susan_delgado.sql

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

apps/dokploy/drizzle/0073_hot_domino.sql

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

apps/dokploy/drizzle/0074_black_quasar.sql

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

apps/dokploy/drizzle/0075_young_typhoid_mary.sql

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

apps/dokploy/drizzle/0076_young_sharon_ventura.sql

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