Merge pull request #1452 from Dokploy/canary

🚀 Release v0.20.0

.github/ISSUE_TEMPLATE/bug_report.yml

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

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

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

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

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

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

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

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

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

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

@@ -14,6 +14,7 @@ const baseApp: ApplicationNested = {
 	branch: null,
 	dockerBuildStage: "",
 	registryUrl: "",
+	watchPaths: [],
 	buildArgs: null,
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
@@ -23,6 +24,7 @@ const baseApp: ApplicationNested = {
 	previewPath: "/",
 	previewPort: 3000,
 	previewLimit: 0,
+	previewCustomCertResolver: null,
 	previewWildcard: "",
 	project: {
 		env: "",
@@ -103,6 +105,7 @@ const baseDomain: Domain = {
 	port: null,
 	serviceName: "",
 	composeId: "",
+	customCertResolver: null,
 	domainType: "application",
 	uniqueConfigKey: 1,
 	previewDeploymentId: "",

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

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

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

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

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

@@ -71,15 +71,19 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
+	// Watch form value
+	const currentEnvironment = form.watch("environment");
+	const hasChanges = currentEnvironment !== (data?.env || "");
+
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				environment: data.env || "",
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [data, form]);
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
 			mongoId: id || "",
 			postgresId: id || "",
@@ -87,7 +91,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			mysqlId: id || "",
 			mariadbId: id || "",
 			composeId: id || "",
-			env: data.environment,
+			env: formData.environment,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -98,6 +102,12 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			environment: data?.env || "",
+		});
+	};
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -106,6 +116,11 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 						<CardTitle className="text-xl">Environment Settings</CardTitle>
 						<CardDescription>
 							You can add environment variables to your resource.
+							{hasChanges && (
+								<span className="text-yellow-500 ml-2">
+									(You have unsaved changes)
+								</span>
+							)}
 						</CardDescription>
 					</div>
 
@@ -132,8 +147,8 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 								control={form.control}
 								name="environment"
 								render={({ field }) => (
-									<FormItem className="w-full">
-										<FormControl>
+									<FormItem>
+										<FormControl className="">
 											<CodeEditor
 												style={
 													{
@@ -142,21 +157,35 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 												}
 												language="properties"
 												disabled={isEnvVisible}
+												className="font-mono"
+												wrapperClassName="compose-file-editor"
 												placeholder={`NODE_ENV=production
 PORT=3000
-`}
-												className="h-96 font-mono"
+														`}
 												{...field}
 											/>
 										</FormControl>
-
 										<FormMessage />
 									</FormItem>
 								)}
 							/>
 
-							<div className="flex flex-row justify-end">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+							<div className="flex flex-row justify-end gap-2">
+								{hasChanges && (
+									<Button
+										type="button"
+										variant="outline"
+										onClick={handleCancel}
+									>
+										Cancel
+									</Button>
+								)}
+								<Button
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+									disabled={!hasChanges}
+								>
 									Save
 								</Button>
 							</div>

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

@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useEffect } from "react";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),
@@ -34,16 +35,32 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
-			env: data?.env || "",
-			buildArgs: data?.buildArgs || "",
+			env: "",
+			buildArgs: "",
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	// Watch form values
+	const currentEnv = form.watch("env");
+	const currentBuildArgs = form.watch("buildArgs");
+	const hasChanges =
+		currentEnv !== (data?.env || "") ||
+		currentBuildArgs !== (data?.buildArgs || "");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.env || "",
+				buildArgs: data.buildArgs || "",
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
-			env: data.env,
-			buildArgs: data.buildArgs,
+			env: formData.env,
+			buildArgs: formData.buildArgs,
 			applicationId,
 		})
 			.then(async () => {
@@ -55,6 +72,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			env: data?.env || "",
+			buildArgs: data?.buildArgs || "",
+		});
+	};
+
 	return (
 		<Card className="bg-background px-6 pb-6">
 			<Form {...form}>
@@ -65,7 +89,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 					<Secrets
 						name="env"
 						title="Environment Settings"
-						description="You can add environment variables to your resource."
+						description={
+							<span>
+								You can add environment variables to your resource.
+								{hasChanges && (
+									<span className="text-yellow-500 ml-2">
+										(You have unsaved changes)
+									</span>
+								)}
+							</span>
+						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
@@ -89,8 +122,18 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							placeholder="NPM_TOKEN=xyz"
 						/>
 					)}
-					<div className="flex flex-row justify-end">
-						<Button isLoading={isLoading} className="w-fit" type="submit">
+					<div className="flex flex-row justify-end gap-2">
+						{hasChanges && (
+							<Button type="button" variant="outline" onClick={handleCancel}>
+								Cancel
+							</Button>
+						)}
+						<Button
+							isLoading={isLoading}
+							className="w-fit"
+							type="submit"
+							disabled={!hasChanges}
+						>
 							Save
 						</Button>
 					</div>

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

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

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

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

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

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

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

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

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

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

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

@@ -4,8 +4,22 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	Hammer,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -41,128 +55,188 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<DialogAction
-						title="Deploy Application"
-						description="Are you sure you want to deploy this application?"
-						type="default"
-						onClick={async () => {
-							await deploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application deployed successfully");
-									refetch();
-									router.push(
-										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-									);
-								})
-								.catch(() => {
-									toast.error("Error deploying application");
-								});
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Reload Application"
-						description="Are you sure you want to reload this application?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								applicationId: applicationId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Application reloaded successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error reloading application");
-								});
-						}}
-					>
-						<Button variant="secondary" isLoading={isReloading}>
-							Reload
-							<RefreshCcw className="size-4" />
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Rebuild Application"
-						description="Are you sure you want to rebuild this application?"
-						type="default"
-						onClick={async () => {
-							await redeploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application rebuilt successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error rebuilding application");
-								});
-						}}
-					>
-						<Button
-							variant="secondary"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Rebuild
-							<Hammer className="size-4" />
-						</Button>
-					</DialogAction>
-
-					{data?.applicationStatus === "idle" ? (
+					<TooltipProvider delayDuration={0}>
 						<DialogAction
-							title="Start Application"
-							description="Are you sure you want to start this application?"
+							title="Deploy Application"
+							description="Are you sure you want to deploy this application?"
 							type="default"
 							onClick={async () => {
-								await start({
+								await deploy({
 									applicationId: applicationId,
 								})
 									.then(() => {
-										toast.success("Application started successfully");
+										toast.success("Application deployed successfully");
 										refetch();
+										router.push(
+											`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+										);
 									})
 									.catch(() => {
-										toast.error("Error starting application");
+										toast.error("Error deploying application");
 									});
 							}}
 						>
-							<Button variant="secondary" isLoading={isStarting}>
-								Start
-								<CheckCircle2 className="size-4" />
+							<Button
+								variant="default"
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5"
+							>
+								Deploy
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Downloads the source code and performs a complete build
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</Button>
 						</DialogAction>
-					) : (
 						<DialogAction
-							title="Stop Application"
-							description="Are you sure you want to stop this application?"
+							title="Reload Application"
+							description="Are you sure you want to reload this application?"
+							type="default"
 							onClick={async () => {
-								await stop({
+								await reload({
 									applicationId: applicationId,
+									appName: data?.appName || "",
 								})
 									.then(() => {
-										toast.success("Application stopped successfully");
+										toast.success("Application reloaded successfully");
 										refetch();
 									})
 									.catch(() => {
-										toast.error("Error stopping application");
+										toast.error("Error reloading application");
 									});
 							}}
 						>
-							<Button variant="destructive" isLoading={isStopping}>
-								Stop
-								<Ban className="size-4" />
+							<Button variant="secondary" isLoading={isReloading}>
+								Reload
+								<RefreshCcw className="size-4" />
 							</Button>
 						</DialogAction>
-					)}
+						<DialogAction
+							title="Rebuild Application"
+							description="Are you sure you want to rebuild this application?"
+							type="default"
+							onClick={async () => {
+								await redeploy({
+									applicationId: applicationId,
+								})
+									.then(() => {
+										toast.success("Application rebuilt successfully");
+										refetch();
+									})
+									.catch(() => {
+										toast.error("Error rebuilding application");
+									});
+							}}
+						>
+							<Button
+								variant="secondary"
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5"
+							>
+								Rebuild
+								<Hammer className="size-4" />
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Only rebuilds the application without downloading new
+												code
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
+						</DialogAction>
+
+						{data?.applicationStatus === "idle" ? (
+							<DialogAction
+								title="Start Application"
+								description="Are you sure you want to start this application?"
+								type="default"
+								onClick={async () => {
+									await start({
+										applicationId: applicationId,
+									})
+										.then(() => {
+											toast.success("Application started successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error starting application");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isStarting}
+									className="flex items-center gap-1.5"
+								>
+									Start
+									<CheckCircle2 className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>
+													Start the application (requires a previous successful
+													build)
+												</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						) : (
+							<DialogAction
+								title="Stop Application"
+								description="Are you sure you want to stop this application?"
+								onClick={async () => {
+									await stop({
+										applicationId: applicationId,
+									})
+										.then(() => {
+											toast.success("Application stopped successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error stopping application");
+										});
+								}}
+							>
+								<Button
+									variant="destructive"
+									isLoading={isStopping}
+									className="flex items-center gap-1.5"
+								>
+									Stop
+									<Ban className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Stop the currently running application</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
+					</TooltipProvider>
 					<DockerTerminalModal
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}

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

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

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

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

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

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

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

@@ -1,8 +1,15 @@
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, Terminal } from "lucide-react";
+import { Ban, CheckCircle2, Hammer, HelpCircle, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -27,103 +34,159 @@ export const ComposeActions = ({ composeId }: Props) => {
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<DialogAction
-				title="Deploy Compose"
-				description="Are you sure you want to deploy this compose?"
-				type="default"
-				onClick={async () => {
-					await deploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose deployed successfully");
-							refetch();
-							router.push(
-								`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
-							);
-						})
-						.catch(() => {
-							toast.error("Error deploying compose");
-						});
-				}}
-			>
-				<Button variant="default" isLoading={data?.composeStatus === "running"}>
-					Deploy
-				</Button>
-			</DialogAction>
-			<DialogAction
-				title="Rebuild Compose"
-				description="Are you sure you want to rebuild this compose?"
-				type="default"
-				onClick={async () => {
-					await redeploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose rebuilt successfully");
-							refetch();
-						})
-						.catch(() => {
-							toast.error("Error rebuilding compose");
-						});
-				}}
-			>
-				<Button
-					variant="secondary"
-					isLoading={data?.composeStatus === "running"}
-				>
-					Rebuild
-					<Hammer className="size-4" />
-				</Button>
-			</DialogAction>
-			{data?.composeType === "docker-compose" &&
-			data?.composeStatus === "idle" ? (
+			<TooltipProvider delayDuration={0}>
 				<DialogAction
-					title="Start Compose"
-					description="Are you sure you want to start this compose?"
+					title="Deploy Compose"
+					description="Are you sure you want to deploy this compose?"
 					type="default"
 					onClick={async () => {
-						await start({
+						await deploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose started successfully");
+								toast.success("Compose deployed successfully");
 								refetch();
+								router.push(
+									`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+								);
 							})
 							.catch(() => {
-								toast.error("Error starting compose");
+								toast.error("Error deploying compose");
 							});
 					}}
 				>
-					<Button variant="secondary" isLoading={isStarting}>
-						Start
-						<CheckCircle2 className="size-4" />
+					<Button
+						variant="default"
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5"
+					>
+						Deploy
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Downloads the source code and performs a complete build</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
 					</Button>
 				</DialogAction>
-			) : (
 				<DialogAction
-					title="Stop Compose"
-					description="Are you sure you want to stop this compose?"
+					title="Rebuild Compose"
+					description="Are you sure you want to rebuild this compose?"
+					type="default"
 					onClick={async () => {
-						await stop({
+						await redeploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose stopped successfully");
+								toast.success("Compose rebuilt successfully");
 								refetch();
 							})
 							.catch(() => {
-								toast.error("Error stopping compose");
+								toast.error("Error rebuilding compose");
 							});
 					}}
 				>
-					<Button variant="destructive" isLoading={isStopping}>
-						Stop
-						<Ban className="size-4" />
+					<Button
+						variant="secondary"
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5"
+					>
+						Rebuild
+						<Hammer className="size-4" />
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Only rebuilds the compose without downloading new code</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
 					</Button>
 				</DialogAction>
-			)}
-
+				{data?.composeType === "docker-compose" &&
+				data?.composeStatus === "idle" ? (
+					<DialogAction
+						title="Start Compose"
+						description="Are you sure you want to start this compose?"
+						type="default"
+						onClick={async () => {
+							await start({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose started successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error starting compose");
+								});
+						}}
+					>
+						<Button
+							variant="secondary"
+							isLoading={isStarting}
+							className="flex items-center gap-1.5"
+						>
+							Start
+							<CheckCircle2 className="size-4" />
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>
+											Start the compose (requires a previous successful build)
+										</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
+					</DialogAction>
+				) : (
+					<DialogAction
+						title="Stop Compose"
+						description="Are you sure you want to stop this compose?"
+						onClick={async () => {
+							await stop({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose stopped successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error stopping compose");
+								});
+						}}
+					>
+						<Button
+							variant="destructive"
+							isLoading={isStopping}
+							className="flex items-center gap-1.5"
+						>
+							Stop
+							<Ban className="size-4" />
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>Stop the currently running compose</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
+					</DialogAction>
+				)}
+			</TooltipProvider>
 			<DockerTerminalModal
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -20,12 +20,14 @@ import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";
 import { UpdateBackup } from "./update-backup";
+import { useState } from "react";
 
 interface Props {
 	id: string;
 	type: Exclude<ServiceType, "application" | "redis">;
 }
 export const ShowBackups = ({ id, type }: Props) => {
+	const [activeManualBackup, setActiveManualBackup] = useState<string | undefined>();
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -106,7 +108,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 									{postgres?.backups.map((backup) => (
 										<div key={backup.backupId}>
 											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
-												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
+												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 flex-col gap-8">
 													<div className="flex flex-col gap-1">
 														<span className="font-medium">Destination</span>
 														<span className="text-sm text-muted-foreground">
@@ -137,6 +139,12 @@ export const ShowBackups = ({ id, type }: Props) => {
 															{backup.enabled ? "Yes" : "No"}
 														</span>
 													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Keep Latest</span>
+														<span className="text-sm text-muted-foreground">
+															{backup.keepLatestCount || 'All'}
+														</span>
+													</div>
 												</div>
 												<div className="flex flex-row gap-4">
 													<TooltipProvider delayDuration={0}>
@@ -145,8 +153,9 @@ export const ShowBackups = ({ id, type }: Props) => {
 																<Button
 																	type="button"
 																	variant="ghost"
-																	isLoading={isManualBackup}
+																	isLoading={isManualBackup && activeManualBackup === backup.backupId}
 																	onClick={async () => {
+																		setActiveManualBackup(backup.backupId);
 																		await manualBackup({
 																			backupId: backup.backupId as string,
 																		})
@@ -160,6 +169,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 																					"Error creating the manual backup",
 																				);
 																			});
+																		setActiveManualBackup(undefined);
 																	}}
 																>
 																	<Play className="size-5  text-muted-foreground" />

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

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

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

@@ -2,8 +2,21 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -65,92 +78,150 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
-							title="Deploy Mariadb"
-							description="Are you sure you want to deploy this mariadb?"
-							type="default"
-							onClick={async () => {
-								setIsDeploying(true);
-								await new Promise((resolve) => setTimeout(resolve, 1000));
-								refetch();
-							}}
-						>
-							<Button
-								variant="default"
-								isLoading={data?.applicationStatus === "running"}
-							>
-								Deploy
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Reload Mariadb"
-							description="Are you sure you want to reload this mariadb?"
-							type="default"
-							onClick={async () => {
-								await reload({
-									mariadbId: mariadbId,
-									appName: data?.appName || "",
-								})
-									.then(() => {
-										toast.success("Mariadb reloaded successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error reloading Mariadb");
-									});
-							}}
-						>
-							<Button variant="secondary" isLoading={isReloading}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Start Mariadb"
-								description="Are you sure you want to start this mariadb?"
+								title="Deploy Mariadb"
+								description="Are you sure you want to deploy this mariadb?"
 								type="default"
 								onClick={async () => {
-									await start({
-										mariadbId: mariadbId,
-									})
-										.then(() => {
-											toast.success("Mariadb started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Mariadb");
-										});
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
-									Start
-									<CheckCircle2 className="size-4" />
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MariaDB database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
 							<DialogAction
-								title="Stop Mariadb"
-								description="Are you sure you want to stop this mariadb?"
+								title="Reload Mariadb"
+								description="Are you sure you want to reload this mariadb?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										mariadbId: mariadbId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mariadb stopped successfully");
+											toast.success("Mariadb reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Mariadb");
+											toast.error("Error reloading Mariadb");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
-									Stop
-									<Ban className="size-4" />
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MariaDB service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						)}
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mariadb"
+									description="Are you sure you want to start this mariadb?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mariadbId: mariadbId,
+										})
+											.then(() => {
+												toast.success("Mariadb started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mariadb");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MariaDB database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mariadb"
+									description="Are you sure you want to stop this mariadb?"
+									onClick={async () => {
+										await stop({
+											mariadbId: mariadbId,
+										})
+											.then(() => {
+												toast.success("Mariadb stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mariadb");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MariaDB database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}

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

@@ -2,8 +2,21 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -64,93 +77,150 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
-							title="Deploy Mongo"
-							description="Are you sure you want to deploy this mongo?"
-							type="default"
-							onClick={async () => {
-								setIsDeploying(true);
-								await new Promise((resolve) => setTimeout(resolve, 1000));
-								refetch();
-							}}
-						>
-							<Button
-								variant="default"
-								isLoading={data?.applicationStatus === "running"}
-							>
-								Deploy
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Reload Mongo"
-							description="Are you sure you want to reload this mongo?"
-							type="default"
-							onClick={async () => {
-								await reload({
-									mongoId: mongoId,
-									appName: data?.appName || "",
-								})
-									.then(() => {
-										toast.success("Mongo reloaded successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error reloading Mongo");
-									});
-							}}
-						>
-							<Button variant="secondary" isLoading={isReloading}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Start Mongo"
-								description="Are you sure you want to start this mongo?"
+								title="Deploy Mongo"
+								description="Are you sure you want to deploy this mongo?"
 								type="default"
 								onClick={async () => {
-									await start({
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MongoDB database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Mongo"
+								description="Are you sure you want to reload this mongo?"
+								type="default"
+								onClick={async () => {
+									await reload({
 										mongoId: mongoId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mongo started successfully");
+											toast.success("Mongo reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error starting Mongo");
+											toast.error("Error reloading Mongo");
 										});
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
-									Start
-									<CheckCircle2 className="size-4" />
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MongoDB service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
-							<DialogAction
-								title="Stop Mongo"
-								description="Are you sure you want to stop this mongo?"
-								type="default"
-								onClick={async () => {
-									await stop({
-										mongoId: mongoId,
-									})
-										.then(() => {
-											toast.success("Mongo stopped successfully");
-											refetch();
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mongo"
+									description="Are you sure you want to start this mongo?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mongoId: mongoId,
 										})
-										.catch(() => {
-											toast.error("Error stopping Mongo");
-										});
-								}}
-							>
-								<Button variant="destructive" isLoading={isStopping}>
-									Stop
-									<Ban className="size-4" />
-								</Button>
-							</DialogAction>
-						)}
+											.then(() => {
+												toast.success("Mongo started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mongo");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MongoDB database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mongo"
+									description="Are you sure you want to stop this mongo?"
+									onClick={async () => {
+										await stop({
+											mongoId: mongoId,
+										})
+											.then(() => {
+												toast.success("Mongo stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mongo");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MongoDB database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}

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

@@ -200,7 +200,7 @@ export const ContainerFreeMonitoring = ({
 	}, [appName]);
 
 	return (
-		<div className="rounded-xl bg-background shadow-md flex flex-col gap-4">
+		<div className="rounded-xl bg-background flex flex-col gap-4">
 			<header className="flex items-center justify-between">
 				<div className="space-y-1">
 					<h1 className="text-2xl font-semibold tracking-tight">Monitoring</h1>

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

@@ -2,8 +2,21 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
@@ -62,93 +75,150 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
-							title="Deploy Mysql"
-							description="Are you sure you want to deploy this mysql?"
-							type="default"
-							onClick={async () => {
-								setIsDeploying(true);
-								await new Promise((resolve) => setTimeout(resolve, 1000));
-								refetch();
-							}}
-						>
-							<Button
-								variant="default"
-								isLoading={data?.applicationStatus === "running"}
-							>
-								Deploy
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Reload Mysql"
-							description="Are you sure you want to reload this mysql?"
-							type="default"
-							onClick={async () => {
-								await reload({
-									mysqlId: mysqlId,
-									appName: data?.appName || "",
-								})
-									.then(() => {
-										toast.success("Mysql reloaded successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error reloading Mysql");
-									});
-							}}
-						>
-							<Button variant="secondary" isLoading={isReloading}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{data?.applicationStatus === "idle" ? (
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Start Mysql"
-								description="Are you sure you want to start this mysql?"
+								title="Deploy Mysql"
+								description="Are you sure you want to deploy this mysql?"
 								type="default"
 								onClick={async () => {
-									await start({
-										mysqlId: mysqlId,
-									})
-										.then(() => {
-											toast.success("Mysql started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Mysql");
-										});
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
-									Start
-									<CheckCircle2 className="size-4" />
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the MySQL database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
 							<DialogAction
-								title="Stop Mysql"
-								description="Are you sure you want to stop this mysql?"
+								title="Reload Mysql"
+								description="Are you sure you want to reload this mysql?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										mysqlId: mysqlId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Mysql stopped successfully");
+											toast.success("Mysql reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Mysql");
+											toast.error("Error reloading Mysql");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
-									Stop
-									<Ban className="size-4" />
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the MySQL service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						)}
-
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Mysql"
+									description="Are you sure you want to start this mysql?"
+									type="default"
+									onClick={async () => {
+										await start({
+											mysqlId: mysqlId,
+										})
+											.then(() => {
+												toast.success("Mysql started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Mysql");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the MySQL database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Mysql"
+									description="Are you sure you want to stop this mysql?"
+									onClick={async () => {
+										await stop({
+											mysqlId: mysqlId,
+										})
+											.then(() => {
+												toast.success("Mysql stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Mysql");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running MySQL database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}

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

@@ -2,12 +2,26 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
 interface Props {
 	postgresId: string;
 }
@@ -57,122 +71,179 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 	);
 
 	return (
-		<div className="flex w-full flex-col gap-5 ">
-			<Card className="bg-background">
-				<CardHeader className="pb-4">
-					<CardTitle className="text-xl">General</CardTitle>
-				</CardHeader>
-				<CardContent className="flex gap-4">
-					<DialogAction
-						title="Deploy Postgres"
-						description="Are you sure you want to deploy this postgres?"
-						type="default"
-						onClick={async () => {
-							setIsDeploying(true);
-
-							await new Promise((resolve) => setTimeout(resolve, 1000));
-							refetch();
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-
-					<DialogAction
-						title="Reload Postgres"
-						description="Are you sure you want to reload this postgres?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								postgresId: postgresId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Postgres reloaded successfully");
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Postgres"
+								description="Are you sure you want to deploy this postgres?"
+								type="default"
+								onClick={async () => {
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
 									refetch();
-								})
-								.catch(() => {
-									toast.error("Error reloading Postgres");
-								});
-						}}
-					>
-						<Button variant="secondary" isLoading={isReloading}>
-							Reload
-							<RefreshCcw className="size-4" />
-						</Button>
-					</DialogAction>
-					{data?.applicationStatus === "idle" ? (
-						<DialogAction
-							title="Start Postgres"
-							description="Are you sure you want to start this postgres?"
-							type="default"
-							onClick={async () => {
-								await start({
-									postgresId: postgresId,
-								})
-									.then(() => {
-										toast.success("Postgres started successfully");
-										refetch();
+								}}
+							>
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the PostgreSQL database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							<DialogAction
+								title="Reload Postgres"
+								description="Are you sure you want to reload this postgres?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										postgresId: postgresId,
+										appName: data?.appName || "",
 									})
-									.catch(() => {
-										toast.error("Error starting Postgres");
-									});
-							}}
+										.then(() => {
+											toast.success("Postgres reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Postgres");
+										});
+								}}
+							>
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the PostgreSQL service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Postgres"
+									description="Are you sure you want to start this postgres?"
+									type="default"
+									onClick={async () => {
+										await start({
+											postgresId: postgresId,
+										})
+											.then(() => {
+												toast.success("Postgres started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Postgres");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the PostgreSQL database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Postgres"
+									description="Are you sure you want to stop this postgres?"
+									onClick={async () => {
+										await stop({
+											postgresId: postgresId,
+										})
+											.then(() => {
+												toast.success("Postgres stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Postgres");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running PostgreSQL database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
 						>
-							<Button variant="secondary" isLoading={isStarting}>
-								Start
-								<CheckCircle2 className="size-4" />
+							<Button variant="outline">
+								<Terminal />
+								Open Terminal
 							</Button>
-						</DialogAction>
-					) : (
-						<DialogAction
-							title="Stop Postgres"
-							description="Are you sure you want to stop this postgres?"
-							onClick={async () => {
-								await stop({
-									postgresId: postgresId,
-								})
-									.then(() => {
-										toast.success("Postgres stopped successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error stopping Postgres");
-									});
-							}}
-						>
-							<Button variant="destructive" isLoading={isStopping}>
-								Stop
-								<Ban className="size-4" />
-							</Button>
-						</DialogAction>
-					)}
-
-					<DockerTerminalModal
-						appName={data?.appName || ""}
-						serverId={data?.serverId || ""}
-					>
-						<Button variant="outline">
-							<Terminal />
-							Open Terminal
-						</Button>
-					</DockerTerminalModal>
-				</CardContent>
-			</Card>
-			<DrawerLogs
-				isOpen={isDrawerOpen}
-				onClose={() => {
-					setIsDrawerOpen(false);
-					setFilteredLogs([]);
-					setIsDeploying(false);
-					refetch();
-				}}
-				filteredLogs={filteredLogs}
-			/>
-		</div>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
 	);
 };

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

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

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

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

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

@@ -2,12 +2,26 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
+import {
+	Ban,
+	CheckCircle2,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
 interface Props {
 	redisId: string;
 }
@@ -63,94 +77,150 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<DialogAction
-							title="Deploy Redis"
-							description="Are you sure you want to deploy this redis?"
-							type="default"
-							onClick={async () => {
-								setIsDeploying(true);
-								await new Promise((resolve) => setTimeout(resolve, 1000));
-								refetch();
-							}}
-						>
-							<Button
-								variant="default"
-								isLoading={data?.applicationStatus === "running"}
-							>
-								Deploy
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Reload Redis"
-							description="Are you sure you want to reload this redis?"
-							type="default"
-							onClick={async () => {
-								await reload({
-									redisId: redisId,
-									appName: data?.appName || "",
-								})
-									.then(() => {
-										toast.success("Redis reloaded successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error reloading Redis");
-									});
-							}}
-						>
-							<Button variant="secondary" isLoading={isReloading}>
-								Reload
-								<RefreshCcw className="size-4" />
-							</Button>
-						</DialogAction>
-						{/* <ResetRedis redisId={redisId} appName={data?.appName || ""} /> */}
-						{data?.applicationStatus === "idle" ? (
+						<TooltipProvider delayDuration={0}>
 							<DialogAction
-								title="Start Redis"
-								description="Are you sure you want to start this redis?"
+								title="Deploy Redis"
+								description="Are you sure you want to deploy this redis?"
 								type="default"
 								onClick={async () => {
-									await start({
-										redisId: redisId,
-									})
-										.then(() => {
-											toast.success("Redis started successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error starting Redis");
-										});
+									setIsDeploying(true);
+									await new Promise((resolve) => setTimeout(resolve, 1000));
+									refetch();
 								}}
 							>
-								<Button variant="secondary" isLoading={isStarting}>
-									Start
-									<CheckCircle2 className="size-4" />
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5"
+								>
+									Deploy
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Downloads and sets up the Redis database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
 							<DialogAction
-								title="Stop Redis"
-								description="Are you sure you want to stop this redis?"
+								title="Reload Redis"
+								description="Are you sure you want to reload this redis?"
+								type="default"
 								onClick={async () => {
-									await stop({
+									await reload({
 										redisId: redisId,
+										appName: data?.appName || "",
 									})
 										.then(() => {
-											toast.success("Redis stopped successfully");
+											toast.success("Redis reloaded successfully");
 											refetch();
 										})
 										.catch(() => {
-											toast.error("Error stopping Redis");
+											toast.error("Error reloading Redis");
 										});
 								}}
 							>
-								<Button variant="destructive" isLoading={isStopping}>
-									Stop
-									<Ban className="size-4" />
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5"
+								>
+									Reload
+									<RefreshCcw className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Restart the Redis service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
 								</Button>
 							</DialogAction>
-						)}
-
+							{data?.applicationStatus === "idle" ? (
+								<DialogAction
+									title="Start Redis"
+									description="Are you sure you want to start this redis?"
+									type="default"
+									onClick={async () => {
+										await start({
+											redisId: redisId,
+										})
+											.then(() => {
+												toast.success("Redis started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Redis");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isStarting}
+										className="flex items-center gap-1.5"
+									>
+										Start
+										<CheckCircle2 className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Start the Redis database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							) : (
+								<DialogAction
+									title="Stop Redis"
+									description="Are you sure you want to stop this redis?"
+									onClick={async () => {
+										await stop({
+											redisId: redisId,
+										})
+											.then(() => {
+												toast.success("Redis stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Redis");
+											});
+									}}
+								>
+									<Button
+										variant="destructive"
+										isLoading={isStopping}
+										className="flex items-center gap-1.5"
+									>
+										Stop
+										<Ban className="size-4" />
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Stop the currently running Redis database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -67,7 +67,11 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 					>
 						<span>{t("settings.server.webServer.reload")}</span>
 					</DropdownMenuItem>
-					<ShowModalLogs appName="dokploy-traefik" serverId={serverId}>
+					<ShowModalLogs
+						appName="dokploy-traefik"
+						serverId={serverId}
+						type="standalone"
+					>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}
 							className="cursor-pointer"
@@ -108,15 +112,6 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 							{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"} Dashboard
 						</span>
 					</DropdownMenuItem>
-					{/* 
-								<DockerTerminalModal appName="dokploy-traefik">
-									<DropdownMenuItem
-										className="w-full cursor-pointer space-x-3"
-										onSelect={(e) => e.preventDefault()}
-									>
-										<span>Enter the terminal</span>
-									</DropdownMenuItem>
-								</DockerTerminalModal> */}
 					<ManageTraefikPorts serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}

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

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

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

@@ -36,13 +36,20 @@ interface Props {
 	appName: string;
 	children?: React.ReactNode;
 	serverId?: string;
+	type?: "standalone" | "swarm";
 }
 
-export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
+export const ShowModalLogs = ({
+	appName,
+	children,
+	serverId,
+	type = "swarm",
+}: Props) => {
 	const { data, isLoading } = api.docker.getContainersByAppLabel.useQuery(
 		{
 			appName,
 			serverId,
+			type,
 		},
 		{
 			enabled: !!appName,

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

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

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

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

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

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

apps/dokploy/components/layouts/side.tsx

@@ -37,8 +37,6 @@ import {
 	BreadcrumbItem,
 	BreadcrumbLink,
 	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import {
 	Collapsible,
@@ -498,7 +496,6 @@ function SidebarLogo() {
 	const { state } = useSidebar();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: user } = api.user.get.useQuery();
-	// const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 	const { data: session } = authClient.useSession();
 
 	const {
@@ -774,6 +771,7 @@ export default function Page({ children }: Props) {
 	const pathname = usePathname();
 	const _currentPath = router.pathname;
 	const { data: auth } = api.user.get.useQuery();
+	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 
 	const includesProjects = pathname?.includes("/dashboard/project");
 	const { data: isCloud } = api.settings.isCloud.useQuery();
@@ -910,7 +908,7 @@ export default function Page({ children }: Props) {
 					</SidebarGroup>
 					<SidebarGroup>
 						<SidebarGroupLabel>Settings</SidebarGroupLabel>
-						<SidebarMenu>
+						<SidebarMenu className="gap-2">
 							{filteredSettings.map((item) => {
 								const isSingle = item.isSingle !== false;
 								const isActive = isSingle
@@ -1017,21 +1015,29 @@ export default function Page({ children }: Props) {
 									</SidebarMenuButton>
 								</SidebarMenuItem>
 							))}
-							{!isCloud && auth?.role === "owner" && (
-								<SidebarMenuItem>
-									<SidebarMenuButton asChild>
-										<UpdateServerButton />
-									</SidebarMenuButton>
-								</SidebarMenuItem>
-							)}
 						</SidebarMenu>
 					</SidebarGroup>
 				</SidebarContent>
-				<SidebarFooter className="gap-1">
-					<SidebarMenu>
+				<SidebarFooter>
+					<SidebarMenu className="flex flex-col gap-2">
+						{!isCloud && auth?.role === "owner" && (
+							<SidebarMenuItem>
+								<UpdateServerButton />
+							</SidebarMenuItem>
+						)}
 						<SidebarMenuItem>
 							<UserNav />
 						</SidebarMenuItem>
+						{dokployVersion && (
+							<>
+								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
+									Version {dokployVersion}
+								</div>
+								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
+									{dokployVersion}
+								</div>
+							</>
+						)}
 					</SidebarMenu>
 				</SidebarFooter>
 				<SidebarRail />
@@ -1055,10 +1061,6 @@ export default function Page({ children }: Props) {
 												</Link>
 											</BreadcrumbLink>
 										</BreadcrumbItem>
-										<BreadcrumbSeparator className="block" />
-										<BreadcrumbItem>
-											<BreadcrumbPage>{activeItem?.title}</BreadcrumbPage>
-										</BreadcrumbItem>
 									</BreadcrumbList>
 								</Breadcrumb>
 							</div>

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

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

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

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

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

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

apps/dokploy/components/ui/calendar.tsx

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

apps/dokploy/components/ui/switch.tsx

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

apps/dokploy/drizzle/0070_useful_serpent_society.sql

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

apps/dokploy/drizzle/0071_flaky_black_queen.sql

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

apps/dokploy/drizzle/0072_green_susan_delgado.sql

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

apps/dokploy/drizzle/0073_hot_domino.sql

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

apps/dokploy/drizzle/0074_black_quasar.sql

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

apps/dokploy/drizzle/0075_young_typhoid_mary.sql

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

apps/dokploy/drizzle/0076_young_sharon_ventura.sql

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

apps/dokploy/drizzle/0077_chemical_dreadnoughts.sql

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

apps/dokploy/drizzle/meta/_journal.json

@@ -491,6 +491,62 @@
       "when": 1741152916611,
       "tag": "0069_legal_bill_hollister",
       "breakpoints": true
+    },
+    {
+      "idx": 70,
+      "version": "7",
+      "when": 1741322697251,
+      "tag": "0070_useful_serpent_society",
+      "breakpoints": true
+    },
+    {
+      "idx": 71,
+      "version": "7",
+      "when": 1741460060541,
+      "tag": "0071_flaky_black_queen",
+      "breakpoints": true
+    },
+    {
+      "idx": 72,
+      "version": "7",
+      "when": 1741487009559,
+      "tag": "0072_green_susan_delgado",
+      "breakpoints": true
+    },
+    {
+      "idx": 73,
+      "version": "7",
+      "when": 1741489681190,
+      "tag": "0073_hot_domino",
+      "breakpoints": true
+    },
+    {
+      "idx": 74,
+      "version": "7",
+      "when": 1741490064139,
+      "tag": "0074_black_quasar",
+      "breakpoints": true
+    },
+    {
+      "idx": 75,
+      "version": "7",
+      "when": 1741491527516,
+      "tag": "0075_young_typhoid_mary",
+      "breakpoints": true
+    },
+    {
+      "idx": 76,
+      "version": "7",
+      "when": 1741493754270,
+      "tag": "0076_young_sharon_ventura",
+      "breakpoints": true
+    },
+    {
+      "idx": 77,
+      "version": "7",
+      "when": 1741510086231,
+      "tag": "0077_chemical_dreadnoughts",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/next.config.mjs

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

apps/dokploy/package.json

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

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

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

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

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

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

@@ -9,6 +9,7 @@ import {
 	findPreviewDeploymentByApplicationId,
 	findPreviewDeploymentsByPullRequestId,
 	removePreviewDeployment,
+	shouldDeploy,
 } from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
@@ -95,6 +96,9 @@ export default async function handler(
 			const deploymentTitle = extractCommitMessage(req.headers, req.body);
 			const deploymentHash = extractHash(req.headers, req.body);
 			const owner = githubBody?.repository?.owner?.name;
+			const normalizedCommits = githubBody?.commits?.flatMap(
+				(commit: any) => commit.modified,
+			);
 
 			const apps = await db.query.applications.findMany({
 				where: and(
@@ -116,6 +120,15 @@ export default async function handler(
 					server: !!app.serverId,
 				};
 
+				const shouldDeployPaths = shouldDeploy(
+					app.watchPaths,
+					normalizedCommits,
+				);
+
+				if (!shouldDeployPaths) {
+					continue;
+				}
+
 				if (IS_CLOUD && app.serverId) {
 					jobData.serverId = app.serverId;
 					await deploy(jobData);
@@ -151,6 +164,14 @@ export default async function handler(
 					server: !!composeApp.serverId,
 				};
 
+				const shouldDeployPaths = shouldDeploy(
+					composeApp.watchPaths,
+					normalizedCommits,
+				);
+
+				if (!shouldDeployPaths) {
+					continue;
+				}
 				if (IS_CLOUD && composeApp.serverId) {
 					jobData.serverId = composeApp.serverId;
 					await deploy(jobData);

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

@@ -65,6 +65,7 @@ import {
 	PlusIcon,
 	Search,
 	X,
+	Trash2,
 } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
@@ -72,9 +73,25 @@ import type {
 } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { type ReactElement, useMemo, useState } from "react";
+import { type ReactElement, useMemo, useState, useEffect } from "react";
 import { toast } from "sonner";
 import superjson from "superjson";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 
 export type Services = {
 	appName: string;
@@ -203,10 +220,47 @@ const Project = (
 	const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
 	const { projectId } = props;
 	const { data: auth } = api.user.get.useQuery();
+	const [sortBy, setSortBy] = useState<string>(() => {
+		if (typeof window !== "undefined") {
+			return localStorage.getItem("servicesSort") || "createdAt-desc";
+		}
+		return "createdAt-desc";
+	});
+
+	useEffect(() => {
+		localStorage.setItem("servicesSort", sortBy);
+	}, [sortBy]);
+
+	const sortServices = (services: Services[]) => {
+		const [field, direction] = sortBy.split("-");
+		return [...services].sort((a, b) => {
+			let comparison = 0;
+			switch (field) {
+				case "name":
+					comparison = a.name.localeCompare(b.name);
+					break;
+				case "type":
+					comparison = a.type.localeCompare(b.type);
+					break;
+				case "createdAt":
+					comparison =
+						new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+					break;
+				default:
+					comparison = 0;
+			}
+			return direction === "asc" ? comparison : -comparison;
+		});
+	};
 
 	const { data, isLoading, refetch } = api.project.one.useQuery({ projectId });
+	const { data: allProjects } = api.project.all.useQuery();
 	const router = useRouter();
 
+	const [isMoveDialogOpen, setIsMoveDialogOpen] = useState(false);
+	const [selectedTargetProject, setSelectedTargetProject] =
+		useState<string>("");
+
 	const emptyServices =
 		data?.mariadb?.length === 0 &&
 		data?.mongo?.length === 0 &&
@@ -254,6 +308,38 @@ const Project = (
 	const composeActions = {
 		start: api.compose.start.useMutation(),
 		stop: api.compose.stop.useMutation(),
+		move: api.compose.move.useMutation(),
+		delete: api.compose.delete.useMutation(),
+	};
+
+	const applicationActions = {
+		move: api.application.move.useMutation(),
+		delete: api.application.delete.useMutation(),
+	};
+
+	const postgresActions = {
+		move: api.postgres.move.useMutation(),
+		delete: api.postgres.remove.useMutation(),
+	};
+
+	const mysqlActions = {
+		move: api.mysql.move.useMutation(),
+		delete: api.mysql.remove.useMutation(),
+	};
+
+	const mariadbActions = {
+		move: api.mariadb.move.useMutation(),
+		delete: api.mariadb.remove.useMutation(),
+	};
+
+	const redisActions = {
+		move: api.redis.move.useMutation(),
+		delete: api.redis.remove.useMutation(),
+	};
+
+	const mongoActions = {
+		move: api.mongo.move.useMutation(),
+		delete: api.mongo.remove.useMutation(),
 	};
 
 	const handleBulkStart = async () => {
@@ -296,9 +382,145 @@ const Project = (
 		setIsBulkActionLoading(false);
 	};
 
+	const handleBulkMove = async () => {
+		if (!selectedTargetProject) {
+			toast.error("Please select a target project");
+			return;
+		}
+
+		let success = 0;
+		setIsBulkActionLoading(true);
+		for (const serviceId of selectedServices) {
+			try {
+				const service = filteredServices.find((s) => s.id === serviceId);
+				if (!service) continue;
+
+				switch (service.type) {
+					case "application":
+						await applicationActions.move.mutateAsync({
+							applicationId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "compose":
+						await composeActions.move.mutateAsync({
+							composeId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "postgres":
+						await postgresActions.move.mutateAsync({
+							postgresId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "mysql":
+						await mysqlActions.move.mutateAsync({
+							mysqlId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "mariadb":
+						await mariadbActions.move.mutateAsync({
+							mariadbId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "redis":
+						await redisActions.move.mutateAsync({
+							redisId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+					case "mongo":
+						await mongoActions.move.mutateAsync({
+							mongoId: serviceId,
+							targetProjectId: selectedTargetProject,
+						});
+						break;
+				}
+				success++;
+			} catch (error) {
+				toast.error(
+					`Error moving service ${serviceId}: ${error instanceof Error ? error.message : "Unknown error"}`,
+				);
+			}
+		}
+		if (success > 0) {
+			toast.success(`${success} services moved successfully`);
+			refetch();
+		}
+		setSelectedServices([]);
+		setIsDropdownOpen(false);
+		setIsMoveDialogOpen(false);
+		setIsBulkActionLoading(false);
+	};
+
+	const handleBulkDelete = async () => {
+		let success = 0;
+		setIsBulkActionLoading(true);
+		for (const serviceId of selectedServices) {
+			try {
+				const service = filteredServices.find((s) => s.id === serviceId);
+				if (!service) continue;
+
+				switch (service.type) {
+					case "application":
+						await applicationActions.delete.mutateAsync({
+							applicationId: serviceId,
+						});
+						break;
+					case "compose":
+						await composeActions.delete.mutateAsync({
+							composeId: serviceId,
+							deleteVolumes: false,
+						});
+						break;
+					case "postgres":
+						await postgresActions.delete.mutateAsync({
+							postgresId: serviceId,
+						});
+						break;
+					case "mysql":
+						await mysqlActions.delete.mutateAsync({
+							mysqlId: serviceId,
+						});
+						break;
+					case "mariadb":
+						await mariadbActions.delete.mutateAsync({
+							mariadbId: serviceId,
+						});
+						break;
+					case "redis":
+						await redisActions.delete.mutateAsync({
+							redisId: serviceId,
+						});
+						break;
+					case "mongo":
+						await mongoActions.delete.mutateAsync({
+							mongoId: serviceId,
+						});
+						break;
+				}
+				success++;
+			} catch (error) {
+				toast.error(
+					`Error deleting service ${serviceId}: ${error instanceof Error ? error.message : "Unknown error"}`,
+				);
+			}
+		}
+		if (success > 0) {
+			toast.success(`${success} services deleted successfully`);
+			refetch();
+		}
+		setSelectedServices([]);
+		setIsDropdownOpen(false);
+		setIsBulkActionLoading(false);
+	};
+
 	const filteredServices = useMemo(() => {
 		if (!applications) return [];
-		return applications.filter(
+		const filtered = applications.filter(
 			(service) =>
 				(service.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
 					service.description
@@ -306,7 +528,8 @@ const Project = (
 						.includes(searchQuery.toLowerCase())) &&
 				(selectedTypes.length === 0 || selectedTypes.includes(service.type)),
 		);
-	}, [applications, searchQuery, selectedTypes]);
+		return sortServices(filtered);
+	}, [applications, searchQuery, selectedTypes, sortBy]);
 
 	return (
 		<div>
@@ -380,7 +603,7 @@ const Project = (
 								</div>
 							) : (
 								<>
-									<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+									<div className="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
 										<div className="flex items-center gap-4">
 											<div className="flex items-center gap-2">
 												<Checkbox
@@ -445,11 +668,107 @@ const Project = (
 															Stop
 														</Button>
 													</DialogAction>
+													{(auth?.role === "owner" ||
+														auth?.canDeleteServices) && (
+														<DialogAction
+															title="Delete Services"
+															description={`Are you sure you want to delete ${selectedServices.length} services? This action cannot be undone.`}
+															type="destructive"
+															onClick={handleBulkDelete}
+														>
+															<Button
+																variant="ghost"
+																className="w-full justify-start text-destructive"
+															>
+																<Trash2 className="mr-2 h-4 w-4" />
+																Delete
+															</Button>
+														</DialogAction>
+													)}
+
+													<Dialog
+														open={isMoveDialogOpen}
+														onOpenChange={setIsMoveDialogOpen}
+													>
+														<DialogTrigger asChild>
+															<Button
+																variant="ghost"
+																className="w-full justify-start"
+															>
+																<FolderInput className="mr-2 h-4 w-4" />
+																Move
+															</Button>
+														</DialogTrigger>
+														<DialogContent>
+															<DialogHeader>
+																<DialogTitle>Move Services</DialogTitle>
+																<DialogDescription>
+																	Select the target project to move{" "}
+																	{selectedServices.length} services
+																</DialogDescription>
+															</DialogHeader>
+															<div className="flex flex-col gap-4">
+																{allProjects?.filter(
+																	(p) => p.projectId !== projectId,
+																).length === 0 ? (
+																	<div className="flex flex-col items-center justify-center gap-2 py-4">
+																		<FolderInput className="h-8 w-8 text-muted-foreground" />
+																		<p className="text-sm text-muted-foreground text-center">
+																			No other projects available. Create a new
+																			project first to move services.
+																		</p>
+																	</div>
+																) : (
+																	<Select
+																		value={selectedTargetProject}
+																		onValueChange={setSelectedTargetProject}
+																	>
+																		<SelectTrigger>
+																			<SelectValue placeholder="Select target project" />
+																		</SelectTrigger>
+																		<SelectContent>
+																			{allProjects
+																				?.filter(
+																					(p) => p.projectId !== projectId,
+																				)
+																				.map((project) => (
+																					<SelectItem
+																						key={project.projectId}
+																						value={project.projectId}
+																					>
+																						{project.name}
+																					</SelectItem>
+																				))}
+																		</SelectContent>
+																	</Select>
+																)}
+															</div>
+															<DialogFooter>
+																<Button
+																	variant="outline"
+																	onClick={() => setIsMoveDialogOpen(false)}
+																>
+																	Cancel
+																</Button>
+																<Button
+																	onClick={handleBulkMove}
+																	isLoading={isBulkActionLoading}
+																	disabled={
+																		allProjects?.filter(
+																			(p) => p.projectId !== projectId,
+																		).length === 0
+																	}
+																>
+																	Move Services
+																</Button>
+															</DialogFooter>
+														</DialogContent>
+													</Dialog>
 												</DropdownMenuContent>
 											</DropdownMenu>
 										</div>
 
-										<div className="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center">
+										<div className="flex flex-col gap-2 lg:flex-row lg:gap-4 lg:items-center">
 											<div className="w-full relative">
 												<Input
 													placeholder="Filter services..."
@@ -459,6 +778,23 @@ const Project = (
 												/>
 												<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 											</div>
+											<Select value={sortBy} onValueChange={setSortBy}>
+												<SelectTrigger className="lg:w-[280px]">
+													<SelectValue placeholder="Sort by..." />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="createdAt-desc">
+														Newest first
+													</SelectItem>
+													<SelectItem value="createdAt-asc">
+														Oldest first
+													</SelectItem>
+													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
+													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
+													<SelectItem value="type-asc">Type (A-Z)</SelectItem>
+													<SelectItem value="type-desc">Type (Z-A)</SelectItem>
+												</SelectContent>
+											</Select>
 											<Popover
 												open={openCombobox}
 												onOpenChange={setOpenCombobox}

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -228,15 +228,15 @@ const Service = (
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
-											)}
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											<TabsTrigger value="deployments">Deployments</TabsTrigger>
+											<TabsTrigger value="domains">Domains</TabsTrigger>
 											<TabsTrigger value="preview-deployments">
 												Preview Deployments
 											</TabsTrigger>
-											<TabsTrigger value="domains">Domains</TabsTrigger>
+											<TabsTrigger value="deployments">Deployments</TabsTrigger>
+											<TabsTrigger value="logs">Logs</TabsTrigger>
+											{((data?.serverId && isCloud) || !data?.server) && (
+												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											)}
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>

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

@@ -47,6 +47,7 @@ import { useRouter } from "next/router";
 import { type ReactElement, useEffect, useState } from "react";
 import { toast } from "sonner";
 import superjson from "superjson";
+import { ShowImport } from "@/components/dashboard/application/advanced/import/show-import";
 
 type TabState =
 	| "projects"
@@ -224,12 +225,12 @@ const Service = (
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
+											<TabsTrigger value="domains">Domains</TabsTrigger>
+											<TabsTrigger value="deployments">Deployments</TabsTrigger>
+											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											<TabsTrigger value="deployments">Deployments</TabsTrigger>
-											<TabsTrigger value="domains">Domains</TabsTrigger>
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
@@ -330,6 +331,7 @@ const Service = (
 										<div className="flex flex-col gap-4 pt-2.5">
 											<AddCommandCompose composeId={composeId} />
 											<ShowVolumes id={composeId} type="compose" />
+											<ShowImport composeId={composeId} />
 										</div>
 									</TabsContent>
 								</Tabs>

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

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

apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx

@@ -1,5 +1,3 @@
-import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
-import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
@@ -10,7 +8,7 @@ import { ShowInternalMongoCredentials } from "@/components/dashboard/mongo/gener
 import { UpdateMongo } from "@/components/dashboard/mongo/update-mongo";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
+import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
 import { MongodbIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
@@ -198,11 +196,11 @@ const Mongo = (
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
+											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
@@ -279,11 +277,7 @@ const Mongo = (
 									</TabsContent>
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
-											<div className="flex w-full flex-col gap-5 ">
-												<ShowCustomCommand id={mongoId} type="mongo" />
-												<ShowVolumes id={mongoId} type="mongo" />
-												<ShowResources id={mongoId} type="mongo" />
-											</div>
+											<ShowDatabaseAdvancedSettings id={mongoId} type="mongo" />
 										</div>
 									</TabsContent>
 								</Tabs>

apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx

@@ -1,5 +1,3 @@
-import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
-import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
@@ -10,7 +8,7 @@ import { ShowExternalMysqlCredentials } from "@/components/dashboard/mysql/gener
 import { ShowGeneralMysql } from "@/components/dashboard/mysql/general/show-general-mysql";
 import { ShowInternalMysqlCredentials } from "@/components/dashboard/mysql/general/show-internal-mysql-credentials";
 import { UpdateMysql } from "@/components/dashboard/mysql/update-mysql";
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
+import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
 import { MysqlIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
@@ -200,13 +198,13 @@ const MySql = (
 												<TabsTrigger value="environment">
 													Environment
 												</TabsTrigger>
+												<TabsTrigger value="logs">Logs</TabsTrigger>
 												{((data?.serverId && isCloud) || !data?.server) && (
 													<TabsTrigger value="monitoring">
 														Monitoring
 													</TabsTrigger>
 												)}
 												<TabsTrigger value="backups">Backups</TabsTrigger>
-												<TabsTrigger value="logs">Logs</TabsTrigger>
 												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											</TabsList>
 										</div>
@@ -236,33 +234,9 @@ const MySql = (
 														/>
 													) : (
 														<>
-															{/* {monitoring?.enabledFeatures && (
-															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
-																<Label className="text-muted-foreground">
-																	Change Monitoring
-																</Label>
-																<Switch
-																	checked={toggleMonitoring}
-																	onCheckedChange={setToggleMonitoring}
-																/>
-															</div>
-														)}
-
-														{toggleMonitoring ? (
-															<ContainerPaidMonitoring
-																appName={data?.appName || ""}
-																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
-																token={
-																	monitoring?.metricsConfig?.server?.token || ""
-																}
-															/>
-														) : (
-															<div> */}
 															<ContainerFreeMonitoring
 																appName={data?.appName || ""}
 															/>
-															{/* </div> */}
-															{/* )} */}
 														</>
 													)}
 												</div>
@@ -283,11 +257,10 @@ const MySql = (
 										</TabsContent>
 										<TabsContent value="advanced">
 											<div className="flex flex-col gap-4 pt-2.5">
-												<div className="flex w-full flex-col gap-5">
-													<ShowCustomCommand id={mysqlId} type="mysql" />
-													<ShowVolumes id={mysqlId} type="mysql" />
-													<ShowResources id={mysqlId} type="mysql" />
-												</div>
+												<ShowDatabaseAdvancedSettings
+													id={mysqlId}
+													type="mysql"
+												/>
 											</div>
 										</TabsContent>
 									</Tabs>

apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx

@@ -1,12 +1,9 @@
-import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
-import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowExternalPostgresCredentials } from "@/components/dashboard/postgres/general/show-external-postgres-credentials";
 import { ShowGeneralPostgres } from "@/components/dashboard/postgres/general/show-general-postgres";
 import { ShowInternalPostgresCredentials } from "@/components/dashboard/postgres/general/show-internal-postgres-credentials";
@@ -15,6 +12,7 @@ import { PostgresqlIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -197,11 +195,11 @@ const Postgresql = (
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
+											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
@@ -235,33 +233,9 @@ const Postgresql = (
 													/>
 												) : (
 													<>
-														{/* {monitoring?.enabledFeatures && (
-															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
-																<Label className="text-muted-foreground">
-																	Change Monitoring
-																</Label>
-																<Switch
-																	checked={toggleMonitoring}
-																	onCheckedChange={setToggleMonitoring}
-																/>
-															</div>
-														)}
-
-														{toggleMonitoring ? (
-															<ContainerPaidMonitoring
-																appName={data?.appName || ""}
-																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
-																token={
-																	monitoring?.metricsConfig?.server?.token || ""
-																}
-															/>
-														) : (
-															<div> */}
 														<ContainerFreeMonitoring
 															appName={data?.appName || ""}
 														/>
-														{/* </div> */}
-														{/* )} */}
 													</>
 												)}
 											</div>
@@ -282,11 +256,10 @@ const Postgresql = (
 									</TabsContent>
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
-											<div className="flex w-full flex-col gap-5 ">
-												<ShowCustomCommand id={postgresId} type="postgres" />
-												<ShowVolumes id={postgresId} type="postgres" />
-												<ShowResources id={postgresId} type="postgres" />
-											</div>
+											<ShowDatabaseAdvancedSettings
+												id={postgresId}
+												type="postgres"
+											/>
 										</div>
 									</TabsContent>
 								</Tabs>

apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx

@@ -1,15 +1,13 @@
-import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
-import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
 import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
-import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowExternalRedisCredentials } from "@/components/dashboard/redis/general/show-external-redis-credentials";
 import { ShowGeneralRedis } from "@/components/dashboard/redis/general/show-general-redis";
 import { ShowInternalRedisCredentials } from "@/components/dashboard/redis/general/show-internal-redis-credentials";
 import { UpdateRedis } from "@/components/dashboard/redis/update-redis";
+import { ShowDatabaseAdvancedSettings } from "@/components/dashboard/shared/show-database-advanced-settings";
 import { RedisIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
@@ -197,10 +195,10 @@ const Redis = (
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
+											<TabsTrigger value="logs">Logs</TabsTrigger>
 											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
-											<TabsTrigger value="logs">Logs</TabsTrigger>
 											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
@@ -272,11 +270,7 @@ const Redis = (
 									</TabsContent>
 									<TabsContent value="advanced">
 										<div className="flex flex-col gap-4 pt-2.5">
-											<div className="flex w-full flex-col gap-5 ">
-												<ShowCustomCommand id={redisId} type="redis" />
-												<ShowVolumes id={redisId} type="redis" />
-												<ShowResources id={redisId} type="redis" />
-											</div>
+											<ShowDatabaseAdvancedSettings id={redisId} type="redis" />
 										</div>
 									</TabsContent>
 								</Tabs>

apps/dokploy/public/templates/activepieces.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-  <path d="M 175.034 156.727 C 154.522 121.333 162.546 73.285 192.958 49.41 C 223.367 25.535 264.651 34.874 285.163 70.271 L 423.708 309.332 C 444.22 344.732 436.198 392.78 405.783 416.655 C 375.371 440.532 334.094 431.191 313.579 395.794 L 253.513 292.145 C 245.791 280.823 230.072 282.584 220.633 293.569 C 212.808 302.678 210.245 325.982 208.027 346.159 C 207.703 349.123 207.386 352.011 207.057 354.782 C 205.853 367.988 201.934 381.052 195.111 392.832 C 172.809 431.313 127.916 441.458 94.849 415.502 C 61.788 389.543 53.051 337.299 75.353 298.811 C 86.917 278.851 104.563 266.513 123.48 262.884 L 123.455 262.852 C 178.116 253.627 188.248 181.826 178.247 162.266 L 175.034 156.727 Z" fill="#8142E3" style=""/>
-</svg>

apps/dokploy/public/templates/alist.svg

@@ -1,10 +0,0 @@
-<svg width="1252" height="1252" xmlns="http://www.w3.org/2000/svg" version="1.1">
- <g>
-  <g id="#70c6beff">
-   <path id="svg_2" d="m634.37,138.38c11.88,-1.36 24.25,1.3 34.18,8.09c14.96,9.66 25.55,24.41 34.49,39.51c40.59,68.03 81.45,135.91 122.02,203.96c54.02,90.99 108.06,181.97 161.94,273.06c37.28,63 74.65,125.96 112.18,188.82c24.72,41.99 50.21,83.54 73.84,126.16c10.18,17.84 15.77,38.44 14.93,59.03c-0.59,15.92 -3.48,32.28 -11.84,46.08c-11.73,19.46 -31.39,33.2 -52.71,40.36c-11.37,4.09 -23.3,6.87 -35.43,6.89c-132.32,-0.05 -264.64,0.04 -396.95,0.03c-11.38,-0.29 -22.95,-1.6 -33.63,-5.72c-7.81,-3.33 -15.5,-7.43 -21.61,-13.42c-10.43,-10.32 -17.19,-24.96 -15.38,-39.83c0.94,-10.39 3.48,-20.64 7.76,-30.16c4.15,-9.77 9.99,-18.67 15.06,-27.97c22.13,-39.47 45.31,-78.35 69.42,-116.65c7.72,-12.05 14.44,-25.07 25.12,-34.87c11.35,-10.39 25.6,-18.54 41.21,-19.6c12.55,-0.52 24.89,3.82 35.35,10.55c11.8,6.92 21.09,18.44 24.2,31.88c4.49,17.01 -0.34,34.88 -7.55,50.42c-8.09,17.65 -19.62,33.67 -25.81,52.18c-1.13,4.21 -2.66,9.52 0.48,13.23c3.19,3 7.62,4.18 11.77,5.22c12,2.67 24.38,1.98 36.59,2.06c45,-0.01 90,0 135,0c8.91,-0.15 17.83,0.3 26.74,-0.22c6.43,-0.74 13.44,-1.79 18.44,-6.28c3.3,-2.92 3.71,-7.85 2.46,-11.85c-2.74,-8.86 -7.46,-16.93 -12.12,-24.89c-119.99,-204.91 -239.31,-410.22 -360.56,-614.4c-3.96,-6.56 -7.36,-13.68 -13.03,-18.98c-2.8,-2.69 -6.95,-4.22 -10.77,-3.11c-3.25,1.17 -5.45,4.03 -7.61,6.57c-5.34,6.81 -10.12,14.06 -14.51,21.52c-20.89,33.95 -40.88,68.44 -61.35,102.64c-117.9,198.43 -235.82,396.85 -353.71,595.29c-7.31,13.46 -15.09,26.67 -23.57,39.43c-7.45,10.96 -16.49,21.23 -28.14,27.83c-13.73,7.94 -30.69,11.09 -46.08,6.54c-11.23,-3.47 -22.09,-9.12 -30.13,-17.84c-10.18,-10.08 -14.69,-24.83 -14.17,-38.94c0.52,-14.86 5.49,-29.34 12.98,-42.1c71.58,-121.59 143.62,-242.92 215.93,-364.09c37.2,-62.8 74.23,-125.69 111.64,-188.36c37.84,-63.5 75.77,-126.94 113.44,-190.54c21.02,-35.82 42.19,-71.56 64.28,-106.74c6.79,-11.15 15.58,-21.15 26.16,-28.85c8.68,-5.92 18.42,-11 29.05,-11.94z" fill="#70c6be"/>
-  </g>
-  <g id="#1ba0d8ff">
-   <path id="svg_3" d="m628.35,608.38c17.83,-2.87 36.72,1.39 51.5,11.78c11.22,8.66 19.01,21.64 21.26,35.65c1.53,10.68 0.49,21.75 -3.44,31.84c-3.02,8.73 -7.35,16.94 -12.17,24.81c-68.76,115.58 -137.5,231.17 -206.27,346.75c-8.8,14.47 -16.82,29.47 -26.96,43.07c-7.37,9.11 -16.58,16.85 -27.21,21.89c-22.47,11.97 -51.79,4.67 -68.88,-13.33c-8.66,-8.69 -13.74,-20.63 -14.4,-32.84c-0.98,-12.64 1.81,-25.42 7.53,-36.69c5.03,-10.96 10.98,-21.45 17.19,-31.77c30.22,-50.84 60.17,-101.84 90.3,-152.73c41.24,-69.98 83.16,-139.55 124.66,-209.37c4.41,-7.94 9.91,-15.26 16.09,-21.9c8.33,-8.46 18.9,-15.3 30.8,-17.16z" fill="#1ba0d8"/>
-  </g>
- </g>
-</svg>

apps/dokploy/public/templates/appwrite.svg

@@ -1,9 +0,0 @@
-<svg class="max-w-full" xmlns="http://www.w3.org/2000/svg" width="112" height="98" viewBox="0 0 112 98"
-  fill="none">
-  <path
-    d="M111.1 73.4729V97.9638H48.8706C30.7406 97.9638 14.9105 88.114 6.44112 73.4729C5.2099 71.3444 4.13229 69.1113 3.22835 66.7935C1.45387 62.2516 0.338421 57.3779 0 52.2926V45.6712C0.0734729 44.5379 0.189248 43.4135 0.340647 42.3025C0.650124 40.0227 1.11768 37.7918 1.73218 35.6232C7.54544 15.0641 26.448 0 48.8706 0C71.2932 0 90.1935 15.0641 96.0068 35.6232H69.3985C65.0302 28.9216 57.4692 24.491 48.8706 24.491C40.272 24.491 32.711 28.9216 28.3427 35.6232C27.0113 37.6604 25.9782 39.9069 25.3014 42.3025C24.7002 44.4266 24.3796 46.6664 24.3796 48.9819C24.3796 56.0019 27.3319 62.3295 32.0653 66.7935C36.4515 70.9369 42.3649 73.4729 48.8706 73.4729H111.1Z"
-    fill="#FD366E" />
-  <path
-    d="M111.1 42.3027V66.7937H65.6759C70.4094 62.3297 73.3616 56.0021 73.3616 48.9821C73.3616 46.6666 73.041 44.4268 72.4399 42.3027H111.1Z"
-    fill="#FD366E" />
-</svg>

apps/dokploy/public/templates/aptabase.svg

@@ -1,5 +0,0 @@
-<svg class="w-12 text-primary" viewBox="0 0 1000 760" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#1a61ff"
-    d="M626.7 177.36c-55.8-98.4-197.59-98.4-253.39 0L112.97 636.44H500c0-51.67 41.88-93.55 93.55-93.55h22.09l57.82 93.55h213.57L626.69 177.37Zm-11.06 365.52-70.21-123.82c-20.01-35.28-70.84-35.28-90.85 0l-70.21 123.82H273.58l181.01-319.19c20.01-35.28 70.84-35.28 90.85 0l181.01 319.19H615.66Z"
-    style="--darkreader-inline-fill:currentColor" />
-</svg>

apps/dokploy/public/templates/blender.svg

@@ -1,153 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   width="11.567343mm"
-   height="15.032981mm"
-   viewBox="0 0 11.567343 15.03298"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="community_logo_black.svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#c8c8c8"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     showgrid="false"
-     showguides="true"
-     borderlayer="true"
-     fit-margin-top="1"
-     fit-margin-left="1"
-     fit-margin-right="1"
-     fit-margin-bottom="1"/>
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     id="layer1"
-     transform="translate(-115.93625,-150.07138)">
-    <g
-       transform="translate(-3.8788837,214.53487)"
-       id="g1369">
-      <path
-         style="opacity:1;fill:#000000;fill-opacity:0.07058824;stroke:none;stroke-width:0.31555739;stroke-miterlimit:1.41420996;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
-         d="m 121.59341,-62.933898 c -0.43151,0 -0.77882,0.347312 -0.77882,0.778817 v 7.918777 c 0,0.04214 0.004,0.08316 0.0106,0.12345 7.5e-4,0.0053 10e-4,0.01041 0.002,0.01567 0.001,0.0073 0.002,0.01466 0.004,0.02186 0.10284,0.693169 0.73757,1.119278 2.19888,2.190555 2.64127,1.936306 2.45943,1.935512 5.11716,0.02186 1.68877,-1.215962 2.28048,-1.590346 2.23197,-2.501308 v -7.790874 c 0,-0.431505 -0.34751,-0.778817 -0.77902,-0.778817 z"
-         id="path1373"/>
-      <path
-         id="path1323"
-         d="m 121.59341,-63.463065 c -0.43151,0 -0.77882,0.347312 -0.77882,0.778817 v 7.918777 c 0,0.04214 0.004,0.08316 0.0106,0.12345 7.5e-4,0.0053 10e-4,0.01041 0.002,0.01567 0.001,0.0073 0.002,0.01466 0.004,0.02186 0.10284,0.693169 0.73757,1.119278 2.19888,2.190555 2.64127,1.936306 2.45943,1.935512 5.11716,0.02186 1.68877,-1.215962 2.28048,-1.590346 2.23197,-2.501308 v -7.790874 c 0,-0.431505 -0.34751,-0.778817 -0.77902,-0.778817 z"
-         style="opacity:1;fill:#363636;fill-opacity:1;stroke:none;stroke-width:0.31555739;stroke-miterlimit:1.41420996;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
-      <g
-         style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996"
-         id="g1353"
-         transform="matrix(0.02054188,0,0,0.02054188,97.15326,-61.563495)">
-        <g
-           id="g1327"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1325"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 364.467,-333.746 c 0.171,-1.908 1.646,-3.118 3.899,-3.118 2.256,0 3.73,1.21 3.901,3.118 z m 7.569,4.711 c -0.577,1.414 -1.937,2.251 -3.784,2.251 -2.313,0 -3.87,-1.444 -3.933,-3.725 h 13.297 c 0,-0.237 0,-0.435 0,-0.671 0,-5.714 -3.354,-8.925 -9.364,-8.925 -5.836,0 -9.365,3.241 -9.365,8.324 0,5.114 3.584,8.35 9.365,8.35 3.469,0 6.159,-1.189 7.817,-3.279 z"/>
-        </g>
-        <g
-           id="g1331"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1329"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 305.468,-333.737 c 0.176,-1.908 1.651,-3.118 3.906,-3.118 2.252,0 3.726,1.21 3.899,3.118 z m 7.574,4.711 c -0.578,1.418 -1.937,2.255 -3.788,2.255 -2.309,0 -3.87,-1.448 -3.931,-3.73 h 13.294 c 0,-0.234 0,-0.431 0,-0.667 0,-5.717 -3.353,-8.929 -9.363,-8.929 -5.839,0 -9.361,3.242 -9.361,8.325 0,5.114 3.582,8.35 9.361,8.35 3.468,0 6.16,-1.185 7.821,-3.278 z"/>
-        </g>
-        <g
-           id="g1335"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <rect
-             id="rect1333"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             height="19.617001"
-             width="4.7950001"
-             y="-343.56"
-             x="293.90701" />
-        </g>
-        <g
-           id="g1339"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1337"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 319.81,-338.348 h 4.822 v 1.168 c 1.707,-1.822 3.757,-2.743 6.069,-2.743 2.663,0 4.679,0.921 5.72,2.489 0.869,1.295 0.926,2.858 0.926,4.912 v 8.579 h -4.829 v -7.538 c 0,-3.128 -0.629,-4.572 -3.375,-4.572 -2.775,0 -4.511,1.653 -4.511,4.428 v 7.682 h -4.822 z"/>
-        </g>
-        <g
-           id="g1343"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1341"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 352.876,-331.538 c 0,2.685 -1.794,4.446 -4.57,4.446 -2.778,0 -4.572,-1.701 -4.572,-4.415 0,-2.754 1.77,-4.454 4.572,-4.454 2.776,0 4.57,1.73 4.57,4.423 z m 0,-6.157 c -1.219,-1.307 -2.983,-2.024 -5.435,-2.024 -5.29,0 -8.902,3.262 -8.902,8.151 0,4.793 3.587,8.146 8.815,8.146 2.397,0 4.157,-0.606 5.522,-1.965 v 1.444 h 4.825 v -20.861 l -4.825,1.244 z"/>
-        </g>
-        <g
-           id="g1347"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1345"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 282.947,-335.961 c 2.804,0 4.567,1.7 4.567,4.454 0,2.714 -1.791,4.415 -4.567,4.415 -2.774,0 -4.566,-1.761 -4.566,-4.446 0,-2.693 1.792,-4.423 4.566,-4.423 z m -4.566,-7.599 -4.827,-1.244 v 20.861 h 4.827 v -1.444 c 1.358,1.359 3.121,1.965 5.52,1.965 5.231,0 8.813,-3.353 8.813,-8.146 0,-4.889 -3.613,-8.151 -8.9,-8.151 -2.457,0 -4.22,0.717 -5.433,2.024 z"/>
-        </g>
-        <g
-           id="g1351"
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           style="clip-rule:evenodd;fill:#d8d8d8;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996">
-          <path
-             id="path1349"
-             style="fill:#d8d8d8;fill-opacity:1;fill-rule:nonzero"
-             d="m 378.806,-323.943 v -14.405 h 4.825 v 0.89 c 1.445,-1.74 2.974,-2.606 4.713,-2.606 0.345,0 0.779,0.056 1.356,0.113 v 4.107 c -0.465,-0.061 -0.983,-0.061 -1.533,-0.061 -2.805,0 -4.536,1.85 -4.536,4.996 v 6.966 z"/>
-        </g>
-      </g>
-      <g
-         transform="matrix(0.04039667,0,0,0.04039667,81.604348,-55.892386)"
-         style="clip-rule:evenodd;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41420996"
-         id="g1367">
-        <g
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           id="g1361"
-           style="fill:#ffffff;fill-opacity:1">
-          <path
-             d="m 243.13,-333.715 c 0.106,-1.891 1.032,-3.557 2.429,-4.738 1.37,-1.16 3.214,-1.869 5.226,-1.869 2.01,0 3.854,0.709 5.225,1.869 1.396,1.181 2.322,2.847 2.429,4.736 0.106,1.943 -0.675,3.748 -2.045,5.086 -1.397,1.361 -3.384,2.215 -5.609,2.215 -2.225,0 -4.216,-0.854 -5.612,-2.215 -1.371,-1.338 -2.15,-3.143 -2.043,-5.084 z"
-             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero"
-             id="path1359" />
-        </g>
-        <g
-           transform="matrix(3.3451117,0,0,3.3451075,277.7359,1100.2048)"
-           id="g1365"
-           style="fill:#ffffff;fill-opacity:1">
-          <path
-             d="m 230.94,-329.894 c 0.013,0.74 0.249,2.178 0.603,3.301 0.744,2.377 2.006,4.576 3.762,6.514 1.802,1.992 4.021,3.592 6.584,4.728 2.694,1.193 5.613,1.801 8.645,1.796 3.027,-0.004 5.946,-0.624 8.64,-1.826 2.563,-1.147 4.78,-2.754 6.579,-4.747 1.755,-1.946 3.015,-4.149 3.761,-6.526 0.375,-1.201 0.612,-2.42 0.707,-3.643 0.093,-1.205 0.054,-2.412 -0.117,-3.618 -0.334,-2.35 -1.147,-4.555 -2.399,-6.565 -1.145,-1.847 -2.621,-3.464 -4.376,-4.825 l 0.004,-0.003 -17.711,-13.599 c -0.016,-0.012 -0.029,-0.025 -0.046,-0.036 -1.162,-0.892 -3.116,-0.889 -4.394,0.005 -1.292,0.904 -1.44,2.399 -0.29,3.342 l -0.005,0.005 7.387,6.007 -22.515,0.024 c -0.011,0 -0.022,0 -0.03,0 -1.861,0.002 -3.65,1.223 -4.004,2.766 -0.364,1.572 0.9,2.876 2.835,2.883 l -0.003,0.007 11.412,-0.022 -20.364,15.631 c -0.026,0.019 -0.054,0.039 -0.078,0.058 -1.921,1.471 -2.542,3.917 -1.332,5.465 1.228,1.574 3.839,1.577 5.78,0.009 l 11.114,-9.096 c 0,0 -0.162,1.228 -0.149,1.965 z m 28.559,4.112 c -2.29,2.333 -5.496,3.656 -8.965,3.663 -3.474,0.006 -6.68,-1.305 -8.97,-3.634 -1.119,-1.135 -1.941,-2.441 -2.448,-3.832 -0.497,-1.367 -0.69,-2.818 -0.562,-4.282 0.121,-1.431 0.547,-2.796 1.227,-4.031 0.668,-1.214 1.588,-2.311 2.724,-3.239 2.226,-1.814 5.06,-2.796 8.024,-2.8 2.967,-0.004 5.799,0.969 8.027,2.777 1.134,0.924 2.053,2.017 2.721,3.229 0.683,1.234 1.106,2.594 1.232,4.029 0.126,1.462 -0.067,2.911 -0.564,4.279 -0.508,1.395 -1.327,2.701 -2.446,3.841 z"
-             style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero"
-             id="path1363" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

apps/dokploy/public/templates/browserless.svg

@@ -1,13 +0,0 @@
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
-	<title>favicon</title>
-	<defs>
-		<linearGradient id="g1" x1="220.3" y1="854.7" x2="760.4" y2="517.2" gradientUnits="userSpaceOnUse">
-			<stop offset="0" stop-color="#ff3c95"/>
-			<stop offset="1" stop-color="#ffc550"/>
-		</linearGradient>
-	</defs>
-	<style>
-		.s0 { fill: url(#g1) } 
-	</style>
-	<path id="Path 0" class="s0" d="m243.9 0c0.3 0.1 26.4 15 115.1 66.5v411.8c0 391.6 0.1 411.7 1.8 411.2 0.9-0.3 69.7-34 304.1-149l0.1-61.8c0-48.9-0.3-61.6-1.3-61.3-0.6 0.2-43.6 20-95.5 44-51.8 24-94.4 43.5-94.7 43.3-0.2-0.1-0.3-128.3 0-569.6l115.5 68 1.1 256.4 191.4 111.4 0.5 243.6-213.1 104.5c-117.2 57.5-213.9 104.6-214.8 104.8-0.9 0.2-26.5-16.3-112.2-73.3l0.1-296.5c0-163.1 0.3-376.9 0.7-475.2 0.3-98.4 0.9-178.8 1.2-178.8z"/>
-</svg>

apps/dokploy/public/templates/budibase.svg

@@ -1,13 +0,0 @@
-<svg width="265" height="265" viewBox="0 0 265 265" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1_1799)">
-<path d="M158.2 8.6V116.6C158.2 121.3 162 125.2 166.8 125.2H213.8C218 125.2 222 123.2 224.6 119.8L262.9 68.9C265.7 65.2 265.7 60.1 262.9 56.4L224.6 5.4C222 2 218 0 213.8 0H166.8C162 0 158.2 3.8 158.2 8.6Z" fill="#FF4E4E"/>
-<path d="M158.2 148.4V256.4C158.2 261.1 162 265 166.8 265H213.8C218 265 222 263 224.6 259.6L262.9 208.7C265.7 205 265.7 199.9 262.9 196.2L224.6 145.3C222.1 141.9 218.1 139.9 213.8 139.9H166.8C162 139.8 158.2 143.7 158.2 148.4Z" fill="#6E56FF"/>
-<path d="M0 8.6V116.6C0 121.3 3.8 125.2 8.6 125.2H109.6C113.8 125.2 117.8 123.2 120.4 119.8L155.9 72.5C160.3 66.6 160.3 58.5 155.9 52.6L120.3 5.4C117.8 2 113.8 0 109.5 0H8.6C3.8 0 0 3.8 0 8.6Z" fill="#F97777"/>
-<path d="M0 148.4V256.4C0 261.1 3.8 265 8.6 265H109.6C113.8 265 117.8 263 120.4 259.6L155.9 212.3C160.3 206.4 160.3 198.3 155.9 192.4L120.4 145.1C117.9 141.7 113.9 139.7 109.6 139.7H8.6C3.8 139.8 0 143.7 0 148.4Z" fill="#9F8FFF"/>
-</g>
-<defs>
-<clipPath id="clip0_1_1799">
-<rect width="265" height="265" fill="white"/>
-</clipPath>
-</defs>
-</svg>