feat(applications): add support for Docker build secrets

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

.github/workflows/dokploy.yml

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

.github/workflows/format.yml

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

@@ -52,7 +52,7 @@ feat: add new feature
 
 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.
 
-We use Node v20.9.0 and recommend this specific version. If you have nvm installed, you can run `nvm install 20.9.0 && nvm use` in the root directory.
+We use Node v20.9.0
 
 ```bash
 git clone https://github.com/dokploy/dokploy.git
@@ -61,9 +61,9 @@ pnpm install
 cp apps/dokploy/.env.example apps/dokploy/.env
 ```
 
-## Requirements
+## Development
 
-- [Docker](/GUIDES.md#docker)
+Is required to have **Docker** installed on your machine.
 
 ### Setup
 
@@ -87,8 +87,6 @@ pnpm run dokploy:dev
 
 Go to http://localhost:3000 to see the development server
 
-Note: this project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
-
 ## Build
 
 ```bash
@@ -147,9 +145,11 @@ curl -sSL https://railpack.com/install.sh | sh
 
 ```bash
 # Install Buildpacks
-curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.35.0-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
+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.
@@ -165,7 +165,86 @@ Thank you for your contribution!
 
 ## Templates
 
-To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
+To add a new template, go to `templates` folder and create a new folder with the name of the template.
+
+Let's take the example of `plausible` template.
+
+1. create a folder in `templates/plausible`
+2. create a `docker-compose.yml` file inside the folder with the content of compose.
+3. create a `index.ts` file inside the folder with the following code as base:
+4. When creating a pull request, please provide a video of the template working in action.
+
+```typescript
+// EXAMPLE
+import {
+  generateBase64,
+  generateHash,
+  generateRandomDomain,
+  type Template,
+  type Schema,
+  type DomainSchema,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+  // do your stuff here, like create a new domain, generate random passwords, mounts.
+  const mainServiceHash = generateHash(schema.projectName);
+  const mainDomain = generateRandomDomain(schema);
+  const secretBase = generateBase64(64);
+  const toptKeyBase = generateBase64(32);
+
+  const domains: DomainSchema[] = [
+    {
+      host: mainDomain,
+      port: 8000,
+      serviceName: "plausible",
+    },
+  ];
+
+  const envs = [
+    `BASE_URL=http://${mainDomain}`,
+    `SECRET_KEY_BASE=${secretBase}`,
+    `TOTP_VAULT_KEY=${toptKeyBase}`,
+    `HASH=${mainServiceHash}`,
+  ];
+
+  const mounts: Template["mounts"] = [
+    {
+      filePath: "./clickhouse/clickhouse-config.xml",
+      content: "some content......",
+    },
+  ];
+
+  return {
+    envs,
+    mounts,
+    domains,
+  };
+}
+```
+
+4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
+
+**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
+
+```typescript
+{
+	id: "plausible",
+	name: "Plausible",
+	version: "v2.1.0",
+	description:
+		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
+	logo: "plausible.svg", // we defined the name and the extension of the logo
+	links: {
+		github: "https://github.com/plausible/plausible",
+		website: "https://plausible.io/",
+		docs: "https://plausible.io/docs",
+	},
+	tags: ["analytics"],
+	load: () => import("./plausible/index").then((m) => m.generate),
+},
+```
+
+5. Add the logo or image of the template to `public/templates/plausible.svg`
 
 ### Recommendations
 

Dockerfile

@@ -29,7 +29,7 @@ WORKDIR /app
 # Set production
 ENV NODE_ENV=production
 
-RUN apt-get update && apt-get install -y curl unzip zip apache2-utils iproute2 rsync && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next
@@ -49,14 +49,14 @@ RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm
 # Install Nixpacks and tsx
 # | VERBOSE=1 VERSION=1.21.0 bash
 
-ARG NIXPACKS_VERSION=1.35.0
+ARG NIXPACKS_VERSION=1.29.1
 RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && chmod +x install.sh \
     && ./install.sh \
     && pnpm install -g tsx
 
 # Install Railpack
-ARG RAILPACK_VERSION=0.0.64
+ARG RAILPACK_VERSION=0.0.37
 RUN curl -sSL https://railpack.com/install.sh | bash
 
 # Install buildpacks

GUIDES.md

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

LICENSE.MD

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

README.md

@@ -80,30 +80,12 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 ### Premium Supporters 🥇
 
-<div style="display: flex; align-items: center; gap: 20px;">
-  <a href="https://supafort.com/?ref=dokploy" target="_blank" style="display: inline-block; margin-right: 20px;">
-    <img src="https://supafort.com/build/q-4Ht4rBZR.webp" alt="Supafort.com" height="50"/>
-  </a>
-
-  <a href="https://agentdock.ai/?ref=dokploy" target="_blank" style="display: inline-block; margin-right: 50px;">
-    <img src=".github/sponsors/agentdock.png" alt="agentdock.ai" height="70"/>
-  </a>
-
+<div style="display: flex; gap: 30px; flex-wrap: wrap;">
+<a href="https://supafort.com/?ref=dokploy" target="_blank"><img src="https://supafort.com/build/q-4Ht4rBZR.webp" alt="Supafort.com" width="190"/></a>
 </div>
 
-### Elite Contributors 🥈
-
-<div style="display: flex; align-items: center; gap: 20px;">
-
-  <a href="https://americancloud.com/?ref=dokploy" target="_blank" style="display: inline-block; padding: 10px; border-radius: 10px;">
-    <img src=".github/sponsors/american-cloud.png" alt="AmericanCloud" height="70"/>
-  </a>
-
-</div>
 <!-- Elite Contributors 🥈 -->
 
-
-
 <!-- Add Elite Contributors here -->
 
 ### Supporting Members 🥉
@@ -115,7 +97,6 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 <a href="https://itsdb-center.com?ref=dokploy "><img src=".github/sponsors/its.png" width="65px" alt="Itsdb-center"/></a>
 <a href="https://openalternative.co/?ref=dokploy "><img src=".github/sponsors/openalternative.png" width="65px" alt="Openalternative"/></a>
 <a href="https://synexa.ai/?ref=dokploy"><img src=".github/sponsors/synexa.png" width="65px" alt="Synexa"/></a>
-
 </div>
 
 

apps/dokploy/CONTRIBUTING.md

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

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

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

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

@@ -1006,7 +1006,7 @@ services:
 
 volumes:
   db-config-testhash:
-`);
+`) as ComposeSpecification;
 
 test("Expect to change the suffix in all the possible places (4 Try)", () => {
 	const composeData = load(composeFileComplex) as ComposeSpecification;
@@ -1115,60 +1115,3 @@ test("Expect to change the suffix in all the possible places (5 Try)", () => {
 
 	expect(updatedComposeData).toEqual(expectedDockerComposeExample1);
 });
-
-const composeFileBackrest = `
-services:
-  backrest:
-    image: garethgeorge/backrest:v1.7.3
-    restart: unless-stopped
-    ports:
-      - 9898
-    environment:
-      - BACKREST_PORT=9898
-      - BACKREST_DATA=/data
-      - BACKREST_CONFIG=/config/config.json
-      - XDG_CACHE_HOME=/cache
-      - TZ=\${TZ}
-    volumes:
-      - backrest/data:/data
-      - backrest/config:/config
-      - backrest/cache:/cache
-      - /:/userdata:ro
-
-volumes:
-  backrest:
-  backrest-cache:
-`;
-
-const expectedDockerComposeBackrest = load(`
-services:
-  backrest:
-    image: garethgeorge/backrest:v1.7.3
-    restart: unless-stopped
-    ports:
-      - 9898
-    environment:
-      - BACKREST_PORT=9898
-      - BACKREST_DATA=/data
-      - BACKREST_CONFIG=/config/config.json
-      - XDG_CACHE_HOME=/cache
-      - TZ=\${TZ}
-    volumes:
-      - backrest-testhash/data:/data
-      - backrest-testhash/config:/config
-      - backrest-testhash/cache:/cache
-      - /:/userdata:ro
-
-volumes:
-  backrest-testhash:
-  backrest-cache-testhash:
-`) as ComposeSpecification;
-
-test("Should handle volume paths with subdirectories correctly", () => {
-	const composeData = load(composeFileBackrest) as ComposeSpecification;
-	const suffix = "testhash";
-
-	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
-
-	expect(updatedComposeData).toEqual(expectedDockerComposeBackrest);
-});

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

@@ -27,16 +27,7 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
-	giteaBranch: "",
-	giteaBuildPath: "",
-	giteaId: "",
-	giteaOwner: "",
-	giteaRepository: "",
-	cleanCache: false,
-	watchPaths: [],
-	enableSubmodules: false,
 	applicationStatus: "done",
-	triggerType: "push",
 	appName: "",
 	autoDeploy: true,
 	serverId: "",
@@ -46,7 +37,6 @@ const baseApp: ApplicationNested = {
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
 	previewCertificateType: "none",
-	previewCustomCertResolver: null,
 	previewEnv: null,
 	previewHttps: false,
 	previewPath: "/",

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

@@ -1,497 +0,0 @@
-import type { Schema } from "@dokploy/server/templates";
-import type { CompleteTemplate } from "@dokploy/server/templates/processors";
-import { processTemplate } from "@dokploy/server/templates/processors";
-import { describe, expect, it } from "vitest";
-
-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);
-		});
-
-		it("should allow creation of real jwt secret", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {
-					jwt_secret: "cQsdycq1hDLopQonF6jUTqgQc5WEZTwWLL02J6XJ",
-					anon_payload: JSON.stringify({
-						role: "tester",
-						iss: "dockploy",
-						iat: "${timestamps:2025-01-01T00:00:00Z}",
-						exp: "${timestamps:2030-01-01T00:00:00Z}",
-					}),
-					anon_key: "${jwt:jwt_secret:anon_payload}",
-				},
-				config: {
-					domains: [],
-					env: {
-						ANON_KEY: "${anon_key}",
-					},
-				},
-			};
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(1);
-			expect(result.envs).toContain(
-				"ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNzM1Njg5NjAwIiwiZXhwIjoiMTg5MzQ1NjAwMCIsInJvbGUiOiJ0ZXN0ZXIiLCJpc3MiOiJkb2NrcGxveSJ9.BG5JoxL2_NaTFbPgyZdm3kRWenf_O3su_HIRKGCJ_kY",
-			);
-			expect(result.mounts).toHaveLength(0);
-			expect(result.domains).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);
-		});
-
-		it("should handle boolean values in env vars when provided as an array", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [],
-					env: [
-						"ENABLE_USER_SIGN_UP=false",
-						"DEBUG_MODE=true",
-						"SOME_NUMBER=42",
-					],
-					mounts: [],
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(3);
-			expect(result.envs).toContain("ENABLE_USER_SIGN_UP=false");
-			expect(result.envs).toContain("DEBUG_MODE=true");
-			expect(result.envs).toContain("SOME_NUMBER=42");
-		});
-
-		it("should handle boolean values in env vars when provided as an object", () => {
-			const template: CompleteTemplate = {
-				metadata: {} as any,
-				variables: {},
-				config: {
-					domains: [],
-					env: {
-						ENABLE_USER_SIGN_UP: false,
-						DEBUG_MODE: true,
-						SOME_NUMBER: 42,
-					},
-				},
-			};
-
-			const result = processTemplate(template, mockSchema);
-			expect(result.envs).toHaveLength(3);
-			expect(result.envs).toContain("ENABLE_USER_SIGN_UP=false");
-			expect(result.envs).toContain("DEBUG_MODE=true");
-			expect(result.envs).toContain("SOME_NUMBER=42");
-		});
-	});
-
-	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__/templates/helpers.template.test.ts

@@ -1,232 +0,0 @@
-import type { Schema } from "@dokploy/server/templates";
-import { processValue } from "@dokploy/server/templates/processors";
-import { describe, expect, it } from "vitest";
-
-describe("helpers functions", () => {
-	// Mock schema for testing
-	const mockSchema: Schema = {
-		projectName: "test",
-		serverIp: "127.0.0.1",
-	};
-	// some helpers to test jwt
-	type JWTParts = [string, string, string];
-	const jwtMatchExp = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
-	const jwtBase64Decode = (str: string) => {
-		const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
-		const padding = "=".repeat((4 - (base64.length % 4)) % 4);
-		const decoded = Buffer.from(base64 + padding, "base64").toString("utf-8");
-		return JSON.parse(decoded);
-	};
-	const jwtCheckHeader = (jwtHeader: string) => {
-		const decodedHeader = jwtBase64Decode(jwtHeader);
-		expect(decodedHeader).toHaveProperty("alg");
-		expect(decodedHeader).toHaveProperty("typ");
-		expect(decodedHeader.alg).toEqual("HS256");
-		expect(decodedHeader.typ).toEqual("JWT");
-	};
-
-	describe("${domain}", () => {
-		it("should generate a random domain", () => {
-			const domain = processValue("${domain}", {}, mockSchema);
-			expect(domain.startsWith(`${mockSchema.projectName}-`)).toBeTruthy();
-			expect(
-				domain.endsWith(
-					`${mockSchema.serverIp.replaceAll(".", "-")}.traefik.me`,
-				),
-			).toBeTruthy();
-		});
-	});
-
-	describe("${base64}", () => {
-		it("should generate a base64 string", () => {
-			const base64 = processValue("${base64}", {}, mockSchema);
-			expect(base64).toMatch(/^[A-Za-z0-9+=/]+={0,2}$/);
-		});
-		it.each([
-			[4, 8],
-			[8, 12],
-			[16, 24],
-			[32, 44],
-			[64, 88],
-			[128, 172],
-		])(
-			"should generate a base64 string from parameter %d bytes length",
-			(length, finalLength) => {
-				const base64 = processValue(`\${base64:${length}}`, {}, mockSchema);
-				expect(base64).toMatch(/^[A-Za-z0-9+=/]+={0,2}$/);
-				expect(base64.length).toBe(finalLength);
-			},
-		);
-	});
-
-	describe("${password}", () => {
-		it("should generate a password string", () => {
-			const password = processValue("${password}", {}, mockSchema);
-			expect(password).toMatch(/^[A-Za-z0-9]+$/);
-		});
-		it.each([6, 8, 12, 16, 32])(
-			"should generate a password string respecting parameter %d length",
-			(length) => {
-				const password = processValue(`\${password:${length}}`, {}, mockSchema);
-				expect(password).toMatch(/^[A-Za-z0-9]+$/);
-				expect(password.length).toBe(length);
-			},
-		);
-	});
-
-	describe("${hash}", () => {
-		it("should generate a hash string", () => {
-			const hash = processValue("${hash}", {}, mockSchema);
-			expect(hash).toMatch(/^[A-Za-z0-9]+$/);
-		});
-		it.each([6, 8, 12, 16, 32])(
-			"should generate a hash string respecting parameter %d length",
-			(length) => {
-				const hash = processValue(`\${hash:${length}}`, {}, mockSchema);
-				expect(hash).toMatch(/^[A-Za-z0-9]+$/);
-				expect(hash.length).toBe(length);
-			},
-		);
-	});
-
-	describe("${uuid}", () => {
-		it("should generate a UUID string", () => {
-			const uuid = processValue("${uuid}", {}, mockSchema);
-			expect(uuid).toMatch(
-				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/,
-			);
-		});
-	});
-
-	describe("${timestamp}", () => {
-		it("should generate a timestamp string in milliseconds", () => {
-			const timestamp = processValue("${timestamp}", {}, mockSchema);
-			const nowLength = Math.floor(Date.now()).toString().length;
-			expect(timestamp).toMatch(/^\d+$/);
-			expect(timestamp.length).toBe(nowLength);
-		});
-	});
-	describe("${timestampms}", () => {
-		it("should generate a timestamp string in milliseconds", () => {
-			const timestamp = processValue("${timestampms}", {}, mockSchema);
-			const nowLength = Date.now().toString().length;
-			expect(timestamp).toMatch(/^\d+$/);
-			expect(timestamp.length).toBe(nowLength);
-		});
-		it("should generate a timestamp string in milliseconds from parameter", () => {
-			const timestamp = processValue(
-				"${timestampms:2025-01-01}",
-				{},
-				mockSchema,
-			);
-			expect(timestamp).toEqual("1735689600000");
-		});
-	});
-	describe("${timestamps}", () => {
-		it("should generate a timestamp string in seconds", () => {
-			const timestamps = processValue("${timestamps}", {}, mockSchema);
-			const nowLength = Math.floor(Date.now() / 1000).toString().length;
-			expect(timestamps).toMatch(/^\d+$/);
-			expect(timestamps.length).toBe(nowLength);
-		});
-		it("should generate a timestamp string in seconds from parameter", () => {
-			const timestamps = processValue(
-				"${timestamps:2025-01-01}",
-				{},
-				mockSchema,
-			);
-			expect(timestamps).toEqual("1735689600");
-		});
-	});
-
-	describe("${randomPort}", () => {
-		it("should generate a random port string", () => {
-			const randomPort = processValue("${randomPort}", {}, mockSchema);
-			expect(randomPort).toMatch(/^\d+$/);
-			expect(Number(randomPort)).toBeLessThan(65536);
-		});
-	});
-
-	describe("${username}", () => {
-		it("should generate a username string", () => {
-			const username = processValue("${username}", {}, mockSchema);
-			expect(username).toMatch(/^[a-zA-Z0-9._-]{3,}$/);
-		});
-	});
-
-	describe("${email}", () => {
-		it("should generate an email string", () => {
-			const email = processValue("${email}", {}, mockSchema);
-			expect(email).toMatch(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
-		});
-	});
-
-	describe("${jwt}", () => {
-		it("should generate a JWT string", () => {
-			const jwt = processValue("${jwt}", {}, mockSchema);
-			expect(jwt).toMatch(jwtMatchExp);
-			const parts = jwt.split(".") as JWTParts;
-			const decodedPayload = jwtBase64Decode(parts[1]);
-			jwtCheckHeader(parts[0]);
-			expect(decodedPayload).toHaveProperty("iat");
-			expect(decodedPayload).toHaveProperty("iss");
-			expect(decodedPayload).toHaveProperty("exp");
-			expect(decodedPayload.iss).toEqual("dokploy");
-		});
-		it.each([6, 8, 12, 16, 32])(
-			"should generate a random hex string from parameter %d byte length",
-			(length) => {
-				const jwt = processValue(`\${jwt:${length}}`, {}, mockSchema);
-				expect(jwt).toMatch(/^[A-Za-z0-9-_.]+$/);
-				expect(jwt.length).toBeGreaterThanOrEqual(length); // bytes translated to hex can take up to 2x the length
-				expect(jwt.length).toBeLessThanOrEqual(length * 2);
-			},
-		);
-	});
-	describe("${jwt:secret}", () => {
-		it("should generate a JWT string respecting parameter secret from variable", () => {
-			const jwt = processValue(
-				"${jwt:secret}",
-				{ secret: "mysecret" },
-				mockSchema,
-			);
-			expect(jwt).toMatch(jwtMatchExp);
-			const parts = jwt.split(".") as JWTParts;
-			const decodedPayload = jwtBase64Decode(parts[1]);
-			jwtCheckHeader(parts[0]);
-			expect(decodedPayload).toHaveProperty("iat");
-			expect(decodedPayload).toHaveProperty("iss");
-			expect(decodedPayload).toHaveProperty("exp");
-			expect(decodedPayload.iss).toEqual("dokploy");
-		});
-	});
-	describe("${jwt:secret:payload}", () => {
-		it("should generate a JWT string respecting parameters secret and payload from variables", () => {
-			const iat = Math.floor(new Date("2025-01-01T00:00:00Z").getTime() / 1000);
-			const expiry = iat + 3600;
-			const jwt = processValue(
-				"${jwt:secret:payload}",
-				{
-					secret: "mysecret",
-					payload: `{"iss": "test-issuer", "iat": ${iat}, "exp": ${expiry}, "customprop": "customvalue"}`,
-				},
-				mockSchema,
-			);
-			expect(jwt).toMatch(jwtMatchExp);
-			const parts = jwt.split(".") as JWTParts;
-			jwtCheckHeader(parts[0]);
-			const decodedPayload = jwtBase64Decode(parts[1]);
-			expect(decodedPayload).toHaveProperty("iat");
-			expect(decodedPayload.iat).toEqual(iat);
-			expect(decodedPayload).toHaveProperty("iss");
-			expect(decodedPayload.iss).toEqual("test-issuer");
-			expect(decodedPayload).toHaveProperty("exp");
-			expect(decodedPayload.exp).toEqual(expiry);
-			expect(decodedPayload).toHaveProperty("customprop");
-			expect(decodedPayload.customprop).toEqual("customvalue");
-			expect(jwt).toEqual(
-				"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MzU2ODk2MDAsImV4cCI6MTczNTY5MzIwMCwiaXNzIjoidGVzdC1pc3N1ZXIiLCJjdXN0b21wcm9wIjoiY3VzdG9tdmFsdWUifQ.m42U7PZSUSCf7gBOJrxJir0rQmyPq4rA59Dydr_QahI",
-			);
-		});
-	});
-});

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

@@ -14,10 +14,7 @@ import {
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: User = {
-	https: false,
 	enablePaidFeatures: false,
-	allowImpersonation: false,
-	role: "user",
 	metricsConfig: {
 		containers: {
 			refreshRate: 20,
@@ -76,6 +73,7 @@ beforeEach(() => {
 
 test("Should read the configuration file", () => {
 	const config: FileConfig = loadOrCreateConfig("dokploy");
+
 	expect(config.http?.routers?.["dokploy-router-app"]?.service).toBe(
 		"dokploy-service-app",
 	);
@@ -85,7 +83,6 @@ test("Should apply redirect-to-https", () => {
 	updateServerTraefik(
 		{
 			...baseAdmin,
-			https: true,
 			certificateType: "letsencrypt",
 		},
 		"example.com",

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

@@ -7,32 +7,22 @@ import { expect, test } from "vitest";
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
-	giteaRepository: "",
-	giteaOwner: "",
-	giteaBranch: "",
-	giteaBuildPath: "",
-	giteaId: "",
-	cleanCache: false,
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
-	enableSubmodules: false,
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",
 	registryUrl: "",
-	watchPaths: [],
 	buildArgs: null,
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
-	triggerType: "push",
 	previewCertificateType: "none",
 	previewEnv: null,
 	previewHttps: false,
 	previewPath: "/",
 	previewPort: 3000,
 	previewLimit: 0,
-	previewCustomCertResolver: null,
 	previewWildcard: "",
 	project: {
 		env: "",
@@ -113,7 +103,6 @@ const baseDomain: Domain = {
 	port: null,
 	serviceName: "",
 	composeId: "",
-	customCertResolver: null,
 	domainType: "application",
 	uniqueConfigKey: 1,
 	previewDeploymentId: "",

apps/dokploy/__test__/utils/backups.test.ts

@@ -1,61 +0,0 @@
-import { describe, expect, test } from "vitest";
-import { normalizeS3Path } from "@dokploy/server/utils/backups/utils";
-
-describe("normalizeS3Path", () => {
-	test("should handle empty and whitespace-only prefix", () => {
-		expect(normalizeS3Path("")).toBe("");
-		expect(normalizeS3Path("/")).toBe("");
-		expect(normalizeS3Path("  ")).toBe("");
-		expect(normalizeS3Path("\t")).toBe("");
-		expect(normalizeS3Path("\n")).toBe("");
-		expect(normalizeS3Path(" \n \t ")).toBe("");
-	});
-
-	test("should trim whitespace from prefix", () => {
-		expect(normalizeS3Path(" prefix")).toBe("prefix/");
-		expect(normalizeS3Path("prefix ")).toBe("prefix/");
-		expect(normalizeS3Path(" prefix ")).toBe("prefix/");
-		expect(normalizeS3Path("\tprefix\t")).toBe("prefix/");
-		expect(normalizeS3Path(" prefix/nested ")).toBe("prefix/nested/");
-	});
-
-	test("should remove leading slashes", () => {
-		expect(normalizeS3Path("/prefix")).toBe("prefix/");
-		expect(normalizeS3Path("///prefix")).toBe("prefix/");
-	});
-
-	test("should remove trailing slashes", () => {
-		expect(normalizeS3Path("prefix/")).toBe("prefix/");
-		expect(normalizeS3Path("prefix///")).toBe("prefix/");
-	});
-
-	test("should remove both leading and trailing slashes", () => {
-		expect(normalizeS3Path("/prefix/")).toBe("prefix/");
-		expect(normalizeS3Path("///prefix///")).toBe("prefix/");
-	});
-
-	test("should handle nested paths", () => {
-		expect(normalizeS3Path("prefix/nested")).toBe("prefix/nested/");
-		expect(normalizeS3Path("/prefix/nested/")).toBe("prefix/nested/");
-		expect(normalizeS3Path("///prefix/nested///")).toBe("prefix/nested/");
-	});
-
-	test("should preserve middle slashes", () => {
-		expect(normalizeS3Path("prefix/nested/deep")).toBe("prefix/nested/deep/");
-		expect(normalizeS3Path("/prefix/nested/deep/")).toBe("prefix/nested/deep/");
-	});
-
-	test("should handle special characters", () => {
-		expect(normalizeS3Path("prefix-with-dashes")).toBe("prefix-with-dashes/");
-		expect(normalizeS3Path("prefix_with_underscores")).toBe(
-			"prefix_with_underscores/",
-		);
-		expect(normalizeS3Path("prefix.with.dots")).toBe("prefix.with.dots/");
-	});
-
-	test("should handle the cases from the bug report", () => {
-		expect(normalizeS3Path("instance-backups/")).toBe("instance-backups/");
-		expect(normalizeS3Path("/instance-backups/")).toBe("instance-backups/");
-		expect(normalizeS3Path("instance-backups")).toBe("instance-backups/");
-	});
-});

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

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

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

@@ -1,347 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-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";
-
-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/build/show.tsx

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -21,7 +20,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-export enum BuildType {
+enum BuildType {
 	dockerfile = "dockerfile",
 	heroku_buildpacks = "heroku_buildpacks",
 	paketo_buildpacks = "paketo_buildpacks",
@@ -30,18 +29,9 @@ export enum BuildType {
 	railpack = "railpack",
 }
 
-const buildTypeDisplayMap: Record<BuildType, string> = {
-	[BuildType.dockerfile]: "Dockerfile",
-	[BuildType.railpack]: "Railpack",
-	[BuildType.nixpacks]: "Nixpacks",
-	[BuildType.heroku_buildpacks]: "Heroku Buildpacks",
-	[BuildType.paketo_buildpacks]: "Paketo Buildpacks",
-	[BuildType.static]: "Static",
-};
-
 const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
-		buildType: z.literal(BuildType.dockerfile),
+		buildType: z.literal("dockerfile"),
 		dockerfile: z
 			.string({
 				required_error: "Dockerfile path is required",
@@ -52,88 +42,39 @@ const mySchema = z.discriminatedUnion("buildType", [
 		dockerBuildStage: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.heroku_buildpacks),
+		buildType: z.literal("heroku_buildpacks"),
 		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.paketo_buildpacks),
+		buildType: z.literal("paketo_buildpacks"),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.nixpacks),
+		buildType: z.literal("nixpacks"),
 		publishDirectory: z.string().optional(),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.static),
+		buildType: z.literal("static"),
 	}),
 	z.object({
-		buildType: z.literal(BuildType.railpack),
+		buildType: z.literal("railpack"),
 	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
-
 interface Props {
 	applicationId: string;
 }
 
-interface ApplicationData {
-	buildType: BuildType;
-	dockerfile?: string | null;
-	dockerContextPath?: string | null;
-	dockerBuildStage?: string | null;
-	herokuVersion?: string | null;
-	publishDirectory?: string | null;
-}
-
-function isValidBuildType(value: string): value is BuildType {
-	return Object.values(BuildType).includes(value as BuildType);
-}
-
-const resetData = (data: ApplicationData): AddTemplate => {
-	switch (data.buildType) {
-		case BuildType.dockerfile:
-			return {
-				buildType: BuildType.dockerfile,
-				dockerfile: data.dockerfile || "",
-				dockerContextPath: data.dockerContextPath || "",
-				dockerBuildStage: data.dockerBuildStage || "",
-			};
-		case BuildType.heroku_buildpacks:
-			return {
-				buildType: BuildType.heroku_buildpacks,
-				herokuVersion: data.herokuVersion || "",
-			};
-		case BuildType.nixpacks:
-			return {
-				buildType: BuildType.nixpacks,
-				publishDirectory: data.publishDirectory || undefined,
-			};
-		case BuildType.paketo_buildpacks:
-			return {
-				buildType: BuildType.paketo_buildpacks,
-			};
-		case BuildType.static:
-			return {
-				buildType: BuildType.static,
-			};
-		case BuildType.railpack:
-			return {
-				buildType: BuildType.railpack,
-			};
-		default:
-			const buildType = data.buildType as BuildType;
-			return {
-				buildType,
-			} as AddTemplate;
-	}
-};
-
 export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	const { mutateAsync, isLoading } =
 		api.application.saveBuildType.useMutation();
 	const { data, refetch } = api.application.one.useQuery(
-		{ applicationId },
-		{ enabled: !!applicationId },
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
 	);
 
 	const form = useForm<AddTemplate>({
@@ -144,36 +85,46 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	});
 
 	const buildType = form.watch("buildType");
-
 	useEffect(() => {
 		if (data) {
-			const typedData: ApplicationData = {
-				...data,
-				buildType: isValidBuildType(data.buildType)
-					? (data.buildType as BuildType)
-					: BuildType.nixpacks, // fallback
-			};
-
-			form.reset(resetData(typedData));
+			if (data.buildType === "dockerfile") {
+				form.reset({
+					buildType: data.buildType,
+					...(data.buildType && {
+						dockerfile: data.dockerfile || "",
+						dockerContextPath: data.dockerContextPath || "",
+						dockerBuildStage: data.dockerBuildStage || "",
+					}),
+				});
+			} else if (data.buildType === "heroku_buildpacks") {
+				form.reset({
+					buildType: data.buildType,
+					...(data.buildType && {
+						herokuVersion: data.herokuVersion || "",
+					}),
+				});
+			} else {
+				form.reset({
+					buildType: data.buildType,
+					publishDirectory: data.publishDirectory || undefined,
+				});
+			}
 		}
-	}, [data, form]);
+	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
 
 	const onSubmit = async (data: AddTemplate) => {
 		await mutateAsync({
 			applicationId,
 			buildType: data.buildType,
 			publishDirectory:
-				data.buildType === BuildType.nixpacks ? data.publishDirectory : null,
-			dockerfile:
-				data.buildType === BuildType.dockerfile ? data.dockerfile : null,
+				data.buildType === "nixpacks" ? data.publishDirectory : null,
+			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
 			dockerContextPath:
-				data.buildType === BuildType.dockerfile ? data.dockerContextPath : null,
+				data.buildType === "dockerfile" ? data.dockerContextPath : null,
 			dockerBuildStage:
-				data.buildType === BuildType.dockerfile ? data.dockerBuildStage : null,
+				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
 			herokuVersion:
-				data.buildType === BuildType.heroku_buildpacks
-					? data.herokuVersion
-					: null,
+				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -201,22 +152,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<Form {...form}>
-					<AlertBlock>
-						Builders can consume significant memory and CPU resources
-						(recommended: 4+ GB RAM and 2+ CPU cores). For production
-						environments, please review our{" "}
-						<a
-							href="https://docs.dokploy.com/docs/core/applications/going-production"
-							target="_blank"
-							rel="noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							Production Guide
-						</a>{" "}
-						for best practices and optimization recommendations. Builders are
-						suitable for development and prototyping purposes when you have
-						sufficient resources available.
-					</AlertBlock>
 					<form
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-4 p-2"
@@ -225,143 +160,193 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 							control={form.control}
 							name="buildType"
 							defaultValue={form.control._defaultValues.buildType}
-							render={({ field }) => (
-								<FormItem className="space-y-3">
-									<FormLabel>Build Type</FormLabel>
-									<FormControl>
-										<RadioGroup
-											onValueChange={field.onChange}
-											value={field.value}
-											className="flex flex-col space-y-1"
-										>
-											{Object.entries(buildTypeDisplayMap).map(
-												([value, label]) => (
-													<FormItem
-														key={value}
-														className="flex items-center space-x-3 space-y-0"
-													>
-														<FormControl>
-															<RadioGroupItem value={value} />
-														</FormControl>
-														<FormLabel className="font-normal">
-															{label}
-															{value === BuildType.railpack && (
-																<Badge className="ml-2 px-1 text-xs">New</Badge>
-															)}
-														</FormLabel>
-													</FormItem>
-												),
-											)}
-										</RadioGroup>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{buildType === BuildType.heroku_buildpacks && (
-							<FormField
-								control={form.control}
-								name="herokuVersion"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Heroku Version (Optional)</FormLabel>
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-3">
+										<FormLabel>Build Type</FormLabel>
 										<FormControl>
-											<Input
-												placeholder="Heroku Version (Default: 24)"
-												{...field}
-												value={field.value ?? ""}
-											/>
+											<RadioGroup
+												onValueChange={field.onChange}
+												value={field.value}
+												className="flex flex-col space-y-1"
+											>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="dockerfile" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Dockerfile
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="railpack" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Railpack{" "}
+														<Badge className="ml-1 text-xs px-1">New</Badge>
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="nixpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Nixpacks
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="heroku_buildpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Heroku Buildpacks
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="paketo_buildpacks" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Paketo Buildpacks
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="static" />
+													</FormControl>
+													<FormLabel className="font-normal">Static</FormLabel>
+												</FormItem>
+											</RadioGroup>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
-								)}
+								);
+							}}
+						/>
+						{buildType === "heroku_buildpacks" && (
+							<FormField
+								control={form.control}
+								name="herokuVersion"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Heroku Version (Optional)</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"Heroku Version (Default: 24)"}
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
 							/>
 						)}
-						{buildType === BuildType.dockerfile && (
+						{buildType === "dockerfile" && (
 							<>
 								<FormField
 									control={form.control}
 									name="dockerfile"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Docker File</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="Path of your docker file"
-													{...field}
-													value={field.value ?? ""}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Docker File</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={"Path of your docker file"}
+														{...field}
+														value={field.value ?? ""}
+													/>
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										);
+									}}
 								/>
+
 								<FormField
 									control={form.control}
 									name="dockerContextPath"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Docker Context Path</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="Path of your docker context (default: .)"
-													{...field}
-													value={field.value ?? ""}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Docker Context Path</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={
+															"Path of your docker context default: ."
+														}
+														{...field}
+														value={field.value ?? ""}
+													/>
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										);
+									}}
 								/>
+
 								<FormField
 									control={form.control}
 									name="dockerBuildStage"
-									render={({ field }) => (
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<div className="space-y-0.5">
+													<FormLabel>Docker Build Stage</FormLabel>
+													<FormDescription>
+														Allows you to target a specific stage in a
+														Multi-stage Dockerfile. If empty, Docker defaults to
+														build the last defined stage.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Input
+														placeholder={"E.g. production"}
+														{...field}
+														value={field.value ?? ""}
+													/>
+												</FormControl>
+											</FormItem>
+										);
+									}}
+								/>
+							</>
+						)}
+
+						{buildType === "nixpacks" && (
+							<FormField
+								control={form.control}
+								name="publishDirectory"
+								render={({ field }) => {
+									return (
 										<FormItem>
 											<div className="space-y-0.5">
-												<FormLabel>Docker Build Stage</FormLabel>
+												<FormLabel>Publish Directory</FormLabel>
 												<FormDescription>
-													Allows you to target a specific stage in a Multi-stage
-													Dockerfile. If empty, Docker defaults to build the
-													last defined stage.
+													Allows you to serve a single directory via NGINX after
+													the build phase. Useful if the final build assets
+													should be served as a static site.
 												</FormDescription>
 											</div>
 											<FormControl>
 												<Input
-													placeholder="E.g. production"
+													placeholder={"Publish Directory"}
 													{...field}
 													value={field.value ?? ""}
 												/>
 											</FormControl>
+
+											<FormMessage />
 										</FormItem>
-									)}
-								/>
-							</>
-						)}
-						{buildType === BuildType.nixpacks && (
-							<FormField
-								control={form.control}
-								name="publishDirectory"
-								render={({ field }) => (
-									<FormItem>
-										<div className="space-y-0.5">
-											<FormLabel>Publish Directory</FormLabel>
-											<FormDescription>
-												Allows you to serve a single directory via NGINX after
-												the build phase. Useful if the final build assets should
-												be served as a static site.
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Input
-												placeholder="Publish Directory"
-												{...field}
-												value={field.value ?? ""}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
+									);
+								}}
 							/>
 						)}
 						<div className="flex w-full justify-end">

apps/dokploy/components/dashboard/application/deployments/cancel-queues.tsx

@@ -15,15 +15,11 @@ import { Paintbrush } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-	id: string;
-	type: "application" | "compose";
+	applicationId: string;
 }
 
-export const CancelQueues = ({ id, type }: Props) => {
-	const { mutateAsync, isLoading } =
-		type === "application"
-			? api.application.cleanQueues.useMutation()
-			: api.compose.cleanQueues.useMutation();
+export const CancelQueues = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.cleanQueues.useMutation();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	if (isCloud) {
@@ -52,8 +48,7 @@ export const CancelQueues = ({ id, type }: Props) => {
 					<AlertDialogAction
 						onClick={async () => {
 							await mutateAsync({
-								applicationId: id || "",
-								composeId: id || "",
+								applicationId,
 							})
 								.then(() => {
 									toast.success("Queues are being cleaned");

apps/dokploy/components/dashboard/application/deployments/refresh-token.tsx

@@ -14,14 +14,10 @@ import { RefreshCcw } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-	id: string;
-	type: "application" | "compose";
+	applicationId: string;
 }
-export const RefreshToken = ({ id, type }: Props) => {
-	const { mutateAsync } =
-		type === "application"
-			? api.application.refreshToken.useMutation()
-			: api.compose.refreshToken.useMutation();
+export const RefreshToken = ({ applicationId }: Props) => {
+	const { mutateAsync } = api.application.refreshToken.useMutation();
 	const utils = api.useUtils();
 	return (
 		<AlertDialog>
@@ -41,19 +37,12 @@ export const RefreshToken = ({ id, type }: Props) => {
 					<AlertDialogAction
 						onClick={async () => {
 							await mutateAsync({
-								applicationId: id || "",
-								composeId: id || "",
+								applicationId,
 							})
 								.then(() => {
-									if (type === "application") {
-										utils.application.one.invalidate({
-											applicationId: id,
-										});
-									} else {
-										utils.compose.one.invalidate({
-											composeId: id,
-										});
-									}
+									utils.application.one.invalidate({
+										applicationId,
+									});
 									toast.success("Refresh updated");
 								})
 								.catch(() => {

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

@@ -1,69 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-
-import type { RouterOutputs } from "@/utils/api";
-import { useState } from "react";
-import { ShowDeployment } from "../deployments/show-deployment";
-import { ShowDeployments } from "./show-deployments";
-
-interface Props {
-	id: string;
-	type:
-		| "application"
-		| "compose"
-		| "schedule"
-		| "server"
-		| "backup"
-		| "previewDeployment";
-	serverId?: string;
-	refreshToken?: string;
-	children?: React.ReactNode;
-}
-
-export const formatDuration = (seconds: number) => {
-	if (seconds < 60) return `${seconds}s`;
-	const minutes = Math.floor(seconds / 60);
-	const remainingSeconds = seconds % 60;
-	return `${minutes}m ${remainingSeconds}s`;
-};
-
-export const ShowDeploymentsModal = ({
-	id,
-	type,
-	serverId,
-	refreshToken,
-	children,
-}: Props) => {
-	const [activeLog, setActiveLog] = useState<
-		RouterOutputs["deployment"]["all"][number] | null
-	>(null);
-	const [isOpen, setIsOpen] = useState(false);
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				{children ? (
-					children
-				) : (
-					<Button className="sm:w-auto w-full" size="sm" variant="outline">
-						View Logs
-					</Button>
-				)}
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl p-0">
-				<ShowDeployments
-					id={id}
-					type={type}
-					serverId={serverId}
-					refreshToken={refreshToken}
-				/>
-			</DialogContent>
-			<ShowDeployment
-				serverId={serverId || ""}
-				open={Boolean(activeLog && activeLog.logPath !== null)}
-				onClose={() => setActiveLog(null)}
-				logPath={activeLog?.logPath || ""}
-				errorMessage={activeLog?.errorMessage || ""}
-			/>
-		</Dialog>
-	);
-};

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

@@ -9,53 +9,28 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { RocketIcon, Clock, Loader2 } from "lucide-react";
+import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
-import { Badge } from "@/components/ui/badge";
 
 interface Props {
-	id: string;
-	type:
-		| "application"
-		| "compose"
-		| "schedule"
-		| "server"
-		| "backup"
-		| "previewDeployment";
-	refreshToken?: string;
-	serverId?: string;
+	applicationId: string;
 }
 
-export const formatDuration = (seconds: number) => {
-	if (seconds < 60) return `${seconds}s`;
-	const minutes = Math.floor(seconds / 60);
-	const remainingSeconds = seconds % 60;
-	return `${minutes}m ${remainingSeconds}s`;
-};
-
-export const ShowDeployments = ({
-	id,
-	type,
-	refreshToken,
-	serverId,
-}: Props) => {
+export const ShowDeployments = ({ applicationId }: Props) => {
 	const [activeLog, setActiveLog] = useState<
 		RouterOutputs["deployment"]["all"][number] | null
 	>(null);
-	const { data: deployments, isLoading: isLoadingDeployments } =
-		api.deployment.allByType.useQuery(
-			{
-				id,
-				type,
-			},
-			{
-				enabled: !!id,
-				refetchInterval: 1000,
-			},
-		);
+	const { data } = api.application.one.useQuery({ applicationId });
+	const { data: deployments } = api.deployment.all.useQuery(
+		{ applicationId },
+		{
+			enabled: !!applicationId,
+			refetchInterval: 1000,
+		},
+	);
 
 	const [url, setUrl] = React.useState("");
 	useEffect(() => {
@@ -63,48 +38,34 @@ export const ShowDeployments = ({
 	}, []);
 
 	return (
-		<Card className="bg-background border-none">
+		<Card className="bg-background">
 			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
 				<div className="flex flex-col gap-2">
 					<CardTitle className="text-xl">Deployments</CardTitle>
 					<CardDescription>
-						See all the 10 last deployments for this {type}
+						See all the 10 last deployments for this application
 					</CardDescription>
 				</div>
-				{(type === "application" || type === "compose") && (
-					<CancelQueues id={id} type={type} />
-				)}
+				<CancelQueues applicationId={applicationId} />
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				{refreshToken && (
-					<div className="flex flex-col gap-2 text-sm">
-						<span>
-							If you want to re-deploy this application use this URL in the
-							config of your git provider or docker
-						</span>
-						<div className="flex flex-row items-center gap-2 flex-wrap">
-							<span>Webhook URL: </span>
-							<div className="flex flex-row items-center gap-2">
-								<span className="break-all text-muted-foreground">
-									{`${url}/api/deploy${type === "compose" ? "/compose" : ""}/${refreshToken}`}
-								</span>
-								{(type === "application" || type === "compose") && (
-									<RefreshToken id={id} type={type} />
-								)}
-							</div>
+				<div className="flex flex-col gap-2 text-sm">
+					<span>
+						If you want to re-deploy this application use this URL in the config
+						of your git provider or docker
+					</span>
+					<div className="flex flex-row items-center gap-2 flex-wrap">
+						<span>Webhook URL: </span>
+						<div className="flex flex-row items-center gap-2">
+							<span className="break-all text-muted-foreground">
+								{`${url}/api/deploy/${data?.refreshToken}`}
+							</span>
+							<RefreshToken applicationId={applicationId} />
 						</div>
 					</div>
-				)}
-
-				{isLoadingDeployments ? (
-					<div className="flex w-full flex-row items-center justify-center gap-3 pt-10 min-h-[25vh]">
-						<Loader2 className="size-6 text-muted-foreground animate-spin" />
-						<span className="text-base text-muted-foreground">
-							Loading deployments...
-						</span>
-					</div>
-				) : deployments?.length === 0 ? (
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10 min-h-[25vh]">
+				</div>
+				{data?.deployments?.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 						<RocketIcon className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
 							No deployments found
@@ -135,23 +96,8 @@ export const ShowDeployments = ({
 									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
-									<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
+									<div className="text-sm capitalize text-muted-foreground">
 										<DateTooltip date={deployment.createdAt} />
-										{deployment.startedAt && deployment.finishedAt && (
-											<Badge
-												variant="outline"
-												className="text-[10px] gap-1 flex items-center"
-											>
-												<Clock className="size-3" />
-												{formatDuration(
-													Math.floor(
-														(new Date(deployment.finishedAt).getTime() -
-															new Date(deployment.startedAt).getTime()) /
-															1000,
-													),
-												)}
-											</Badge>
-										)}
 									</div>
 
 									<Button
@@ -167,7 +113,7 @@ export const ShowDeployments = ({
 					</div>
 				)}
 				<ShowDeployment
-					serverId={serverId}
+					serverId={data?.serverId || ""}
 					open={Boolean(activeLog && activeLog.logPath !== null)}
 					onClose={() => setActiveLog(null)}
 					logPath={activeLog?.logPath || ""}

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

@@ -0,0 +1,301 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input, NumberInput } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import { domain } from "@/server/db/validations/domain";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dices } from "lucide-react";
+import type z from "zod";
+
+type Domain = z.infer<typeof domain>;
+
+interface Props {
+	applicationId: string;
+	domainId?: string;
+	children: React.ReactNode;
+}
+
+export const AddDomain = ({
+	applicationId,
+	domainId = "",
+	children,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { data, refetch } = api.domain.one.useQuery(
+		{
+			domainId,
+		},
+		{
+			enabled: !!domainId,
+		},
+	);
+
+	const { data: application } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const { mutateAsync, isError, error, isLoading } = domainId
+		? api.domain.update.useMutation()
+		: api.domain.create.useMutation();
+
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
+	const form = useForm<Domain>({
+		resolver: zodResolver(domain),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				...data,
+				/* Convert null to undefined */
+				path: data?.path || undefined,
+				port: data?.port || undefined,
+			});
+		}
+
+		if (!domainId) {
+			form.reset({});
+		}
+	}, [form, form.reset, data, isLoading]);
+
+	const dictionary = {
+		success: domainId ? "Domain Updated" : "Domain Created",
+		error: domainId ? "Error updating the domain" : "Error creating the domain",
+		submit: domainId ? "Update" : "Create",
+		dialogDescription: domainId
+			? "In this section you can edit a domain"
+			: "In this section you can add domains",
+	};
+
+	const onSubmit = async (data: Domain) => {
+		await mutateAsync({
+			domainId,
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success(dictionary.success);
+				await utils.domain.byApplicationId.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({ applicationId });
+
+				if (domainId) {
+					refetch();
+				}
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error(dictionary.error);
+			});
+	};
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger className="" asChild>
+				{children}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Domain</DialogTitle>
+					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host</FormLabel>
+											<div className="flex gap-2">
+												<FormControl>
+													<Input placeholder="api.dokploy.com" {...field} />
+												</FormControl>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingGenerate}
+																onClick={() => {
+																	generateDomain({
+																		appName: application?.appName || "",
+																		serverId: application?.serverId || "",
+																	})
+																		.then((domain) => {
+																			field.onChange(domain);
+																		})
+																		.catch((err) => {
+																			toast.error(err.message);
+																		});
+																}}
+															>
+																<Dices className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>Generate traefik.me domain</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="path"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Path</FormLabel>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormControl>
+													<NumberInput placeholder={"3000"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+
+								{form.getValues().https && (
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate Provider</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate provider" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Let's Encrypt
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button isLoading={isLoading} form="hook-form" type="submit">
+							{dictionary.submit}
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx

@@ -1,109 +0,0 @@
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Copy, HelpCircle, Server } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	domain: {
-		host: string;
-		https: boolean;
-		path?: string;
-	};
-	serverIp?: string;
-}
-
-export const DnsHelperModal = ({ domain, serverIp }: Props) => {
-	const copyToClipboard = (text: string) => {
-		navigator.clipboard.writeText(text);
-		toast.success("Copied to clipboard!");
-	};
-
-	return (
-		<Dialog>
-			<DialogTrigger>
-				<Button variant="ghost" size="icon" className="group">
-					<HelpCircle className="size-4" />
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
-				<DialogHeader>
-					<DialogTitle className="flex items-center gap-2">
-						<Server className="size-5" />
-						DNS Configuration Guide
-					</DialogTitle>
-					<DialogDescription>
-						Follow these steps to configure your DNS records for {domain.host}
-					</DialogDescription>
-				</DialogHeader>
-
-				<div className="flex flex-col gap-4">
-					<AlertBlock type="info">
-						To make your domain accessible, you need to configure your DNS
-						records with your domain provider (e.g., Cloudflare, GoDaddy,
-						NameCheap).
-					</AlertBlock>
-
-					<div className="flex flex-col gap-6">
-						<div className="rounded-lg border p-4">
-							<h3 className="font-medium mb-2">1. Add A Record</h3>
-							<div className="flex flex-col gap-3">
-								<p className="text-sm text-muted-foreground">
-									Create an A record that points your domain to the server's IP
-									address:
-								</p>
-								<div className="flex flex-col gap-2">
-									<div className="flex items-center justify-between gap-2 bg-muted p-3 rounded-md">
-										<div>
-											<p className="text-sm font-medium">Type: A</p>
-											<p className="text-sm">
-												Name: @ or {domain.host.split(".")[0]}
-											</p>
-											<p className="text-sm">
-												Value: {serverIp || "Your server IP"}
-											</p>
-										</div>
-										<Button
-											variant="ghost"
-											size="icon"
-											onClick={() => copyToClipboard(serverIp || "")}
-											disabled={!serverIp}
-										>
-											<Copy className="size-4" />
-										</Button>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div className="rounded-lg border p-4">
-							<h3 className="font-medium mb-2">2. Verify Configuration</h3>
-							<div className="flex flex-col gap-3">
-								<p className="text-sm text-muted-foreground">
-									After configuring your DNS records:
-								</p>
-								<ul className="list-disc list-inside space-y-1 text-sm">
-									<li>Wait for DNS propagation (usually 15-30 minutes)</li>
-									<li>
-										Test your domain by visiting:{" "}
-										{domain.https ? "https://" : "http://"}
-										{domain.host}
-										{domain.path || "/"}
-									</li>
-									<li>Use a DNS lookup tool to verify your records</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,596 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, NumberInput } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import Link from "next/link";
-import z from "zod";
-
-export type CacheType = "fetch" | "cache";
-
-export const domain = z
-	.object({
-		host: z.string().min(1, { message: "Add a hostname" }),
-		path: z.string().min(1).optional(),
-		port: z
-			.number()
-			.min(1, { message: "Port must be at least 1" })
-			.max(65535, { message: "Port must be 65535 or below" })
-			.optional(),
-		https: z.boolean().optional(),
-		certificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
-		customCertResolver: z.string().optional(),
-		serviceName: z.string().optional(),
-		domainType: z.enum(["application", "compose", "preview"]).optional(),
-	})
-	.superRefine((input, ctx) => {
-		if (input.https && !input.certificateType) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				path: ["certificateType"],
-				message: "Required",
-			});
-		}
-
-		if (input.certificateType === "custom" && !input.customCertResolver) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				path: ["customCertResolver"],
-				message: "Required",
-			});
-		}
-
-		if (input.domainType === "compose" && !input.serviceName) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				path: ["serviceName"],
-				message: "Required",
-			});
-		}
-	});
-
-type Domain = z.infer<typeof domain>;
-
-interface Props {
-	id: string;
-	type: "application" | "compose";
-	domainId?: string;
-	children: React.ReactNode;
-}
-
-export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cacheType, setCacheType] = useState<CacheType>("cache");
-
-	const utils = api.useUtils();
-	const { data, refetch } = api.domain.one.useQuery(
-		{
-			domainId,
-		},
-		{
-			enabled: !!domainId,
-		},
-	);
-
-	const { data: application } =
-		type === "application"
-			? api.application.one.useQuery(
-					{
-						applicationId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				)
-			: api.compose.one.useQuery(
-					{
-						composeId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				);
-
-	const { mutateAsync, isError, error, isLoading } = domainId
-		? api.domain.update.useMutation()
-		: api.domain.create.useMutation();
-
-	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
-		api.domain.generateDomain.useMutation();
-
-	const { data: canGenerateTraefikMeDomains } =
-		api.domain.canGenerateTraefikMeDomains.useQuery({
-			serverId: application?.serverId || "",
-		});
-
-	const {
-		data: services,
-		isFetching: isLoadingServices,
-		error: errorServices,
-		refetch: refetchServices,
-	} = api.compose.loadServices.useQuery(
-		{
-			composeId: id,
-			type: cacheType,
-		},
-		{
-			retry: false,
-			refetchOnWindowFocus: false,
-			enabled: type === "compose" && !!id,
-		},
-	);
-
-	const form = useForm<Domain>({
-		resolver: zodResolver(domain),
-		defaultValues: {
-			host: "",
-			path: undefined,
-			port: undefined,
-			https: false,
-			certificateType: undefined,
-			customCertResolver: undefined,
-			serviceName: undefined,
-			domainType: type,
-		},
-		mode: "onChange",
-	});
-
-	const certificateType = form.watch("certificateType");
-	const https = form.watch("https");
-	const domainType = form.watch("domainType");
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				...data,
-				/* Convert null to undefined */
-				path: data?.path || undefined,
-				port: data?.port || undefined,
-				certificateType: data?.certificateType || undefined,
-				customCertResolver: data?.customCertResolver || undefined,
-				serviceName: data?.serviceName || undefined,
-				domainType: data?.domainType || type,
-			});
-		}
-
-		if (!domainId) {
-			form.reset({
-				host: "",
-				path: undefined,
-				port: undefined,
-				https: false,
-				certificateType: undefined,
-				customCertResolver: undefined,
-				domainType: type,
-			});
-		}
-	}, [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",
-		error: domainId ? "Error updating the domain" : "Error creating the domain",
-		submit: domainId ? "Update" : "Create",
-		dialogDescription: domainId
-			? "In this section you can edit a domain"
-			: "In this section you can add domains",
-	};
-
-	const onSubmit = async (data: Domain) => {
-		await mutateAsync({
-			domainId,
-			...(data.domainType === "application" && {
-				applicationId: id,
-			}),
-			...(data.domainType === "compose" && {
-				composeId: id,
-			}),
-			...data,
-		})
-			.then(async () => {
-				toast.success(dictionary.success);
-
-				if (data.domainType === "application") {
-					await utils.domain.byApplicationId.invalidate({
-						applicationId: id,
-					});
-					await utils.application.readTraefikConfig.invalidate({
-						applicationId: id,
-					});
-				} else if (data.domainType === "compose") {
-					await utils.domain.byComposeId.invalidate({
-						composeId: id,
-					});
-				}
-
-				if (domainId) {
-					refetch();
-				}
-				setIsOpen(false);
-			})
-			.catch((e) => {
-				console.log(e);
-				toast.error(dictionary.error);
-			});
-	};
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger className="" asChild>
-				{children}
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
-				<DialogHeader>
-					<DialogTitle>Domain</DialogTitle>
-					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
-				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-8 "
-					>
-						<div className="flex flex-col gap-4">
-							<div className="flex flex-col gap-2">
-								<div className="flex flex-row items-end w-full gap-4">
-									{domainType === "compose" && (
-										<div className="flex flex-col gap-2 w-full">
-											{errorServices && (
-												<AlertBlock
-													type="warning"
-													className="[overflow-wrap:anywhere]"
-												>
-													{errorServices?.message}
-												</AlertBlock>
-											)}
-											<FormField
-												control={form.control}
-												name="serviceName"
-												render={({ field }) => (
-													<FormItem className="w-full">
-														<FormLabel>Service Name</FormLabel>
-														<div className="flex gap-2">
-															<Select
-																onValueChange={field.onChange}
-																defaultValue={field.value || ""}
-															>
-																<FormControl>
-																	<SelectTrigger>
-																		<SelectValue placeholder="Select a service name" />
-																	</SelectTrigger>
-																</FormControl>
-
-																<SelectContent>
-																	{services?.map((service, index) => (
-																		<SelectItem
-																			value={service}
-																			key={`${service}-${index}`}
-																		>
-																			{service}
-																		</SelectItem>
-																	))}
-																	<SelectItem value="none" disabled>
-																		Empty
-																	</SelectItem>
-																</SelectContent>
-															</Select>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="secondary"
-																			type="button"
-																			isLoading={isLoadingServices}
-																			onClick={() => {
-																				if (cacheType === "fetch") {
-																					refetchServices();
-																				} else {
-																					setCacheType("fetch");
-																				}
-																			}}
-																		>
-																			<RefreshCw className="size-4 text-muted-foreground" />
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		side="left"
-																		sideOffset={5}
-																		className="max-w-[10rem]"
-																	>
-																		<p>
-																			Fetch: Will clone the repository and load
-																			the services
-																		</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-															<TooltipProvider delayDuration={0}>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="secondary"
-																			type="button"
-																			isLoading={isLoadingServices}
-																			onClick={() => {
-																				if (cacheType === "cache") {
-																					refetchServices();
-																				} else {
-																					setCacheType("cache");
-																				}
-																			}}
-																		>
-																			<DatabaseZap className="size-4 text-muted-foreground" />
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent
-																		side="left"
-																		sideOffset={5}
-																		className="max-w-[10rem]"
-																	>
-																		<p>
-																			Cache: If you previously deployed this
-																			compose, it will read the services from
-																			the last deployment/fetch from the
-																			repository
-																		</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-														</div>
-
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-										</div>
-									)}
-								</div>
-								<FormField
-									control={form.control}
-									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>
-													<Input placeholder="api.dokploy.com" {...field} />
-												</FormControl>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingGenerate}
-																onClick={() => {
-																	generateDomain({
-																		appName: application?.appName || "",
-																		serverId: application?.serverId || "",
-																	})
-																		.then((domain) => {
-																			field.onChange(domain);
-																		})
-																		.catch((err) => {
-																			toast.error(err.message);
-																		});
-																}}
-															>
-																<Dices className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>Generate traefik.me domain</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="path"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Path</FormLabel>
-												<FormControl>
-													<Input placeholder={"/"} {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="port"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Container Port</FormLabel>
-												<FormDescription>
-													The port where your application is running inside the
-													container (e.g., 3000 for Node.js, 80 for Nginx, 8080
-													for Java)
-												</FormDescription>
-												<FormControl>
-													<NumberInput placeholder={"3000"} {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="https"
-									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
-											<div className="space-y-0.5">
-												<FormLabel>HTTPS</FormLabel>
-												<FormDescription>
-													Automatically provision SSL Certificate.
-												</FormDescription>
-												<FormMessage />
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
-
-								{https && (
-									<>
-										<FormField
-											control={form.control}
-											name="certificateType"
-											render={({ field }) => {
-												return (
-													<FormItem>
-														<FormLabel>Certificate Provider</FormLabel>
-														<Select
-															onValueChange={(value) => {
-																field.onChange(value);
-																if (value !== "custom") {
-																	form.setValue(
-																		"customCertResolver",
-																		undefined,
-																	);
-																}
-															}}
-															value={field.value}
-														>
-															<FormControl>
-																<SelectTrigger>
-																	<SelectValue placeholder="Select a certificate provider" />
-																</SelectTrigger>
-															</FormControl>
-															<SelectContent>
-																<SelectItem value={"none"}>None</SelectItem>
-																<SelectItem value={"letsencrypt"}>
-																	Let's Encrypt
-																</SelectItem>
-																<SelectItem value={"custom"}>Custom</SelectItem>
-															</SelectContent>
-														</Select>
-														<FormMessage />
-													</FormItem>
-												);
-											}}
-										/>
-
-										{certificateType === "custom" && (
-											<FormField
-												control={form.control}
-												name="customCertResolver"
-												render={({ field }) => {
-													return (
-														<FormItem>
-															<FormLabel>Custom Certificate Resolver</FormLabel>
-															<FormControl>
-																<Input
-																	className="w-full"
-																	placeholder="Enter your custom certificate resolver"
-																	{...field}
-																	value={field.value || ""}
-																	onChange={(e) => {
-																		field.onChange(e);
-																		form.trigger("customCertResolver");
-																	}}
-																/>
-															</FormControl>
-															<FormMessage />
-														</FormItem>
-													);
-												}}
-											/>
-										)}
-									</>
-								)}
-							</div>
-						</div>
-					</form>
-
-					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
-							{dictionary.submit}
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -8,133 +8,28 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import {
-	CheckCircle2,
-	ExternalLink,
-	GlobeIcon,
-	InfoIcon,
-	Loader2,
-	PenBoxIcon,
-	RefreshCw,
-	Server,
-	Trash2,
-	XCircle,
-} from "lucide-react";
+import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
-import { AddDomain } from "./handle-domain";
-import { useState } from "react";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { DnsHelperModal } from "./dns-helper-modal";
-import { Badge } from "@/components/ui/badge";
-
-export type ValidationState = {
-	isLoading: boolean;
-	isValid?: boolean;
-	error?: string;
-	resolvedIp?: string;
-	message?: string;
-};
-
-export type ValidationStates = Record<string, ValidationState>;
+import { AddDomain } from "./add-domain";
 
 interface Props {
-	id: string;
-	type: "application" | "compose";
+	applicationId: string;
 }
 
-export const ShowDomains = ({ id, type }: Props) => {
-	const { data: application } =
-		type === "application"
-			? api.application.one.useQuery(
-					{
-						applicationId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				)
-			: api.compose.one.useQuery(
-					{
-						composeId: id,
-					},
-					{
-						enabled: !!id,
-					},
-				);
-	const [validationStates, setValidationStates] = useState<ValidationStates>(
-		{},
+export const ShowDomains = ({ applicationId }: Props) => {
+	const { data, refetch } = api.domain.byApplicationId.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
 	);
-	const { data: ip } = api.settings.getIp.useQuery();
 
-	const {
-		data,
-		refetch,
-		isLoading: isLoadingDomains,
-	} = type === "application"
-		? api.domain.byApplicationId.useQuery(
-				{
-					applicationId: id,
-				},
-				{
-					enabled: !!id,
-				},
-			)
-		: api.domain.byComposeId.useQuery(
-				{
-					composeId: id,
-				},
-				{
-					enabled: !!id,
-				},
-			);
-
-	const { mutateAsync: validateDomain } =
-		api.domain.validateDomain.useMutation();
 	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
 		api.domain.delete.useMutation();
 
-	const handleValidateDomain = async (host: string) => {
-		setValidationStates((prev) => ({
-			...prev,
-			[host]: { isLoading: true },
-		}));
-
-		try {
-			const result = await validateDomain({
-				domain: host,
-				serverIp:
-					application?.server?.ipAddress?.toString() || ip?.toString() || "",
-			});
-
-			setValidationStates((prev) => ({
-				...prev,
-				[host]: {
-					isLoading: false,
-					isValid: result.isValid,
-					error: result.error,
-					resolvedIp: result.resolvedIp,
-					message: result.error && result.isValid ? result.error : undefined,
-				},
-			}));
-		} catch (err) {
-			const error = err as Error;
-			setValidationStates((prev) => ({
-				...prev,
-				[host]: {
-					isLoading: false,
-					isValid: false,
-					error: error.message || "Failed to validate domain",
-				},
-			}));
-		}
-	};
-
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -148,7 +43,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 
 					<div className="flex flex-row gap-4 flex-wrap">
 						{data && data?.length > 0 && (
-							<AddDomain id={id} type={type}>
+							<AddDomain applicationId={applicationId}>
 								<Button>
 									<GlobeIcon className="size-4" /> Add Domain
 								</Button>
@@ -157,22 +52,15 @@ export const ShowDomains = ({ id, type }: Props) => {
 					</div>
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
-					{isLoadingDomains ? (
-						<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
-							<Loader2 className="size-5 animate-spin text-muted-foreground" />
-							<span className="text-base text-muted-foreground">
-								Loading domains...
-							</span>
-						</div>
-					) : data?.length === 0 ? (
-						<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[40vh]">
+					{data?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
 								To access the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">
-								<AddDomain id={id} type={type}>
+								<AddDomain applicationId={applicationId}>
 									<Button>
 										<GlobeIcon className="size-4" /> Add Domain
 									</Button>
@@ -180,215 +68,73 @@ export const ShowDomains = ({ id, type }: Props) => {
 							</div>
 						</div>
 					) : (
-						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
+						<div className="flex w-full flex-col gap-4">
 							{data?.map((item) => {
-								const validationState = validationStates[item.host];
 								return (
-									<Card
+									<div
 										key={item.domainId}
-										className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
-										<CardContent className="p-6">
-											<div className="flex flex-col gap-4">
-												{/* Service & Domain Info */}
-												<div className="flex items-center justify-between flex-wrap gap-y-2">
-													{item.serviceName && (
-														<Badge variant="outline" className="w-fit">
-															<Server className="size-3 mr-1" />
-															{item.serviceName}
-														</Badge>
-													)}
-													<div className="flex gap-2 flex-wrap">
-														{!item.host.includes("traefik.me") && (
-															<DnsHelperModal
-																domain={{
-																	host: item.host,
-																	https: item.https,
-																	path: item.path || undefined,
-																}}
-																serverIp={
-																	application?.server?.ipAddress?.toString() ||
-																	ip?.toString()
-																}
-															/>
-														)}
-														<AddDomain
-															id={id}
-															type={type}
-															domainId={item.domainId}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-blue-500/10"
-															>
-																<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-															</Button>
-														</AddDomain>
-														<DialogAction
-															title="Delete Domain"
-															description="Are you sure you want to delete this domain?"
-															type="destructive"
-															onClick={async () => {
-																await deleteDomain({
-																	domainId: item.domainId,
-																})
-																	.then((_data) => {
-																		refetch();
-																		toast.success(
-																			"Domain deleted successfully",
-																		);
-																	})
-																	.catch(() => {
-																		toast.error("Error deleting domain");
-																	});
-															}}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-red-500/10"
-																isLoading={isRemoving}
-															>
-																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-															</Button>
-														</DialogAction>
-													</div>
-												</div>
-												<div className="w-full break-all">
-													<Link
-														className="flex items-center gap-2 text-base font-medium hover:underline"
-														target="_blank"
-														href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
-													>
-														{item.host}
-														<ExternalLink className="size-4 min-w-4" />
-													</Link>
-												</div>
+										<Link
+											className="md:basis-1/2 flex gap-2  items-center hover:underline transition-all w-full"
+											target="_blank"
+											href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
+										>
+											<span className="truncate max-w-full text-sm">
+												{item.host}
+											</span>
+											<ExternalLink className="size-4 min-w-4" />
+										</Link>
 
-												{/* Domain Details */}
-												<div className="flex flex-wrap gap-3">
-													<TooltipProvider>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Badge variant="secondary">
-																	<InfoIcon className="size-3 mr-1" />
-																	Path: {item.path || "/"}
-																</Badge>
-															</TooltipTrigger>
-															<TooltipContent>
-																<p>URL path for this service</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-
-													<TooltipProvider>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Badge variant="secondary">
-																	<InfoIcon className="size-3 mr-1" />
-																	Port: {item.port}
-																</Badge>
-															</TooltipTrigger>
-															<TooltipContent>
-																<p>Container port exposed</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-
-													<TooltipProvider>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Badge
-																	variant={item.https ? "outline" : "secondary"}
-																>
-																	{item.https ? "HTTPS" : "HTTP"}
-																</Badge>
-															</TooltipTrigger>
-															<TooltipContent>
-																<p>
-																	{item.https
-																		? "Secure HTTPS connection"
-																		: "Standard HTTP connection"}
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-
-													{item.certificateType && (
-														<TooltipProvider>
-															<Tooltip>
-																<TooltipTrigger asChild>
-																	<Badge variant="outline">
-																		Cert: {item.certificateType}
-																	</Badge>
-																</TooltipTrigger>
-																<TooltipContent>
-																	<p>SSL Certificate Provider</p>
-																</TooltipContent>
-															</Tooltip>
-														</TooltipProvider>
-													)}
-
-													<TooltipProvider>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Badge
-																	variant="outline"
-																	className={
-																		validationState?.isValid
-																			? "bg-green-500/10 text-green-500 cursor-pointer"
-																			: validationState?.error
-																				? "bg-red-500/10 text-red-500 cursor-pointer"
-																				: "bg-yellow-500/10 text-yellow-500 cursor-pointer"
-																	}
-																	onClick={() =>
-																		handleValidateDomain(item.host)
-																	}
-																>
-																	{validationState?.isLoading ? (
-																		<>
-																			<Loader2 className="size-3 mr-1 animate-spin" />
-																			Checking DNS...
-																		</>
-																	) : validationState?.isValid ? (
-																		<>
-																			<CheckCircle2 className="size-3 mr-1" />
-																			{validationState.message
-																				? "Behind Cloudflare"
-																				: "DNS Valid"}
-																		</>
-																	) : validationState?.error ? (
-																		<>
-																			<XCircle className="size-3 mr-1" />
-																			{validationState.error}
-																		</>
-																	) : (
-																		<>
-																			<RefreshCw className="size-3 mr-1" />
-																			Validate DNS
-																		</>
-																	)}
-																</Badge>
-															</TooltipTrigger>
-															<TooltipContent className="max-w-xs">
-																{validationState?.error ? (
-																	<div className="flex flex-col gap-1">
-																		<p className="font-medium text-red-500">
-																			Error:
-																		</p>
-																		<p>{validationState.error}</p>
-																	</div>
-																) : (
-																	"Click to validate DNS configuration"
-																)}
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-												</div>
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
 											</div>
-										</CardContent>
-									</Card>
+
+											<div className="flex gap-2">
+												<AddDomain
+													applicationId={applicationId}
+													domainId={item.domainId}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomain>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
+														})
+															.then(() => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-red-500/10"
+														isLoading={isRemoving}
+													>
+														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													</Button>
+												</DialogAction>
+											</div>
+										</div>
+									</div>
 								);
 							})}
 						</div>

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

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

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

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

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

@@ -1,6 +1,4 @@
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -31,18 +29,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -58,8 +48,6 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	enableSubmodules: z.boolean().optional(),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -85,8 +73,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
-			watchPaths: [],
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -132,11 +118,9 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.bitbucketBuildPath || "/",
 				bitbucketId: data.bitbucketId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules || false,
 			});
 		}
-	}, [form.reset, data?.applicationId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: BitbucketProvider) => {
 		await mutateAsync({
@@ -146,8 +130,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketBuildPath: data.buildPath,
 			bitbucketId: data.bitbucketId,
 			applicationId,
-			watchPaths: data.watchPaths || [],
-			enableSubmodules: data.enableSubmodules || false,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -213,20 +195,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<BitbucketIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -394,99 +363,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
-												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/*.js)"]',
-													) 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>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -53,7 +53,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 				registryURL: data.registryUrl || "",
 			});
 		}
-	}, [form.reset, data?.applicationId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (values: DockerProvider) => {
 		await mutateAsync({
@@ -115,11 +115,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Username</FormLabel>
 									<FormControl>
-										<Input
-											placeholder="Username"
-											autoComplete="username"
-											{...field}
-										/>
+										<Input placeholder="username" {...field} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -134,12 +130,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Password</FormLabel>
 									<FormControl>
-										<Input
-											placeholder="Password"
-											autoComplete="one-time-code"
-											{...field}
-											type="password"
-										/>
+										<Input placeholder="Password" {...field} type="password" />
 									</FormControl>
 									<FormMessage />
 								</FormItem>

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

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

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

@@ -1,538 +0,0 @@
-import { GiteaIcon } from "@/components/icons/data-tools-icons";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-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, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-interface GiteaRepository {
-	name: string;
-	url: string;
-	id: number;
-	owner: {
-		username: string;
-	};
-}
-
-interface GiteaBranch {
-	name: string;
-	commit: {
-		id: string;
-	};
-}
-
-const GiteaProviderSchema = z.object({
-	buildPath: z.string().min(1, "Path is required").default("/"),
-	repository: z
-		.object({
-			repo: z.string().min(1, "Repo is required"),
-			owner: z.string().min(1, "Owner is required"),
-		})
-		.required(),
-	branch: z.string().min(1, "Branch is required"),
-	giteaId: z.string().min(1, "Gitea Provider is required"),
-	watchPaths: z.array(z.string()).default([]),
-	enableSubmodules: z.boolean().optional(),
-});
-
-type GiteaProvider = z.infer<typeof GiteaProviderSchema>;
-
-interface Props {
-	applicationId: string;
-}
-
-export const SaveGiteaProvider = ({ applicationId }: Props) => {
-	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
-	const { data, refetch } = api.application.one.useQuery({ applicationId });
-
-	const { mutateAsync, isLoading: isSavingGiteaProvider } =
-		api.application.saveGiteaProvider.useMutation();
-
-	const form = useForm<GiteaProvider>({
-		defaultValues: {
-			buildPath: "/",
-			repository: {
-				owner: "",
-				repo: "",
-			},
-			giteaId: "",
-			branch: "",
-			watchPaths: [],
-			enableSubmodules: false,
-		},
-		resolver: zodResolver(GiteaProviderSchema),
-	});
-
-	const repository = form.watch("repository");
-	const giteaId = form.watch("giteaId");
-
-	const { data: giteaUrl } = api.gitea.getGiteaUrl.useQuery(
-		{ giteaId },
-		{
-			enabled: !!giteaId,
-		},
-	);
-
-	const {
-		data: repositories,
-		isLoading: isLoadingRepositories,
-		error,
-	} = api.gitea.getGiteaRepositories.useQuery(
-		{
-			giteaId,
-		},
-		{
-			enabled: !!giteaId,
-		},
-	);
-
-	const {
-		data: branches,
-		fetchStatus,
-		status,
-	} = api.gitea.getGiteaBranches.useQuery(
-		{
-			owner: repository?.owner,
-			repositoryName: repository?.repo,
-			giteaId: giteaId,
-		},
-		{
-			enabled: !!repository?.owner && !!repository?.repo && !!giteaId,
-		},
-	);
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				branch: data.giteaBranch || "",
-				repository: {
-					repo: data.giteaRepository || "",
-					owner: data.giteaOwner || "",
-				},
-				buildPath: data.giteaBuildPath || "/",
-				giteaId: data.giteaId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules || false,
-			});
-		}
-	}, [form.reset, data?.applicationId, form]);
-
-	const onSubmit = async (data: GiteaProvider) => {
-		await mutateAsync({
-			giteaBranch: data.branch,
-			giteaRepository: data.repository.repo,
-			giteaOwner: data.repository.owner,
-			giteaBuildPath: data.buildPath,
-			giteaId: data.giteaId,
-			applicationId,
-			watchPaths: data.watchPaths,
-			enableSubmodules: data.enableSubmodules || false,
-		})
-			.then(async () => {
-				toast.success("Service Provider Saved");
-				await refetch();
-			})
-			.catch(() => {
-				toast.error("Error saving the Gitea provider");
-			});
-	};
-
-	return (
-		<div>
-			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					className="grid w-full gap-4 py-3"
-				>
-					{error && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					<div className="grid md:grid-cols-2 gap-4">
-						<FormField
-							control={form.control}
-							name="giteaId"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Gitea Account</FormLabel>
-									<Select
-										onValueChange={(value) => {
-											field.onChange(value);
-											form.setValue("repository", {
-												owner: "",
-												repo: "",
-											});
-											form.setValue("branch", "");
-										}}
-										defaultValue={field.value}
-										value={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a Gitea Account" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											{giteaProviders?.map((giteaProvider) => (
-												<SelectItem
-													key={giteaProvider.giteaId}
-													value={giteaProvider.giteaId}
-												>
-													{giteaProvider.gitProvider.name}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="repository"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`${giteaUrl}/${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"
-											>
-												<GiteaIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
-
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														"w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo: GiteaRepository) =>
-																		repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
-
-													<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 repository..."
-													className="h-9"
-												/>
-												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
-												)}
-												<CommandEmpty>No repositories found.</CommandEmpty>
-												<ScrollArea className="h-96">
-													<CommandGroup>
-														{repositories && repositories.length === 0 && (
-															<CommandEmpty>
-																No repositories found.
-															</CommandEmpty>
-														)}
-														{repositories?.map((repo: GiteaRepository) => {
-															return (
-																<CommandItem
-																	value={repo.name}
-																	key={repo.url}
-																	onSelect={() => {
-																		form.setValue("repository", {
-																			owner: repo.owner.username as string,
-																			repo: repo.name,
-																		});
-																		form.setValue("branch", "");
-																	}}
-																>
-																	<span className="flex items-center gap-2">
-																		<span>{repo.name}</span>
-																		<span className="text-muted-foreground text-xs">
-																			{repo.owner.username}
-																		</span>
-																	</span>
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			repo.name === field.value.repo
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																</CommandItem>
-															);
-														})}
-													</CommandGroup>
-												</ScrollArea>
-											</Command>
-										</PopoverContent>
-									</Popover>
-									{form.formState.errors.repository && (
-										<p className={cn("text-sm font-medium text-destructive")}>
-											Repository is required
-										</p>
-									)}
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="branch"
-							render={({ field }) => (
-								<FormItem className="block w-full">
-									<FormLabel>Branch</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														" w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch: GiteaBranch) =>
-																		branch.name === field.value,
-																)?.name
-															: "Select branch"}
-													<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 branch..."
-													className="h-9"
-												/>
-												{status === "loading" && fetchStatus === "fetching" && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Loading Branches....
-													</span>
-												)}
-												{!repository?.owner && (
-													<span className="py-6 text-center text-sm text-muted-foreground">
-														Select a repository
-													</span>
-												)}
-												<ScrollArea className="h-96">
-													<CommandEmpty>No branch found.</CommandEmpty>
-
-													<CommandGroup>
-														{branches && branches.length === 0 && (
-															<CommandItem>No branches found.</CommandItem>
-														)}
-														{branches?.map((branch: GiteaBranch) => (
-															<CommandItem
-																value={branch.name}
-																key={branch.commit.id}
-																onSelect={() => {
-																	form.setValue("branch", branch.name);
-																}}
-															>
-																{branch.name}
-																<CheckIcon
-																	className={cn(
-																		"ml-auto h-4 w-4",
-																		branch.name === field.value
-																			? "opacity-100"
-																			: "opacity-0",
-																	)}
-																/>
-															</CommandItem>
-														))}
-													</CommandGroup>
-												</ScrollArea>
-											</Command>
-										</PopoverContent>
-
-										<FormMessage />
-									</Popover>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="buildPath"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Build Path</FormLabel>
-									<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: string, index: number) => (
-											<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/*.js)"
-												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>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
-					</div>
-					<div className="flex w-full justify-end">
-						<Button
-							isLoading={isSavingGiteaProvider}
-							type="submit"
-							className="w-fit"
-						>
-							Save
-						</Button>
-					</div>
-				</form>
-			</Form>
-		</div>
-	);
-};

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

@@ -1,5 +1,3 @@
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -30,18 +28,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-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, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -57,9 +47,6 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	triggerType: z.enum(["push", "tag"]).default("push"),
-	enableSubmodules: z.boolean().default(false),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -84,15 +71,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
-			triggerType: "push",
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
-	const triggerType = form.watch("triggerType");
 
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
@@ -129,12 +113,9 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.buildPath || "/",
 				githubId: data.githubId || "",
-				watchPaths: data.watchPaths || [],
-				triggerType: data.triggerType || "push",
-				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data?.applicationId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: GithubProvider) => {
 		await mutateAsync({
@@ -144,9 +125,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			owner: data.repository.owner,
 			buildPath: data.buildPath,
 			githubId: data.githubId,
-			watchPaths: data.watchPaths || [],
-			triggerType: data.triggerType,
-			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -209,20 +187,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GithubIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -385,145 +350,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 									<FormControl>
 										<Input placeholder="/" {...field} />
 									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="triggerType"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2 ">
-										<FormLabel>Trigger Type</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Choose when to trigger deployments: on push to the
-														selected branch or when a new tag is created.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-										value={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a trigger type" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											<SelectItem value="push">On Push</SelectItem>
-											<SelectItem value="tag">On Tag</SelectItem>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{triggerType === "push" && (
-							<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/*.js)"
-													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>
-								)}
-							/>
-						)}
 
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+									<FormMessage />
 								</FormItem>
 							)}
 						/>

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

@@ -1,6 +1,4 @@
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -31,18 +29,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-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, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -60,8 +50,6 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	enableSubmodules: z.boolean().default(false),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -88,7 +76,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -137,11 +124,9 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.gitlabBuildPath || "/",
 				gitlabId: data.gitlabId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data?.applicationId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: GitlabProvider) => {
 		await mutateAsync({
@@ -153,8 +138,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			applicationId,
 			gitlabProjectId: data.repository.id,
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
-			watchPaths: data.watchPaths || [],
-			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -220,20 +203,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GitlabIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -405,104 +375,11 @@ 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/*.js)"
-												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>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,82 +1,37 @@
 import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
 import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
-import { SaveGiteaProvider } from "@/components/dashboard/application/general/generic/save-gitea-provider";
 import { SaveGithubProvider } from "@/components/dashboard/application/general/generic/save-github-provider";
 import {
 	BitbucketIcon,
 	DockerIcon,
 	GitIcon,
-	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, Loader2, UploadCloud } from "lucide-react";
+import { GitBranch, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";
 import { SaveDragNDrop } from "./save-drag-n-drop";
 import { SaveGitlabProvider } from "./save-gitlab-provider";
 
-type TabState =
-	| "github"
-	| "docker"
-	| "git"
-	| "drop"
-	| "gitlab"
-	| "bitbucket"
-	| "gitea";
+type TabState = "github" | "docker" | "git" | "drop" | "gitlab" | "bitbucket";
 
 interface Props {
 	applicationId: string;
 }
 
 export const ShowProviderForm = ({ applicationId }: Props) => {
-	const { data: githubProviders, isLoading: isLoadingGithub } =
-		api.github.githubProviders.useQuery();
-	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
-		api.gitlab.gitlabProviders.useQuery();
-	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
+	const { data: githubProviders } = api.github.githubProviders.useQuery();
+	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
+	const { data: bitbucketProviders } =
 		api.bitbucket.bitbucketProviders.useQuery();
-	const { data: giteaProviders, isLoading: isLoadingGitea } =
-		api.gitea.giteaProviders.useQuery();
 
 	const { data: application } = api.application.one.useQuery({ applicationId });
 	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
-
-	const isLoading =
-		isLoadingGithub || isLoadingGitlab || isLoadingBitbucket || isLoadingGitea;
-
-	if (isLoading) {
-		return (
-			<Card className="group relative w-full bg-transparent">
-				<CardHeader>
-					<CardTitle className="flex items-start justify-between">
-						<div className="flex flex-col gap-2">
-							<span className="flex flex-col space-y-0.5">Provider</span>
-							<p className="flex items-center text-sm font-normal text-muted-foreground">
-								Select the source of your code
-							</p>
-						</div>
-						<div className="hidden space-y-1 text-sm font-normal md:block">
-							<GitBranch className="size-6 text-muted-foreground" />
-						</div>
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="flex min-h-[25vh] items-center justify-center">
-						<div className="flex items-center gap-2 text-muted-foreground">
-							<Loader2 className="size-4 animate-spin" />
-							<span>Loading providers...</span>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		);
-	}
-
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -100,7 +55,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4">
+					<div className="flex flex-row items-center justify-between  w-full gap-4">
 						<TabsList className="md:grid md:w-fit md:grid-cols-7 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
 							<TabsTrigger
 								value="github"
@@ -123,13 +78,6 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 								<BitbucketIcon className="size-4 text-current fill-current" />
 								Bitbucket
 							</TabsTrigger>
-							<TabsTrigger
-								value="gitea"
-								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
-							>
-								<GiteaIcon className="size-4 text-current fill-current" />
-								Gitea
-							</TabsTrigger>
 							<TabsTrigger
 								value="docker"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
@@ -158,7 +106,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<GithubIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitHub, you need to configure your account
@@ -178,7 +126,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{gitlabProviders && gitlabProviders?.length > 0 ? (
 							<SaveGitlabProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<GitlabIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitLab, you need to configure your account
@@ -198,7 +146,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{bitbucketProviders && bitbucketProviders?.length > 0 ? (
 							<SaveBitbucketProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<BitbucketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using Bitbucket, you need to configure your account
@@ -214,26 +162,6 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 							</div>
 						)}
 					</TabsContent>
-					<TabsContent value="gitea" className="w-full p-2">
-						{giteaProviders && giteaProviders?.length > 0 ? (
-							<SaveGiteaProvider applicationId={applicationId} />
-						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-								<GiteaIcon className="size-8 text-muted-foreground" />
-								<span className="text-base text-muted-foreground">
-									To deploy using Gitea, you need to configure your account
-									first. Please, go to{" "}
-									<Link
-										href="/dashboard/settings/git-providers"
-										className="text-foreground"
-									>
-										Settings
-									</Link>{" "}
-									to do so.
-								</span>
-							</div>
-						)}
-					</TabsContent>
 					<TabsContent value="docker" className="w-full p-2">
 						<SaveDockerProvider applicationId={applicationId} />
 					</TabsContent>

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

@@ -10,14 +10,14 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { api } from "@/utils/api";
 import {
 	Ban,
 	CheckCircle2,
 	Hammer,
+	HelpCircle,
 	RefreshCcw,
-	Rocket,
 	Terminal,
 } from "lucide-react";
 import { useRouter } from "next/router";
@@ -55,7 +55,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
+					<TooltipProvider delayDuration={0}>
 						<DialogAction
 							title="Deploy Application"
 							description="Are you sure you want to deploy this application?"
@@ -79,14 +79,12 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							<Button
 								variant="default"
 								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								className="flex items-center gap-1.5"
 							>
+								Deploy
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<div className="flex items-center">
-											<Rocket className="size-4 mr-1" />
-											Deploy
-										</div>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
 										<TooltipContent sideOffset={5} className="z-[60]">
@@ -116,24 +114,9 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									});
 							}}
 						>
-							<Button
-								variant="secondary"
-								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 variant="secondary" isLoading={isReloading}>
+								Reload
+								<RefreshCcw className="size-4" />
 							</Button>
 						</DialogAction>
 						<DialogAction
@@ -156,14 +139,13 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							<Button
 								variant="secondary"
 								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								className="flex items-center gap-1.5"
 							>
+								Rebuild
+								<Hammer className="size-4" />
 								<Tooltip>
 									<TooltipTrigger asChild>
-										<div className="flex items-center">
-											<Hammer className="size-4 mr-1" />
-											Rebuild
-										</div>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 									</TooltipTrigger>
 									<TooltipPrimitive.Portal>
 										<TooltipContent sideOffset={5} className="z-[60]">
@@ -198,14 +180,13 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isStarting}
-									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Start
+									<CheckCircle2 className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<CheckCircle2 className="size-4 mr-1" />
-												Start
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -238,14 +219,13 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 								<Button
 									variant="destructive"
 									isLoading={isStopping}
-									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Stop
+									<Ban className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Ban className="size-4 mr-1" />
-												Stop
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -261,18 +241,15 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
 					>
-						<Button
-							variant="outline"
-							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-						>
-							<Terminal className="size-4 mr-1" />
+						<Button variant="outline">
+							<Terminal />
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
 					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
 						<span className="text-sm font-medium">Autodeploy</span>
 						<Switch
-							aria-label="Toggle autodeploy"
+							aria-label="Toggle italic"
 							checked={data?.autoDeploy || false}
 							onCheckedChange={async (enabled) => {
 								await update({
@@ -287,29 +264,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.error("Error updating Auto Deploy");
 									});
 							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
-						/>
-					</div>
-
-					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<span className="text-sm font-medium">Clean Cache</span>
-						<Switch
-							aria-label="Toggle clean cache"
-							checked={data?.cleanCache || false}
-							onCheckedChange={async (enabled) => {
-								await update({
-									applicationId,
-									cleanCache: enabled,
-								})
-									.then(async () => {
-										toast.success("Clean Cache Updated");
-										await refetch();
-									})
-									.catch(() => {
-										toast.error("Error updating Clean Cache");
-									});
-							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+							className="flex flex-row gap-2 items-center"
 						/>
 					</div>
 				</CardContent>

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

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

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

@@ -0,0 +1,100 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+
+import type { RouterOutputs } from "@/utils/api";
+import { useState } from "react";
+import { ShowDeployment } from "../deployments/show-deployment";
+
+interface Props {
+	deployments: RouterOutputs["deployment"]["all"];
+	serverId?: string;
+	trigger?: React.ReactNode;
+}
+
+export const ShowPreviewBuilds = ({
+	deployments,
+	serverId,
+	trigger,
+}: Props) => {
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{trigger ? (
+					trigger
+				) : (
+					<Button className="sm:w-auto w-full" size="sm" variant="outline">
+						View Builds
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
+				<DialogHeader>
+					<DialogTitle>Preview Builds</DialogTitle>
+					<DialogDescription>
+						See all the preview builds for this application on this Pull Request
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					{deployments?.map((deployment) => (
+						<div
+							key={deployment.deploymentId}
+							className="flex items-center justify-between rounded-lg border p-4 gap-2"
+						>
+							<div className="flex flex-col">
+								<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+									{deployment.status}
+
+									<StatusTooltip
+										status={deployment?.status}
+										className="size-2.5"
+									/>
+								</span>
+								<span className="text-sm text-muted-foreground">
+									{deployment.title}
+								</span>
+								{deployment.description && (
+									<span className="break-all text-sm text-muted-foreground">
+										{deployment.description}
+									</span>
+								)}
+							</div>
+							<div className="flex flex-col items-end gap-2">
+								<div className="text-sm capitalize text-muted-foreground">
+									<DateTooltip date={deployment.createdAt} />
+								</div>
+
+								<Button
+									onClick={() => {
+										setActiveLog(deployment);
+									}}
+								>
+									View
+								</Button>
+							</div>
+						</div>
+					))}
+				</div>
+			</DialogContent>
+			<ShowDeployment
+				serverId={serverId || ""}
+				open={Boolean(activeLog && activeLog.logPath !== null)}
+				onClose={() => setActiveLog(null)}
+				logPath={activeLog?.logPath || ""}
+				errorMessage={activeLog?.errorMessage || ""}
+			/>
+		</Dialog>
+	);
+};

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

@@ -17,7 +17,7 @@ import {
 	ExternalLink,
 	FileText,
 	GitPullRequest,
-	Loader2,
+	Layers,
 	PenSquare,
 	RocketIcon,
 	Trash2,
@@ -25,8 +25,8 @@ import {
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { AddPreviewDomain } from "./add-preview-domain";
+import { ShowPreviewBuilds } from "./show-preview-builds";
 import { ShowPreviewSettings } from "./show-preview-settings";
-import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 
 interface Props {
 	applicationId: string;
@@ -38,16 +38,13 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 	const { mutateAsync: deletePreviewDeployment, isLoading } =
 		api.previewDeployment.delete.useMutation();
 
-	const {
-		data: previewDeployments,
-		refetch: refetchPreviewDeployments,
-		isLoading: isLoadingPreviewDeployments,
-	} = api.previewDeployment.all.useQuery(
-		{ applicationId },
-		{
-			enabled: !!applicationId,
-		},
-	);
+	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+		api.previewDeployment.all.useQuery(
+			{ applicationId },
+			{
+				enabled: !!applicationId,
+			},
+		);
 
 	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
 		deletePreviewDeployment({
@@ -83,15 +80,8 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 								each pull request you create.
 							</span>
 						</div>
-						{isLoadingPreviewDeployments ? (
-							<div className="flex w-full flex-row items-center justify-center gap-3 min-h-[35vh]">
-								<Loader2 className="size-5 text-muted-foreground animate-spin" />
-								<span className="text-base text-muted-foreground">
-									Loading preview deployments...
-								</span>
-							</div>
-						) : !previewDeployments?.length ? (
-							<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[35vh]">
+						{!previewDeployments?.length ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 								<RocketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									No preview deployments found
@@ -178,10 +168,19 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 															</Button>
 														</ShowModalLogs>
 
-														<ShowDeploymentsModal
-															id={deployment.previewDeploymentId}
-															type="previewDeployment"
+														<ShowPreviewBuilds
+															deployments={deployment.deployments || []}
 															serverId={data?.serverId || ""}
+															trigger={
+																<Button
+																	variant="outline"
+																	size="sm"
+																	className="gap-2"
+																>
+																	<Layers className="size-4" />
+																	Builds
+																</Button>
+															}
 														/>
 
 														<AddPreviewDomain

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

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

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -1,538 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-	FormDescription,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import {
-	Info,
-	PlusCircle,
-	PenBoxIcon,
-	RefreshCw,
-	DatabaseZap,
-} from "lucide-react";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Switch } from "@/components/ui/switch";
-import { useEffect, useState } from "react";
-import {
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { toast } from "sonner";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
-import { cn } from "@/lib/utils";
-import type { CacheType } from "../domains/handle-domain";
-
-export const commonCronExpressions = [
-	{ label: "Every minute", value: "* * * * *" },
-	{ label: "Every hour", value: "0 * * * *" },
-	{ label: "Every day at midnight", value: "0 0 * * *" },
-	{ label: "Every Sunday at midnight", value: "0 0 * * 0" },
-	{ label: "Every month on the 1st at midnight", value: "0 0 1 * *" },
-	{ label: "Every 15 minutes", value: "*/15 * * * *" },
-	{ label: "Every weekday at midnight", value: "0 0 * * 1-5" },
-];
-
-const formSchema = z
-	.object({
-		name: z.string().min(1, "Name is required"),
-		cronExpression: z.string().min(1, "Cron expression is required"),
-		shellType: z.enum(["bash", "sh"]).default("bash"),
-		command: z.string(),
-		enabled: z.boolean().default(true),
-		serviceName: z.string(),
-		scheduleType: z.enum([
-			"application",
-			"compose",
-			"server",
-			"dokploy-server",
-		]),
-		script: z.string(),
-	})
-	.superRefine((data, ctx) => {
-		if (data.scheduleType === "compose" && !data.serviceName) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Service name is required",
-				path: ["serviceName"],
-			});
-		}
-
-		if (
-			(data.scheduleType === "dokploy-server" ||
-				data.scheduleType === "server") &&
-			!data.script
-		) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Script is required",
-				path: ["script"],
-			});
-		}
-
-		if (
-			(data.scheduleType === "application" ||
-				data.scheduleType === "compose") &&
-			!data.command
-		) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Command is required",
-				path: ["command"],
-			});
-		}
-	});
-
-interface Props {
-	id?: string;
-	scheduleId?: string;
-	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
-}
-
-export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cacheType, setCacheType] = useState<CacheType>("cache");
-
-	const utils = api.useUtils();
-	const form = useForm<z.infer<typeof formSchema>>({
-		resolver: zodResolver(formSchema),
-		defaultValues: {
-			name: "",
-			cronExpression: "",
-			shellType: "bash",
-			command: "",
-			enabled: true,
-			serviceName: "",
-			scheduleType: scheduleType || "application",
-			script: "",
-		},
-	});
-
-	const scheduleTypeForm = form.watch("scheduleType");
-
-	const { data: schedule } = api.schedule.one.useQuery(
-		{ scheduleId: scheduleId || "" },
-		{ enabled: !!scheduleId },
-	);
-
-	const {
-		data: services,
-		isFetching: isLoadingServices,
-		error: errorServices,
-		refetch: refetchServices,
-	} = api.compose.loadServices.useQuery(
-		{
-			composeId: id || "",
-			type: cacheType,
-		},
-		{
-			retry: false,
-			refetchOnWindowFocus: false,
-			enabled: !!id && scheduleType === "compose",
-		},
-	);
-
-	useEffect(() => {
-		if (scheduleId && schedule) {
-			form.reset({
-				name: schedule.name,
-				cronExpression: schedule.cronExpression,
-				shellType: schedule.shellType,
-				command: schedule.command,
-				enabled: schedule.enabled,
-				serviceName: schedule.serviceName || "",
-				scheduleType: schedule.scheduleType,
-				script: schedule.script || "",
-			});
-		}
-	}, [form, schedule, scheduleId]);
-
-	const { mutateAsync, isLoading } = scheduleId
-		? api.schedule.update.useMutation()
-		: api.schedule.create.useMutation();
-
-	const onSubmit = async (values: z.infer<typeof formSchema>) => {
-		if (!id && !scheduleId) return;
-
-		await mutateAsync({
-			...values,
-			scheduleId: scheduleId || "",
-			...(scheduleType === "application" && {
-				applicationId: id || "",
-			}),
-			...(scheduleType === "compose" && {
-				composeId: id || "",
-			}),
-			...(scheduleType === "server" && {
-				serverId: id || "",
-			}),
-			...(scheduleType === "dokploy-server" && {
-				userId: id || "",
-			}),
-		})
-			.then(() => {
-				toast.success(
-					`Schedule ${scheduleId ? "updated" : "created"} successfully`,
-				);
-				utils.schedule.list.invalidate({
-					id,
-					scheduleType,
-				});
-				setIsOpen(false);
-			})
-			.catch((error) => {
-				toast.error(
-					error instanceof Error ? error.message : "An unknown error occurred",
-				);
-			});
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				{scheduleId ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="group hover:bg-blue-500/10"
-					>
-						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-					</Button>
-				) : (
-					<Button>
-						<PlusCircle className="w-4 h-4 mr-2" />
-						Add Schedule
-					</Button>
-				)}
-			</DialogTrigger>
-			<DialogContent
-				className={cn(
-					"max-h-screen overflow-y-auto",
-					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
-						? "max-h-[95vh] sm:max-w-2xl"
-						: " sm:max-w-lg",
-				)}
-			>
-				<DialogHeader>
-					<DialogTitle>{scheduleId ? "Edit" : "Create"} Schedule</DialogTitle>
-				</DialogHeader>
-				<Form {...form}>
-					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-						{scheduleTypeForm === "compose" && (
-							<div className="flex flex-col w-full gap-4">
-								{errorServices && (
-									<AlertBlock
-										type="warning"
-										className="[overflow-wrap:anywhere]"
-									>
-										{errorServices?.message}
-									</AlertBlock>
-								)}
-								<FormField
-									control={form.control}
-									name="serviceName"
-									render={({ field }) => (
-										<FormItem className="w-full">
-											<FormLabel>Service Name</FormLabel>
-											<div className="flex gap-2">
-												<Select
-													onValueChange={field.onChange}
-													defaultValue={field.value || ""}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue placeholder="Select a service name" />
-														</SelectTrigger>
-													</FormControl>
-
-													<SelectContent>
-														{services?.map((service, index) => (
-															<SelectItem
-																value={service}
-																key={`${service}-${index}`}
-															>
-																{service}
-															</SelectItem>
-														))}
-														<SelectItem value="none" disabled>
-															Empty
-														</SelectItem>
-													</SelectContent>
-												</Select>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingServices}
-																onClick={() => {
-																	if (cacheType === "fetch") {
-																		refetchServices();
-																	} else {
-																		setCacheType("fetch");
-																	}
-																}}
-															>
-																<RefreshCw className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>
-																Fetch: Will clone the repository and load the
-																services
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingServices}
-																onClick={() => {
-																	if (cacheType === "cache") {
-																		refetchServices();
-																	} else {
-																		setCacheType("cache");
-																	}
-																}}
-															>
-																<DatabaseZap className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>
-																Cache: If you previously deployed this compose,
-																it will read the services from the last
-																deployment/fetch from the repository
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</div>
-						)}
-
-						<FormField
-							control={form.control}
-							name="name"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										Task Name
-									</FormLabel>
-									<FormControl>
-										<Input placeholder="Daily Database Backup" {...field} />
-									</FormControl>
-									<FormDescription>
-										A descriptive name for your scheduled task
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="cronExpression"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										Schedule
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<Info className="w-4 h-4 text-muted-foreground cursor-help" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Cron expression format: minute hour day month
-														weekday
-													</p>
-													<p>Example: 0 0 * * * (daily at midnight)</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</FormLabel>
-									<div className="flex flex-col gap-2">
-										<Select
-											onValueChange={(value) => {
-												field.onChange(value);
-											}}
-										>
-											<FormControl>
-												<SelectTrigger>
-													<SelectValue placeholder="Select a predefined schedule" />
-												</SelectTrigger>
-											</FormControl>
-											<SelectContent>
-												{commonCronExpressions.map((expr) => (
-													<SelectItem key={expr.value} value={expr.value}>
-														{expr.label} ({expr.value})
-													</SelectItem>
-												))}
-											</SelectContent>
-										</Select>
-										<div className="relative">
-											<FormControl>
-												<Input
-													placeholder="Custom cron expression (e.g., 0 0 * * *)"
-													{...field}
-												/>
-											</FormControl>
-										</div>
-									</div>
-									<FormDescription>
-										Choose a predefined schedule or enter a custom cron
-										expression
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						{(scheduleTypeForm === "application" ||
-							scheduleTypeForm === "compose") && (
-							<>
-								<FormField
-									control={form.control}
-									name="shellType"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												Shell Type
-											</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value}
-											>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select shell type" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													<SelectItem value="bash">Bash</SelectItem>
-													<SelectItem value="sh">Sh</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormDescription>
-												Choose the shell to execute your command
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="command"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												Command
-											</FormLabel>
-											<FormControl>
-												<Input placeholder="npm run backup" {...field} />
-											</FormControl>
-											<FormDescription>
-												The command to execute in your container
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</>
-						)}
-
-						{(scheduleTypeForm === "dokploy-server" ||
-							scheduleTypeForm === "server") && (
-							<FormField
-								control={form.control}
-								name="script"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Script</FormLabel>
-										<FormControl>
-											<FormControl>
-												<CodeEditor
-													language="shell"
-													placeholder={`# This is a comment
-echo "Hello, world!"
-`}
-													className="h-96 font-mono"
-													{...field}
-												/>
-											</FormControl>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
-
-						<FormField
-							control={form.control}
-							name="enabled"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-										Enabled
-									</FormLabel>
-								</FormItem>
-							)}
-						/>
-
-						<Button type="submit" isLoading={isLoading} className="w-full">
-							{scheduleId ? "Update" : "Create"} Schedule
-						</Button>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,239 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { HandleSchedules } from "./handle-schedules";
-import {
-	Clock,
-	Play,
-	Terminal,
-	Trash2,
-	ClipboardList,
-	Loader2,
-} from "lucide-react";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { toast } from "sonner";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
-
-interface Props {
-	id: string;
-	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
-}
-
-export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
-	const {
-		data: schedules,
-		isLoading: isLoadingSchedules,
-		refetch: refetchSchedules,
-	} = api.schedule.list.useQuery(
-		{
-			id: id || "",
-			scheduleType,
-		},
-		{
-			enabled: !!id,
-		},
-	);
-
-	const utils = api.useUtils();
-
-	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
-		api.schedule.delete.useMutation();
-
-	const { mutateAsync: runManually, isLoading } =
-		api.schedule.runManually.useMutation();
-
-	return (
-		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
-			<CardHeader className="px-0">
-				<div className="flex justify-between items-center">
-					<div className="flex flex-col gap-2">
-						<CardTitle className="text-xl font-bold flex items-center gap-2">
-							Scheduled Tasks
-						</CardTitle>
-						<CardDescription>
-							Schedule tasks to run automatically at specified intervals.
-						</CardDescription>
-					</div>
-
-					{schedules && schedules.length > 0 && (
-						<HandleSchedules id={id} scheduleType={scheduleType} />
-					)}
-				</div>
-			</CardHeader>
-			<CardContent className="px-0">
-				{isLoadingSchedules ? (
-					<div className="flex gap-4   w-full items-center justify-center text-center mx-auto min-h-[45vh]">
-						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
-						<span className="text-sm text-muted-foreground/70">
-							Loading scheduled tasks...
-						</span>
-					</div>
-				) : schedules && schedules.length > 0 ? (
-					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
-						{schedules.map((schedule) => {
-							const serverId =
-								schedule.serverId ||
-								schedule.application?.serverId ||
-								schedule.compose?.serverId;
-							return (
-								<div
-									key={schedule.scheduleId}
-									className=" flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
-								>
-									<div className="flex items-start gap-3">
-										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
-											<Clock className="size-4 text-primary/70" />
-										</div>
-										<div className="space-y-1.5">
-											<div className="flex items-center gap-2">
-												<h3 className="text-sm font-medium leading-none">
-													{schedule.name}
-												</h3>
-												<Badge
-													variant={schedule.enabled ? "default" : "secondary"}
-													className="text-[10px] px-1 py-0"
-												>
-													{schedule.enabled ? "Enabled" : "Disabled"}
-												</Badge>
-											</div>
-											<div className="flex items-center gap-2 text-sm text-muted-foreground">
-												<Badge
-													variant="outline"
-													className="font-mono text-[10px] bg-transparent"
-												>
-													Cron: {schedule.cronExpression}
-												</Badge>
-												{schedule.scheduleType !== "server" &&
-													schedule.scheduleType !== "dokploy-server" && (
-														<>
-															<span className="text-xs text-muted-foreground/50">
-																•
-															</span>
-															<Badge
-																variant="outline"
-																className="font-mono text-[10px] bg-transparent"
-															>
-																{schedule.shellType}
-															</Badge>
-														</>
-													)}
-											</div>
-											{schedule.command && (
-												<div className="flex items-center gap-2">
-													<Terminal className="size-3.5 text-muted-foreground/70" />
-													<code className="font-mono text-[10px] text-muted-foreground/70">
-														{schedule.command}
-													</code>
-												</div>
-											)}
-										</div>
-									</div>
-
-									<div className="flex items-center gap-1.5">
-										<ShowDeploymentsModal
-											id={schedule.scheduleId}
-											type="schedule"
-											serverId={serverId || undefined}
-										>
-											<Button variant="ghost" size="icon">
-												<ClipboardList className="size-4  transition-colors " />
-											</Button>
-										</ShowDeploymentsModal>
-
-										<TooltipProvider delayDuration={0}>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<Button
-														type="button"
-														variant="ghost"
-														size="icon"
-														isLoading={isLoading}
-														onClick={async () => {
-															toast.success("Schedule run successfully");
-
-															await runManually({
-																scheduleId: schedule.scheduleId,
-															}).then(async () => {
-																await new Promise((resolve) =>
-																	setTimeout(resolve, 1500),
-																);
-																refetchSchedules();
-															});
-														}}
-													>
-														<Play className="size-4  transition-colors" />
-													</Button>
-												</TooltipTrigger>
-												<TooltipContent>Run Manual Schedule</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-
-										<HandleSchedules
-											scheduleId={schedule.scheduleId}
-											id={id}
-											scheduleType={scheduleType}
-										/>
-
-										<DialogAction
-											title="Delete Schedule"
-											description="Are you sure you want to delete this schedule?"
-											type="destructive"
-											onClick={async () => {
-												await deleteSchedule({
-													scheduleId: schedule.scheduleId,
-												})
-													.then(() => {
-														utils.schedule.list.invalidate({
-															id,
-															scheduleType,
-														});
-														toast.success("Schedule deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting schedule");
-													});
-											}}
-										>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="group hover:bg-red-500/10 "
-												isLoading={isDeleting}
-											>
-												<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-											</Button>
-										</DialogAction>
-									</div>
-								</div>
-							);
-						})}
-					</div>
-				) : (
-					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg">
-						<Clock className="size-8 mb-4 text-muted-foreground" />
-						<p className="text-lg font-medium text-muted-foreground">
-							No scheduled tasks
-						</p>
-						<p className="text-sm text-muted-foreground mt-1">
-							Create your first scheduled task to automate your workflows
-						</p>
-						<HandleSchedules id={id} scheduleType={scheduleType} />
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-};

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

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

apps/dokploy/components/dashboard/compose/deployments/cancel-queues-compose.tsx

@@ -0,0 +1,66 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+
+export const CancelQueuesCompose = ({ composeId }: Props) => {
+	const { mutateAsync, isLoading } = api.compose.cleanQueues.useMutation();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
+	if (isCloud) {
+		return null;
+	}
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="destructive" className="w-fit" isLoading={isLoading}>
+					Cancel Queues
+					<Paintbrush className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to cancel the incoming deployments?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will cancel all the incoming deployments
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								composeId,
+							})
+								.then(() => {
+									toast.success("Queues are being cleaned");
+								})
+								.catch((err) => {
+									toast.error(err.message);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

apps/dokploy/components/dashboard/compose/deployments/refresh-token-compose.tsx

@@ -0,0 +1,59 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { api } from "@/utils/api";
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+export const RefreshTokenCompose = ({ composeId }: Props) => {
+	const { mutateAsync } = api.compose.refreshToken.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger>
+				<RefreshCcw className="h-4 w-4 cursor-pointer text-muted-foreground" />
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently change the token
+						and all the previous tokens will be invalidated
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								composeId,
+							})
+								.then(() => {
+									utils.compose.one.invalidate({
+										composeId,
+									});
+									toast.success("Refresh Token updated");
+								})
+								.catch(() => {
+									toast.error("Error updating the refresh token");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,184 @@
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+
+interface Props {
+	logPath: string | null;
+	serverId?: string;
+	open: boolean;
+	onClose: () => void;
+	errorMessage?: string;
+}
+export const ShowDeploymentCompose = ({
+	logPath,
+	open,
+	onClose,
+	serverId,
+	errorMessage,
+}: Props) => {
+	const [data, setData] = useState("");
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [showExtraLogs, setShowExtraLogs] = useState(false);
+	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
+
+	useEffect(() => {
+		if (!open || !logPath) return;
+
+		setData("");
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}&serverId=${serverId}`;
+		const ws = new WebSocket(wsUrl);
+
+		wsRef.current = ws; // Store WebSocket instance in ref
+
+		ws.onmessage = (e) => {
+			setData((currentData) => currentData + e.data);
+		};
+
+		ws.onerror = (error) => {
+			console.error("WebSocket error: ", error);
+		};
+
+		ws.onclose = () => {
+			wsRef.current = null;
+		};
+
+		return () => {
+			if (wsRef.current?.readyState === WebSocket.OPEN) {
+				ws.close();
+				wsRef.current = null;
+			}
+		};
+	}, [logPath, open]);
+
+	useEffect(() => {
+		const logs = parseLogs(data);
+		let filteredLogsResult = logs;
+		if (serverId) {
+			let hideSubsequentLogs = false;
+			filteredLogsResult = logs.filter((log) => {
+				if (
+					log.message.includes(
+						"===================================EXTRA LOGS============================================",
+					)
+				) {
+					hideSubsequentLogs = true;
+					return showExtraLogs;
+				}
+				return showExtraLogs ? true : !hideSubsequentLogs;
+			});
+		}
+
+		setFilteredLogs(filteredLogsResult);
+	}, [data, showExtraLogs]);
+
+	useEffect(() => {
+		scrollToBottom();
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
+
+	const optionalErrors = parseLogs(errorMessage || "");
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(e) => {
+				onClose();
+				if (!e) {
+					setData("");
+				}
+
+				if (wsRef.current) {
+					if (wsRef.current.readyState === WebSocket.OPEN) {
+						wsRef.current.close();
+					}
+				}
+			}}
+		>
+			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Deployment</DialogTitle>
+					<DialogDescription className="flex items-center gap-2">
+						<span>
+							See all the details of this deployment |{" "}
+							<Badge variant="blank" className="text-xs">
+								{filteredLogs.length} lines
+							</Badge>
+						</span>
+						{serverId && (
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="show-extra-logs"
+									checked={showExtraLogs}
+									onCheckedChange={(checked) =>
+										setShowExtraLogs(checked as boolean)
+									}
+								/>
+								<label
+									htmlFor="show-extra-logs"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									Show Extra Logs
+								</label>
+							</div>
+						)}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<>
+							{optionalErrors.length > 0 ? (
+								optionalErrors.map((log: LogLine, index: number) => (
+									<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
+								))
+							) : (
+								<div className="flex justify-center items-center h-full text-muted-foreground">
+									<Loader2 className="h-6 w-6 animate-spin" />
+								</div>
+							)}
+						</>
+					)}
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,125 @@
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { type RouterOutputs, api } from "@/utils/api";
+import { RocketIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { CancelQueuesCompose } from "./cancel-queues-compose";
+import { RefreshTokenCompose } from "./refresh-token-compose";
+import { ShowDeploymentCompose } from "./show-deployment-compose";
+
+interface Props {
+	composeId: string;
+}
+export const ShowDeploymentsCompose = ({ composeId }: Props) => {
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
+	const { data } = api.compose.one.useQuery({ composeId });
+	const { data: deployments } = api.deployment.allByCompose.useQuery(
+		{ composeId },
+		{
+			enabled: !!composeId,
+			refetchInterval: 5000,
+		},
+	);
+	const [url, setUrl] = React.useState("");
+	useEffect(() => {
+		setUrl(document.location.origin);
+	}, []);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Deployments</CardTitle>
+					<CardDescription>
+						See all the 10 last deployments for this compose
+					</CardDescription>
+				</div>
+				<CancelQueuesCompose composeId={composeId} />
+				{/* <CancelQueues applicationId={applicationId} /> */}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-col gap-2 text-sm">
+					<span>
+						If you want to re-deploy this application use this URL in the config
+						of your git provider or docker
+					</span>
+					<div className="flex flex-row items-center gap-2 flex-wrap">
+						<span>Webhook URL: </span>
+						<div className="flex flex-row items-center gap-2">
+							<span className="text-muted-foreground">
+								{`${url}/api/deploy/compose/${data?.refreshToken}`}
+							</span>
+							<RefreshTokenCompose composeId={composeId} />
+						</div>
+					</div>
+				</div>
+				{data?.deployments?.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<RocketIcon className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No deployments found
+						</span>
+					</div>
+				) : (
+					<div className="flex flex-col gap-4">
+						{deployments?.map((deployment) => (
+							<div
+								key={deployment.deploymentId}
+								className="flex items-center justify-between rounded-lg border p-4"
+							>
+								<div className="flex flex-col">
+									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+										{deployment.status}
+
+										<StatusTooltip
+											status={deployment?.status}
+											className="size-2.5"
+										/>
+									</span>
+									<span className="text-sm text-muted-foreground">
+										{deployment.title}
+									</span>
+									{deployment.description && (
+										<span className="text-sm text-muted-foreground">
+											{deployment.description}
+										</span>
+									)}
+								</div>
+								<div className="flex flex-col items-end gap-2">
+									<div className="text-sm capitalize text-muted-foreground">
+										<DateTooltip date={deployment.createdAt} />
+									</div>
+
+									<Button
+										onClick={() => {
+											setActiveLog(deployment);
+										}}
+									>
+										View
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+				<ShowDeploymentCompose
+					serverId={data?.serverId || ""}
+					open={Boolean(activeLog && activeLog.logPath !== null)}
+					onClose={() => setActiveLog(null)}
+					logPath={activeLog?.logPath || ""}
+					errorMessage={activeLog?.errorMessage || ""}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,441 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input, NumberInput } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+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";
+
+type Domain = z.infer<typeof domainCompose>;
+
+export type CacheType = "fetch" | "cache";
+
+interface Props {
+	composeId: string;
+	domainId?: string;
+	children: React.ReactNode;
+}
+
+export const AddDomainCompose = ({
+	composeId,
+	domainId = "",
+	children,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const utils = api.useUtils();
+	const { data, refetch } = api.domain.one.useQuery(
+		{
+			domainId,
+		},
+		{
+			enabled: !!domainId,
+		},
+	);
+
+	const { data: compose } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{
+			enabled: !!composeId,
+		},
+	);
+
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId,
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+		},
+	);
+
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
+	const { mutateAsync, isError, error, isLoading } = domainId
+		? api.domain.update.useMutation()
+		: api.domain.create.useMutation();
+
+	const form = useForm<Domain>({
+		resolver: zodResolver(domainCompose),
+	});
+
+	const https = form.watch("https");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				...data,
+				/* Convert null to undefined */
+				path: data?.path || undefined,
+				port: data?.port || undefined,
+				serviceName: data?.serviceName || undefined,
+			});
+		}
+
+		if (!domainId) {
+			form.reset({});
+		}
+	}, [form, form.reset, data, isLoading]);
+
+	const dictionary = {
+		success: domainId ? "Domain Updated" : "Domain Created",
+		error: domainId ? "Error updating the domain" : "Error creating the domain",
+		submit: domainId ? "Update" : "Create",
+		dialogDescription: domainId
+			? "In this section you can edit a domain"
+			: "In this section you can add domains",
+	};
+
+	const onSubmit = async (data: Domain) => {
+		await mutateAsync({
+			domainId,
+			composeId,
+			domainType: "compose",
+			...data,
+		})
+			.then(async () => {
+				await utils.domain.byComposeId.invalidate({
+					composeId,
+				});
+				toast.success(dictionary.success);
+				if (domainId) {
+					refetch();
+				}
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error(dictionary.error);
+			});
+	};
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger className="" asChild>
+				{children}
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Domain</DialogTitle>
+					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4">
+					<AlertBlock type="info">
+						Deploy is required to apply changes after creating or updating a
+						domain.
+					</AlertBlock>
+					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				</div>
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								{errorServices && (
+									<AlertBlock
+										type="warning"
+										className="[overflow-wrap:anywhere]"
+									>
+										{errorServices?.message}
+									</AlertBlock>
+								)}
+								<div className="flex flex-row items-end w-full gap-4">
+									<FormField
+										control={form.control}
+										name="serviceName"
+										render={({ field }) => (
+											<FormItem className="w-full">
+												<FormLabel>Service Name</FormLabel>
+												<div className="flex gap-2">
+													<Select
+														onValueChange={field.onChange}
+														defaultValue={field.value || ""}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue placeholder="Select a service name" />
+															</SelectTrigger>
+														</FormControl>
+
+														<SelectContent>
+															{services?.map((service, index) => (
+																<SelectItem
+																	value={service}
+																	key={`${service}-${index}`}
+																>
+																	{service}
+																</SelectItem>
+															))}
+															<SelectItem value="none" disabled>
+																Empty
+															</SelectItem>
+														</SelectContent>
+													</Select>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "fetch") {
+																			refetchServices();
+																		} else {
+																			setCacheType("fetch");
+																		}
+																	}}
+																>
+																	<RefreshCw className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Fetch: Will clone the repository and load the
+																	services
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "cache") {
+																			refetchServices();
+																		} else {
+																			setCacheType("cache");
+																		}
+																	}}
+																>
+																	<DatabaseZap className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Cache: If you previously deployed this
+																	compose, it will read the services from the
+																	last deployment/fetch from the repository
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host</FormLabel>
+											<div className="flex gap-2">
+												<FormControl>
+													<Input placeholder="api.dokploy.com" {...field} />
+												</FormControl>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingGenerate}
+																onClick={() => {
+																	generateDomain({
+																		serverId: compose?.serverId || "",
+																		appName: compose?.appName || "",
+																	})
+																		.then((domain) => {
+																			field.onChange(domain);
+																		})
+																		.catch((err) => {
+																			toast.error(err.message);
+																		});
+																}}
+															>
+																<Dices className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>Generate traefik.me domain</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="path"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Path</FormLabel>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormControl>
+													<NumberInput placeholder={"3000"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="https"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+
+								{https && (
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate Provider</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate provider" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Let's Encrypt
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form"
+							type="submit"
+						>
+							{dictionary.submit}
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,150 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { AddDomainCompose } from "./add-domain";
+
+interface Props {
+	composeId: string;
+}
+
+export const ShowDomainsCompose = ({ composeId }: Props) => {
+	const { data, refetch } = api.domain.byComposeId.useQuery(
+		{
+			composeId,
+		},
+		{
+			enabled: !!composeId,
+		},
+	);
+
+	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
+		api.domain.delete.useMutation();
+
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader className="flex flex-row items-center flex-wrap gap-4 justify-between">
+					<div className="flex flex-col gap-1">
+						<CardTitle className="text-xl">Domains</CardTitle>
+						<CardDescription>
+							Domains are used to access to the application
+						</CardDescription>
+					</div>
+
+					<div className="flex flex-row gap-4 flex-wrap">
+						{data && data?.length > 0 && (
+							<AddDomainCompose composeId={composeId}>
+								<Button>
+									<GlobeIcon className="size-4" /> Add Domain
+								</Button>
+							</AddDomainCompose>
+						)}
+					</div>
+				</CardHeader>
+				<CardContent className="flex w-full flex-row gap-4">
+					{data?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3">
+							<GlobeIcon className="size-8 text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								To access to the application it is required to set at least 1
+								domain
+							</span>
+							<div className="flex flex-row gap-4 flex-wrap">
+								<AddDomainCompose composeId={composeId}>
+									<Button>
+										<GlobeIcon className="size-4" /> Add Domain
+									</Button>
+								</AddDomainCompose>
+							</div>
+						</div>
+					) : (
+						<div className="flex w-full flex-col gap-4">
+							{data?.map((item) => {
+								return (
+									<div
+										key={item.domainId}
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
+									>
+										<div className="md:basis-1/2 flex gap-6 w-full items-center">
+											<span className="opacity-50 text-center font-medium text-sm whitespace-nowrap">
+												{item.serviceName}
+											</span>
+
+											<Link
+												className="flex gap-2 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
+												target="_blank"
+												href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
+											>
+												<span className="truncate  text-sm">{item.host}</span>
+												<ExternalLink className="size-4 min-w-4" />
+											</Link>
+										</div>
+
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+											</div>
+
+											<div className="flex gap-2">
+												<AddDomainCompose
+													composeId={composeId}
+													domainId={item.domainId}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomainCompose>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
+														})
+															.then((_data) => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-red-500/10"
+														isLoading={isRemoving}
+													>
+														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													</Button>
+												</DialogAction>
+											</div>
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

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

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

@@ -79,22 +79,6 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 				toast.error("Error updating the Compose config");
 			});
 	};
-
-	// Add keyboard shortcut for Ctrl+S/Cmd+S
-	useEffect(() => {
-		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
-				e.preventDefault();
-				form.handleSubmit(onSubmit)();
-			}
-		};
-
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [form, onSubmit, isLoading]);
-
 	return (
 		<>
 			<div className="w-full flex flex-col gap-4 ">
@@ -113,7 +97,6 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 										<div className="flex flex-col gap-4 w-full outline-none focus:outline-none overflow-auto">
 											<CodeEditor
 												// disabled
-												language="yaml"
 												value={field.value}
 												className="font-mono"
 												wrapperClassName="compose-file-editor"

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

@@ -1,6 +1,4 @@
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -31,18 +29,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -58,8 +48,6 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	enableSubmodules: z.boolean().default(false),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -85,8 +73,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
-			watchPaths: [],
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -132,11 +118,9 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				bitbucketId: data.bitbucketId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data?.composeId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: BitbucketProvider) => {
 		await mutateAsync({
@@ -148,8 +132,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "bitbucket",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
-			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -215,20 +197,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<BitbucketIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -396,99 +365,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
-												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/*.js)"]',
-													) 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>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

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

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

@@ -1,503 +0,0 @@
-import { GiteaIcon } from "@/components/icons/data-tools-icons";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { api } from "@/utils/api";
-import type { Repository } from "@/utils/gitea-utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const GiteaProviderSchema = z.object({
-	composePath: z.string().min(1),
-	repository: z
-		.object({
-			repo: z.string().min(1, "Repo is required"),
-			owner: z.string().min(1, "Owner is required"),
-		})
-		.required(),
-	branch: z.string().min(1, "Branch is required"),
-	giteaId: z.string().min(1, "Gitea Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	enableSubmodules: z.boolean().default(false),
-});
-
-type GiteaProvider = z.infer<typeof GiteaProviderSchema>;
-
-interface Props {
-	composeId: string;
-}
-
-export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
-	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
-	const { data, refetch } = api.compose.one.useQuery({ composeId });
-	const { mutateAsync, isLoading: isSavingGiteaProvider } =
-		api.compose.update.useMutation();
-
-	const form = useForm<GiteaProvider>({
-		defaultValues: {
-			composePath: "./docker-compose.yml",
-			repository: {
-				owner: "",
-				repo: "",
-			},
-			giteaId: "",
-			branch: "",
-			watchPaths: [],
-			enableSubmodules: false,
-		},
-		resolver: zodResolver(GiteaProviderSchema),
-	});
-
-	const repository = form.watch("repository");
-	const giteaId = form.watch("giteaId");
-
-	const { data: giteaUrl } = api.gitea.getGiteaUrl.useQuery(
-		{ giteaId },
-		{
-			enabled: !!giteaId,
-		},
-	);
-
-	const {
-		data: repositories,
-		isLoading: isLoadingRepositories,
-		error,
-	} = api.gitea.getGiteaRepositories.useQuery<Repository[]>(
-		{
-			giteaId,
-		},
-		{
-			enabled: !!giteaId,
-		},
-	);
-
-	const {
-		data: branches,
-		fetchStatus,
-		status,
-	} = api.gitea.getGiteaBranches.useQuery(
-		{
-			owner: repository?.owner,
-			repositoryName: repository?.repo,
-			giteaId: giteaId,
-		},
-		{
-			enabled: !!repository?.owner && !!repository?.repo && !!giteaId,
-		},
-	);
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				branch: data.giteaBranch || "",
-				repository: {
-					repo: data.giteaRepository || "",
-					owner: data.giteaOwner || "",
-				},
-				composePath: data.composePath || "./docker-compose.yml",
-				giteaId: data.giteaId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules ?? false,
-			});
-		}
-	}, [form.reset, data?.composeId, form]);
-
-	const onSubmit = async (data: GiteaProvider) => {
-		await mutateAsync({
-			giteaBranch: data.branch,
-			giteaRepository: data.repository.repo,
-			giteaOwner: data.repository.owner,
-			composePath: data.composePath,
-			giteaId: data.giteaId,
-			composeId,
-			sourceType: "gitea",
-			composeStatus: "idle",
-			watchPaths: data.watchPaths,
-			enableSubmodules: data.enableSubmodules,
-		} as any)
-			.then(async () => {
-				toast.success("Service Provider Saved");
-				await refetch();
-			})
-			.catch(() => {
-				toast.error("Error saving the Gitea provider");
-			});
-	};
-
-	return (
-		<div>
-			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					className="grid w-full gap-4 py-3"
-				>
-					{error && <AlertBlock type="error">{error?.message}</AlertBlock>}
-
-					<div className="grid md:grid-cols-2 gap-4">
-						<FormField
-							control={form.control}
-							name="giteaId"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Gitea Account</FormLabel>
-									<Select
-										onValueChange={(value) => {
-											field.onChange(value);
-											form.setValue("repository", {
-												owner: "",
-												repo: "",
-											});
-											form.setValue("branch", "");
-										}}
-										defaultValue={field.value}
-										value={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a Gitea Account" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											{giteaProviders?.map((giteaProvider) => (
-												<SelectItem
-													key={giteaProvider.giteaId}
-													value={giteaProvider.giteaId}
-												>
-													{giteaProvider.gitProvider.name}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="repository"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`${giteaUrl}/${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"
-											>
-												<GiteaIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														"w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{isLoadingRepositories
-														? "Loading...."
-														: field.value.owner
-															? repositories?.find(
-																	(repo) => repo.name === field.value.repo,
-																)?.name
-															: "Select repository"}
-													<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 repository..."
-													className="h-9"
-												/>
-												{isLoadingRepositories && (
-													<span className="py-6 text-center text-sm">
-														Loading Repositories....
-													</span>
-												)}
-												<CommandEmpty>No repositories found.</CommandEmpty>
-												<ScrollArea className="h-96">
-													<CommandGroup>
-														{repositories?.map((repo) => (
-															<CommandItem
-																key={repo.url}
-																value={repo.name}
-																onSelect={() => {
-																	form.setValue("repository", {
-																		owner: repo.owner.username,
-																		repo: repo.name,
-																	});
-																	form.setValue("branch", "");
-																}}
-															>
-																<span className="flex items-center gap-2">
-																	<span>{repo.name}</span>
-																	<span className="text-muted-foreground text-xs">
-																		{repo.owner.username}
-																	</span>
-																</span>
-																<CheckIcon
-																	className={cn(
-																		"ml-auto h-4 w-4",
-																		repo.name === field.value.repo
-																			? "opacity-100"
-																			: "opacity-0",
-																	)}
-																/>
-															</CommandItem>
-														))}
-													</CommandGroup>
-												</ScrollArea>
-											</Command>
-										</PopoverContent>
-									</Popover>
-									{form.formState.errors.repository && (
-										<p className={cn("text-sm font-medium text-destructive")}>
-											Repository is required
-										</p>
-									)}
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="branch"
-							render={({ field }) => (
-								<FormItem className="block w-full">
-									<FormLabel>Branch</FormLabel>
-									<Popover>
-										<PopoverTrigger asChild>
-											<FormControl>
-												<Button
-													variant="outline"
-													className={cn(
-														"w-full justify-between !bg-input",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{status === "loading" && fetchStatus === "fetching"
-														? "Loading...."
-														: field.value
-															? branches?.find(
-																	(branch) => branch.name === field.value,
-																)?.name
-															: "Select branch"}
-													<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 branches..."
-													className="h-9"
-												/>
-												<CommandEmpty>No branches found.</CommandEmpty>
-												<ScrollArea className="h-96">
-													<CommandGroup>
-														{branches?.map((branch) => (
-															<CommandItem
-																key={branch.name}
-																value={branch.name}
-																onSelect={() =>
-																	form.setValue("branch", branch.name)
-																}
-															>
-																<span className="flex items-center gap-2">
-																	{branch.name}
-																</span>
-																<CheckIcon
-																	className={cn(
-																		"ml-auto h-4 w-4",
-																		branch.name === field.value
-																			? "opacity-100"
-																			: "opacity-0",
-																	)}
-																/>
-															</CommandItem>
-														))}
-													</CommandGroup>
-												</ScrollArea>
-											</Command>
-										</PopoverContent>
-									</Popover>
-									{form.formState.errors.branch && (
-										<p className={cn("text-sm font-medium text-destructive")}>
-											Branch is required
-										</p>
-									)}
-								</FormItem>
-							)}
-						/>
-
-						<FormField
-							control={form.control}
-							name="composePath"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Compose Path</FormLabel>
-									<FormControl>
-										<Input placeholder="docker-compose.yml" {...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>
-													<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/*.js)"
-												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="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>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
-					</div>
-
-					<div className="flex justify-end">
-						<Button type="submit" isLoading={isSavingGiteaProvider}>
-							Save
-						</Button>
-					</div>
-				</form>
-			</Form>
-		</div>
-	);
-};

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

@@ -1,5 +1,3 @@
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -30,18 +28,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-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, HelpCircle, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -57,9 +47,6 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	triggerType: z.enum(["push", "tag"]).default("push"),
-	enableSubmodules: z.boolean().default(false),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -84,16 +71,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
-			watchPaths: [],
-			triggerType: "push",
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
-	const triggerType = form.watch("triggerType");
+
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
@@ -129,12 +113,9 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				githubId: data.githubId || "",
-				watchPaths: data.watchPaths || [],
-				triggerType: data.triggerType || "push",
-				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data?.composeId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: GithubProvider) => {
 		await mutateAsync({
@@ -146,9 +127,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			githubId: data.githubId,
 			sourceType: "github",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
-			enableSubmodules: data.enableSubmodules,
-			triggerType: data.triggerType,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -205,25 +183,13 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GithubIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -391,145 +357,6 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="triggerType"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Trigger Type</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Choose when to trigger deployments: on push to the
-														selected branch or when a new tag is created.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<Select
-										onValueChange={field.onChange}
-										defaultValue={field.value}
-										value={field.value}
-									>
-										<FormControl>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a trigger type" />
-											</SelectTrigger>
-										</FormControl>
-										<SelectContent>
-											<SelectItem value="push">On Push</SelectItem>
-											<SelectItem value="tag">On Tag</SelectItem>
-										</SelectContent>
-									</Select>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						{triggerType === "push" && (
-							<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/*.js)"
-													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/*.js)"]',
-														) 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>
-								)}
-							/>
-						)}
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,6 +1,4 @@
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -31,18 +29,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -60,8 +50,6 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
-	watchPaths: z.array(z.string()).optional(),
-	enableSubmodules: z.boolean().default(false),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -88,8 +76,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
-			watchPaths: [],
-			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -138,11 +124,9 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				gitlabId: data.gitlabId || "",
-				watchPaths: data.watchPaths || [],
-				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data?.composeId, form]);
+	}, [form.reset, data, form]);
 
 	const onSubmit = async (data: GitlabProvider) => {
 		await mutateAsync({
@@ -156,8 +140,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 			sourceType: "gitlab",
 			composeStatus: "idle",
-			watchPaths: data.watchPaths,
-			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -217,25 +199,13 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<div className="flex items-center justify-between">
-										<FormLabel>Repository</FormLabel>
-										{field.value.owner && field.value.repo && (
-											<Link
-												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
-											>
-												<GitlabIcon className="h-4 w-4" />
-												<span>View Repository</span>
-											</Link>
-										)}
-									</div>
+									<FormLabel>Repository</FormLabel>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -412,99 +382,6 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<FormField
-							control={form.control}
-							name="watchPaths"
-							render={({ field }) => (
-								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
-												</TooltipTrigger>
-												<TooltipContent>
-													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-									<div className="flex flex-wrap gap-2 mb-2">
-										{field.value?.map((path, index) => (
-											<Badge key={index} variant="secondary">
-												{path}
-												<X
-													className="ml-1 size-3 cursor-pointer"
-													onClick={() => {
-														const newPaths = [...(field.value || [])];
-														newPaths.splice(index, 1);
-														form.setValue("watchPaths", newPaths);
-													}}
-												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
-												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/*.js)"]',
-													) 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>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="enableSubmodules"
-							render={({ field }) => (
-								<FormItem className="flex items-center space-x-2">
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
-								</FormItem>
-							)}
-						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -1,73 +1,35 @@
 import {
 	BitbucketIcon,
 	GitIcon,
-	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
+import { CodeIcon, GitBranch } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";
 import { SaveGitProviderCompose } from "./save-git-provider-compose";
-import { SaveGiteaProviderCompose } from "./save-gitea-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
 
-type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
+type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket";
 interface Props {
 	composeId: string;
 }
 
 export const ShowProviderFormCompose = ({ composeId }: Props) => {
-	const { data: githubProviders, isLoading: isLoadingGithub } =
-		api.github.githubProviders.useQuery();
-	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
-		api.gitlab.gitlabProviders.useQuery();
-	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
+	const { data: githubProviders } = api.github.githubProviders.useQuery();
+	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
+	const { data: bitbucketProviders } =
 		api.bitbucket.bitbucketProviders.useQuery();
-	const { data: giteaProviders, isLoading: isLoadingGitea } =
-		api.gitea.giteaProviders.useQuery();
 
 	const { data: compose } = api.compose.one.useQuery({ composeId });
 	const [tab, setSab] = useState<TabState>(compose?.sourceType || "github");
-
-	const isLoading =
-		isLoadingGithub || isLoadingGitlab || isLoadingBitbucket || isLoadingGitea;
-
-	if (isLoading) {
-		return (
-			<Card className="group relative w-full bg-transparent">
-				<CardHeader>
-					<CardTitle className="flex items-start justify-between">
-						<div className="flex flex-col gap-2">
-							<span className="flex flex-col space-y-0.5">Provider</span>
-							<p className="flex items-center text-sm font-normal text-muted-foreground">
-								Select the source of your code
-							</p>
-						</div>
-						<div className="hidden space-y-1 text-sm font-normal md:block">
-							<GitBranch className="size-6 text-muted-foreground" />
-						</div>
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<div className="flex min-h-[25vh] items-center justify-center">
-						<div className="flex items-center gap-2 text-muted-foreground">
-							<Loader2 className="size-4 animate-spin" />
-							<span>Loading providers...</span>
-						</div>
-					</div>
-				</CardContent>
-			</Card>
-		);
-	}
-
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -92,21 +54,21 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4">
-						<TabsList className="md:grid md:w-fit md:grid-cols-6 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+					<div className="flex flex-row items-center justify-between  w-full gap-4">
+						<TabsList className="md:grid md:w-fit md:grid-cols-5 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
 							<TabsTrigger
 								value="github"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
 								<GithubIcon className="size-4 text-current fill-current" />
-								GitHub
+								Github
 							</TabsTrigger>
 							<TabsTrigger
 								value="gitlab"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
 								<GitlabIcon className="size-4 text-current fill-current" />
-								GitLab
+								Gitlab
 							</TabsTrigger>
 							<TabsTrigger
 								value="bitbucket"
@@ -115,12 +77,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								<BitbucketIcon className="size-4 text-current fill-current" />
 								Bitbucket
 							</TabsTrigger>
-							<TabsTrigger
-								value="gitea"
-								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
-							>
-								<GiteaIcon className="size-4 text-current fill-current" /> Gitea
-							</TabsTrigger>
+
 							<TabsTrigger
 								value="git"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
@@ -132,17 +89,16 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								value="raw"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
-								<CodeIcon className="size-4" />
+								<CodeIcon className="size-4 " />
 								Raw
 							</TabsTrigger>
 						</TabsList>
 					</div>
-
 					<TabsContent value="github" className="w-full p-2">
 						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<GithubIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitHub, you need to configure your account
@@ -162,7 +118,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						{gitlabProviders && gitlabProviders?.length > 0 ? (
 							<SaveGitlabProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<GitlabIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitLab, you need to configure your account
@@ -182,7 +138,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						{bitbucketProviders && bitbucketProviders?.length > 0 ? (
 							<SaveBitbucketProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
 								<BitbucketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using Bitbucket, you need to configure your account
@@ -198,26 +154,6 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 							</div>
 						)}
 					</TabsContent>
-					<TabsContent value="gitea" className="w-full p-2">
-						{giteaProviders && giteaProviders?.length > 0 ? (
-							<SaveGiteaProviderCompose composeId={composeId} />
-						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
-								<GiteaIcon className="size-8 text-muted-foreground" />
-								<span className="text-base text-muted-foreground">
-									To deploy using Gitea, you need to configure your account
-									first. Please, go to{" "}
-									<Link
-										href="/dashboard/settings/git-providers"
-										className="text-foreground"
-									>
-										Settings
-									</Link>{" "}
-									to do so.
-								</span>
-							</div>
-						)}
-					</TabsContent>
 					<TabsContent value="git" className="w-full p-2">
 						<SaveGitProviderCompose composeId={composeId} />
 					</TabsContent>

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

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

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

@@ -10,7 +10,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Loader2, Puzzle, RefreshCw } from "lucide-react";
+import { Puzzle, RefreshCw } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -62,54 +62,35 @@ 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>
-				{isLoading ? (
-					<div className="flex flex-row items-center justify-center min-h-[25rem] border p-4 rounded-md">
-						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
-					</div>
-				) : compose?.length === 5 ? (
-					<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-[25rem]">
-						<Puzzle className="h-8 w-8 text-muted-foreground mb-2" />
-						<span className="text-muted-foreground">
-							No converted compose data available.
-						</span>
-					</div>
-				) : (
-					<>
-						<div className="flex flex-row gap-2 justify-end">
-							<Button
-								variant="secondary"
-								isLoading={isLoading}
-								onClick={() => {
-									mutateAsync({ composeId })
-										.then(() => {
-											refetch();
-											toast.success("Fetched source type");
-										})
-										.catch((err) => {
-											toast.error("Error fetching source type", {
-												description: err.message,
-											});
-										});
-								}}
-							>
-								Refresh <RefreshCw className="ml-2 h-4 w-4" />
-							</Button>
-						</div>
+				<div className="flex flex-row gap-2 justify-end">
+					<Button
+						variant="secondary"
+						isLoading={isLoading}
+						onClick={() => {
+							mutateAsync({ composeId })
+								.then(() => {
+									refetch();
+									toast.success("Fetched source type");
+								})
+								.catch((err) => {
+									toast.error("Error fetching source type", {
+										description: err.message,
+									});
+								});
+						}}
+					>
+						Refresh <RefreshCw className="ml-2 h-4 w-4" />
+					</Button>
+				</div>
 
-						<pre>
-							<CodeEditor
-								value={compose || ""}
-								language="yaml"
-								readOnly
-								height="50rem"
-							/>
-						</pre>
-					</>
-				)}
+				<pre>
+					<CodeEditor
+						value={compose || ""}
+						language="yaml"
+						readOnly
+						height="50rem"
+					/>
+				</pre>
 			</DialogContent>
 		</Dialog>
 	);

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

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

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

@@ -0,0 +1,312 @@
+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,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddPostgresBackup1Schema = z.object({
+	destinationId: z.string().min(1, "Destination required"),
+	schedule: z.string().min(1, "Schedule (Cron) required"),
+	// .regex(
+	//   new RegExp(
+	//     /^(\*|([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])|\*\/([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])) (\*|([0-9]|1[0-9]|2[0-3])|\*\/([0-9]|1[0-9]|2[0-3])) (\*|([1-9]|1[0-9]|2[0-9]|3[0-1])|\*\/([1-9]|1[0-9]|2[0-9]|3[0-1])) (\*|([1-9]|1[0-2])|\*\/([1-9]|1[0-2])) (\*|([0-6])|\*\/([0-6]))$/,
+	//   ),
+	//   "Invalid Cron",
+	// ),
+	prefix: z.string().min(1, "Prefix required"),
+	enabled: z.boolean(),
+	database: z.string().min(1, "Database required"),
+});
+
+type AddPostgresBackup = z.infer<typeof AddPostgresBackup1Schema>;
+
+interface Props {
+	databaseId: string;
+	databaseType: "postgres" | "mariadb" | "mysql" | "mongo";
+	refetch: () => void;
+}
+
+export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
+	const { data, isLoading } = api.destination.all.useQuery();
+
+	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
+		api.backup.create.useMutation();
+
+	const form = useForm<AddPostgresBackup>({
+		defaultValues: {
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		},
+		resolver: zodResolver(AddPostgresBackup1Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddPostgresBackup) => {
+		const getDatabaseId =
+			databaseType === "postgres"
+				? {
+						postgresId: databaseId,
+					}
+				: databaseType === "mariadb"
+					? {
+							mariadbId: databaseId,
+						}
+					: databaseType === "mysql"
+						? {
+								mysqlId: databaseId,
+							}
+						: databaseType === "mongo"
+							? {
+									mongoId: databaseId,
+								}
+							: undefined;
+
+		await createBackup({
+			destinationId: data.destinationId,
+			prefix: data.prefix,
+			schedule: data.schedule,
+			enabled: data.enabled,
+			database: data.database,
+			databaseType,
+			...getDatabaseId,
+		})
+			.then(async () => {
+				toast.success("Backup Created");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error creating a backup");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>
+					<PlusIcon className="h-4 w-4" />
+					Create Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg max-h-screen overflow-y-auto">
+				<DialogHeader>
+					<DialogTitle>Create a backup</DialogTitle>
+					<DialogDescription>Add a new backup</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="grid grid-cols-1 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",
+														)}
+													>
+														{isLoading
+															? "Loading...."
+															: field.value
+																? data?.find(
+																		(destination) =>
+																			destination.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 Destination..."
+														className="h-9"
+													/>
+													{isLoading && (
+														<span className="py-6 text-center text-sm">
+															Loading Destinations....
+														</span>
+													)}
+													<CommandEmpty>No destinations found.</CommandEmpty>
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{data?.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="database"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Database</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="schedule"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Schedule (Cron)</FormLabel>
+											<FormControl>
+												<Input placeholder={"0 0 * * *"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="prefix"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Prefix Destination</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy/"} {...field} />
+											</FormControl>
+											<FormDescription>
+												Use if you want to storage in a specific path of your
+												destination/bucket
+											</FormDescription>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
+										<div className="space-y-0.5">
+											<FormLabel>Enabled</FormLabel>
+											<FormDescription>
+												Enable or disable the backup
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isCreatingPostgresBackup}
+								form="hook-form-add-backup"
+								type="submit"
+							>
+								Create
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -1,828 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-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,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-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 {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusIcon,
-	RefreshCw,
-} from "lucide-react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { commonCronExpressions } from "../../application/schedules/handle-schedules";
-
-type CacheType = "cache" | "fetch";
-
-type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server";
-
-const Schema = z
-	.object({
-		destinationId: z.string().min(1, "Destination required"),
-		schedule: z.string().min(1, "Schedule (Cron) required"),
-		prefix: z.string().min(1, "Prefix required"),
-		enabled: z.boolean(),
-		database: z.string().min(1, "Database required"),
-		keepLatestCount: z.coerce.number().optional(),
-		serviceName: z.string().nullable(),
-		databaseType: z
-			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
-			.optional(),
-		backupType: z.enum(["database", "compose"]),
-		metadata: z
-			.object({
-				postgres: z
-					.object({
-						databaseUser: z.string(),
-					})
-					.optional(),
-				mariadb: z
-					.object({
-						databaseUser: z.string(),
-						databasePassword: z.string(),
-					})
-					.optional(),
-				mongo: z
-					.object({
-						databaseUser: z.string(),
-						databasePassword: z.string(),
-					})
-					.optional(),
-				mysql: z
-					.object({
-						databaseRootPassword: z.string(),
-					})
-					.optional(),
-			})
-			.optional(),
-	})
-	.superRefine((data, ctx) => {
-		if (data.backupType === "compose" && !data.databaseType) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Database type is required for compose backups",
-				path: ["databaseType"],
-			});
-		}
-
-		if (data.backupType === "compose" && !data.serviceName) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Service name is required for compose backups",
-				path: ["serviceName"],
-			});
-		}
-
-		if (data.backupType === "compose" && data.databaseType) {
-			if (data.databaseType === "postgres") {
-				if (!data.metadata?.postgres?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for PostgreSQL",
-						path: ["metadata", "postgres", "databaseUser"],
-					});
-				}
-			} else if (data.databaseType === "mariadb") {
-				if (!data.metadata?.mariadb?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for MariaDB",
-						path: ["metadata", "mariadb", "databaseUser"],
-					});
-				}
-				if (!data.metadata?.mariadb?.databasePassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database password is required for MariaDB",
-						path: ["metadata", "mariadb", "databasePassword"],
-					});
-				}
-			} else if (data.databaseType === "mongo") {
-				if (!data.metadata?.mongo?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for MongoDB",
-						path: ["metadata", "mongo", "databaseUser"],
-					});
-				}
-				if (!data.metadata?.mongo?.databasePassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database password is required for MongoDB",
-						path: ["metadata", "mongo", "databasePassword"],
-					});
-				}
-			} else if (data.databaseType === "mysql") {
-				if (!data.metadata?.mysql?.databaseRootPassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Root password is required for MySQL",
-						path: ["metadata", "mysql", "databaseRootPassword"],
-					});
-				}
-			}
-		}
-	});
-
-interface Props {
-	id?: string;
-	backupId?: string;
-	databaseType?: DatabaseType;
-	refetch: () => void;
-	backupType: "database" | "compose";
-}
-
-export const HandleBackup = ({
-	id,
-	backupId,
-	databaseType = "postgres",
-	refetch,
-	backupType = "database",
-}: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const { data, isLoading } = api.destination.all.useQuery();
-	const { data: backup } = api.backup.one.useQuery(
-		{
-			backupId: backupId ?? "",
-		},
-		{
-			enabled: !!backupId,
-		},
-	);
-	const [cacheType, setCacheType] = useState<CacheType>("cache");
-	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
-		backupId
-			? api.backup.update.useMutation()
-			: api.backup.create.useMutation();
-
-	const form = useForm<z.infer<typeof Schema>>({
-		defaultValues: {
-			database: databaseType === "web-server" ? "dokploy" : "",
-			destinationId: "",
-			enabled: true,
-			prefix: "/",
-			schedule: "",
-			keepLatestCount: undefined,
-			serviceName: null,
-			databaseType: backupType === "compose" ? undefined : databaseType,
-			backupType: backupType,
-			metadata: {},
-		},
-		resolver: zodResolver(Schema),
-	});
-
-	const {
-		data: services,
-		isFetching: isLoadingServices,
-		error: errorServices,
-		refetch: refetchServices,
-	} = api.compose.loadServices.useQuery(
-		{
-			composeId: backup?.composeId ?? id ?? "",
-			type: cacheType,
-		},
-		{
-			retry: false,
-			refetchOnWindowFocus: false,
-			enabled: backupType === "compose" && !!backup?.composeId && !!id,
-		},
-	);
-
-	useEffect(() => {
-		form.reset({
-			database: backup?.database
-				? backup?.database
-				: databaseType === "web-server"
-					? "dokploy"
-					: "",
-			destinationId: backup?.destinationId ?? "",
-			enabled: backup?.enabled ?? true,
-			prefix: backup?.prefix ?? "/",
-			schedule: backup?.schedule ?? "",
-			keepLatestCount: backup?.keepLatestCount ?? undefined,
-			serviceName: backup?.serviceName ?? null,
-			databaseType: backup?.databaseType ?? databaseType,
-			backupType: backup?.backupType ?? backupType,
-			metadata: backup?.metadata ?? {},
-		});
-	}, [form, form.reset, backupId, backup]);
-
-	const onSubmit = async (data: z.infer<typeof Schema>) => {
-		const getDatabaseId =
-			backupType === "compose"
-				? {
-						composeId: id,
-					}
-				: databaseType === "postgres"
-					? {
-							postgresId: id,
-						}
-					: databaseType === "mariadb"
-						? {
-								mariadbId: id,
-							}
-						: databaseType === "mysql"
-							? {
-									mysqlId: id,
-								}
-							: databaseType === "mongo"
-								? {
-										mongoId: id,
-									}
-								: databaseType === "web-server"
-									? {
-											userId: id,
-										}
-									: undefined;
-
-		await createBackup({
-			destinationId: data.destinationId,
-			prefix: data.prefix,
-			schedule: data.schedule,
-			enabled: data.enabled,
-			database: data.database,
-			keepLatestCount: data.keepLatestCount ?? null,
-			databaseType: data.databaseType || databaseType,
-			serviceName: data.serviceName,
-			...getDatabaseId,
-			backupId: backupId ?? "",
-			backupType,
-			metadata: data.metadata,
-		})
-			.then(async () => {
-				toast.success(`Backup ${backupId ? "Updated" : "Created"}`);
-				refetch();
-				setIsOpen(false);
-			})
-			.catch(() => {
-				toast.error(`Error ${backupId ? "updating" : "creating"} a backup`);
-			});
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				{backupId ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="group hover:bg-blue-500/10 size-8"
-					>
-						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-					</Button>
-				) : (
-					<Button>
-						<PlusIcon className="h-4 w-4" />
-						{backupId ? "Update Backup" : "Create Backup"}
-					</Button>
-				)}
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-2xl max-h-screen overflow-y-auto">
-				<DialogHeader>
-					<DialogTitle>
-						{backupId ? "Update Backup" : "Create Backup"}
-					</DialogTitle>
-					<DialogDescription>
-						{backupId ? "Update a backup" : "Add a new backup"}
-					</DialogDescription>
-				</DialogHeader>
-
-				<Form {...form}>
-					<form
-						id="hook-form-add-backup"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<div className="grid grid-cols-1 gap-4">
-							{errorServices && (
-								<AlertBlock type="warning" className="[overflow-wrap:anywhere]">
-									{errorServices?.message}
-								</AlertBlock>
-							)}
-							{backupType === "compose" && (
-								<FormField
-									control={form.control}
-									name="databaseType"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Database Type</FormLabel>
-											<Select
-												value={field.value}
-												onValueChange={(value) => {
-													field.onChange(value as DatabaseType);
-													form.setValue("metadata", {});
-												}}
-											>
-												<SelectTrigger className="w-full">
-													<SelectValue placeholder="Select a database type" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectItem value="postgres">PostgreSQL</SelectItem>
-													<SelectItem value="mariadb">MariaDB</SelectItem>
-													<SelectItem value="mysql">MySQL</SelectItem>
-													<SelectItem value="mongo">MongoDB</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							)}
-							<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",
-														)}
-													>
-														{isLoading
-															? "Loading...."
-															: field.value
-																? data?.find(
-																		(destination) =>
-																			destination.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 Destination..."
-														className="h-9"
-													/>
-													{isLoading && (
-														<span className="py-6 text-center text-sm">
-															Loading Destinations....
-														</span>
-													)}
-													<CommandEmpty>No destinations found.</CommandEmpty>
-													<ScrollArea className="h-64">
-														<CommandGroup>
-															{data?.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>
-								)}
-							/>
-							{backupType === "compose" && (
-								<div className="flex flex-row items-end w-full gap-4">
-									<FormField
-										control={form.control}
-										name="serviceName"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<FormLabel>Service Name</FormLabel>
-												<div className="flex gap-2">
-													<Select
-														onValueChange={field.onChange}
-														value={field.value || undefined}
-													>
-														<FormControl>
-															<SelectTrigger>
-																<SelectValue placeholder="Select a service name" />
-															</SelectTrigger>
-														</FormControl>
-
-														<SelectContent>
-															{services?.map((service, index) => (
-																<SelectItem
-																	value={service}
-																	key={`${service}-${index}`}
-																>
-																	{service}
-																</SelectItem>
-															))}
-															{(!services || services.length === 0) && (
-																<SelectItem value="none" disabled>
-																	Empty
-																</SelectItem>
-															)}
-														</SelectContent>
-													</Select>
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	variant="secondary"
-																	type="button"
-																	isLoading={isLoadingServices}
-																	onClick={() => {
-																		if (cacheType === "fetch") {
-																			refetchServices();
-																		} else {
-																			setCacheType("fetch");
-																		}
-																	}}
-																>
-																	<RefreshCw className="size-4 text-muted-foreground" />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent
-																side="left"
-																sideOffset={5}
-																className="max-w-[10rem]"
-															>
-																<p>
-																	Fetch: Will clone the repository and load the
-																	services
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	variant="secondary"
-																	type="button"
-																	isLoading={isLoadingServices}
-																	onClick={() => {
-																		if (cacheType === "cache") {
-																			refetchServices();
-																		} else {
-																			setCacheType("cache");
-																		}
-																	}}
-																>
-																	<DatabaseZap className="size-4 text-muted-foreground" />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent
-																side="left"
-																sideOffset={5}
-																className="max-w-[10rem]"
-															>
-																<p>
-																	Cache: If you previously deployed this
-																	compose, it will read the services from the
-																	last deployment/fetch from the repository
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-												</div>
-
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								</div>
-							)}
-							<FormField
-								control={form.control}
-								name="database"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Database</FormLabel>
-											<FormControl>
-												<Input
-													disabled={databaseType === "web-server"}
-													placeholder={"dokploy"}
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="schedule"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												Schedule
-												<TooltipProvider>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Info className="w-4 h-4 text-muted-foreground cursor-help" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																Cron expression format: minute hour day month
-																weekday
-															</p>
-															<p>Example: 0 0 * * * (daily at midnight)</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</FormLabel>
-											<div className="flex flex-col gap-2">
-												<Select
-													onValueChange={(value) => {
-														field.onChange(value);
-													}}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue placeholder="Select a predefined schedule" />
-														</SelectTrigger>
-													</FormControl>
-													<SelectContent>
-														{commonCronExpressions.map((expr) => (
-															<SelectItem key={expr.value} value={expr.value}>
-																{expr.label} ({expr.value})
-															</SelectItem>
-														))}
-													</SelectContent>
-												</Select>
-												<div className="relative">
-													<FormControl>
-														<Input
-															placeholder="Custom cron expression (e.g., 0 0 * * *)"
-															{...field}
-														/>
-													</FormControl>
-												</div>
-											</div>
-											<FormDescription>
-												Choose a predefined schedule or enter a custom cron
-												expression
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="prefix"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Prefix Destination</FormLabel>
-											<FormControl>
-												<Input placeholder={"dokploy/"} {...field} />
-											</FormControl>
-											<FormDescription>
-												Use if you want to back up in a specific path of your
-												destination/bucket
-											</FormDescription>
-
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<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"
-								render={({ field }) => (
-									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
-										<div className="space-y-0.5">
-											<FormLabel>Enabled</FormLabel>
-											<FormDescription>
-												Enable or disable the backup
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Switch
-												checked={field.value}
-												onCheckedChange={field.onChange}
-											/>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-							{backupType === "compose" && (
-								<>
-									{form.watch("databaseType") === "postgres" && (
-										<FormField
-											control={form.control}
-											name="metadata.postgres.databaseUser"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Database User</FormLabel>
-													<FormControl>
-														<Input placeholder="postgres" {...field} />
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									)}
-
-									{form.watch("databaseType") === "mariadb" && (
-										<>
-											<FormField
-												control={form.control}
-												name="metadata.mariadb.databaseUser"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Database User</FormLabel>
-														<FormControl>
-															<Input placeholder="mariadb" {...field} />
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-											<FormField
-												control={form.control}
-												name="metadata.mariadb.databasePassword"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Database Password</FormLabel>
-														<FormControl>
-															<Input
-																type="password"
-																placeholder="••••••••"
-																{...field}
-															/>
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-										</>
-									)}
-
-									{form.watch("databaseType") === "mongo" && (
-										<>
-											<FormField
-												control={form.control}
-												name="metadata.mongo.databaseUser"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Database User</FormLabel>
-														<FormControl>
-															<Input placeholder="mongo" {...field} />
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-											<FormField
-												control={form.control}
-												name="metadata.mongo.databasePassword"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Database Password</FormLabel>
-														<FormControl>
-															<Input
-																type="password"
-																placeholder="••••••••"
-																{...field}
-															/>
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-										</>
-									)}
-
-									{form.watch("databaseType") === "mysql" && (
-										<FormField
-											control={form.control}
-											name="metadata.mysql.databaseRootPassword"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Root Password</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="••••••••"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									)}
-								</>
-							)}
-						</div>
-						<DialogFooter>
-							<Button
-								isLoading={isCreatingPostgresBackup}
-								form="hook-form-add-backup"
-								type="submit"
-							>
-								{backupId ? "Update" : "Create"}
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,818 +0,0 @@
-import { DrawerLogs } from "@/components/shared/drawer-logs";
-import { Badge } from "@/components/ui/badge";
-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 { Input } from "@/components/ui/input";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { debounce } from "lodash";
-import {
-	CheckIcon,
-	ChevronsUpDown,
-	Copy,
-	RotateCcw,
-	RefreshCw,
-	DatabaseZap,
-} from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import type { ServiceType } from "../../application/advanced/show-resources";
-import { type LogLine, parseLogs } from "../../docker/logs/utils";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-type DatabaseType =
-	| Exclude<ServiceType, "application" | "redis">
-	| "web-server";
-
-interface Props {
-	id: string;
-	databaseType?: DatabaseType;
-	serverId?: string | null;
-	backupType?: "database" | "compose";
-}
-
-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",
-			}),
-		databaseType: z
-			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
-			.optional(),
-		backupType: z.enum(["database", "compose"]).default("database"),
-		metadata: z
-			.object({
-				postgres: z
-					.object({
-						databaseUser: z.string(),
-					})
-					.optional(),
-				mariadb: z
-					.object({
-						databaseUser: z.string(),
-						databasePassword: z.string(),
-					})
-					.optional(),
-				mongo: z
-					.object({
-						databaseUser: z.string(),
-						databasePassword: z.string(),
-					})
-					.optional(),
-				mysql: z
-					.object({
-						databaseRootPassword: z.string(),
-					})
-					.optional(),
-				serviceName: z.string().optional(),
-			})
-			.optional(),
-	})
-	.superRefine((data, ctx) => {
-		if (data.backupType === "compose" && !data.databaseType) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Database type is required for compose backups",
-				path: ["databaseType"],
-			});
-		}
-
-		if (data.backupType === "compose" && !data.metadata?.serviceName) {
-			ctx.addIssue({
-				code: z.ZodIssueCode.custom,
-				message: "Service name is required for compose backups",
-				path: ["metadata", "serviceName"],
-			});
-		}
-
-		if (data.backupType === "compose" && data.databaseType) {
-			if (data.databaseType === "postgres") {
-				if (!data.metadata?.postgres?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for PostgreSQL",
-						path: ["metadata", "postgres", "databaseUser"],
-					});
-				}
-			} else if (data.databaseType === "mariadb") {
-				if (!data.metadata?.mariadb?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for MariaDB",
-						path: ["metadata", "mariadb", "databaseUser"],
-					});
-				}
-				if (!data.metadata?.mariadb?.databasePassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database password is required for MariaDB",
-						path: ["metadata", "mariadb", "databasePassword"],
-					});
-				}
-			} else if (data.databaseType === "mongo") {
-				if (!data.metadata?.mongo?.databaseUser) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database user is required for MongoDB",
-						path: ["metadata", "mongo", "databaseUser"],
-					});
-				}
-				if (!data.metadata?.mongo?.databasePassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Database password is required for MongoDB",
-						path: ["metadata", "mongo", "databasePassword"],
-					});
-				}
-			} else if (data.databaseType === "mysql") {
-				if (!data.metadata?.mysql?.databaseRootPassword) {
-					ctx.addIssue({
-						code: z.ZodIssueCode.custom,
-						message: "Root password is required for MySQL",
-						path: ["metadata", "mysql", "databaseRootPassword"],
-					});
-				}
-			}
-		}
-	});
-
-const formatBytes = (bytes: number): string => {
-	if (bytes === 0) return "0 Bytes";
-	const k = 1024;
-	const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-	return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-};
-
-export const RestoreBackup = ({
-	id,
-	databaseType,
-	serverId,
-	backupType = "database",
-}: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [search, setSearch] = useState("");
-	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
-
-	const { data: destinations = [] } = api.destination.all.useQuery();
-
-	const form = useForm<z.infer<typeof RestoreBackupSchema>>({
-		defaultValues: {
-			destinationId: "",
-			backupFile: "",
-			databaseName: databaseType === "web-server" ? "dokploy" : "",
-			databaseType:
-				backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
-			backupType: backupType,
-			metadata: {},
-		},
-		resolver: zodResolver(RestoreBackupSchema),
-	});
-
-	const destionationId = form.watch("destinationId");
-	const currentDatabaseType = form.watch("databaseType");
-	const metadata = form.watch("metadata");
-
-	const debouncedSetSearch = debounce((value: string) => {
-		setDebouncedSearchTerm(value);
-	}, 350);
-
-	const handleSearchChange = (value: string) => {
-		setSearch(value);
-		debouncedSetSearch(value);
-	};
-
-	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
-		{
-			destinationId: destionationId,
-			search: debouncedSearchTerm,
-			serverId: serverId ?? "",
-		},
-		{
-			enabled: isOpen && !!destionationId,
-		},
-	);
-
-	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-	const [isDeploying, setIsDeploying] = useState(false);
-
-	api.backup.restoreBackupWithLogs.useSubscription(
-		{
-			databaseId: id,
-			databaseType: currentDatabaseType as DatabaseType,
-			databaseName: form.watch("databaseName"),
-			backupFile: form.watch("backupFile"),
-			destinationId: form.watch("destinationId"),
-			backupType: backupType,
-			metadata: metadata,
-		},
-		{
-			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: z.infer<typeof RestoreBackupSchema>) => {
-		if (backupType === "compose" && !data.databaseType) {
-			toast.error("Please select a database type");
-			return;
-		}
-		console.log({ data });
-		setIsDeploying(true);
-	};
-
-	const [cacheType, setCacheType] = useState<"fetch" | "cache">("cache");
-	const {
-		data: services = [],
-		isLoading: isLoadingServices,
-		refetch: refetchServices,
-	} = api.compose.loadServices.useQuery(
-		{
-			composeId: id,
-			type: cacheType,
-		},
-		{
-			retry: false,
-			refetchOnWindowFocus: false,
-			enabled: backupType === "compose",
-		},
-	);
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline">
-					<RotateCcw className="mr-2 size-4" />
-					Restore Backup
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto 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 modal>
-										<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..."
-													value={search}
-													onValueChange={handleSearchChange}
-													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 className="w-96">
-															{files?.map((file) => (
-																<CommandItem
-																	value={file.Path}
-																	key={file.Path}
-																	onSelect={() => {
-																		form.setValue("backupFile", file.Path);
-																		if (file.IsDir) {
-																			setSearch(`${file.Path}/`);
-																			setDebouncedSearchTerm(`${file.Path}/`);
-																		} else {
-																			setSearch(file.Path);
-																			setDebouncedSearchTerm(file.Path);
-																		}
-																	}}
-																>
-																	<div className="flex w-full flex-col gap-1">
-																		<div className="flex w-full justify-between">
-																			<span className="font-medium">
-																				{file.Path}
-																			</span>
-
-																			<CheckIcon
-																				className={cn(
-																					"ml-auto h-4 w-4",
-																					file.Path === field.value
-																						? "opacity-100"
-																						: "opacity-0",
-																				)}
-																			/>
-																		</div>
-																		<div className="flex items-center gap-4 text-xs text-muted-foreground">
-																			<span>
-																				Size: {formatBytes(file.Size)}
-																			</span>
-																			{file.IsDir && (
-																				<span className="text-blue-500">
-																					Directory
-																				</span>
-																			)}
-																			{file.Hashes?.MD5 && (
-																				<span>MD5: {file.Hashes.MD5}</span>
-																			)}
-																		</div>
-																	</div>
-																</CommandItem>
-															))}
-														</CommandGroup>
-													</ScrollArea>
-												)}
-											</Command>
-										</PopoverContent>
-									</Popover>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="databaseName"
-							render={({ field }) => (
-								<FormItem>
-									<FormLabel>Database Name</FormLabel>
-									<FormControl>
-										<Input
-											placeholder="Enter database name"
-											{...field}
-											disabled={databaseType === "web-server"}
-										/>
-									</FormControl>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-
-						{backupType === "compose" && (
-							<>
-								<FormField
-									control={form.control}
-									name="databaseType"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Database Type</FormLabel>
-											<Select
-												value={field.value}
-												onValueChange={(value: DatabaseType) => {
-													field.onChange(value);
-													form.setValue("metadata", {});
-												}}
-											>
-												<SelectTrigger>
-													<SelectValue placeholder="Select database type" />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectItem value="postgres">PostgreSQL</SelectItem>
-													<SelectItem value="mariadb">MariaDB</SelectItem>
-													<SelectItem value="mongo">MongoDB</SelectItem>
-													<SelectItem value="mysql">MySQL</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="metadata.serviceName"
-									render={({ field }) => (
-										<FormItem className="w-full">
-											<FormLabel>Service Name</FormLabel>
-											<div className="flex gap-2">
-												<Select
-													onValueChange={field.onChange}
-													value={field.value || undefined}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue placeholder="Select a service name" />
-														</SelectTrigger>
-													</FormControl>
-
-													<SelectContent>
-														{services?.map((service, index) => (
-															<SelectItem
-																value={service}
-																key={`${service}-${index}`}
-															>
-																{service}
-															</SelectItem>
-														))}
-														{(!services || services.length === 0) && (
-															<SelectItem value="none" disabled>
-																Empty
-															</SelectItem>
-														)}
-													</SelectContent>
-												</Select>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingServices}
-																onClick={() => {
-																	if (cacheType === "fetch") {
-																		refetchServices();
-																	} else {
-																		setCacheType("fetch");
-																	}
-																}}
-															>
-																<RefreshCw className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>
-																Fetch: Will clone the repository and load the
-																services
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingServices}
-																onClick={() => {
-																	if (cacheType === "cache") {
-																		refetchServices();
-																	} else {
-																		setCacheType("cache");
-																	}
-																}}
-															>
-																<DatabaseZap className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>
-																Cache: If you previously deployed this compose,
-																it will read the services from the last
-																deployment/fetch from the repository
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								{currentDatabaseType === "postgres" && (
-									<FormField
-										control={form.control}
-										name="metadata.postgres.databaseUser"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Database User</FormLabel>
-												<FormControl>
-													<Input placeholder="Enter database user" {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
-
-								{currentDatabaseType === "mariadb" && (
-									<>
-										<FormField
-											control={form.control}
-											name="metadata.mariadb.databaseUser"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Database User</FormLabel>
-													<FormControl>
-														<Input
-															placeholder="Enter database user"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="metadata.mariadb.databasePassword"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Database Password</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Enter database password"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</>
-								)}
-
-								{currentDatabaseType === "mongo" && (
-									<>
-										<FormField
-											control={form.control}
-											name="metadata.mongo.databaseUser"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Database User</FormLabel>
-													<FormControl>
-														<Input
-															placeholder="Enter database user"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="metadata.mongo.databasePassword"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Database Password</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Enter database password"
-															{...field}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</>
-								)}
-
-								{currentDatabaseType === "mysql" && (
-									<FormField
-										control={form.control}
-										name="metadata.mysql.databaseRootPassword"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Root Password</FormLabel>
-												<FormControl>
-													<Input
-														type="password"
-														placeholder="Enter root password"
-														{...field}
-													/>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
-							</>
-						)}
-
-						<DialogFooter>
-							<Button
-								isLoading={isDeploying}
-								form="hook-form-restore-backup"
-								type="submit"
-								// disabled={
-								// 	!form.watch("backupFile") ||
-								// 	(backupType === "compose" && !form.watch("databaseType"))
-								// }
-							>
-								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

@@ -14,83 +14,42 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	Database,
-	DatabaseBackup,
-	Play,
-	Trash2,
-} from "lucide-react";
+import { DatabaseBackup, Play, Trash2 } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
-import { RestoreBackup } from "./restore-backup";
-import { HandleBackup } from "./handle-backup";
-import { cn } from "@/lib/utils";
-import {
-	MariadbIcon,
-	MongodbIcon,
-	MysqlIcon,
-	PostgresqlIcon,
-} from "@/components/icons/data-tools-icons";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { ShowDeploymentsModal } from "../../application/deployments/show-deployments-modal";
+import { AddBackup } from "./add-backup";
+import { UpdateBackup } from "./update-backup";
 
 interface Props {
 	id: string;
-	databaseType?: Exclude<ServiceType, "application" | "redis"> | "web-server";
-	backupType?: "database" | "compose";
+	type: Exclude<ServiceType, "application" | "redis">;
 }
-export const ShowBackups = ({
-	id,
-	databaseType,
-	backupType = "database",
-}: Props) => {
-	const [activeManualBackup, setActiveManualBackup] = useState<
-		string | undefined
-	>();
-	const queryMap =
-		backupType === "database"
-			? {
-					postgres: () =>
-						api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-					mysql: () =>
-						api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-					mariadb: () =>
-						api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-					mongo: () =>
-						api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-					"web-server": () => api.user.getBackups.useQuery(),
-				}
-			: {
-					compose: () =>
-						api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
-				};
+export const ShowBackups = ({ id, type }: Props) => {
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	};
 	const { data } = api.destination.all.useQuery();
-	const key = backupType === "database" ? databaseType : "compose";
-	const query = queryMap[key as keyof typeof queryMap];
-	const { data: postgres, refetch } = query
-		? query()
+	const { data: postgres, refetch } = queryMap[type]
+		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 
-	const mutationMap =
-		backupType === "database"
-			? {
-					postgres: api.backup.manualBackupPostgres.useMutation(),
-					mysql: api.backup.manualBackupMySql.useMutation(),
-					mariadb: api.backup.manualBackupMariadb.useMutation(),
-					mongo: api.backup.manualBackupMongo.useMutation(),
-					"web-server": api.backup.manualBackupWebServer.useMutation(),
-				}
-			: {
-					compose: api.backup.manualBackupCompose.useMutation(),
-				};
+	const mutationMap = {
+		postgres: () => api.backup.manualBackupPostgres.useMutation(),
+		mysql: () => api.backup.manualBackupMySql.useMutation(),
+		mariadb: () => api.backup.manualBackupMariadb.useMutation(),
+		mongo: () => api.backup.manualBackupMongo.useMutation(),
+	};
 
-	const mutation = mutationMap[key as keyof typeof mutationMap];
-
-	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutation
-		? mutation
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutationMap[
+		type
+	]
+		? mutationMap[type]()
 		: api.backup.manualBackupMongo.useMutation();
 
 	const { mutateAsync: deleteBackup, isLoading: isRemoving } =
@@ -100,10 +59,7 @@ export const ShowBackups = ({
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between gap-4  flex-wrap">
 				<div className="flex flex-col gap-0.5">
-					<CardTitle className="text-xl flex flex-row gap-2">
-						<Database className="size-6 text-muted-foreground" />
-						Backups
-					</CardTitle>
+					<CardTitle className="text-xl">Backups</CardTitle>
 					<CardDescription>
 						Add backups to your database to save the data to a different
 						provider.
@@ -111,27 +67,12 @@ export const ShowBackups = ({
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
-						{databaseType !== "web-server" && (
-							<HandleBackup
-								id={id}
-								databaseType={databaseType}
-								backupType={backupType}
-								refetch={refetch}
-							/>
-						)}
-						<RestoreBackup
-							id={id}
-							databaseType={databaseType}
-							backupType={backupType}
-							serverId={"serverId" in postgres ? postgres.serverId : undefined}
-						/>
-					</div>
+					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				{data?.length === 0 ? (
-					<div className="flex flex-col items-center gap-3 min-h-[35vh] justify-center">
+					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground text-center">
 							To create a backup it is required to set at least 1 provider.
@@ -146,230 +87,121 @@ export const ShowBackups = ({
 						</span>
 					</div>
 				) : (
-					<div className="flex flex-col gap-4 w-full">
+					<div>
 						{postgres?.backups.length === 0 ? (
 							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 								<DatabaseBackup className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-									<HandleBackup
-										id={id}
-										databaseType={databaseType}
-										backupType={backupType}
-										refetch={refetch}
-									/>
-									<RestoreBackup
-										id={id}
-										databaseType={databaseType}
-										backupType={backupType}
-										serverId={
-											"serverId" in postgres ? postgres.serverId : undefined
-										}
-									/>
-								</div>
+								<AddBackup
+									databaseId={id}
+									databaseType={type}
+									refetch={refetch}
+								/>
 							</div>
 						) : (
-							<div className="flex flex-col pt-2 gap-4">
-								{backupType === "compose" && (
-									<AlertBlock title="Compose Backups">
-										Make sure the compose is running before creating a backup.
-									</AlertBlock>
-								)}
+							<div className="flex flex-col pt-2">
 								<div className="flex flex-col gap-6">
-									{postgres?.backups.map((backup) => {
-										const serverId =
-											"serverId" in postgres ? postgres.serverId : undefined;
-
-										return (
-											<div key={backup.backupId}>
-												<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
-													<div className="flex flex-col w-full gap-4">
-														<div className="flex items-center gap-3">
-															{backup.backupType === "compose" && (
-																<div className="flex items-center justify-center size-10 rounded-lg">
-																	{backup.databaseType === "postgres" && (
-																		<PostgresqlIcon className="size-7" />
-																	)}
-																	{backup.databaseType === "mysql" && (
-																		<MysqlIcon className="size-7" />
-																	)}
-																	{backup.databaseType === "mariadb" && (
-																		<MariadbIcon className="size-7" />
-																	)}
-																	{backup.databaseType === "mongo" && (
-																		<MongodbIcon className="size-7" />
-																	)}
-																</div>
-															)}
-															<div className="flex flex-col gap-1">
-																{backup.backupType === "compose" && (
-																	<div className="flex items-center gap-2">
-																		<h3 className="font-medium">
-																			{backup.serviceName}
-																		</h3>
-																		<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
-																			{backup.databaseType}
-																		</span>
-																	</div>
-																)}
-																<div className="flex items-center gap-2">
-																	<div
-																		className={cn(
-																			"size-1.5 rounded-full",
-																			backup.enabled
-																				? "bg-green-500"
-																				: "bg-red-500",
-																		)}
-																	/>
-																	<span className="text-xs text-muted-foreground">
-																		{backup.enabled ? "Active" : "Inactive"}
-																	</span>
-																</div>
-															</div>
-														</div>
-
-														<div className="flex flex-wrap gap-x-8 gap-y-2">
-															<div className="min-w-[200px]">
-																<span className="text-sm font-medium text-muted-foreground">
-																	Destination
-																</span>
-																<p className="font-medium text-sm mt-0.5">
-																	{backup.destination.name}
-																</p>
-															</div>
-
-															<div className="min-w-[150px]">
-																<span className="text-sm font-medium text-muted-foreground">
-																	Database
-																</span>
-																<p className="font-medium text-sm mt-0.5">
-																	{backup.database}
-																</p>
-															</div>
-
-															<div className="min-w-[120px]">
-																<span className="text-sm font-medium text-muted-foreground">
-																	Schedule
-																</span>
-																<p className="font-medium text-sm mt-0.5">
-																	{backup.schedule}
-																</p>
-															</div>
-
-															<div className="min-w-[150px]">
-																<span className="text-sm font-medium text-muted-foreground">
-																	Prefix Storage
-																</span>
-																<p className="font-medium text-sm mt-0.5">
-																	{backup.prefix}
-																</p>
-															</div>
-
-															<div className="min-w-[100px]">
-																<span className="text-sm font-medium text-muted-foreground">
-																	Keep Latest
-																</span>
-																<p className="font-medium text-sm mt-0.5">
-																	{backup.keepLatestCount || "All"}
-																</p>
-															</div>
-														</div>
+									{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="flex flex-col gap-1">
+														<span className="font-medium">Destination</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.destination.name}
+														</span>
 													</div>
-
-													<div className="flex flex-row md:flex-col gap-1.5">
-														<ShowDeploymentsModal
-															id={backup.backupId}
-															type="backup"
-															serverId={serverId || undefined}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="size-8"
-															>
-																<ClipboardList className="size-4  transition-colors " />
-															</Button>
-														</ShowDeploymentsModal>
-														<TooltipProvider delayDuration={0}>
-															<Tooltip>
-																<TooltipTrigger asChild>
-																	<Button
-																		type="button"
-																		variant="ghost"
-																		size="icon"
-																		className="size-8"
-																		isLoading={
-																			isManualBackup &&
-																			activeManualBackup === backup.backupId
-																		}
-																		onClick={async () => {
-																			setActiveManualBackup(backup.backupId);
-																			await manualBackup({
-																				backupId: backup.backupId as string,
-																			})
-																				.then(async () => {
-																					toast.success(
-																						"Manual Backup Successful",
-																					);
-																				})
-																				.catch(() => {
-																					toast.error(
-																						"Error creating the manual backup",
-																					);
-																				});
-																			setActiveManualBackup(undefined);
-																		}}
-																	>
-																		<Play className="size-4 " />
-																	</Button>
-																</TooltipTrigger>
-																<TooltipContent>
-																	Run Manual Backup
-																</TooltipContent>
-															</Tooltip>
-														</TooltipProvider>
-
-														<HandleBackup
-															backupType={backup.backupType}
-															backupId={backup.backupId}
-															databaseType={backup.databaseType}
-															refetch={refetch}
-														/>
-														<DialogAction
-															title="Delete Backup"
-															description="Are you sure you want to delete this backup?"
-															type="destructive"
-															onClick={async () => {
-																await deleteBackup({
-																	backupId: backup.backupId,
-																})
-																	.then(() => {
-																		refetch();
-																		toast.success(
-																			"Backup deleted successfully",
-																		);
-																	})
-																	.catch(() => {
-																		toast.error("Error deleting backup");
-																	});
-															}}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-red-500/10 size-8"
-																isLoading={isRemoving}
-															>
-																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-															</Button>
-														</DialogAction>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Database</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.database}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Scheduled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.schedule}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Prefix Storage</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.prefix}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Enabled</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.enabled ? "Yes" : "No"}
+														</span>
 													</div>
 												</div>
+												<div className="flex flex-row gap-4">
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	isLoading={isManualBackup}
+																	onClick={async () => {
+																		await manualBackup({
+																			backupId: backup.backupId as string,
+																		})
+																			.then(async () => {
+																				toast.success(
+																					"Manual Backup Successful",
+																				);
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error creating the manual backup",
+																				);
+																			});
+																	}}
+																>
+																	<Play className="size-5  text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>Run Manual Backup</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<UpdateBackup
+														backupId={backup.backupId}
+														refetch={refetch}
+													/>
+													<DialogAction
+														title="Delete Backup"
+														description="Are you sure you want to delete this backup?"
+														type="destructive"
+														onClick={async () => {
+															await deleteBackup({
+																backupId: backup.backupId,
+															})
+																.then(() => {
+																	refetch();
+																	toast.success("Backup deleted successfully");
+																})
+																.catch(() => {
+																	toast.error("Error deleting backup");
+																});
+														}}
+													>
+														<Button
+															variant="ghost"
+															size="icon"
+															className="group hover:bg-red-500/10"
+															isLoading={isRemoving}
+														>
+															<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+														</Button>
+													</DialogAction>
+												</div>
 											</div>
-										);
-									})}
+										</div>
+									))}
 								</div>
 							</div>
 						)}

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

@@ -0,0 +1,300 @@
+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,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, PenBoxIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const UpdateBackupSchema = z.object({
+	destinationId: z.string().min(1, "Destination required"),
+	schedule: z.string().min(1, "Schedule (Cron) required"),
+	prefix: z.string().min(1, "Prefix required"),
+	enabled: z.boolean(),
+	database: z.string().min(1, "Database required"),
+});
+
+type UpdateBackup = z.infer<typeof UpdateBackupSchema>;
+
+interface Props {
+	backupId: string;
+	refetch: () => void;
+}
+
+export const UpdateBackup = ({ backupId, refetch }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data, isLoading } = api.destination.all.useQuery();
+	const { data: backup } = api.backup.one.useQuery(
+		{
+			backupId,
+		},
+		{
+			enabled: !!backupId,
+		},
+	);
+
+	const { mutateAsync, isLoading: isLoadingUpdate } =
+		api.backup.update.useMutation();
+
+	const form = useForm<UpdateBackup>({
+		defaultValues: {
+			database: "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+		},
+		resolver: zodResolver(UpdateBackupSchema),
+	});
+
+	useEffect(() => {
+		if (backup) {
+			form.reset({
+				database: backup.database,
+				destinationId: backup.destinationId,
+				enabled: backup.enabled || false,
+				prefix: backup.prefix,
+				schedule: backup.schedule,
+			});
+		}
+	}, [form, form.reset, backup]);
+
+	const onSubmit = async (data: UpdateBackup) => {
+		await mutateAsync({
+			backupId,
+			destinationId: data.destinationId,
+			prefix: data.prefix,
+			schedule: data.schedule,
+			enabled: data.enabled,
+			database: data.database,
+		})
+			.then(async () => {
+				toast.success("Backup Updated");
+				refetch();
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error updating the Backup");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="group hover:bg-blue-500/10 "
+				>
+					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update Backup</DialogTitle>
+					<DialogDescription>Update the backup</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="grid grid-cols-1 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",
+														)}
+													>
+														{isLoading
+															? "Loading...."
+															: field.value
+																? data?.find(
+																		(destination) =>
+																			destination.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 Destination..."
+														className="h-9"
+													/>
+													{isLoading && (
+														<span className="py-6 text-center text-sm">
+															Loading Destinations....
+														</span>
+													)}
+													<CommandEmpty>No destinations found.</CommandEmpty>
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{data?.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="database"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Database</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="schedule"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Schedule (Cron)</FormLabel>
+											<FormControl>
+												<Input placeholder={"0 0 * * *"} {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="prefix"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Prefix Destination</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy/"} {...field} />
+											</FormControl>
+											<FormDescription>
+												Use if you want to storage in a specific path of your
+												destination/bucket
+											</FormDescription>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
+										<div className="space-y-0.5">
+											<FormLabel>Enabled</FormLabel>
+											<FormDescription>
+												Enable or disable the backup
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isLoadingUpdate}
+								form="hook-form-update-backup"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -119,6 +119,7 @@ export const DockerLogsId: React.FC<Props> = ({
 		const wsUrl = `${protocol}//${
 			window.location.host
 		}/docker-container-logs?${params.toString()}`;
+		console.log("Connecting to WebSocket:", wsUrl);
 		const ws = new WebSocket(wsUrl);
 
 		const resetNoDataTimeout = () => {
@@ -135,19 +136,13 @@ export const DockerLogsId: React.FC<Props> = ({
 				ws.close();
 				return;
 			}
+			console.log("WebSocket connected");
 			resetNoDataTimeout();
 		};
 
 		ws.onmessage = (e) => {
 			if (!isCurrentConnection) return;
-			setRawLogs((prev) => {
-				const updated = prev + e.data;
-				const splitLines = updated.split("\n");
-				if (splitLines.length > lines) {
-					return splitLines.slice(-lines).join("\n");
-				}
-				return updated;
-			});
+			setRawLogs((prev) => prev + e.data);
 			setIsLoading(false);
 			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};

apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx

@@ -1,454 +0,0 @@
-"use client";
-
-import { authClient } from "@/lib/auth-client";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-	CheckIcon,
-	ChevronsUpDown,
-	Settings2,
-	UserIcon,
-	XIcon,
-	Shield,
-	Calendar,
-	Key,
-	Copy,
-	Fingerprint,
-	Building2,
-	CreditCard,
-	Server,
-} from "lucide-react";
-import { toast } from "sonner";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-	CommandList,
-} from "@/components/ui/command";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-import { Logo } from "@/components/shared/logo";
-import { Badge } from "@/components/ui/badge";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-	TooltipProvider,
-} from "@/components/ui/tooltip";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { format } from "date-fns";
-import copy from "copy-to-clipboard";
-import { api } from "@/utils/api";
-
-type User = typeof authClient.$Infer.Session.user;
-
-export const ImpersonationBar = () => {
-	const [users, setUsers] = useState<User[]>([]);
-	const [selectedUser, setSelectedUser] = useState<User | null>(null);
-	const [isImpersonating, setIsImpersonating] = useState(false);
-	const [open, setOpen] = useState(false);
-	const [isLoading, setIsLoading] = useState(false);
-	const [showBar, setShowBar] = useState(false);
-	const { data } = api.user.get.useQuery();
-
-	const fetchUsers = async (search?: string) => {
-		try {
-			const session = await authClient.getSession();
-			if (session?.data?.session?.impersonatedBy) {
-				return;
-			}
-			setIsLoading(true);
-			const response = await authClient.admin.listUsers({
-				query: {
-					limit: 30,
-					...(search && {
-						searchField: "email",
-						searchOperator: "contains",
-						searchValue: search,
-					}),
-				},
-			});
-
-			const filteredUsers = response.data?.users.filter(
-				// @ts-ignore
-				(user) => user.allowImpersonation && data?.user?.email !== user.email,
-			);
-
-			if (!response.error) {
-				// @ts-ignore
-				setUsers(filteredUsers || []);
-			}
-		} catch (error) {
-			console.error("Error fetching users:", error);
-			toast.error("Error loading users");
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	const handleImpersonate = async () => {
-		if (!selectedUser) return;
-
-		try {
-			await authClient.admin.impersonateUser({
-				userId: selectedUser.id,
-			});
-			setIsImpersonating(true);
-			setOpen(false);
-
-			toast.success("Successfully impersonating user", {
-				description: `You are now viewing as ${selectedUser.name || selectedUser.email}`,
-			});
-			window.location.reload();
-		} catch (error) {
-			console.error("Error impersonating user:", error);
-			toast.error("Error impersonating user");
-		}
-	};
-
-	const handleStopImpersonating = async () => {
-		try {
-			await authClient.admin.stopImpersonating();
-			setIsImpersonating(false);
-			setSelectedUser(null);
-			setShowBar(false);
-			toast.success("Stopped impersonating user");
-			window.location.reload();
-		} catch (error) {
-			console.error("Error stopping impersonation:", error);
-			toast.error("Error stopping impersonation");
-		}
-	};
-
-	useEffect(() => {
-		const checkImpersonation = async () => {
-			try {
-				const session = await authClient.getSession();
-				if (session?.data?.session?.impersonatedBy) {
-					setIsImpersonating(true);
-					setShowBar(true);
-					// setSelectedUser(data);
-				}
-			} catch (error) {
-				console.error("Error checking impersonation status:", error);
-			}
-		};
-
-		checkImpersonation();
-		fetchUsers();
-	}, []);
-
-	return (
-		<TooltipProvider>
-			<>
-				<Tooltip>
-					<TooltipTrigger asChild>
-						<Button
-							variant="outline"
-							size="icon"
-							className={cn(
-								"fixed bottom-4 right-4 z-50 rounded-full shadow-lg",
-								isImpersonating &&
-									!showBar &&
-									"bg-red-100 hover:bg-red-200 border-red-200",
-							)}
-							onClick={() => setShowBar(!showBar)}
-						>
-							<Settings2
-								className={cn(
-									"h-4 w-4",
-									isImpersonating && !showBar && "text-red-500",
-								)}
-							/>
-						</Button>
-					</TooltipTrigger>
-					<TooltipContent>
-						{isImpersonating ? "Impersonation Controls" : "User Impersonation"}
-					</TooltipContent>
-				</Tooltip>
-
-				<div
-					className={cn(
-						"fixed bottom-0 left-0 right-0 bg-background border-t border-border p-4 flex items-center justify-center gap-4 z-40 transition-all duration-200 ease-in-out",
-						showBar ? "translate-y-0" : "translate-y-full",
-					)}
-				>
-					<div className="flex items-center gap-4 px-4 md:px-20 w-full">
-						<Logo className="w-10 h-10" />
-						{!isImpersonating ? (
-							<div className="flex items-center gap-2 w-full">
-								<Popover open={open} onOpenChange={setOpen}>
-									<PopoverTrigger asChild>
-										<Button
-											variant="outline"
-											aria-expanded={open}
-											className="w-[300px] justify-between"
-										>
-											{selectedUser ? (
-												<div className="flex items-center gap-2">
-													<UserIcon className="mr-2 h-4 w-4 flex-shrink-0" />
-													<span className="truncate flex flex-col items-start">
-														<span className="text-sm font-medium">
-															{selectedUser.name || ""}
-														</span>
-														<span className="text-xs text-muted-foreground">
-															{selectedUser.email}
-														</span>
-													</span>
-												</div>
-											) : (
-												<>
-													<UserIcon className="mr-2 h-4 w-4" />
-													<span>Select user to impersonate</span>
-												</>
-											)}
-											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-										</Button>
-									</PopoverTrigger>
-									<PopoverContent className="w-[300px] p-0" align="start">
-										<Command>
-											<CommandInput
-												placeholder="Search users by email or name..."
-												onValueChange={(search) => {
-													fetchUsers(search);
-												}}
-												className="h-9"
-											/>
-											{isLoading ? (
-												<div className="py-6 text-center text-sm">
-													Loading users...
-												</div>
-											) : (
-												<>
-													<CommandEmpty>No users found.</CommandEmpty>
-													<CommandList>
-														<CommandGroup heading="All Users">
-															{users.map((user) => (
-																<CommandItem
-																	key={user.id}
-																	value={user.email}
-																	onSelect={() => {
-																		setSelectedUser(user);
-																		setOpen(false);
-																	}}
-																>
-																	<span className="flex items-center gap-2 flex-1">
-																		<UserIcon className="h-4 w-4 flex-shrink-0" />
-																		<span className="flex flex-col items-start">
-																			<span className="text-sm font-medium">
-																				{user.name || ""}
-																			</span>
-																			<span className="text-xs text-muted-foreground">
-																				{user.email} • {user.role}
-																			</span>
-																		</span>
-																	</span>
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			selectedUser?.id === user.id
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																</CommandItem>
-															))}
-														</CommandGroup>
-													</CommandList>
-												</>
-											)}
-										</Command>
-									</PopoverContent>
-								</Popover>
-								<Button
-									onClick={handleImpersonate}
-									disabled={!selectedUser}
-									variant="default"
-									className="gap-2"
-								>
-									<Shield className="h-4 w-4" />
-									Impersonate
-								</Button>
-							</div>
-						) : (
-							<div className="flex items-center gap-4 w-full flex-wrap">
-								<div className="flex items-center gap-4 flex-1 flex-wrap">
-									<Avatar className="h-10 w-10">
-										<AvatarImage
-											src={data?.user?.image || ""}
-											alt={data?.user?.name || ""}
-										/>
-										<AvatarFallback>
-											{data?.user?.name?.slice(0, 2).toUpperCase() || "U"}
-										</AvatarFallback>
-									</Avatar>
-									<div className="flex flex-col gap-1">
-										<div className="flex items-center gap-2">
-											<Badge
-												variant="outline"
-												className="gap-1 py-1 text-yellow-500 bg-yellow-50/20"
-											>
-												<Shield className="h-3 w-3" />
-												Impersonating
-											</Badge>
-											<span className="font-medium">
-												{data?.user?.name || ""}
-											</span>
-										</div>
-										<div className="flex items-center gap-3 text-sm text-muted-foreground flex-wrap">
-											<span className="flex items-center gap-1">
-												<UserIcon className="h-3 w-3" />
-												{data?.user?.email} • {data?.role}
-											</span>
-											<span className="flex items-center gap-1">
-												<Key className="h-3 w-3" />
-												<span className="flex items-center gap-1">
-													ID: {data?.user?.id?.slice(0, 8)}
-													<Button
-														variant="ghost"
-														size="icon"
-														className="h-4 w-4 hover:bg-muted/50"
-														onClick={() => {
-															if (data?.id) {
-																copy(data.id);
-																toast.success("ID copied to clipboard");
-															}
-														}}
-													>
-														<Copy className="h-3 w-3" />
-													</Button>
-												</span>
-											</span>
-											<span className="flex items-center gap-1">
-												<Building2 className="h-3 w-3" />
-												<span className="flex items-center gap-1">
-													Org: {data?.organizationId?.slice(0, 8)}
-													<Button
-														variant="ghost"
-														size="icon"
-														className="h-4 w-4 hover:bg-muted/50"
-														onClick={() => {
-															if (data?.organizationId) {
-																copy(data.organizationId);
-																toast.success(
-																	"Organization ID copied to clipboard",
-																);
-															}
-														}}
-													>
-														<Copy className="h-3 w-3" />
-													</Button>
-												</span>
-											</span>
-											{data?.user?.stripeCustomerId && (
-												<span className="flex items-center gap-1">
-													<CreditCard className="h-3 w-3" />
-													<span className="flex items-center gap-1">
-														Customer:
-														{data?.user?.stripeCustomerId?.slice(0, 8)}
-														<Button
-															variant="ghost"
-															size="icon"
-															className="h-4 w-4 hover:bg-muted/50"
-															onClick={() => {
-																copy(data?.user?.stripeCustomerId || "");
-																toast.success(
-																	"Stripe Customer ID copied to clipboard",
-																);
-															}}
-														>
-															<Copy className="h-3 w-3" />
-														</Button>
-													</span>
-												</span>
-											)}
-											{data?.user?.stripeSubscriptionId && (
-												<span className="flex items-center gap-1">
-													<CreditCard className="h-3 w-3" />
-													<span className="flex items-center gap-1">
-														Sub: {data?.user?.stripeSubscriptionId?.slice(0, 8)}
-														<Button
-															variant="ghost"
-															size="icon"
-															className="h-4 w-4 hover:bg-muted/50"
-															onClick={() => {
-																copy(data.user.stripeSubscriptionId || "");
-																toast.success(
-																	"Stripe Subscription ID copied to clipboard",
-																);
-															}}
-														>
-															<Copy className="h-3 w-3" />
-														</Button>
-													</span>
-												</span>
-											)}
-											{data?.user?.serversQuantity !== undefined && (
-												<span className="flex items-center gap-1">
-													<Server className="h-3 w-3" />
-													<span>Servers: {data.user.serversQuantity}</span>
-												</span>
-											)}
-											{data?.createdAt && (
-												<span className="flex items-center gap-1">
-													<Calendar className="h-3 w-3" />
-													Created:{" "}
-													{format(new Date(data.createdAt), "MMM d, yyyy")}
-												</span>
-											)}
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<span className="flex items-center gap-1 cursor-default">
-														<Fingerprint
-															className={cn(
-																"h-3 w-3",
-																data?.user?.twoFactorEnabled
-																	? "text-green-500"
-																	: "text-muted-foreground",
-															)}
-														/>
-														<Badge
-															variant={
-																data?.user?.twoFactorEnabled
-																	? "green"
-																	: "secondary"
-															}
-															className="text-[10px] px-1 py-0"
-														>
-															2FA{" "}
-															{data?.user?.twoFactorEnabled
-																? "Enabled"
-																: "Disabled"}
-														</Badge>
-													</span>
-												</TooltipTrigger>
-												<TooltipContent>
-													Two-Factor Authentication Status
-												</TooltipContent>
-											</Tooltip>
-										</div>
-									</div>
-								</div>
-								<Button
-									onClick={handleStopImpersonating}
-									variant="secondary"
-									className="gap-2"
-									size="sm"
-								>
-									<XIcon className="w-4 h-4" />
-									Stop Impersonating
-								</Button>
-							</div>
-						)}
-					</div>
-				</div>
-			</>
-		</TooltipProvider>
-	);
-};

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,7 +19,6 @@ 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,20 +106,6 @@ 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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -86,14 +92,12 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -103,8 +107,6 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
-						</TooltipProvider>
-						<TooltipProvider delayDuration={0}>
 							<DialogAction
 								title="Reload Mariadb"
 								description="Are you sure you want to reload this mariadb?"
@@ -126,14 +128,13 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Reload
+									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -143,9 +144,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
-						</TooltipProvider>
-						{data?.applicationStatus === "idle" ? (
-							<TooltipProvider delayDuration={0}>
+							{data?.applicationStatus === "idle" ? (
 								<DialogAction
 									title="Start Mariadb"
 									description="Are you sure you want to start this mariadb?"
@@ -166,14 +165,13 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Start
+										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -186,9 +184,7 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 										</Tooltip>
 									</Button>
 								</DialogAction>
-							</TooltipProvider>
-						) : (
-							<TooltipProvider delayDuration={0}>
+							) : (
 								<DialogAction
 									title="Stop Mariadb"
 									description="Are you sure you want to stop this mariadb?"
@@ -208,14 +204,13 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Stop
+										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -225,29 +220,15 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 										</Tooltip>
 									</Button>
 								</DialogAction>
-							</TooltipProvider>
-						)}
+							)}
+						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<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 variant="outline">
+								<Terminal />
+								Open Terminal
 							</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="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,7 +19,6 @@ 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,20 +106,6 @@ 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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -85,14 +91,12 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -123,14 +127,13 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Reload
+									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -161,14 +164,13 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Start
+										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -201,14 +203,13 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Stop
+										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -224,23 +225,9 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<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 variant="outline">
+								<Terminal />
+								Open Terminal
 							</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="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

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

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,7 +19,6 @@ 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,20 +106,6 @@ 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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -71,7 +77,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Deploy MySQL"
+								title="Deploy Mysql"
 								description="Are you sure you want to deploy this mysql?"
 								type="default"
 								onClick={async () => {
@@ -83,14 +89,12 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -101,7 +105,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								</Button>
 							</DialogAction>
 							<DialogAction
-								title="Reload MySQL"
+								title="Reload Mysql"
 								description="Are you sure you want to reload this mysql?"
 								type="default"
 								onClick={async () => {
@@ -110,25 +114,24 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("MySQL reloaded successfully");
+											toast.success("Mysql reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error reloading MySQL");
+											toast.error("Error reloading Mysql");
 										});
 								}}
 							>
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Reload
+									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -140,7 +143,7 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 							</DialogAction>
 							{data?.applicationStatus === "idle" ? (
 								<DialogAction
-									title="Start MySQL"
+									title="Start Mysql"
 									description="Are you sure you want to start this mysql?"
 									type="default"
 									onClick={async () => {
@@ -148,25 +151,24 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 											mysqlId: mysqlId,
 										})
 											.then(() => {
-												toast.success("MySQL started successfully");
+												toast.success("Mysql started successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error starting MySQL");
+												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"
+										className="flex items-center gap-1.5"
 									>
+										Start
+										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -181,32 +183,31 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 								</DialogAction>
 							) : (
 								<DialogAction
-									title="Stop MySQL"
+									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");
+												toast.success("Mysql stopped successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error stopping MySQL");
+												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"
+										className="flex items-center gap-1.5"
 									>
+										Stop
+										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -222,23 +223,9 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<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 variant="outline">
+								<Terminal />
+								Open Terminal
 							</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="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -72,9 +78,9 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<TooltipProvider disableHoverableContent={false}>
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Deploy PostgreSQL"
+								title="Deploy Postgres"
 								description="Are you sure you want to deploy this postgres?"
 								type="default"
 								onClick={async () => {
@@ -86,14 +92,12 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -104,7 +108,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								</Button>
 							</DialogAction>
 							<DialogAction
-								title="Reload PostgreSQL"
+								title="Reload Postgres"
 								description="Are you sure you want to reload this postgres?"
 								type="default"
 								onClick={async () => {
@@ -113,25 +117,24 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("PostgreSQL reloaded successfully");
+											toast.success("Postgres reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error reloading PostgreSQL");
+											toast.error("Error reloading Postgres");
 										});
 								}}
 							>
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Reload
+									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -143,7 +146,7 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 							</DialogAction>
 							{data?.applicationStatus === "idle" ? (
 								<DialogAction
-									title="Start PostgreSQL"
+									title="Start Postgres"
 									description="Are you sure you want to start this postgres?"
 									type="default"
 									onClick={async () => {
@@ -151,25 +154,24 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 											postgresId: postgresId,
 										})
 											.then(() => {
-												toast.success("PostgreSQL started successfully");
+												toast.success("Postgres started successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error starting PostgreSQL");
+												toast.error("Error starting Postgres");
 											});
 									}}
 								>
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Start
+										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -184,32 +186,31 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 								</DialogAction>
 							) : (
 								<DialogAction
-									title="Stop PostgreSQL"
+									title="Stop Postgres"
 									description="Are you sure you want to stop this postgres?"
 									onClick={async () => {
 										await stop({
 											postgresId: postgresId,
 										})
 											.then(() => {
-												toast.success("PostgreSQL stopped successfully");
+												toast.success("Postgres stopped successfully");
 												refetch();
 											})
 											.catch(() => {
-												toast.error("Error stopping PostgreSQL");
+												toast.error("Error stopping Postgres");
 											});
 									}}
 								>
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Stop
+										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -225,23 +226,9 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<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 variant="outline">
+								<Terminal />
+								Open Terminal
 							</Button>
 						</DockerTerminalModal>
 					</CardContent>

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 { PenBox } from "lucide-react";
+import { PenBoxIcon } 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 focus-visible:ring-2 focus-visible:ring-offset-2"
+					className="group hover:bg-blue-500/10 "
 				>
-					<PenBox className="size-3.5 text-primary group-hover:text-blue-500" />
+					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
@@ -121,7 +121,7 @@ export const UpdatePostgres = ({ postgresId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...field} />
 											</FormControl>
 
 											<FormMessage />
@@ -151,7 +151,6 @@ 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-application.tsx

@@ -145,8 +145,10 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 											{...field}
 											onChange={(e) => {
 												const val = e.target.value?.trim() || "";
-												const serviceName = slugify(val);
-												form.setValue("appName", `${slug}-${serviceName}`);
+												form.setValue(
+													"appName",
+													`${slug}-${val.toLowerCase().replaceAll(" ", "-")}`,
+												);
 												field.onChange(val);
 											}}
 										/>

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

@@ -152,8 +152,10 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 												{...field}
 												onChange={(e) => {
 													const val = e.target.value?.trim() || "";
-													const serviceName = slugify(val);
-													form.setValue("appName", `${slug}-${serviceName}`);
+													form.setValue(
+														"appName",
+														`${slug}-${val.toLowerCase()}`,
+													);
 													field.onChange(val);
 												}}
 											/>

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

@@ -363,8 +363,10 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 													{...field}
 													onChange={(e) => {
 														const val = e.target.value?.trim() || "";
-														const serviceName = slugify(val);
-														form.setValue("appName", `${slug}-${serviceName}`);
+														form.setValue(
+															"appName",
+															`${slug}-${val.toLowerCase()}`,
+														);
 														field.onChange(val);
 													}}
 												/>
@@ -492,7 +494,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 												<Input
 													type="password"
 													placeholder="******************"
-													autoComplete="one-time-code"
+													autoComplete="off"
 													{...field}
 												/>
 											</FormControl>

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

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

apps/dokploy/components/dashboard/project/ai/step-one.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { useState } from "react";
 
 const examples = [
 	"Make a personal blog",
@@ -22,7 +23,7 @@ const examples = [
 	"Sendgrid service opensource analogue",
 ];
 
-export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
+export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
 	// Get servers from the API
 	const { data: servers } = api.server.withSSHKey.useQuery();
 

apps/dokploy/components/dashboard/project/duplicate-project.tsx

@@ -1,172 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { api } from "@/utils/api";
-import { Copy, Loader2 } from "lucide-react";
-import { useRouter } from "next/router";
-import { useState } from "react";
-import { toast } from "sonner";
-
-export type Services = {
-	appName: string;
-	serverId?: string | null;
-	name: string;
-	type:
-		| "mariadb"
-		| "application"
-		| "postgres"
-		| "mysql"
-		| "mongo"
-		| "redis"
-		| "compose";
-	description?: string | null;
-	id: string;
-	createdAt: string;
-	status?: "idle" | "running" | "done" | "error";
-};
-
-interface DuplicateProjectProps {
-	projectId: string;
-	services: Services[];
-	selectedServiceIds: string[];
-}
-
-export const DuplicateProject = ({
-	projectId,
-	services,
-	selectedServiceIds,
-}: DuplicateProjectProps) => {
-	const [open, setOpen] = useState(false);
-	const [name, setName] = useState("");
-	const [description, setDescription] = useState("");
-	const utils = api.useUtils();
-	const router = useRouter();
-
-	const selectedServices = services.filter((service) =>
-		selectedServiceIds.includes(service.id),
-	);
-
-	const { mutateAsync: duplicateProject, isLoading } =
-		api.project.duplicate.useMutation({
-			onSuccess: async (newProject) => {
-				await utils.project.all.invalidate();
-				toast.success("Project duplicated successfully");
-				setOpen(false);
-				router.push(`/dashboard/project/${newProject.projectId}`);
-			},
-			onError: (error) => {
-				toast.error(error.message);
-			},
-		});
-
-	const handleDuplicate = async () => {
-		if (!name) {
-			toast.error("Project name is required");
-			return;
-		}
-
-		await duplicateProject({
-			sourceProjectId: projectId,
-			name,
-			description,
-			includeServices: true,
-			selectedServices: selectedServices.map((service) => ({
-				id: service.id,
-				type: service.type,
-			})),
-		});
-	};
-
-	return (
-		<Dialog
-			open={open}
-			onOpenChange={(isOpen) => {
-				setOpen(isOpen);
-				if (!isOpen) {
-					// Reset form when closing
-					setName("");
-					setDescription("");
-				}
-			}}
-		>
-			<DialogTrigger asChild>
-				<Button variant="ghost" className="w-full justify-start">
-					<Copy className="mr-2 h-4 w-4" />
-					Duplicate
-				</Button>
-			</DialogTrigger>
-			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>Duplicate Project</DialogTitle>
-					<DialogDescription>
-						Create a new project with the selected services
-					</DialogDescription>
-				</DialogHeader>
-
-				<div className="grid gap-4 py-4">
-					<div className="grid gap-2">
-						<Label htmlFor="name">Name</Label>
-						<Input
-							id="name"
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							placeholder="New project name"
-						/>
-					</div>
-
-					<div className="grid gap-2">
-						<Label htmlFor="description">Description</Label>
-						<Input
-							id="description"
-							value={description}
-							onChange={(e) => setDescription(e.target.value)}
-							placeholder="Project description (optional)"
-						/>
-					</div>
-
-					<div className="grid gap-2">
-						<Label>Selected services to duplicate</Label>
-						<div className="space-y-2 max-h-[200px] overflow-y-auto border rounded-md p-4">
-							{selectedServices.map((service) => (
-								<div key={service.id} className="flex items-center space-x-2">
-									<span className="text-sm">
-										{service.name} ({service.type})
-									</span>
-								</div>
-							))}
-						</div>
-					</div>
-				</div>
-
-				<DialogFooter>
-					<Button
-						variant="outline"
-						onClick={() => setOpen(false)}
-						disabled={isLoading}
-					>
-						Cancel
-					</Button>
-					<Button onClick={handleDuplicate} disabled={isLoading}>
-						{isLoading ? (
-							<>
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								Duplicating...
-							</>
-						) : (
-							"Duplicate"
-						)}
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -31,25 +31,9 @@ import { toast } from "sonner";
 import { z } from "zod";
 
 const AddProjectSchema = z.object({
-	name: z
-		.string()
-		.min(1, "Project name is required")
-		.refine(
-			(name) => {
-				const trimmedName = name.trim();
-				const validNameRegex =
-					/^[\p{L}\p{N}_-][\p{L}\p{N}\s_-]*[\p{L}\p{N}_-]$/u;
-				return validNameRegex.test(trimmedName);
-			},
-			{
-				message:
-					"Project name must start and end with a letter, number, hyphen or underscore. Spaces are allowed in between.",
-			},
-		)
-		.refine((name) => !/^\d/.test(name.trim()), {
-			message: "Project name cannot start with a number",
-		})
-		.transform((name) => name.trim()),
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
 	description: z.string().optional(),
 });
 
@@ -113,6 +97,18 @@ export const HandleProject = ({ projectId }: Props) => {
 				);
 			});
 	};
+	// useEffect(() => {
+	// 	const getUsers = async () => {
+	// 		const users = await authClient.admin.listUsers({
+	// 			query: {
+	// 				limit: 100,
+	// 			},
+	// 		});
+	// 		console.log(users);
+	// 	};
+
+	// 	getUsers();
+	// });
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -152,7 +148,7 @@ export const HandleProject = ({ projectId }: Props) => {
 									<FormItem>
 										<FormLabel>Name</FormLabel>
 										<FormControl>
-											<Input placeholder="Vandelay Industries" {...field} />
+											<Input placeholder="Tesla" {...field} />
 										</FormControl>
 
 										<FormMessage />

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

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

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

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

@@ -8,9 +8,15 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { api } from "@/utils/api";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -85,14 +91,12 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 								<Button
 									variant="default"
 									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Deploy
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -123,14 +127,13 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 								<Button
 									variant="secondary"
 									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									className="flex items-center gap-1.5"
 								>
+									Reload
+									<RefreshCcw className="size-4" />
 									<Tooltip>
 										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 										</TooltipTrigger>
 										<TooltipPrimitive.Portal>
 											<TooltipContent sideOffset={5} className="z-[60]">
@@ -161,14 +164,13 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 									<Button
 										variant="secondary"
 										isLoading={isStarting}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Start
+										<CheckCircle2 className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -201,14 +203,13 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 									<Button
 										variant="destructive"
 										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										className="flex items-center gap-1.5"
 									>
+										Stop
+										<Ban className="size-4" />
 										<Tooltip>
 											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
@@ -224,23 +225,9 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}
 						>
-							<Button
-								variant="outline"
-								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-							>
-								<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 variant="outline">
+								<Terminal />
+								Open Terminal
 							</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="Vandelay Industries" {...field} />
+												<Input placeholder="Tesla" {...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,

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

@@ -25,13 +25,13 @@ import {
 import { type RouterOutputs, api } from "@/utils/api";
 import { format } from "date-fns";
 import {
-	AlertCircle,
 	ArrowDownUp,
-	Calendar as CalendarIcon,
+	AlertCircle,
 	InfoIcon,
+	Calendar as CalendarIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { toast } from "sonner";
 import { RequestDistributionChart } from "./request-distribution-chart";
 import { RequestsTable } from "./requests-table";

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

@@ -55,7 +55,7 @@ export const AiForm = () => {
 												key={config.aiId}
 												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">
+												<div className="flex items-center justify-between  p-3.5 rounded-lg bg-background border  w-full">
 													<div>
 														<span className="text-sm font-medium">
 															{config.name}

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

@@ -1,22 +1,14 @@
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
 import {
 	Dialog,
 	DialogContent,
-	DialogDescription,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
+	DialogDescription,
 } from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import {
 	Select,
@@ -25,14 +17,20 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { toast } from "sonner";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	FormDescription,
+} from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
 
 const formSchema = z.object({
 	name: z.string().min(1, "Name is required"),
@@ -443,16 +441,13 @@ export const AddApiKey = () => {
 						</DialogDescription>
 					</DialogHeader>
 					<div className="mt-4 space-y-4">
-						<CodeEditor
-							className="font-mono text-sm break-all"
-							language="properties"
-							value={newApiKey}
-							readOnly
-						/>
+						<div className="rounded-md bg-muted p-4 font-mono text-sm break-all">
+							{newApiKey}
+						</div>
 						<div className="flex justify-end gap-3">
 							<Button
 								onClick={() => {
-									copy(newApiKey);
+									navigator.clipboard.writeText(newApiKey);
 									toast.success("API key copied to clipboard");
 								}}
 							>

apps/dokploy/components/dashboard/settings/api/show-api-keys.tsx

@@ -1,5 +1,3 @@
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,11 +7,13 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { formatDistanceToNow } from "date-fns";
-import { Clock, ExternalLinkIcon, KeyIcon, Tag, Trash2 } from "lucide-react";
+import { ExternalLinkIcon, KeyIcon, Trash2, Clock, Tag } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
+import { formatDistanceToNow } from "date-fns";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { AddApiKey } from "./add-api-key";
+import { Badge } from "@/components/ui/badge";
 
 export const ShowApiKeys = () => {
 	const { data, refetch } = api.user.get.useQuery();

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

@@ -70,7 +70,7 @@ export const ShowCertificates = () => {
 														key={certificate.certificateId}
 														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">
+														<div className="flex items-center justify-between  p-3.5 rounded-lg bg-background border  w-full">
 															<div className="flex items-center justify-between">
 																<div className="flex gap-2 flex-col">
 																	<span className="text-sm font-medium">