Add licenseKey column to user_temp table and update journal and snapshot metadata for version 0090

feat(github): add triggerType field to GitHub provider and handle tag creation events

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
+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.
 
 ```bash
 git clone https://github.com/dokploy/dokploy.git
@@ -87,6 +87,8 @@ 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
@@ -145,11 +147,9 @@ curl -sSL https://railpack.com/install.sh | 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
+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
 ```
 
-
-
 ## Pull Request
 
 - The `main` branch is the source of truth and should always reflect the latest stable release.
@@ -167,7 +167,6 @@ Thank you for your contribution!
 
 To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
 
-
 ### Recommendations
 
 - Use the same name of the folder as the id of the template.

Dockerfile

@@ -29,7 +29,7 @@ WORKDIR /app
 # Set production
 ENV NODE_ENV=production
 
-RUN apt-get update && apt-get install -y curl unzip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip zip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next
@@ -49,7 +49,7 @@ 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.29.1
+ARG NIXPACKS_VERSION=1.35.0
 RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && chmod +x install.sh \
     && ./install.sh \

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,3 +1115,60 @@ 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,9 +27,16 @@ 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: "",

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

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
+import type { Schema } from "@dokploy/server/templates";
 import type { CompleteTemplate } from "@dokploy/server/templates/processors";
 import { processTemplate } from "@dokploy/server/templates/processors";
-import type { Schema } from "@dokploy/server/templates";
+import { describe, expect, it } from "vitest";
 
 describe("processTemplate", () => {
 	// Mock schema for testing
@@ -51,6 +51,35 @@ describe("processTemplate", () => {
 			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", () => {
@@ -233,6 +262,49 @@ describe("processTemplate", () => {
 			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", () => {

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

@@ -0,0 +1,232 @@
+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,6 +14,7 @@ import {
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: User = {
+	https: false,
 	enablePaidFeatures: false,
 	metricsConfig: {
 		containers: {
@@ -73,7 +74,6 @@ beforeEach(() => {
 
 test("Should read the configuration file", () => {
 	const config: FileConfig = loadOrCreateConfig("dokploy");
-
 	expect(config.http?.routers?.["dokploy-router-app"]?.service).toBe(
 		"dokploy-service-app",
 	);
@@ -83,6 +83,7 @@ test("Should apply redirect-to-https", () => {
 	updateServerTraefik(
 		{
 			...baseAdmin,
+			https: true,
 			certificateType: "letsencrypt",
 		},
 		"example.com",

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

@@ -7,10 +7,16 @@ 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: "",
@@ -19,6 +25,7 @@ const baseApp: ApplicationNested = {
 	buildArgs: null,
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
+	triggerType: "push",
 	previewCertificateType: "none",
 	previewEnv: null,
 	previewHttps: false,

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

@@ -0,0 +1,61 @@
+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/import/show-import.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -32,7 +33,6 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 const ImportSchema = z.object({
 	base64: z.string(),

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

@@ -20,7 +20,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-enum BuildType {
+export enum BuildType {
 	dockerfile = "dockerfile",
 	heroku_buildpacks = "heroku_buildpacks",
 	paketo_buildpacks = "paketo_buildpacks",
@@ -29,9 +29,18 @@ 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("dockerfile"),
+		buildType: z.literal(BuildType.dockerfile),
 		dockerfile: z
 			.string({
 				required_error: "Dockerfile path is required",
@@ -42,39 +51,88 @@ const mySchema = z.discriminatedUnion("buildType", [
 		dockerBuildStage: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("heroku_buildpacks"),
+		buildType: z.literal(BuildType.heroku_buildpacks),
 		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("paketo_buildpacks"),
+		buildType: z.literal(BuildType.paketo_buildpacks),
 	}),
 	z.object({
-		buildType: z.literal("nixpacks"),
+		buildType: z.literal(BuildType.nixpacks),
 		publishDirectory: z.string().optional(),
 	}),
 	z.object({
-		buildType: z.literal("static"),
+		buildType: z.literal(BuildType.static),
 	}),
 	z.object({
-		buildType: z.literal("railpack"),
+		buildType: z.literal(BuildType.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>({
@@ -85,46 +143,36 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	});
 
 	const buildType = form.watch("buildType");
+
 	useEffect(() => {
 		if (data) {
-			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,
-				});
-			}
+			const typedData: ApplicationData = {
+				...data,
+				buildType: isValidBuildType(data.buildType)
+					? (data.buildType as BuildType)
+					: BuildType.nixpacks, // fallback
+			};
+
+			form.reset(resetData(typedData));
 		}
-	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
+	}, [data, form]);
 
 	const onSubmit = async (data: AddTemplate) => {
 		await mutateAsync({
 			applicationId,
 			buildType: data.buildType,
 			publishDirectory:
-				data.buildType === "nixpacks" ? data.publishDirectory : null,
-			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
+				data.buildType === BuildType.nixpacks ? data.publishDirectory : null,
+			dockerfile:
+				data.buildType === BuildType.dockerfile ? data.dockerfile : null,
 			dockerContextPath:
-				data.buildType === "dockerfile" ? data.dockerContextPath : null,
+				data.buildType === BuildType.dockerfile ? data.dockerContextPath : null,
 			dockerBuildStage:
-				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
+				data.buildType === BuildType.dockerfile ? data.dockerBuildStage : null,
 			herokuVersion:
-				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
+				data.buildType === BuildType.heroku_buildpacks
+					? data.herokuVersion
+					: null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -160,193 +208,143 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 							control={form.control}
 							name="buildType"
 							defaultValue={form.control._defaultValues.buildType}
-							render={({ field }) => {
-								return (
-									<FormItem className="space-y-3">
-										<FormLabel>Build Type</FormLabel>
-										<FormControl>
-											<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>
-								);
-							}}
+							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 === "heroku_buildpacks" && (
+						{buildType === 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>
-									);
-								}}
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Heroku Version (Optional)</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Heroku Version (Default: 24)"
+												{...field}
+												value={field.value ?? ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
 						)}
-						{buildType === "dockerfile" && (
+						{buildType === BuildType.dockerfile && (
 							<>
 								<FormField
 									control={form.control}
 									name="dockerfile"
-									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 }) => {
-										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 }) => {
-										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 (
+									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>
+											<FormLabel>Docker File</FormLabel>
 											<FormControl>
 												<Input
-													placeholder={"Publish Directory"}
+													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>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="dockerBuildStage"
+									render={({ field }) => (
+										<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 === 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/domains/add-domain.tsx

@@ -41,8 +41,8 @@ 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";
 import Link from "next/link";
+import type z from "zod";
 
 type Domain = z.infer<typeof domain>;
 
@@ -89,8 +89,6 @@ export const AddDomain = ({
 			serverId: application?.serverId || "",
 		});
 
-	console.log("canGenerateTraefikMeDomains", canGenerateTraefikMeDomains);
-
 	const form = useForm<Domain>({
 		resolver: zodResolver(domain),
 		defaultValues: {
@@ -276,6 +274,11 @@ export const AddDomain = ({
 										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>

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

@@ -8,16 +8,49 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import {
+	CheckCircle2,
+	ExternalLink,
+	GlobeIcon,
+	InfoIcon,
+	Loader2,
+	PenBoxIcon,
+	RefreshCw,
+	Trash2,
+	XCircle,
+} from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import { AddDomain } from "./add-domain";
+import { useState } from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { ValidationStates } from "../../compose/domains/show-domains";
+import { DnsHelperModal } from "../../compose/domains/dns-helper-modal";
+import { Badge } from "@/components/ui/badge";
 
 interface Props {
 	applicationId: string;
 }
 
 export const ShowDomains = ({ applicationId }: Props) => {
+	const { data: application } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+	const [validationStates, setValidationStates] = useState<ValidationStates>(
+		{},
+	);
+	const { data: ip } = api.settings.getIp.useQuery();
+
 	const { data, refetch } = api.domain.byApplicationId.useQuery(
 		{
 			applicationId,
@@ -26,10 +59,47 @@ export const ShowDomains = ({ applicationId }: Props) => {
 			enabled: !!applicationId,
 		},
 	);
-
+	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">
@@ -68,73 +138,208 @@ export const ShowDomains = ({ applicationId }: Props) => {
 							</div>
 						</div>
 					) : (
-						<div className="flex w-full flex-col gap-4">
+						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full">
 							{data?.map((item) => {
+								const validationState = validationStates[item.host];
 								return (
-									<div
+									<Card
 										key={item.domainId}
-										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
+										className="relative overflow-hidden w-full border bg-card transition-all hover:shadow-md bg-transparent"
 									>
-										<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>
+										<CardContent className="p-6">
+											<div className="flex flex-col gap-4">
+												{/* Service & Domain Info */}
+												<div className="flex items-start justify-between">
+													<div className="flex flex-col gap-2">
+														<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" />
+														</Link>
+													</div>
+													<div className="flex gap-2">
+														{!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
+															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((_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="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>
+												{/* 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>
 
-											<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>
+													<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>
-										</div>
-									</div>
+										</CardContent>
+									</Card>
 								);
 							})}
 						</div>

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

@@ -4,10 +4,10 @@ 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";
-import { useEffect } from "react";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),

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

@@ -1,4 +1,6 @@
+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,
@@ -29,6 +31,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -39,13 +42,11 @@ 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 { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const BitbucketProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -58,6 +59,7 @@ const BitbucketProviderSchema = z.object({
 	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>;
@@ -84,6 +86,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketId: "",
 			branch: "",
 			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -130,6 +133,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				buildPath: data.bitbucketBuildPath || "/",
 				bitbucketId: data.bitbucketId || "",
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules || false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -143,6 +147,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketId: data.bitbucketId,
 			applicationId,
 			watchPaths: data.watchPaths || [],
+			enableSubmodules: data.enableSubmodules || false,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -467,6 +472,21 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 								</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-git-provider.tsx

@@ -23,18 +23,19 @@ import {
 	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 { useRouter } from "next/router";
 import Link from "next/link";
+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";
-import { Badge } from "@/components/ui/badge";
-import { GitIcon } from "@/components/icons/data-tools-icons";
 
 const GitProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -44,6 +45,7 @@ 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>;
@@ -67,6 +69,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			repositoryURL: "",
 			sshKey: undefined,
 			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -79,6 +82,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				buildPath: data.customGitBuildPath || "/",
 				repositoryURL: data.customGitUrl || "",
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -91,6 +95,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			customGitSSHKeyId: values.sshKey === "none" ? null : values.sshKey,
 			applicationId,
 			watchPaths: values.watchPaths || [],
+			enableSubmodules: values.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -294,6 +299,22 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</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

@@ -0,0 +1,535 @@
+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, 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?.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/*)"
+												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,3 +1,5 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -28,23 +30,22 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -57,6 +58,8 @@ const GithubProviderSchema = z.object({
 	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>;
@@ -81,12 +84,15 @@ 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(
@@ -124,6 +130,8 @@ 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, form]);
@@ -137,6 +145,8 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			buildPath: data.buildPath,
 			githubId: data.githubId,
 			watchPaths: data.watchPaths || [],
+			triggerType: data.triggerType,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -381,11 +391,11 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 						/>
 						<FormField
 							control={form.control}
-							name="watchPaths"
+							name="triggerType"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2">
-									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
+									<div className="flex items-center gap-2 ">
+										<FormLabel>Trigger Type</FormLabel>
 										<TooltipProvider>
 											<Tooltip>
 												<TooltipTrigger asChild>
@@ -393,68 +403,127 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 												</TooltipTrigger>
 												<TooltipContent>
 													<p>
-														Add paths to watch for changes. When files in these
-														paths change, a new deployment will be triggered.
+														Choose when to trigger deployments: on push to the
+														selected branch or when a new tag is created.
 													</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);
+									<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/*)"
+													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 = "";
+															}
+														}
 													}}
 												/>
-											</Badge>
-										))}
-									</div>
-									<div className="flex gap-2">
-										<FormControl>
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
-														const path = input.value.trim();
-														if (path) {
-															field.onChange([...(field.value || []), path]);
-															input.value = "";
-														}
+											</FormControl>
+											<Button
+												type="button"
+												variant="outline"
+												size="icon"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder*="Enter a path"]',
+													) as HTMLInputElement;
+													const path = input.value.trim();
+													if (path) {
+														field.onChange([...(field.value || []), path]);
+														input.value = "";
 													}
 												}}
-											/>
-										</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 />
+											>
+												<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>
 							)}
 						/>

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

@@ -1,4 +1,6 @@
+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,
@@ -29,23 +31,22 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import Link from "next/link";
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
 
 const GitlabProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),
@@ -60,6 +61,7 @@ const GitlabProviderSchema = z.object({
 	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>;
@@ -86,6 +88,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -135,6 +138,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				buildPath: data.gitlabBuildPath || "/",
 				gitlabId: data.gitlabId || "",
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -150,6 +154,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			gitlabProjectId: data.repository.id,
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 			watchPaths: data.watchPaths || [],
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -483,6 +488,21 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 								</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,10 +1,12 @@
 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";
@@ -18,7 +20,14 @@ 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";
+type TabState =
+	| "github"
+	| "docker"
+	| "git"
+	| "drop"
+	| "gitlab"
+	| "bitbucket"
+	| "gitea";
 
 interface Props {
 	applicationId: string;
@@ -29,6 +38,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
 	const { data: bitbucketProviders } =
 		api.bitbucket.bitbucketProviders.useQuery();
+	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
 
 	const { data: application } = api.application.one.useQuery({ applicationId });
 	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
@@ -55,7 +65,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"
@@ -78,6 +88,13 @@ 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"
@@ -162,6 +179,26 @@ 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-[15vh] 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/preview-deployments/show-preview-settings.tsx

@@ -298,7 +298,11 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 												})
 													.then(() => {
 														refetch();
-														toast.success("Preview deployments enabled");
+														toast.success(
+															checked
+																? "Preview deployments enabled"
+																: "Preview deployments disabled",
+														);
 													})
 													.catch((error) => {
 														toast.error(error.message);

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

@@ -41,8 +41,8 @@ import {
 import { domainCompose } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import type z from "zod";
 import Link from "next/link";
+import type z from "zod";
 
 type Domain = z.infer<typeof domainCompose>;
 
@@ -401,6 +401,11 @@ export const AddDomainCompose = ({
 										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>

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

@@ -0,0 +1,109 @@
+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/compose/domains/show-domains.tsx

@@ -7,17 +7,55 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import {
+	ExternalLink,
+	GlobeIcon,
+	PenBoxIcon,
+	Trash2,
+	InfoIcon,
+	Server,
+	CheckCircle2,
+	XCircle,
+	Loader2,
+	RefreshCw,
+} from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import { AddDomainCompose } from "./add-domain";
+import { Badge } from "@/components/ui/badge";
+import { DnsHelperModal } from "./dns-helper-modal";
+import { useState } from "react";
 
 interface Props {
 	composeId: string;
 }
 
+export type ValidationState = {
+	isLoading: boolean;
+	isValid?: boolean;
+	error?: string;
+	resolvedIp?: string;
+	message?: string;
+};
+
+export type ValidationStates = {
+	[key: string]: ValidationState;
+};
+
 export const ShowDomainsCompose = ({ composeId }: Props) => {
+	const [validationStates, setValidationStates] = useState<ValidationStates>(
+		{},
+	);
+
+	const { data: ip } = api.settings.getIp.useQuery();
+
 	const { data, refetch } = api.domain.byComposeId.useQuery(
 		{
 			composeId,
@@ -27,11 +65,58 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 		},
 	);
 
+	const { data: compose } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{
+			enabled: !!composeId,
+		},
+	);
+
+	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:
+					compose?.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 ">
+		<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">
@@ -45,100 +130,248 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 						{data && data?.length > 0 && (
 							<AddDomainCompose composeId={composeId}>
 								<Button>
-									<GlobeIcon className="size-4" /> Add Domain
+									<GlobeIcon className="size-4 mr-2" /> Add Domain
 								</Button>
 							</AddDomainCompose>
 						)}
 					</div>
 				</CardHeader>
-				<CardContent className="flex w-full flex-row gap-4">
+				<CardContent>
 					{data?.length === 0 ? (
-						<div className="flex w-full flex-col items-center justify-center gap-3">
+						<div className="flex w-full flex-col items-center justify-center gap-3 py-8">
 							<GlobeIcon className="size-8 text-muted-foreground" />
-							<span className="text-base text-muted-foreground">
+							<span className="text-base text-muted-foreground text-center">
 								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
+										<GlobeIcon className="size-4 mr-2" /> Add Domain
 									</Button>
 								</AddDomainCompose>
 							</div>
 						</div>
 					) : (
-						<div className="flex w-full flex-col gap-4">
+						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
 							{data?.map((item) => {
+								const validationState = validationStates[item.host];
 								return (
-									<div
+									<Card
 										key={item.domainId}
-										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
+										className="relative overflow-hidden border bg-card transition-all hover:shadow-md bg-transparent"
 									>
-										<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>
+										<CardContent className="p-6">
+											<div className="flex flex-col gap-4">
+												{/* Service & Domain Info */}
+												<div className="flex items-start justify-between">
+													<div className="flex flex-col gap-2">
+														<Badge variant="outline" className="w-fit">
+															<Server className="size-3 mr-1" />
+															{item.serviceName}
+														</Badge>
+														<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" />
+														</Link>
+													</div>
+													<div className="flex gap-2">
+														{!item.host.includes("traefik.me") && (
+															<DnsHelperModal
+																domain={{
+																	host: item.host,
+																	https: item.https,
+																	path: item.path || undefined,
+																}}
+																serverIp={
+																	compose?.server?.ipAddress?.toString() ||
+																	ip?.toString()
+																}
+															/>
+														)}
+														<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>
 
-											<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>
+												{/* 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>
 
-										<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>
+													<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 &&
+																!validationState.isValid ? (
+																	<div className="flex flex-col gap-1">
+																		<p className="font-medium text-red-500">
+																			Error:
+																		</p>
+																		<p>{validationState.error}</p>
+																	</div>
+																) : validationState?.isValid ? (
+																	<div className="flex flex-col gap-1">
+																		<p className="font-medium text-green-500">
+																			{validationState.message
+																				? "Info:"
+																				: "Valid Configuration:"}
+																		</p>
+																		<p>
+																			{validationState.message ||
+																				`Domain points to ${validationState.resolvedIp}`}
+																		</p>
+																	</div>
+																) : (
+																	"Click to validate DNS configuration"
+																)}
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
 											</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>
+										</CardContent>
+									</Card>
 								);
 							})}
 						</div>

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

@@ -79,6 +79,22 @@ 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 ">

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

@@ -1,4 +1,6 @@
+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,
@@ -29,6 +31,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -39,13 +42,11 @@ 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 { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { BitbucketIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const BitbucketProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -58,6 +59,7 @@ const BitbucketProviderSchema = z.object({
 	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>;
@@ -84,6 +86,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			bitbucketId: "",
 			branch: "",
 			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -130,6 +133,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				composePath: data.composePath,
 				bitbucketId: data.bitbucketId || "",
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -145,6 +149,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			sourceType: "bitbucket",
 			composeStatus: "idle",
 			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -469,6 +474,21 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 								</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,3 +1,4 @@
+import { GitIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -18,6 +19,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -27,13 +29,12 @@ import {
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { GitIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GitProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -43,6 +44,7 @@ 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>;
@@ -65,6 +67,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			composePath: "./docker-compose.yml",
 			sshKey: undefined,
 			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -77,6 +80,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				repositoryURL: data.customGitUrl || "",
 				composePath: data.composePath,
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -91,6 +95,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			composePath: values.composePath,
 			composeStatus: "idle",
 			watchPaths: values.watchPaths || [],
+			enableSubmodules: values.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -295,6 +300,21 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 							</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

@@ -0,0 +1,503 @@
+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, 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/*)"
+												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,3 +1,4 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -29,6 +30,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -38,13 +40,12 @@ import {
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, 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";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -57,6 +58,8 @@ const GithubProviderSchema = z.object({
 	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>;
@@ -82,13 +85,15 @@ 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(
 			{
@@ -125,6 +130,8 @@ 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, form]);
@@ -140,6 +147,8 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			sourceType: "github",
 			composeStatus: "idle",
 			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
+			triggerType: data.triggerType,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -384,79 +393,140 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 						/>
 						<FormField
 							control={form.control}
-							name="watchPaths"
+							name="triggerType"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2">
 									<div className="flex items-center gap-2">
-										<FormLabel>Watch Paths</FormLabel>
+										<FormLabel>Trigger Type</FormLabel>
 										<TooltipProvider>
 											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
+												<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.
+														Choose when to trigger deployments: on push to the
+														selected branch or when a new tag is created.
 													</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);
+									<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/*)"
+													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 = "";
+															}
+														}
 													}}
 												/>
-											</Badge>
-										))}
-									</div>
-									<FormControl>
-										<div className="flex gap-2">
-											<Input
-												placeholder="Enter a path to watch (e.g., src/*, dist/*)"
-												onKeyDown={(e) => {
-													if (e.key === "Enter") {
-														e.preventDefault();
-														const input = e.currentTarget;
+												<Button
+													type="button"
+													variant="secondary"
+													onClick={() => {
+														const input = document.querySelector(
+															'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
+														) as HTMLInputElement;
 														const value = input.value.trim();
 														if (value) {
 															const newPaths = [...(field.value || []), value];
 															form.setValue("watchPaths", newPaths);
 															input.value = "";
 														}
-													}
-												}}
-											/>
-											<Button
-												type="button"
-												variant="secondary"
-												onClick={() => {
-													const input = document.querySelector(
-														'input[placeholder="Enter a path to watch (e.g., src/*, dist/*)"]',
-													) as HTMLInputElement;
-													const value = input.value.trim();
-													if (value) {
-														const newPaths = [...(field.value || []), value];
-														form.setValue("watchPaths", newPaths);
-														input.value = "";
-													}
-												}}
-											>
-												Add
-											</Button>
-										</div>
+													}}
+												>
+													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>
-									<FormMessage />
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
 								</FormItem>
 							)}
 						/>

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

@@ -1,4 +1,6 @@
+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,
@@ -29,6 +31,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import {
 	Tooltip,
 	TooltipContent,
@@ -39,13 +42,11 @@ 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 { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { Badge } from "@/components/ui/badge";
-import { GitlabIcon } from "@/components/icons/data-tools-icons";
-import Link from "next/link";
 
 const GitlabProviderSchema = z.object({
 	composePath: z.string().min(1),
@@ -60,6 +61,7 @@ const GitlabProviderSchema = z.object({
 	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>;
@@ -87,6 +89,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			gitlabId: "",
 			branch: "",
 			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -136,6 +139,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				composePath: data.composePath,
 				gitlabId: data.gitlabId || "",
 				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -153,6 +157,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			sourceType: "gitlab",
 			composeStatus: "idle",
 			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -485,6 +490,21 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</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,6 +1,7 @@
 import {
 	BitbucketIcon,
 	GitIcon,
+	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
@@ -14,10 +15,11 @@ 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";
+type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
 interface Props {
 	composeId: string;
 }
@@ -27,9 +29,11 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
 	const { data: bitbucketProviders } =
 		api.bitbucket.bitbucketProviders.useQuery();
+	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
 
 	const { data: compose } = api.compose.one.useQuery({ composeId });
 	const [tab, setSab] = useState<TabState>(compose?.sourceType || "github");
+
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -54,21 +58,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-5 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-6 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"
@@ -77,7 +81,12 @@ 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"
@@ -89,11 +98,12 @@ 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} />
@@ -154,6 +164,26 @@ 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-[15vh] 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/database/backups/add-backup.tsx

@@ -1,339 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	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"),
-	keepLatestCount: z.coerce.number().optional(),
-});
-
-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: "",
-			keepLatestCount: undefined,
-		},
-		resolver: zodResolver(AddPostgresBackup1Schema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			database: "",
-			destinationId: "",
-			enabled: true,
-			prefix: "/",
-			schedule: "",
-			keepLatestCount: undefined,
-		});
-	}, [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,
-			keepLatestCount: data.keepLatestCount,
-			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 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>
-								)}
-							/>
-						</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

@@ -0,0 +1,767 @@
+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, 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";
+
+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.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>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 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,3 +1,5 @@
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -23,89 +25,220 @@ import {
 	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 { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+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 { debounce } from "lodash";
-import { Input } from "@/components/ui/input";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
-import { DrawerLogs } from "@/components/shared/drawer-logs";
-import { Badge } from "@/components/ui/badge";
-import copy from "copy-to-clipboard";
-import { toast } from "sonner";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+type DatabaseType =
+	| Exclude<ServiceType, "application" | "redis">
+	| "web-server";
 
 interface Props {
-	databaseId: string;
-	databaseType: Exclude<ServiceType, "application" | "redis">;
-	serverId: string | null;
+	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",
-		}),
-});
+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"),
+		serviceName: z.string().nullable().optional(),
+		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.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"],
+					});
+				}
+			}
+		}
+	});
 
-type RestoreBackup = z.infer<typeof RestoreBackupSchema>;
+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 = ({
-	databaseId,
+	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<RestoreBackup>({
+	const form = useForm<z.infer<typeof RestoreBackupSchema>>({
 		defaultValues: {
 			destinationId: "",
 			backupFile: "",
-			databaseName: "",
+			databaseName: databaseType === "web-server" ? "dokploy" : "",
+			databaseType:
+				backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
+			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);
-	}, 300);
+		debouncedSetSearch(value);
+	};
 
 	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
 		{
 			destinationId: destionationId,
-			search,
+			search: debouncedSearchTerm,
 			serverId: serverId ?? "",
 		},
 		{
@@ -117,16 +250,15 @@ export const RestoreBackup = ({
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const [isDeploying, setIsDeploying] = useState(false);
 
-	// const { mutateAsync: restore, isLoading: isRestoring } =
-	// 	api.backup.restoreBackup.useMutation();
-
 	api.backup.restoreBackupWithLogs.useSubscription(
 		{
-			databaseId,
-			databaseType,
+			databaseId: id,
+			databaseType: currentDatabaseType as DatabaseType,
 			databaseName: form.watch("databaseName"),
 			backupFile: form.watch("backupFile"),
 			destinationId: form.watch("destinationId"),
+			backupType: backupType,
+			metadata: metadata,
 		},
 		{
 			enabled: isDeploying,
@@ -148,10 +280,32 @@ export const RestoreBackup = ({
 		},
 	);
 
-	const onSubmit = async (_data: RestoreBackup) => {
+	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>
@@ -160,7 +314,7 @@ export const RestoreBackup = ({
 					Restore Backup
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-lg">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle className="flex items-center">
 						<RotateCcw className="mr-2 size-4" />
@@ -265,7 +419,7 @@ export const RestoreBackup = ({
 											</Badge>
 										)}
 									</FormLabel>
-									<Popover>
+									<Popover modal>
 										<PopoverTrigger asChild>
 											<FormControl>
 												<Button
@@ -284,7 +438,8 @@ export const RestoreBackup = ({
 											<Command>
 												<CommandInput
 													placeholder="Search backup files..."
-													onValueChange={debouncedSetSearch}
+													value={search}
+													onValueChange={handleSearchChange}
 													className="h-9"
 												/>
 												{isLoading ? (
@@ -301,26 +456,51 @@ export const RestoreBackup = ({
 													</div>
 												) : (
 													<ScrollArea className="h-64">
-														<CommandGroup>
-															{files.map((file) => (
+														<CommandGroup className="w-96">
+															{files?.map((file) => (
 																<CommandItem
-																	value={file}
-																	key={file}
+																	value={file.Path}
+																	key={file.Path}
 																	onSelect={() => {
-																		form.setValue("backupFile", file);
+																		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 justify-between">
-																		<span>{file}</span>
+																	<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>
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			file === field.value
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
 																</CommandItem>
 															))}
 														</CommandGroup>
@@ -337,21 +517,270 @@ export const RestoreBackup = ({
 							control={form.control}
 							name="databaseName"
 							render={({ field }) => (
-								<FormItem className="">
+								<FormItem>
 									<FormLabel>Database Name</FormLabel>
 									<FormControl>
-										<Input {...field} placeholder="Enter database name" />
+										<Input placeholder="Enter database name" {...field} />
 									</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="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")}
+								disabled={
+									!form.watch("backupFile") ||
+									(backupType === "compose" && !form.watch("databaseType"))
+								}
 							>
 								Restore
 							</Button>

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

@@ -14,47 +14,76 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { DatabaseBackup, Play, Trash2 } from "lucide-react";
+import { Database, 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 { AddBackup } from "./add-backup";
-import { UpdateBackup } from "./update-backup";
 import { RestoreBackup } from "./restore-backup";
-import { useState } from "react";
+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";
 
 interface Props {
 	id: string;
-	type: Exclude<ServiceType, "application" | "redis">;
+	databaseType?: Exclude<ServiceType, "application" | "redis"> | "web-server";
+	backupType?: "database" | "compose";
 }
-export const ShowBackups = ({ id, type }: Props) => {
+export const ShowBackups = ({
+	id,
+	databaseType,
+	backupType = "database",
+}: Props) => {
 	const [activeManualBackup, setActiveManualBackup] = useState<
 		string | undefined
 	>();
-	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 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 }),
+				};
 	const { data } = api.destination.all.useQuery();
-	const { data: postgres, refetch } = queryMap[type]
-		? queryMap[type]()
+	const key = backupType === "database" ? databaseType : "compose";
+	const query = queryMap[key as keyof typeof queryMap];
+	const { data: postgres, refetch } = query
+		? query()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 
-	const mutationMap = {
-		postgres: () => api.backup.manualBackupPostgres.useMutation(),
-		mysql: () => api.backup.manualBackupMySql.useMutation(),
-		mariadb: () => api.backup.manualBackupMariadb.useMutation(),
-		mongo: () => api.backup.manualBackupMongo.useMutation(),
-	};
+	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 { mutateAsync: manualBackup, isLoading: isManualBackup } = mutationMap[
-		type
-	]
-		? mutationMap[type]()
+	const mutation = mutationMap[key as keyof typeof mutationMap];
+
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutation
+		? mutation
 		: api.backup.manualBackupMongo.useMutation();
 
 	const { mutateAsync: deleteBackup, isLoading: isRemoving } =
@@ -64,7 +93,10 @@ export const ShowBackups = ({ id, type }: Props) => {
 		<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">Backups</CardTitle>
+					<CardTitle className="text-xl flex flex-row gap-2">
+						<Database className="size-6 text-muted-foreground" />
+						Backups
+					</CardTitle>
 					<CardDescription>
 						Add backups to your database to save the data to a different
 						provider.
@@ -73,11 +105,19 @@ export const ShowBackups = ({ id, type }: Props) => {
 
 				{postgres && postgres?.backups?.length > 0 && (
 					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
-						<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+						{databaseType !== "web-server" && (
+							<HandleBackup
+								id={id}
+								databaseType={databaseType}
+								backupType={backupType}
+								refetch={refetch}
+							/>
+						)}
 						<RestoreBackup
-							databaseId={id}
-							databaseType={type}
-							serverId={postgres.serverId}
+							id={id}
+							databaseType={databaseType}
+							backupType={backupType}
+							serverId={"serverId" in postgres ? postgres.serverId : undefined}
 						/>
 					</div>
 				)}
@@ -99,7 +139,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 						</span>
 					</div>
 				) : (
-					<div>
+					<div className="flex flex-col gap-4 w-full">
 						{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" />
@@ -107,69 +147,134 @@ export const ShowBackups = ({ id, type }: Props) => {
 									No backups configured
 								</span>
 								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-									<AddBackup
-										databaseId={id}
-										databaseType={type}
+									<HandleBackup
+										id={id}
+										databaseType={databaseType}
+										backupType={backupType}
 										refetch={refetch}
 									/>
 									<RestoreBackup
-										databaseId={id}
-										databaseType={type}
-										serverId={postgres.serverId}
+										id={id}
+										databaseType={databaseType}
+										serverId={
+											"serverId" in postgres ? postgres.serverId : undefined
+										}
 									/>
 								</div>
 							</div>
 						) : (
-							<div className="flex flex-col pt-2">
+							<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 gap-6">
 									{postgres?.backups.map((backup) => (
 										<div key={backup.backupId}>
-											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
-												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8">
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Destination</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.destination.name}
-														</span>
+											<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-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 className="flex flex-col gap-1">
-														<span className="font-medium">Keep Latest</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || "All"}
-														</span>
+
+													<div 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>
 												</div>
-												<div className="flex flex-row gap-4">
+
+												<div className="flex flex-row md:flex-col gap-1.5">
 													<TooltipProvider delayDuration={0}>
 														<Tooltip>
 															<TooltipTrigger asChild>
 																<Button
 																	type="button"
 																	variant="ghost"
+																	size="icon"
+																	className="size-8"
 																	isLoading={
 																		isManualBackup &&
 																		activeManualBackup === backup.backupId
@@ -192,14 +297,15 @@ export const ShowBackups = ({ id, type }: Props) => {
 																		setActiveManualBackup(undefined);
 																	}}
 																>
-																	<Play className="size-5  text-muted-foreground" />
+																	<Play className="size-4 " />
 																</Button>
 															</TooltipTrigger>
 															<TooltipContent>Run Manual Backup</TooltipContent>
 														</Tooltip>
 													</TooltipProvider>
 
-													<UpdateBackup
+													<HandleBackup
+														backupType={backup.backupType}
 														backupId={backup.backupId}
 														refetch={refetch}
 													/>
@@ -223,7 +329,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 														<Button
 															variant="ghost"
 															size="icon"
-															className="group hover:bg-red-500/10"
+															className="group hover:bg-red-500/10 size-8"
 															isLoading={isRemoving}
 														>
 															<Trash2 className="size-4 text-primary group-hover:text-red-500" />

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

@@ -1,329 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	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"),
-	keepLatestCount: z.coerce.number().optional(),
-});
-
-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: "",
-			keepLatestCount: undefined,
-		},
-		resolver: zodResolver(UpdateBackupSchema),
-	});
-
-	useEffect(() => {
-		if (backup) {
-			form.reset({
-				database: backup.database,
-				destinationId: backup.destinationId,
-				enabled: backup.enabled || false,
-				prefix: backup.prefix,
-				schedule: backup.schedule,
-				keepLatestCount: backup.keepLatestCount
-					? Number(backup.keepLatestCount)
-					: undefined,
-			});
-		}
-	}, [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,
-			keepLatestCount: data.keepLatestCount as number | null,
-		})
-			.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 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>
-								)}
-							/>
-						</div>
-						<DialogFooter>
-							<Button
-								isLoading={isLoadingUpdate}
-								form="hook-form-update-backup"
-								type="submit"
-							>
-								Update
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -67,7 +67,7 @@ import {
 	SearchIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
 const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
@@ -307,7 +307,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 							>
 								{templates?.map((template) => (
 									<div
-										key={template.id}
+										key={template?.id}
 										className={cn(
 											"flex flex-col border rounded-lg overflow-hidden relative",
 											viewMode === "icon" && "h-[200px]",
@@ -315,7 +315,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										)}
 									>
 										<Badge className="absolute top-2 right-2" variant="blue">
-											{template.version}
+											{template?.version}
 										</Badge>
 										<div
 											className={cn(
@@ -324,21 +324,21 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 											)}
 										>
 											<img
-												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${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 +356,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,25 +372,27 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 										>
 											{viewMode === "detailed" && (
 												<div className="flex gap-2">
-													<Link
-														href={template.links.github}
-														target="_blank"
-														className="text-muted-foreground hover:text-foreground transition-colors"
-													>
-														<GithubIcon className="size-5" />
-													</Link>
-													{template.links.website && (
+													{template?.links?.github && (
 														<Link
-															href={template.links.website}
+															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}
 															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"
 														>
@@ -419,7 +421,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>
 

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

@@ -13,7 +13,6 @@ 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",
@@ -23,7 +22,7 @@ const examples = [
 	"Sendgrid service opensource analogue",
 ];
 
-export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
+export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 	// Get servers from the API
 	const { data: servers } = api.server.withSSHKey.useQuery();
 

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

@@ -0,0 +1,172 @@
+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,9 +31,14 @@ import { toast } from "sonner";
 import { z } from "zod";
 
 const AddProjectSchema = z.object({
-	name: z.string().min(1, {
-		message: "Name is required",
-	}),
+	name: z
+		.string()
+		.min(1, {
+			message: "Name is required",
+		})
+		.regex(/^[a-zA-Z]/, {
+			message: "Project name cannot start with a number",
+		}),
 	description: z.string().optional(),
 });
 
@@ -97,18 +102,6 @@ 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}>

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

@@ -115,7 +115,7 @@ export const ShowProjects = () => {
 											</span>
 										</div>
 									)}
-									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
+									<div className="w-full grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 flex-wrap gap-5">
 										{filteredProjects?.map((project) => {
 											const emptyServices =
 												project?.mariadb.length === 0 &&

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 {
-	ArrowDownUp,
 	AlertCircle,
-	InfoIcon,
+	ArrowDownUp,
 	Calendar as CalendarIcon,
+	InfoIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { useState, useEffect } from "react";
+import { useEffect, useState } 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,14 +1,22 @@
+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,
@@ -17,22 +25,14 @@ 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 { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
 import { z } from "zod";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-	FormDescription,
-} from "@/components/ui/form";
-import { Switch } from "@/components/ui/switch";
-import copy from "copy-to-clipboard";
-import { CodeEditor } from "@/components/shared/code-editor";
 
 const formSchema = z.object({
 	name: z.string().min(1, "Name is required"),

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

@@ -1,3 +1,5 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -7,13 +9,11 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { ExternalLinkIcon, KeyIcon, Trash2, Clock, Tag } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+import { Clock, ExternalLinkIcon, KeyIcon, Tag, Trash2 } 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">

apps/dokploy/components/dashboard/settings/certificates/utils.ts

@@ -13,53 +13,65 @@ export const extractExpirationDate = (certData: string): Date | null => {
 			bytes[i] = binaryStr.charCodeAt(i);
 		}
 
-		let dateFound = 0;
+		// ASN.1 tag for UTCTime is 0x17, GeneralizedTime is 0x18
+		// We need to find the second occurrence of either tag as it's the "not after" (expiration) date
+		let dateFound = false;
 		for (let i = 0; i < bytes.length - 2; i++) {
-			if (bytes[i] === 0x17 || bytes[i] === 0x18) {
-				const dateType = bytes[i];
-				const dateLength = bytes[i + 1];
-				if (typeof dateLength === "undefined") continue;
+			// Look for sequence containing validity period (0x30)
+			if (bytes[i] === 0x30) {
+				// Check next bytes for UTCTime or GeneralizedTime
+				let j = i + 1;
+				while (j < bytes.length - 2) {
+					if (bytes[j] === 0x17 || bytes[j] === 0x18) {
+						const dateType = bytes[j];
+						const dateLength = bytes[j + 1];
+						if (typeof dateLength === "undefined") break;
 
-				if (dateFound === 0) {
-					dateFound++;
-					i += dateLength + 1;
-					continue;
+						if (!dateFound) {
+							// Skip "not before" date
+							dateFound = true;
+							j += dateLength + 2;
+							continue;
+						}
+
+						// Found "not after" date
+						let dateStr = "";
+						for (let k = 0; k < dateLength; k++) {
+							const charCode = bytes[j + 2 + k];
+							if (typeof charCode === "undefined") continue;
+							dateStr += String.fromCharCode(charCode);
+						}
+
+						if (dateType === 0x17) {
+							// UTCTime (YYMMDDhhmmssZ)
+							const year = Number.parseInt(dateStr.slice(0, 2));
+							const fullYear = year >= 50 ? 1900 + year : 2000 + year;
+							return new Date(
+								Date.UTC(
+									fullYear,
+									Number.parseInt(dateStr.slice(2, 4)) - 1,
+									Number.parseInt(dateStr.slice(4, 6)),
+									Number.parseInt(dateStr.slice(6, 8)),
+									Number.parseInt(dateStr.slice(8, 10)),
+									Number.parseInt(dateStr.slice(10, 12)),
+								),
+							);
+						}
+
+						// GeneralizedTime (YYYYMMDDhhmmssZ)
+						return new Date(
+							Date.UTC(
+								Number.parseInt(dateStr.slice(0, 4)),
+								Number.parseInt(dateStr.slice(4, 6)) - 1,
+								Number.parseInt(dateStr.slice(6, 8)),
+								Number.parseInt(dateStr.slice(8, 10)),
+								Number.parseInt(dateStr.slice(10, 12)),
+								Number.parseInt(dateStr.slice(12, 14)),
+							),
+						);
+					}
+					j++;
 				}
-
-				let dateStr = "";
-				for (let j = 0; j < dateLength; j++) {
-					const charCode = bytes[i + 2 + j];
-					if (typeof charCode === "undefined") continue;
-					dateStr += String.fromCharCode(charCode);
-				}
-
-				if (dateType === 0x17) {
-					// UTCTime (YYMMDDhhmmssZ)
-					const year = Number.parseInt(dateStr.slice(0, 2));
-					const fullYear = year >= 50 ? 1900 + year : 2000 + year;
-					return new Date(
-						Date.UTC(
-							fullYear,
-							Number.parseInt(dateStr.slice(2, 4)) - 1,
-							Number.parseInt(dateStr.slice(4, 6)),
-							Number.parseInt(dateStr.slice(6, 8)),
-							Number.parseInt(dateStr.slice(8, 10)),
-							Number.parseInt(dateStr.slice(10, 12)),
-						),
-					);
-				}
-
-				// GeneralizedTime (YYYYMMDDhhmmssZ)
-				return new Date(
-					Date.UTC(
-						Number.parseInt(dateStr.slice(0, 4)),
-						Number.parseInt(dateStr.slice(4, 6)) - 1,
-						Number.parseInt(dateStr.slice(6, 8)),
-						Number.parseInt(dateStr.slice(8, 10)),
-						Number.parseInt(dateStr.slice(10, 12)),
-						Number.parseInt(dateStr.slice(12, 14)),
-					),
-				);
 			}
 		}
 		return null;

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -12,7 +13,6 @@ import { ExternalLink, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { AddManager } from "./manager/add-manager";
 import { AddWorker } from "./workers/add-worker";
-import { AlertBlock } from "@/components/shared/alert-block";
 
 interface Props {
 	serverId?: string;

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

@@ -35,9 +35,9 @@ import { api } from "@/utils/api";
 import {
 	Boxes,
 	HelpCircle,
+	Loader2,
 	LockIcon,
 	MoreHorizontal,
-	Loader2,
 } from "lucide-react";
 import { toast } from "sonner";
 import { AddNode } from "./add-node";

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

@@ -54,7 +54,7 @@ export const ShowRegistry = () => {
 													key={registry.registryId}
 													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">

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

@@ -55,7 +55,7 @@ export const ShowDestinations = () => {
 													key={destination.destinationId}
 													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 flex-col gap-1">
 															<span className="text-sm">
 																{index + 1}. {destination.name}

apps/dokploy/components/dashboard/settings/enable-paid-features.tsx

@@ -0,0 +1,191 @@
+import { Card } from "@/components/ui/card";
+import {
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { SparklesIcon } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "sonner";
+import { api } from "@/utils/api";
+import { SetupMonitoring } from "./servers/setup-monitoring";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useState, useEffect } from "react";
+
+export const EnablePaidFeatures = () => {
+	const { data, refetch } = api.user.get.useQuery();
+	const [isLoading, setIsLoading] = useState(false);
+	const { mutateAsync: saveLicense } = api.user.saveLicense.useMutation();
+	const { mutateAsync: deactivateLicense } =
+		api.user.deactivateLicense.useMutation();
+	const { mutateAsync: validateLicense } =
+		api.user.validateLicense.useMutation();
+	const { mutateAsync: update } = api.user.update.useMutation();
+	const [licenseKey, setLicenseKey] = useState("");
+
+	useEffect(() => {
+		if (data?.user?.enablePaidFeatures) {
+			setLicenseKey(data.user.licenseKey || "");
+		}
+	}, [data?.user?.enablePaidFeatures]);
+
+	const handleSaveLicense = async () => {
+		if (!licenseKey) {
+			toast.error("Please enter a license key");
+			return;
+		}
+		setIsLoading(true);
+		await saveLicense({
+			licenseKey,
+		})
+			.then(() => {
+				toast.success("License validated successfully");
+			})
+			.catch((e) => {
+				toast.error("Error validating license", {
+					description: e.message,
+				});
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+
+		refetch();
+	};
+
+	const handleValidateLicense = async () => {
+		if (!licenseKey) {
+			toast.error("Please enter a license key");
+			return;
+		}
+		setIsLoading(true);
+		await validateLicense({
+			licenseKey,
+		})
+			.then(() => {
+				toast.success("License validated successfully");
+			})
+			.catch((e) => {
+				toast.error("Error validating license", {
+					description: e.message,
+				});
+			})
+			.finally(() => {
+				setIsLoading(false);
+			});
+	};
+
+	return (
+		<Card className="h-full bg-sidebar p-2.5 rounded-xl">
+			<div className="rounded-xl bg-background shadow-md">
+				<CardHeader>
+					<CardTitle className="text-xl flex flex-row items-center gap-3">
+						<div className="p-2 rounded-lg bg-primary/10">
+							<SparklesIcon className="size-5 text-primary" />
+						</div>
+						Paid Features
+					</CardTitle>
+					<CardDescription className="mt-2">
+						Unlock advanced capabilities like monitoring and enhanced
+						performance tracking
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="space-y-6">
+					<div className="flex flex-col gap-6">
+						<div className="flex flex-row items-center justify-between p-4 border rounded-lg bg-card/50 hover:bg-card/80 transition-colors">
+							<div className="space-y-1">
+								<h3 className="font-medium">Enable Premium Features</h3>
+								<p className="text-sm text-muted-foreground">
+									Access advanced monitoring tools and premium capabilities
+								</p>
+							</div>
+							<Switch
+								className="ml-4"
+								checked={data?.user?.enablePaidFeatures}
+								onCheckedChange={() => {
+									update({
+										enablePaidFeatures: !data?.user?.enablePaidFeatures,
+									})
+										.then(() => {
+											toast.success(
+												`Premium features ${
+													data?.user?.enablePaidFeatures
+														? "disabled"
+														: "enabled"
+												} successfully`,
+											);
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error updating premium features");
+										});
+								}}
+							/>
+						</div>
+
+						{data?.user?.enablePaidFeatures && (
+							<div className="flex flex-row items-center gap-4 p-4 border rounded-lg bg-card/50">
+								<div className="flex-grow">
+									<Input
+										placeholder="Enter your license key"
+										value={licenseKey}
+										disabled={data?.user?.licenseKey !== null}
+										onChange={(e) => setLicenseKey(e.target.value)}
+										className="w-full"
+									/>
+								</div>
+								{!data?.user?.licenseKey ? (
+									<Button
+										onClick={handleSaveLicense}
+										variant="secondary"
+										disabled={isLoading}
+									>
+										{isLoading ? "Saving..." : "Save License"}
+									</Button>
+								) : (
+									<div className="flex gap-2">
+										<Button
+											onClick={handleValidateLicense}
+											variant="secondary"
+											disabled={isLoading}
+										>
+											{isLoading ? "Validating..." : "Validate"}
+										</Button>
+										<Button
+											onClick={() => {
+												setIsLoading(true);
+												deactivateLicense({
+													licenseKey,
+												})
+													.then(() => {
+														setLicenseKey("");
+														toast.success("License removed successfully");
+														refetch();
+													})
+													.catch((e) => {
+														toast.error("Error removing license", {
+															description: e.message,
+														});
+													})
+													.finally(() => {
+														setIsLoading(false);
+													});
+											}}
+											variant="destructive"
+											disabled={isLoading}
+										>
+											Remove
+										</Button>
+									</div>
+								)}
+							</div>
+						)}
+					</div>
+				</CardContent>
+				{data?.user?.enablePaidFeatures && <SetupMonitoring />}
+			</div>
+		</Card>
+	);
+};

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

@@ -0,0 +1,286 @@
+import { GiteaIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	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 { api } from "@/utils/api";
+import {
+	type GiteaProviderResponse,
+	getGiteaOAuthUrl,
+} from "@/utils/gitea-utils";
+import { useUrl } from "@/utils/hooks/use-url";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const Schema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	giteaUrl: z.string().min(1, {
+		message: "Gitea URL is required",
+	}),
+	clientId: z.string().min(1, {
+		message: "Client ID is required",
+	}),
+	clientSecret: z.string().min(1, {
+		message: "Client Secret is required",
+	}),
+	redirectUri: z.string().min(1, {
+		message: "Redirect URI is required",
+	}),
+	organizationName: z.string().optional(),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+export const AddGiteaProvider = () => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const urlObj = useUrl();
+	const baseUrl =
+		typeof urlObj === "string" ? urlObj : (urlObj as any)?.url || "";
+
+	const { mutateAsync, error, isError } = api.gitea.create.useMutation();
+	const webhookUrl = `${baseUrl}/api/providers/gitea/callback`;
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			clientId: "",
+			clientSecret: "",
+			redirectUri: webhookUrl,
+			name: "",
+			giteaUrl: "https://gitea.com",
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	const giteaUrl = form.watch("giteaUrl");
+
+	useEffect(() => {
+		form.reset({
+			clientId: "",
+			clientSecret: "",
+			redirectUri: webhookUrl,
+			name: "",
+			giteaUrl: "https://gitea.com",
+		});
+	}, [form, webhookUrl, isOpen]);
+
+	const onSubmit = async (data: Schema) => {
+		try {
+			// Send the form data to create the Gitea provider
+			const result = (await mutateAsync({
+				clientId: data.clientId,
+				clientSecret: data.clientSecret,
+				name: data.name,
+				redirectUri: data.redirectUri,
+				giteaUrl: data.giteaUrl,
+				organizationName: data.organizationName,
+			})) as unknown as GiteaProviderResponse;
+
+			// Check if we have a giteaId from the response
+			if (!result || !result.giteaId) {
+				toast.error("Failed to get Gitea ID from response");
+				return;
+			}
+
+			// Generate OAuth URL using the shared utility
+			const authUrl = getGiteaOAuthUrl(
+				result.giteaId,
+				data.clientId,
+				data.giteaUrl,
+				baseUrl,
+			);
+
+			// Open the Gitea OAuth URL
+			if (authUrl !== "#") {
+				window.open(authUrl, "_blank");
+			} else {
+				toast.error("Configuration Incomplete", {
+					description: "Please fill in Client ID and Gitea URL first.",
+				});
+			}
+
+			toast.success("Gitea provider created successfully");
+			setIsOpen(false);
+		} catch (error: unknown) {
+			if (error instanceof Error) {
+				toast.error(`Error configuring Gitea: ${error.message}`);
+			} else {
+				toast.error("An unknown error occurred.");
+			}
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="default"
+					className="flex items-center space-x-1 bg-green-700 text-white hover:bg-green-500"
+				>
+					<GiteaIcon />
+					<span>Gitea</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl overflow-y-auto max-h-screen">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						Gitea Provider <GiteaIcon className="size-5" />
+					</DialogTitle>
+				</DialogHeader>
+
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						id="hook-form-add-gitea"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-1"
+					>
+						<CardContent className="p-0">
+							<div className="flex flex-col gap-4">
+								<p className="text-muted-foreground text-sm">
+									To integrate your Gitea account, you need to create a new
+									application in your Gitea settings. Follow these steps:
+								</p>
+								<ol className="list-decimal list-inside text-sm text-muted-foreground">
+									<li className="flex flex-row gap-2 items-center">
+										Go to your Gitea settings{" "}
+										<Link
+											href={`${giteaUrl}/user/settings/applications`}
+											target="_blank"
+										>
+											<ExternalLink className="w-fit text-primary size-4" />
+										</Link>
+									</li>
+									<li>
+										Navigate to Applications {"->"} Create new OAuth2
+										Application
+									</li>
+									<li>
+										Create a new application with the following details:
+										<ul className="list-disc list-inside ml-4">
+											<li>Name: Dokploy</li>
+											<li>
+												Redirect URI:{" "}
+												<span className="text-primary">{webhookUrl}</span>{" "}
+											</li>
+										</ul>
+									</li>
+									<li>
+										After creating, you'll receive an ID and Secret, copy them
+										and paste them below.
+									</li>
+								</ol>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Random Name eg(my-personal-account)"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="giteaUrl"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Gitea URL</FormLabel>
+											<FormControl>
+												<Input placeholder="https://gitea.com/" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="redirectUri"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Redirect URI</FormLabel>
+											<FormControl>
+												<Input
+													disabled
+													placeholder="Random Name eg(my-personal-account)"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="clientId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Client ID</FormLabel>
+											<FormControl>
+												<Input placeholder="Client ID" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="clientSecret"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Client Secret</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="Client Secret"
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<Button isLoading={form.formState.isSubmitting}>
+									Configure Gitea App
+								</Button>
+							</div>
+						</CardContent>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx

@@ -0,0 +1,296 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	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 { api } from "@/utils/api";
+import { getGiteaOAuthUrl } from "@/utils/gitea-utils";
+import { useUrl } from "@/utils/hooks/use-url";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const formSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	giteaUrl: z.string().min(1, "Gitea URL is required"),
+	clientId: z.string().min(1, "Client ID is required"),
+	clientSecret: z.string().min(1, "Client Secret is required"),
+});
+
+interface Props {
+	giteaId: string;
+}
+
+export const EditGiteaProvider = ({ giteaId }: Props) => {
+	const router = useRouter();
+	const [open, setOpen] = useState(false);
+	const {
+		data: gitea,
+		isLoading,
+		refetch,
+	} = api.gitea.one.useQuery({ giteaId });
+	const { mutateAsync, isLoading: isUpdating } = api.gitea.update.useMutation();
+	const { mutateAsync: testConnection, isLoading: isTesting } =
+		api.gitea.testConnection.useMutation();
+	const url = useUrl();
+	const utils = api.useUtils();
+
+	useEffect(() => {
+		const { connected, error } = router.query;
+
+		if (!router.isReady) return;
+
+		if (connected) {
+			toast.success("Successfully connected to Gitea", {
+				description: "Your Gitea provider has been authorized.",
+				id: "gitea-connection-success",
+			});
+			refetch();
+			router.replace(
+				{
+					pathname: router.pathname,
+					query: {},
+				},
+				undefined,
+				{ shallow: true },
+			);
+		}
+
+		if (error) {
+			toast.error("Gitea Connection Failed", {
+				description: decodeURIComponent(error as string),
+				id: "gitea-connection-error",
+			});
+			router.replace(
+				{
+					pathname: router.pathname,
+					query: {},
+				},
+				undefined,
+				{ shallow: true },
+			);
+		}
+	}, [router.query, router.isReady, refetch]);
+
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: "",
+			giteaUrl: "https://gitea.com",
+			clientId: "",
+			clientSecret: "",
+		},
+	});
+
+	useEffect(() => {
+		if (gitea) {
+			form.reset({
+				name: gitea.gitProvider?.name || "",
+				giteaUrl: gitea.giteaUrl || "https://gitea.com",
+				clientId: gitea.clientId || "",
+				clientSecret: gitea.clientSecret || "",
+			});
+		}
+	}, [gitea, form]);
+
+	const onSubmit = async (values: z.infer<typeof formSchema>) => {
+		await mutateAsync({
+			giteaId: giteaId,
+			gitProviderId: gitea?.gitProvider?.gitProviderId || "",
+			name: values.name,
+			giteaUrl: values.giteaUrl,
+			clientId: values.clientId,
+			clientSecret: values.clientSecret,
+		})
+			.then(async () => {
+				await utils.gitProvider.getAll.invalidate();
+				toast.success("Gitea provider updated successfully");
+				await refetch();
+				setOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error updating Gitea provider");
+			});
+	};
+
+	const handleTestConnection = async () => {
+		try {
+			const result = await testConnection({ giteaId });
+			toast.success("Gitea Connection Verified", {
+				description: result,
+			});
+		} catch (error: any) {
+			const formValues = form.getValues();
+			const authUrl =
+				error.authorizationUrl ||
+				getGiteaOAuthUrl(
+					giteaId,
+					formValues.clientId,
+					formValues.giteaUrl,
+					typeof url === "string" ? url : (url as any).url || "",
+				);
+
+			toast.error("Gitea Not Connected", {
+				description:
+					error.message || "Please complete the OAuth authorization process.",
+				action:
+					authUrl && authUrl !== "#"
+						? {
+								label: "Authorize Now",
+								onClick: () => window.open(authUrl, "_blank"),
+							}
+						: undefined,
+			});
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<Button variant="ghost" size="icon" disabled>
+				<PenBoxIcon className="h-4 w-4 text-muted-foreground" />
+			</Button>
+		);
+	}
+
+	// Function to handle dialog open state
+	const handleOpenChange = (newOpen: boolean) => {
+		setOpen(newOpen);
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={handleOpenChange}>
+			<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>
+				<DialogHeader>
+					<DialogTitle>Edit Gitea Provider</DialogTitle>
+					<DialogDescription>
+						Update your Gitea provider details.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="My Gitea"
+											{...field}
+											autoFocus={false}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="giteaUrl"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Gitea URL</FormLabel>
+									<FormControl>
+										<Input placeholder="https://gitea.example.com" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="clientId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Client ID</FormLabel>
+									<FormControl>
+										<Input placeholder="Client ID" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="clientSecret"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Client Secret</FormLabel>
+									<FormControl>
+										<Input
+											type="password"
+											placeholder="Client Secret"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<div className="flex justify-end gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={handleTestConnection}
+								isLoading={isTesting}
+							>
+								Test Connection
+							</Button>
+
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => {
+									const formValues = form.getValues();
+									const authUrl = getGiteaOAuthUrl(
+										giteaId,
+										formValues.clientId,
+										formValues.giteaUrl,
+										typeof url === "string" ? url : (url as any).url || "",
+									);
+									if (authUrl !== "#") {
+										window.open(authUrl, "_blank");
+									}
+								}}
+							>
+								Connect to Gitea
+							</Button>
+
+							<Button type="submit" isLoading={isUpdating}>
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -248,7 +248,9 @@ export const AddGitlabProvider = () => {
 									name="groupName"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Group Name (Optional)</FormLabel>
+											<FormLabel>
+												Group Name (Optional, Comma-Separated List)
+											</FormLabel>
 											<FormControl>
 												<Input
 													placeholder="For organization/group access use the slugish name of the group eg: my-org"

apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx

@@ -156,7 +156,9 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 									name="groupName"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Group Name (Optional)</FormLabel>
+											<FormLabel>
+												Group Name (Optional, Comma-Separated List)
+											</FormLabel>
 											<FormControl>
 												<Input
 													placeholder="For organization/group access use the slugish name of the group eg: my-org"

apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx

@@ -1,5 +1,6 @@
 import {
 	BitbucketIcon,
+	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
@@ -26,6 +27,8 @@ import Link from "next/link";
 import { toast } from "sonner";
 import { AddBitbucketProvider } from "./bitbucket/add-bitbucket-provider";
 import { EditBitbucketProvider } from "./bitbucket/edit-bitbucket-provider";
+import { AddGiteaProvider } from "./gitea/add-gitea-provider";
+import { EditGiteaProvider } from "./gitea/edit-gitea-provider";
 import { AddGithubProvider } from "./github/add-github-provider";
 import { EditGithubProvider } from "./github/edit-github-provider";
 import { AddGitlabProvider } from "./gitlab/add-gitlab-provider";
@@ -36,19 +39,18 @@ export const ShowGitProviders = () => {
 	const { mutateAsync, isLoading: isRemoving } =
 		api.gitProvider.remove.useMutation();
 	const url = useUrl();
+
 	const getGitlabUrl = (
 		clientId: string,
 		gitlabId: string,
 		gitlabUrl: string,
 	) => {
 		const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
-
 		const scope = "api read_user read_repository";
-
 		const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
-
 		return authUrl;
 	};
+
 	return (
 		<div className="w-full">
 			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
@@ -82,6 +84,7 @@ export const ShowGitProviders = () => {
 													<AddGithubProvider />
 													<AddGitlabProvider />
 													<AddBitbucketProvider />
+													<AddGiteaProvider />
 												</div>
 											</div>
 										</div>
@@ -97,6 +100,7 @@ export const ShowGitProviders = () => {
 													<AddGithubProvider />
 													<AddGitlabProvider />
 													<AddBitbucketProvider />
+													<AddGiteaProvider />
 												</div>
 											</div>
 										</div>
@@ -107,13 +111,16 @@ export const ShowGitProviders = () => {
 												const isGitlab = gitProvider.providerType === "gitlab";
 												const isBitbucket =
 													gitProvider.providerType === "bitbucket";
+												const isGitea = gitProvider.providerType === "gitea";
+
 												const haveGithubRequirements =
-													gitProvider.providerType === "github" &&
+													isGithub &&
 													gitProvider.github?.githubPrivateKey &&
 													gitProvider.github?.githubAppId &&
 													gitProvider.github?.githubInstallationId;
 
 												const haveGitlabRequirements =
+													isGitlab &&
 													gitProvider.gitlab?.accessToken &&
 													gitProvider.gitlab?.refreshToken;
 
@@ -122,18 +129,19 @@ export const ShowGitProviders = () => {
 														key={gitProvider.gitProviderId}
 														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 flex-col items-center justify-between">
 																<div className="flex gap-2 flex-row items-center">
-																	{gitProvider.providerType === "github" && (
+																	{isGithub && (
 																		<GithubIcon className="size-5" />
 																	)}
-																	{gitProvider.providerType === "gitlab" && (
+																	{isGitlab && (
 																		<GitlabIcon className="size-5" />
 																	)}
-																	{gitProvider.providerType === "bitbucket" && (
+																	{isBitbucket && (
 																		<BitbucketIcon className="size-5" />
 																	)}
+																	{isGitea && <GiteaIcon className="size-5" />}
 																	<div className="flex flex-col gap-1">
 																		<span className="text-sm font-medium">
 																			{gitProvider.name}
@@ -194,26 +202,33 @@ export const ShowGitProviders = () => {
 																		</Link>
 																	</div>
 																)}
+
 																{isGithub && haveGithubRequirements && (
 																	<EditGithubProvider
-																		githubId={gitProvider.github.githubId}
+																		githubId={gitProvider.github?.githubId}
 																	/>
 																)}
 
 																{isGitlab && (
 																	<EditGitlabProvider
-																		gitlabId={gitProvider.gitlab.gitlabId}
+																		gitlabId={gitProvider.gitlab?.gitlabId}
 																	/>
 																)}
 
 																{isBitbucket && (
 																	<EditBitbucketProvider
 																		bitbucketId={
-																			gitProvider.bitbucket.bitbucketId
+																			gitProvider.bitbucket?.bitbucketId
 																		}
 																	/>
 																)}
 
+																{isGitea && (
+																	<EditGiteaProvider
+																		giteaId={gitProvider.gitea?.giteaId}
+																	/>
+																)}
+
 																<DialogAction
 																	title="Delete Git Provider"
 																	description="Are you sure you want to delete this Git Provider?"
@@ -238,7 +253,7 @@ export const ShowGitProviders = () => {
 																	<Button
 																		variant="ghost"
 																		size="icon"
-																		className="group hover:bg-red-500/10 "
+																		className="group hover:bg-red-500/10"
 																		isLoading={isRemoving}
 																	>
 																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />

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

@@ -61,7 +61,7 @@ export const ShowNotifications = () => {
 													key={notification.notificationId}
 													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">
 														<span className="text-sm flex flex-row items-center gap-4">
 															{notification.notificationType === "slack" && (
 																<div className="flex  items-center justify-center rounded-lg">

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

@@ -36,6 +36,7 @@ const PasswordSchema = z.object({
 	password: z.string().min(8, {
 		message: "Password is required",
 	}),
+	issuer: z.string().optional(),
 });
 
 const PinSchema = z.object({
@@ -60,12 +61,86 @@ export const Enable2FA = () => {
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const [step, setStep] = useState<"password" | "verify">("password");
 	const [isPasswordLoading, setIsPasswordLoading] = useState(false);
+	const [otpValue, setOtpValue] = useState("");
+
+	const handleVerifySubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		try {
+			const result = await authClient.twoFactor.verifyTotp({
+				code: otpValue,
+			});
+
+			if (result.error) {
+				if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
+					toast.error("Invalid verification code");
+					return;
+				}
+
+				throw result.error;
+			}
+
+			if (!result.data) {
+				throw new Error("No response received from server");
+			}
+
+			toast.success("2FA configured successfully");
+			utils.user.get.invalidate();
+			setIsDialogOpen(false);
+		} catch (error) {
+			if (error instanceof Error) {
+				const errorMessage =
+					error.message === "Failed to fetch"
+						? "Connection error. Please check your internet connection."
+						: error.message;
+
+				toast.error(errorMessage);
+			} else {
+				toast.error("Error verifying 2FA code", {
+					description: error instanceof Error ? error.message : "Unknown error",
+				});
+			}
+		}
+	};
+
+	const passwordForm = useForm<PasswordForm>({
+		resolver: zodResolver(PasswordSchema),
+		defaultValues: {
+			password: "",
+		},
+	});
+
+	const pinForm = useForm<PinForm>({
+		resolver: zodResolver(PinSchema),
+		defaultValues: {
+			pin: "",
+		},
+	});
+
+	useEffect(() => {
+		if (!isDialogOpen) {
+			setStep("password");
+			setData(null);
+			setBackupCodes([]);
+			setOtpValue("");
+			passwordForm.reset({
+				password: "",
+				issuer: "",
+			});
+		}
+	}, [isDialogOpen, passwordForm]);
+
+	useEffect(() => {
+		if (step === "verify") {
+			setOtpValue("");
+		}
+	}, [step]);
 
 	const handlePasswordSubmit = async (formData: PasswordForm) => {
 		setIsPasswordLoading(true);
 		try {
 			const { data: enableData, error } = await authClient.twoFactor.enable({
 				password: formData.password,
+				issuer: formData.issuer,
 			});
 
 			if (!enableData) {
@@ -103,75 +178,6 @@ export const Enable2FA = () => {
 		}
 	};
 
-	const handleVerifySubmit = async (formData: PinForm) => {
-		try {
-			const result = await authClient.twoFactor.verifyTotp({
-				code: formData.pin,
-			});
-
-			if (result.error) {
-				if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
-					pinForm.setError("pin", {
-						message: "Invalid code. Please try again.",
-					});
-					toast.error("Invalid verification code");
-					return;
-				}
-
-				throw result.error;
-			}
-
-			if (!result.data) {
-				throw new Error("No response received from server");
-			}
-
-			toast.success("2FA configured successfully");
-			utils.user.get.invalidate();
-			setIsDialogOpen(false);
-		} catch (error) {
-			if (error instanceof Error) {
-				const errorMessage =
-					error.message === "Failed to fetch"
-						? "Connection error. Please check your internet connection."
-						: error.message;
-
-				pinForm.setError("pin", {
-					message: errorMessage,
-				});
-				toast.error(errorMessage);
-			} else {
-				pinForm.setError("pin", {
-					message: "Error verifying code",
-				});
-				toast.error("Error verifying 2FA code");
-			}
-		}
-	};
-
-	const passwordForm = useForm<PasswordForm>({
-		resolver: zodResolver(PasswordSchema),
-		defaultValues: {
-			password: "",
-		},
-	});
-
-	const pinForm = useForm<PinForm>({
-		resolver: zodResolver(PinSchema),
-		defaultValues: {
-			pin: "",
-		},
-	});
-
-	useEffect(() => {
-		if (!isDialogOpen) {
-			setStep("password");
-			setData(null);
-			setBackupCodes([]);
-			passwordForm.reset();
-			pinForm.reset();
-		}
-	}, [isDialogOpen, passwordForm, pinForm]);
-
 	return (
 		<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 			<DialogTrigger asChild>
@@ -217,6 +223,27 @@ export const Enable2FA = () => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={passwordForm.control}
+								name="issuer"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Issuer</FormLabel>
+										<FormControl>
+											<Input
+												type="text"
+												placeholder="Enter your issuer"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Use a custom issuer to identify the service you're
+											authenticating with.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<Button
 								type="submit"
 								className="w-full"
@@ -228,11 +255,7 @@ export const Enable2FA = () => {
 					</Form>
 				) : (
 					<Form {...pinForm}>
-						<form
-							id="pin-form"
-							onSubmit={pinForm.handleSubmit(handleVerifySubmit)}
-							className="space-y-6"
-						>
+						<form onSubmit={handleVerifySubmit} className="space-y-6">
 							<div className="flex flex-col gap-6 justify-center items-center">
 								{data?.qrCodeUrl ? (
 									<>
@@ -284,36 +307,33 @@ export const Enable2FA = () => {
 								)}
 							</div>
 
-							<FormField
-								control={pinForm.control}
-								name="pin"
-								render={({ field }) => (
-									<FormItem className="flex flex-col justify-center items-center">
-										<FormLabel>Verification Code</FormLabel>
-										<FormControl>
-											<InputOTP maxLength={6} {...field}>
-												<InputOTPGroup>
-													<InputOTPSlot index={0} />
-													<InputOTPSlot index={1} />
-													<InputOTPSlot index={2} />
-													<InputOTPSlot index={3} />
-													<InputOTPSlot index={4} />
-													<InputOTPSlot index={5} />
-												</InputOTPGroup>
-											</InputOTP>
-										</FormControl>
-										<FormDescription>
-											Enter the 6-digit code from your authenticator app
-										</FormDescription>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
+							<div className="flex flex-col justify-center items-center">
+								<FormLabel>Verification Code</FormLabel>
+								<InputOTP
+									maxLength={6}
+									value={otpValue}
+									onChange={setOtpValue}
+									autoComplete="off"
+								>
+									<InputOTPGroup>
+										<InputOTPSlot index={0} />
+										<InputOTPSlot index={1} />
+										<InputOTPSlot index={2} />
+										<InputOTPSlot index={3} />
+										<InputOTPSlot index={4} />
+										<InputOTPSlot index={5} />
+									</InputOTPGroup>
+								</InputOTP>
+								<FormDescription>
+									Enter the 6-digit code from your authenticator app
+								</FormDescription>
+							</div>
 
 							<Button
 								type="submit"
 								className="w-full"
 								isLoading={isPasswordLoading}
+								disabled={otpValue.length !== 6}
 							>
 								Enable 2FA
 							</Button>

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

@@ -56,6 +56,7 @@ const randomImages = [
 export const ProfileForm = () => {
 	const _utils = api.useUtils();
 	const { data, refetch, isLoading } = api.user.get.useQuery();
+
 	const {
 		mutateAsync,
 		isLoading: isUpdating,
@@ -84,12 +85,17 @@ export const ProfileForm = () => {
 
 	useEffect(() => {
 		if (data) {
-			form.reset({
-				email: data?.user?.email || "",
-				password: "",
-				image: data?.user?.image || "",
-				currentPassword: "",
-			});
+			form.reset(
+				{
+					email: data?.user?.email || "",
+					password: form.getValues("password") || "",
+					image: data?.user?.image || "",
+					currentPassword: form.getValues("currentPassword") || "",
+				},
+				{
+					keepValues: true,
+				},
+			);
 
 			if (data.user.email) {
 				generateSHA256Hash(data.user.email).then((hash) => {
@@ -97,8 +103,7 @@ export const ProfileForm = () => {
 				});
 			}
 		}
-		form.reset();
-	}, [form, form.reset, data]);
+	}, [form, data]);
 
 	const onSubmit = async (values: Profile) => {
 		await mutateAsync({
@@ -110,7 +115,12 @@ export const ProfileForm = () => {
 			.then(async () => {
 				await refetch();
 				toast.success("Profile Updated");
-				form.reset();
+				form.reset({
+					email: values.email,
+					password: "",
+					image: values.image,
+					currentPassword: "",
+				});
 			})
 			.catch(() => {
 				toast.error("Error updating the profile");

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

@@ -22,6 +22,9 @@ export const ShowDokployActions = () => {
 	const { mutateAsync: reloadServer, isLoading } =
 		api.settings.reloadServer.useMutation();
 
+	const { mutateAsync: cleanRedis } = api.settings.cleanRedis.useMutation();
+	const { mutateAsync: reloadRedis } = api.settings.reloadRedis.useMutation();
+
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild disabled={isLoading}>
@@ -69,6 +72,36 @@ export const ShowDokployActions = () => {
 							{t("settings.server.webServer.updateServerIp")}
 						</DropdownMenuItem>
 					</UpdateServerIp>
+
+					<DropdownMenuItem
+						className="cursor-pointer"
+						onClick={async () => {
+							await cleanRedis()
+								.then(async () => {
+									toast.success("Redis cleaned");
+								})
+								.catch(() => {
+									toast.error("Error cleaning Redis");
+								});
+						}}
+					>
+						Clean Redis
+					</DropdownMenuItem>
+
+					<DropdownMenuItem
+						className="cursor-pointer"
+						onClick={async () => {
+							await reloadRedis()
+								.then(async () => {
+									toast.success("Redis reloaded");
+								})
+								.catch(() => {
+									toast.error("Error reloading Redis");
+								});
+						}}
+					>
+						Reload Redis
+					</DropdownMenuItem>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
 		</DropdownMenu>

apps/dokploy/components/dashboard/settings/servers/security-audit.tsx

@@ -25,7 +25,7 @@ export const SecurityAudit = ({ serverId }: Props) => {
 				enabled: !!serverId,
 			},
 		);
-	const _utils = api.useUtils();
+
 	return (
 		<CardContent className="p-0">
 			<div className="flex flex-col gap-4">
@@ -36,10 +36,12 @@ export const SecurityAudit = ({ serverId }: Props) => {
 								<div className="flex items-center gap-2">
 									<LockKeyhole className="size-5" />
 									<CardTitle className="text-xl">
-										Setup Security Sugestions
+										Setup Security Suggestions
 									</CardTitle>
 								</div>
-								<CardDescription>Check the security sugestions</CardDescription>
+								<CardDescription>
+									Check the security suggestions
+								</CardDescription>
 							</div>
 							<Button
 								isLoading={isRefreshing}
@@ -120,36 +122,36 @@ export const SecurityAudit = ({ serverId }: Props) => {
 									<div className="grid gap-2.5">
 										<StatusRow
 											label="Enabled"
-											isEnabled={data?.ssh.enabled}
+											isEnabled={data?.ssh?.enabled}
 											description={
-												data?.ssh.enabled
+												data?.ssh?.enabled
 													? "Enabled"
 													: "Not Enabled (SSH should be enabled)"
 											}
 										/>
 										<StatusRow
 											label="Key Auth"
-											isEnabled={data?.ssh.keyAuth}
+											isEnabled={data?.ssh?.keyAuth}
 											description={
-												data?.ssh.keyAuth
+												data?.ssh?.keyAuth
 													? "Enabled (Recommended)"
 													: "Not Enabled (Key Authentication should be enabled)"
 											}
 										/>
 										<StatusRow
 											label="Password Auth"
-											isEnabled={data?.ssh.passwordAuth === "no"}
+											isEnabled={data?.ssh?.passwordAuth === "no"}
 											description={
-												data?.ssh.passwordAuth === "no"
+												data?.ssh?.passwordAuth === "no"
 													? "Disabled (Recommended)"
 													: "Enabled (Password Authentication should be disabled)"
 											}
 										/>
 										<StatusRow
 											label="Use PAM"
-											isEnabled={data?.ssh.usePam === "no"}
+											isEnabled={data?.ssh?.usePam === "no"}
 											description={
-												data?.ssh.usePam === "no"
+												data?.ssh?.usePam === "no"
 													? "Disabled (Recommended for key-based auth)"
 													: "Enabled (Should be disabled when using key-based auth)"
 											}
@@ -166,9 +168,9 @@ export const SecurityAudit = ({ serverId }: Props) => {
 									<div className="grid gap-2.5">
 										<StatusRow
 											label="Installed"
-											isEnabled={data?.fail2ban.installed}
+											isEnabled={data?.fail2ban?.installed}
 											description={
-												data?.fail2ban.installed
+												data?.fail2ban?.installed
 													? "Installed (Recommended)"
 													: "Not Installed (Fail2Ban should be installed for protection against brute force attacks)"
 											}
@@ -176,18 +178,18 @@ export const SecurityAudit = ({ serverId }: Props) => {
 
 										<StatusRow
 											label="Enabled"
-											isEnabled={data?.fail2ban.enabled}
+											isEnabled={data?.fail2ban?.enabled}
 											description={
-												data?.fail2ban.enabled
+												data?.fail2ban?.enabled
 													? "Enabled (Recommended)"
 													: "Not Enabled (Fail2Ban service should be enabled)"
 											}
 										/>
 										<StatusRow
 											label="Active"
-											isEnabled={data?.fail2ban.active}
+											isEnabled={data?.fail2ban?.active}
 											description={
-												data?.fail2ban.active
+												data?.fail2ban?.active
 													? "Active (Recommended)"
 													: "Not Active (Fail2Ban service should be running)"
 											}
@@ -195,9 +197,9 @@ export const SecurityAudit = ({ serverId }: Props) => {
 
 										<StatusRow
 											label="SSH Protection"
-											isEnabled={data?.fail2ban.sshEnabled === "true"}
+											isEnabled={data?.fail2ban?.sshEnabled === "true"}
 											description={
-												data?.fail2ban.sshEnabled === "true"
+												data?.fail2ban?.sshEnabled === "true"
 													? "Enabled (Recommended)"
 													: "Not Enabled (SSH protection should be enabled to prevent brute force attacks)"
 											}
@@ -205,11 +207,11 @@ export const SecurityAudit = ({ serverId }: Props) => {
 
 										<StatusRow
 											label="SSH Mode"
-											isEnabled={data?.fail2ban.sshMode === "aggressive"}
+											isEnabled={data?.fail2ban?.sshMode === "aggressive"}
 											description={
-												data?.fail2ban.sshMode === "aggressive"
+												data?.fail2ban?.sshMode === "aggressive"
 													? "Aggressive Mode (Recommended)"
-													: `Mode: ${data?.fail2ban.sshMode || "Not Set"} (Aggressive mode recommended for better protection)`
+													: `Mode: ${data?.fail2ban?.sshMode || "Not Set"} (Aggressive mode recommended for better protection)`
 											}
 										/>
 									</div>

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

@@ -202,7 +202,7 @@ export const SetupMonitoring = ({ serverId }: Props) => {
 
 	const { mutateAsync } = serverId
 		? api.server.setupMonitoring.useMutation()
-		: api.admin.setupMonitoring.useMutation();
+		: api.user.setupMonitoring.useMutation();
 
 	const generateToken = () => {
 		const array = new Uint8Array(64);

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

@@ -33,6 +33,7 @@ import { useTranslation } from "next-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
+import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { ShowServerActions } from "./actions/show-server-actions";
 import { HandleServers } from "./handle-servers";
@@ -42,7 +43,6 @@ import { ShowMonitoringModal } from "./show-monitoring-modal";
 import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
-import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 
 export const ShowServers = () => {
 	const { t } = useTranslation("settings");

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

@@ -56,7 +56,7 @@ export const ShowDestinations = () => {
 													key={sshKey.sshKeyId}
 													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 flex-col">
 																<span className="text-sm font-medium">

apps/dokploy/components/dashboard/settings/users/show-invitations.tsx

@@ -36,6 +36,9 @@ export const ShowInvitations = () => {
 	const { data, isLoading, refetch } =
 		api.organization.allInvitations.useQuery();
 
+	const { mutateAsync: removeInvitation } =
+		api.organization.removeInvitation.useMutation();
+
 	return (
 		<div className="w-full">
 			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
@@ -182,6 +185,22 @@ export const ShowInvitations = () => {
 																						Cancel Invitation
 																					</DropdownMenuItem>
 																				)}
+
+																				<DropdownMenuItem
+																					className="w-full cursor-pointer"
+																					onSelect={async (_e) => {
+																						await removeInvitation({
+																							invitationId: invitation.id,
+																						}).then(() => {
+																							refetch();
+																							toast.success(
+																								"Invitation removed",
+																							);
+																						});
+																					}}
+																				>
+																					Remove Invitation
+																				</DropdownMenuItem>
 																			</>
 																		)}
 																	</DropdownMenuContent>

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

@@ -9,6 +9,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -22,6 +23,7 @@ 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 { GlobeIcon } from "lucide-react";
@@ -33,11 +35,19 @@ import { z } from "zod";
 
 const addServerDomain = z
 	.object({
-		domain: z.string().min(1, { message: "URL is required" }),
+		domain: z.string(),
 		letsEncryptEmail: z.string(),
+		https: z.boolean().optional(),
 		certificateType: z.enum(["letsencrypt", "none", "custom"]),
 	})
 	.superRefine((data, ctx) => {
+		if (data.https && !data.certificateType) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["certificateType"],
+				message: "Required",
+			});
+		}
 		if (data.certificateType === "letsencrypt" && !data.letsEncryptEmail) {
 			ctx.addIssue({
 				code: z.ZodIssueCode.custom,
@@ -61,15 +71,18 @@ export const WebDomain = () => {
 			domain: "",
 			certificateType: "none",
 			letsEncryptEmail: "",
+			https: false,
 		},
 		resolver: zodResolver(addServerDomain),
 	});
+	const https = form.watch("https");
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				domain: data?.user?.host || "",
 				certificateType: data?.user?.certificateType,
 				letsEncryptEmail: data?.user?.letsEncryptEmail || "",
+				https: data?.user?.https || false,
 			});
 		}
 	}, [form, form.reset, data]);
@@ -79,6 +92,7 @@ export const WebDomain = () => {
 			host: data.domain,
 			letsEncryptEmail: data.letsEncryptEmail,
 			certificateType: data.certificateType,
+			https: data.https,
 		})
 			.then(async () => {
 				await refetch();
@@ -155,44 +169,67 @@ export const WebDomain = () => {
 								/>
 								<FormField
 									control={form.control}
-									name="certificateType"
-									render={({ field }) => {
-										return (
-											<FormItem className="md:col-span-2">
-												<FormLabel>
-													{t("settings.server.domain.form.certificate.label")}
-												</FormLabel>
-												<Select
-													onValueChange={field.onChange}
-													value={field.value}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue
-																placeholder={t(
-																	"settings.server.domain.form.certificate.placeholder",
-																)}
-															/>
-														</SelectTrigger>
-													</FormControl>
-													<SelectContent>
-														<SelectItem value={"none"}>
-															{t(
-																"settings.server.domain.form.certificateOptions.none",
-															)}
-														</SelectItem>
-														<SelectItem value={"letsencrypt"}>
-															{t(
-																"settings.server.domain.form.certificateOptions.letsencrypt",
-															)}
-														</SelectItem>
-													</SelectContent>
-												</Select>
+									name="https"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm w-full col-span-2">
+											<div className="space-y-0.5">
+												<FormLabel>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
 												<FormMessage />
-											</FormItem>
-										);
-									}}
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
 								/>
+								{https && (
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => {
+											return (
+												<FormItem className="md:col-span-2">
+													<FormLabel>
+														{t("settings.server.domain.form.certificate.label")}
+													</FormLabel>
+													<Select
+														onValueChange={field.onChange}
+														value={field.value}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue
+																	placeholder={t(
+																		"settings.server.domain.form.certificate.placeholder",
+																	)}
+																/>
+															</SelectTrigger>
+														</FormControl>
+														<SelectContent>
+															<SelectItem value={"none"}>
+																{t(
+																	"settings.server.domain.form.certificateOptions.none",
+																)}
+															</SelectItem>
+															<SelectItem value={"letsencrypt"}>
+																{t(
+																	"settings.server.domain.form.certificateOptions.letsencrypt",
+																)}
+															</SelectItem>
+														</SelectContent>
+													</Select>
+													<FormMessage />
+												</FormItem>
+											);
+										}}
+									/>
+								)}
 
 								<div className="flex w-full justify-end col-span-2">
 									<Button isLoading={isLoading} type="submit">

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -22,7 +23,6 @@ import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
 import { badgeStateColor } from "../../application/logs/show";
-import { Badge } from "@/components/ui/badge";
 
 export const DockerLogsId = dynamic(
 	() =>

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

@@ -12,7 +12,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { DatabaseIcon, AlertTriangle } from "lucide-react";
+import { AlertTriangle, DatabaseIcon } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {

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

@@ -1,6 +1,6 @@
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
+import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { RebuildDatabase } from "./rebuild-database";
 
 interface Props {

apps/dokploy/components/icons/data-tools-icons.tsx

@@ -238,6 +238,41 @@ export const BitbucketIcon = ({ className }: Props) => {
 	);
 };
 
+export const GiteaIcon = ({ className }: Props) => {
+	return (
+		<svg
+			className={className}
+			version="1.1"
+			id="main_outline"
+			xmlns="http://www.w3.org/2000/svg"
+			width="18"
+			height="18"
+			viewBox="5.67 143.05 628.65 387.55"
+			enableBackground="new 0 0 640 640"
+		>
+			<g>
+				<path
+					id="teabag"
+					style={{ fill: "#FFFFFF" }}
+					d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"
+				/>
+				<g>
+					<g>
+						<path
+							style={{ fill: "#609926" }}
+							d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"
+						/>
+						<path
+							style={{ fill: "#609926" }}
+							d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8C343.2,346.5,335,363.3,326.8,380.1z"
+						/>
+					</g>
+				</g>
+			</g>
+		</svg>
+	);
+};
+
 export const DockerIcon = ({ className }: Props) => {
 	return (
 		<svg

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

@@ -1,10 +1,10 @@
 import { api } from "@/utils/api";
 import type { IUpdateData } from "@dokploy/server/index";
+import { Download } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
 import UpdateServer from "../dashboard/settings/web-server/update-server";
 import { Button } from "../ui/button";
-import { Download } from "lucide-react";
 import {
 	Tooltip,
 	TooltipContent,

apps/dokploy/components/layouts/user-nav.tsx

@@ -120,17 +120,6 @@ export const UserNav = () => {
 									Docker
 								</DropdownMenuItem>
 							)}
-
-							{data?.role === "owner" && (
-								<DropdownMenuItem
-									className="cursor-pointer"
-									onClick={() => {
-										router.push("/dashboard/settings");
-									}}
-								>
-									Settings
-								</DropdownMenuItem>
-							)}
 						</>
 					) : (
 						<>
@@ -144,17 +133,6 @@ export const UserNav = () => {
 									Servers
 								</DropdownMenuItem>
 							)}
-
-							{data?.role === "owner" && (
-								<DropdownMenuItem
-									className="cursor-pointer"
-									onClick={() => {
-										router.push("/dashboard/settings");
-									}}
-								>
-									Settings
-								</DropdownMenuItem>
-							)}
 						</>
 					)}
 				</DropdownMenuGroup>

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

@@ -3,18 +3,18 @@ import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
 
+import {
+	type Completion,
+	type CompletionContext,
+	type CompletionResult,
+	autocompletion,
+} from "@codemirror/autocomplete";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
-import {
-	autocompletion,
-	type CompletionContext,
-	type CompletionResult,
-	type Completion,
-} from "@codemirror/autocomplete";
 
 // Docker Compose completion options
 const dockerComposeServices = [
@@ -26,15 +26,20 @@ const dockerComposeServices = [
 	{ label: "secrets", type: "keyword", info: "Define secrets" },
 ].map((opt) => ({
 	...opt,
-	apply: (view: EditorView, completion: Completion) => {
+	apply: (
+		view: EditorView,
+		completion: Completion,
+		from: number,
+		to: number,
+	) => {
 		const insert = `${completion.label}:`;
 		view.dispatch({
 			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
+				from,
+				to,
 				insert,
 			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
+			selection: { anchor: from + insert.length },
 		});
 	},
 }));
@@ -74,15 +79,20 @@ const dockerComposeServiceOptions = [
 	{ label: "networks", type: "keyword", info: "Networks to join" },
 ].map((opt) => ({
 	...opt,
-	apply: (view: EditorView, completion: Completion) => {
+	apply: (
+		view: EditorView,
+		completion: Completion,
+		from: number,
+		to: number,
+	) => {
 		const insert = `${completion.label}: `;
 		view.dispatch({
 			changes: {
-				from: view.state.selection.main.from,
-				to: view.state.selection.main.to,
+				from,
+				to,
 				insert,
 			},
-			selection: { anchor: view.state.selection.main.from + insert.length },
+			selection: { anchor: from + insert.length },
 		});
 	},
 }));
@@ -99,6 +109,7 @@ function dockerComposeComplete(
 	const line = context.state.doc.lineAt(context.pos);
 	const indentation = /^\s*/.exec(line.text)?.[0].length || 0;
 
+	// If we're at the root level
 	if (indentation === 0) {
 		return {
 			from: word.from,

apps/dokploy/components/ui/calendar.tsx

@@ -1,9 +1,9 @@
-import type * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import type * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

apps/dokploy/drizzle/0079_bizarre_wendell_rand.sql

@@ -0,0 +1,31 @@
+ALTER TYPE "public"."sourceType" ADD VALUE 'gitea' BEFORE 'drop';--> statement-breakpoint
+ALTER TYPE "public"."sourceTypeCompose" ADD VALUE 'gitea' BEFORE 'raw';--> statement-breakpoint
+ALTER TYPE "public"."gitProviderType" ADD VALUE 'gitea';--> statement-breakpoint
+CREATE TABLE "gitea" (
+	"giteaId" text PRIMARY KEY NOT NULL,
+	"giteaUrl" text DEFAULT 'https://gitea.com' NOT NULL,
+	"redirect_uri" text,
+	"client_id" text,
+	"client_secret" text,
+	"gitProviderId" text NOT NULL,
+	"gitea_username" text,
+	"access_token" text,
+	"refresh_token" text,
+	"expires_at" integer,
+	"scopes" text DEFAULT 'repo,repo:status,read:user,read:org',
+	"last_authenticated_at" integer
+);
+--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaProjectId" integer;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaRepository" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaOwner" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaBranch" text;--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaBuildPath" text DEFAULT '/';--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "giteaId" text;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "giteaRepository" text;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "giteaOwner" text;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "giteaBranch" text;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "giteaId" text;--> statement-breakpoint
+ALTER TABLE "gitea" ADD CONSTRAINT "gitea_gitProviderId_git_provider_gitProviderId_fk" FOREIGN KEY ("gitProviderId") REFERENCES "public"."git_provider"("gitProviderId") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "application" ADD CONSTRAINT "application_giteaId_gitea_giteaId_fk" FOREIGN KEY ("giteaId") REFERENCES "public"."gitea"("giteaId") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "compose" ADD CONSTRAINT "compose_giteaId_gitea_giteaId_fk" FOREIGN KEY ("giteaId") REFERENCES "public"."gitea"("giteaId") ON DELETE set null ON UPDATE no action;

apps/dokploy/drizzle/0080_sleepy_sinister_six.sql

@@ -0,0 +1 @@
+ALTER TABLE "application" DROP COLUMN "giteaProjectId";

apps/dokploy/drizzle/0081_lovely_mentallo.sql

@@ -0,0 +1 @@
+ALTER TABLE "gitea" DROP COLUMN "gitea_username";

apps/dokploy/drizzle/0082_clean_mandarin.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "backup" ADD COLUMN "userId" text;--> statement-breakpoint
+ALTER TABLE "backup" ADD CONSTRAINT "backup_userId_user_temp_id_fk" FOREIGN KEY ("userId") REFERENCES "public"."user_temp"("id") ON DELETE no action ON UPDATE no action;

apps/dokploy/drizzle/0083_parallel_stranger.sql

@@ -0,0 +1 @@
+ALTER TYPE "public"."databaseType" ADD VALUE 'web-server';

apps/dokploy/drizzle/0084_thin_iron_lad.sql

@@ -0,0 +1 @@
+ALTER TABLE "user_temp" ADD COLUMN "https" boolean DEFAULT false NOT NULL;

apps/dokploy/drizzle/0085_equal_captain_stacy.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "application" ADD COLUMN "enableSubmodules" boolean DEFAULT false;--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "enableSubmodules" boolean DEFAULT false;

apps/dokploy/drizzle/0086_rainy_gertrude_yorkes.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "application" ALTER COLUMN "enableSubmodules" SET NOT NULL;--> statement-breakpoint
+ALTER TABLE "compose" ALTER COLUMN "enableSubmodules" SET NOT NULL;

apps/dokploy/drizzle/0087_lively_risque.sql

@@ -0,0 +1,3 @@
+CREATE TYPE "public"."triggerType" AS ENUM('push', 'tag');--> statement-breakpoint
+ALTER TABLE "application" ADD COLUMN "triggerType" "triggerType" DEFAULT 'push';--> statement-breakpoint
+ALTER TABLE "compose" ADD COLUMN "triggerType" "triggerType" DEFAULT 'push';

apps/dokploy/drizzle/0088_same_ezekiel.sql

@@ -0,0 +1,5 @@
+CREATE TYPE "public"."backupType" AS ENUM('database', 'compose');--> statement-breakpoint
+ALTER TABLE "backup" ADD COLUMN "serviceName" text;--> statement-breakpoint
+ALTER TABLE "backup" ADD COLUMN "backupType" "backupType" DEFAULT 'database' NOT NULL;--> statement-breakpoint
+ALTER TABLE "backup" ADD COLUMN "composeId" text;--> statement-breakpoint
+ALTER TABLE "backup" ADD CONSTRAINT "backup_composeId_compose_composeId_fk" FOREIGN KEY ("composeId") REFERENCES "public"."compose"("composeId") ON DELETE cascade ON UPDATE no action;

apps/dokploy/drizzle/0089_dazzling_marrow.sql

@@ -0,0 +1 @@
+ALTER TABLE "backup" ADD COLUMN "metadata" jsonb;

apps/dokploy/drizzle/0090_tiny_phil_sheldon.sql

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