Merge pull request #1530 from Dokploy/feat/add-date-to-restore-item

feat(backup): enhance RestoreBackup component and API to include serv…

CONTRIBUTING.md

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

apps/dokploy/CONTRIBUTING.md

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

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

@@ -27,6 +27,7 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
+	cleanCache: false,
 	watchPaths: [],
 	applicationStatus: "done",
 	appName: "",

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

@@ -166,7 +166,38 @@ describe("processTemplate", () => {
 			if (!baseUrl || !secretKey) return;
 
 			expect(baseUrl).toContain(mockSchema.projectName);
-			expect(secretKey.split("=")[1]).toHaveLength(64);
+			const base64Value = secretKey.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(86);
+			expect(base64Value.length).toBeLessThanOrEqual(88);
+		});
+
+		it("should process env vars when provided as an array", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: [
+						'CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"',
+						'ANOTHER_VAR="some value"',
+						"DOMAIN=${domain}",
+					],
+					mounts: [],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+
+			// Should preserve exact format for static values
+			expect(result.envs[0]).toBe('CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"');
+			expect(result.envs[1]).toBe('ANOTHER_VAR="some value"');
+
+			// Should process variables in array items
+			expect(result.envs[2]).toContain(mockSchema.projectName);
 		});
 
 		it("should allow using utility functions directly in env vars", () => {
@@ -195,7 +226,12 @@ describe("processTemplate", () => {
 			if (!randomDomainEnv || !secretKeyEnv) return;
 
 			expect(randomDomainEnv).toContain(mockSchema.projectName);
-			expect(secretKeyEnv.split("=")[1]).toHaveLength(32);
+			const base64Value = secretKeyEnv.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(42);
+			expect(base64Value.length).toBeLessThanOrEqual(44);
 		});
 	});
 
@@ -325,8 +361,22 @@ describe("processTemplate", () => {
 			if (!baseUrl || !secretKey || !totpKey) return;
 
 			expect(baseUrl).toContain(mockSchema.projectName);
-			expect(secretKey.split("=")[1]).toHaveLength(64);
-			expect(totpKey.split("=")[1]).toHaveLength(32);
+
+			// Check base64 lengths and format
+			const secretKeyValue = secretKey.split("=")[1];
+			const totpKeyValue = totpKey.split("=")[1];
+
+			expect(secretKeyValue).toBeDefined();
+			expect(totpKeyValue).toBeDefined();
+			if (!secretKeyValue || !totpKeyValue) return;
+
+			expect(secretKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(secretKeyValue.length).toBeGreaterThanOrEqual(86);
+			expect(secretKeyValue.length).toBeLessThanOrEqual(88);
+
+			expect(totpKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(totpKeyValue.length).toBeGreaterThanOrEqual(42);
+			expect(totpKeyValue.length).toBeLessThanOrEqual(44);
 
 			// Check mounts
 			expect(result.mounts).toHaveLength(1);
@@ -334,8 +384,8 @@ describe("processTemplate", () => {
 			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}/);
+			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{86,88}/);
+			expect(mount.content).toMatch(/totp=[A-Za-z0-9+/]{42,44}/);
 		});
 	});
 

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

@@ -7,6 +7,7 @@ import { expect, test } from "vitest";
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
+	cleanCache: false,
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,

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

@@ -42,6 +42,7 @@ import { domain } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Dices } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domain>;
 
@@ -83,6 +84,13 @@ export const AddDomain = ({
 	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
 		api.domain.generateDomain.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: application?.serverId || "",
+		});
+
+	console.log("canGenerateTraefikMeDomains", canGenerateTraefikMeDomains);
+
 	const form = useForm<Domain>({
 		resolver: zodResolver(domain),
 		defaultValues: {
@@ -186,6 +194,21 @@ export const AddDomain = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{application?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>

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

@@ -468,16 +468,6 @@ 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/show.tsx

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

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

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

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

@@ -42,6 +42,7 @@ import { domainCompose } from "@/server/db/validations/domain";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
 import type z from "zod";
+import Link from "next/link";
 
 type Domain = z.infer<typeof domainCompose>;
 
@@ -102,6 +103,11 @@ export const AddDomainCompose = ({
 		? api.domain.update.useMutation()
 		: api.domain.create.useMutation();
 
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: compose?.serverId || "",
+		});
+
 	const form = useForm<Domain>({
 		resolver: zodResolver(domainCompose),
 		defaultValues: {
@@ -313,6 +319,21 @@ export const AddDomainCompose = ({
 									name="host"
 									render={({ field }) => (
 										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{compose?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
 											<FormLabel>Host</FormLabel>
 											<div className="flex gap-2">
 												<FormControl>

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

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

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

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

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

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

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

@@ -20,6 +20,7 @@ import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";
 import { UpdateBackup } from "./update-backup";
+import { RestoreBackup } from "./restore-backup";
 import { useState } from "react";
 
 interface Props {
@@ -27,7 +28,9 @@ interface Props {
 	type: Exclude<ServiceType, "application" | "redis">;
 }
 export const ShowBackups = ({ id, type }: Props) => {
-	const [activeManualBackup, setActiveManualBackup] = useState<string | undefined>();
+	const [activeManualBackup, setActiveManualBackup] = useState<
+		string | undefined
+	>();
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -69,7 +72,14 @@ export const ShowBackups = ({ id, type }: Props) => {
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
+						<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+						<RestoreBackup
+							databaseId={id}
+							databaseType={type}
+							serverId={postgres.serverId}
+						/>
+					</div>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -96,11 +106,18 @@ export const ShowBackups = ({ id, type }: Props) => {
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<AddBackup
-									databaseId={id}
-									databaseType={type}
-									refetch={refetch}
-								/>
+								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+									<AddBackup
+										databaseId={id}
+										databaseType={type}
+										refetch={refetch}
+									/>
+									<RestoreBackup
+										databaseId={id}
+										databaseType={type}
+										serverId={postgres.serverId}
+									/>
+								</div>
 							</div>
 						) : (
 							<div className="flex flex-col pt-2">
@@ -142,7 +159,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 													<div className="flex flex-col gap-1">
 														<span className="font-medium">Keep Latest</span>
 														<span className="text-sm text-muted-foreground">
-															{backup.keepLatestCount || 'All'}
+															{backup.keepLatestCount || "All"}
 														</span>
 													</div>
 												</div>
@@ -153,7 +170,10 @@ export const ShowBackups = ({ id, type }: Props) => {
 																<Button
 																	type="button"
 																	variant="ghost"
-																	isLoading={isManualBackup && activeManualBackup === backup.backupId}
+																	isLoading={
+																		isManualBackup &&
+																		activeManualBackup === backup.backupId
+																	}
 																	onClick={async () => {
 																		setActiveManualBackup(backup.backupId);
 																		await manualBackup({
@@ -178,6 +198,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 															<TooltipContent>Run Manual Backup</TooltipContent>
 														</Tooltip>
 													</TooltipProvider>
+
 													<UpdateBackup
 														backupId={backup.backupId}
 														refetch={refetch}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -324,7 +324,7 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 											)}
 										>
 											<img
-												src={`${customBaseUrl || "https://dokploy.github.io/templates"}/blueprints/${template.id}/${template.logo}`}
+												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template.id}/${template.logo}`}
 												className={cn(
 													"object-contain",
 													viewMode === "detailed" ? "size-24" : "size-16",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -59,9 +59,7 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 								.then(async () => {
 									toast.success("Traefik Reloaded");
 								})
-								.catch(() => {
-									toast.error("Error reloading Traefik");
-								});
+								.catch(() => {});
 						}}
 						className="cursor-pointer"
 					>

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

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

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

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

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

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

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

@@ -21,6 +21,8 @@ import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import type React from "react";
 import { useEffect, useState } from "react";
+import { badgeStateColor } from "../../application/logs/show";
+import { Badge } from "@/components/ui/badge";
 
 export const DockerLogsId = dynamic(
 	() =>
@@ -90,7 +92,10 @@ export const ShowModalLogs = ({
 										key={container.containerId}
 										value={container.containerId}
 									>
-										{container.name} ({container.containerId}) {container.state}
+										{container.name} ({container.containerId}){" "}
+										<Badge variant={badgeStateColor(container.state)}>
+											{container.state}
+										</Badge>
 									</SelectItem>
 								))}
 								<SelectLabel>Containers ({data?.length})</SelectLabel>

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

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

apps/dokploy/components/layouts/side.tsx

@@ -908,7 +908,7 @@ export default function Page({ children }: Props) {
 					</SidebarGroup>
 					<SidebarGroup>
 						<SidebarGroupLabel>Settings</SidebarGroupLabel>
-						<SidebarMenu className="gap-2">
+						<SidebarMenu className="gap-1">
 							{filteredSettings.map((item) => {
 								const isSingle = item.isSingle !== false;
 								const isActive = isSingle
@@ -1068,7 +1068,7 @@ export default function Page({ children }: Props) {
 					</header>
 				)}
 
-				<div className="flex flex-col w-full gap-4 p-4 pt-0">{children}</div>
+				<div className="flex flex-col w-full p-4 pt-0">{children}</div>
 			</SidebarInset>
 		</SidebarProvider>
 	);

apps/dokploy/components/ui/input.tsx

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

apps/dokploy/drizzle/0078_uneven_omega_sentinel.sql

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

apps/dokploy/drizzle/meta/_journal.json

@@ -547,6 +547,13 @@
       "when": 1741510086231,
       "tag": "0077_chemical_dreadnoughts",
       "breakpoints": true
+    },
+    {
+      "idx": 78,
+      "version": "7",
+      "when": 1742112194375,
+      "tag": "0078_uneven_omega_sentinel",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.20.1",
+	"version": "v0.20.6",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -93,7 +93,7 @@
 		"adm-zip": "^0.5.14",
 		"ai": "^4.0.23",
 		"bcrypt": "5.1.1",
-		"better-auth": "1.2.0",
+		"better-auth": "1.2.4",
 		"bl": "6.0.11",
 		"boxen": "^7.1.1",
 		"bullmq": "5.4.2",

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

@@ -93,6 +93,7 @@ export default async function handler(
 		try {
 			const branchName = githubBody?.ref?.replace("refs/heads/", "");
 			const repository = githubBody?.repository?.name;
+
 			const deploymentTitle = extractCommitMessage(req.headers, req.body);
 			const deploymentHash = extractHash(req.headers, req.body);
 			const owner = githubBody?.repository?.owner?.name;
@@ -107,6 +108,7 @@ export default async function handler(
 					eq(applications.branch, branchName),
 					eq(applications.repository, repository),
 					eq(applications.owner, owner),
+					eq(applications.githubId, githubResult.githubId),
 				),
 			});
 
@@ -151,6 +153,7 @@ export default async function handler(
 					eq(compose.branch, branchName),
 					eq(compose.repository, repository),
 					eq(compose.owner, owner),
+					eq(compose.githubId, githubResult.githubId),
 				),
 			});
 
@@ -240,6 +243,7 @@ export default async function handler(
 					eq(applications.branch, branch),
 					eq(applications.isPreviewDeploymentsActive, true),
 					eq(applications.owner, owner),
+					eq(applications.githubId, githubResult.githubId),
 				),
 				with: {
 					previewDeployments: true,

apps/dokploy/public/locales/en/settings.json

@@ -1,6 +1,6 @@
 {
 	"settings.common.save": "Save",
-	"settings.common.enterTerminal": "Enter the terminal",
+	"settings.common.enterTerminal": "Terminal",
 	"settings.server.domain.title": "Server Domain",
 	"settings.server.domain.description": "Add a domain to your server application.",
 	"settings.server.domain.form.domain": "Domain",
@@ -14,7 +14,7 @@
 	"settings.server.webServer.description": "Reload or clean the web server.",
 	"settings.server.webServer.actions": "Actions",
 	"settings.server.webServer.reload": "Reload",
-	"settings.server.webServer.watchLogs": "Watch logs",
+	"settings.server.webServer.watchLogs": "View Logs",
 	"settings.server.webServer.updateServerIp": "Update Server IP",
 	"settings.server.webServer.server.label": "Server",
 	"settings.server.webServer.traefik.label": "Traefik",

apps/dokploy/server/api/routers/backup.ts

@@ -11,9 +11,13 @@ import {
 	createBackup,
 	findBackupById,
 	findMariadbByBackupId,
+	findMariadbById,
 	findMongoByBackupId,
+	findMongoById,
 	findMySqlByBackupId,
+	findMySqlById,
 	findPostgresByBackupId,
+	findPostgresById,
 	findServerById,
 	removeBackupById,
 	removeScheduleBackup,
@@ -26,6 +30,20 @@ import {
 } from "@dokploy/server";
 
 import { TRPCError } from "@trpc/server";
+import { z } from "zod";
+import {
+	execAsync,
+	execAsyncRemote,
+} from "@dokploy/server/utils/process/execAsync";
+import { getS3Credentials } from "@dokploy/server/utils/backups/utils";
+import { findDestinationById } from "@dokploy/server/services/destination";
+import {
+	restoreMariadbBackup,
+	restoreMongoBackup,
+	restoreMySqlBackup,
+	restorePostgresBackup,
+} from "@dokploy/server/utils/restore";
+import { observable } from "@trpc/server/observable";
 
 export const backupRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -209,27 +227,146 @@ export const backupRouter = createTRPCRouter({
 				});
 			}
 		}),
+	listBackupFiles: protectedProcedure
+		.input(
+			z.object({
+				destinationId: z.string(),
+				search: z.string(),
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			try {
+				const destination = await findDestinationById(input.destinationId);
+				const rcloneFlags = getS3Credentials(destination);
+				const bucketPath = `:s3:${destination.bucket}`;
+
+				const lastSlashIndex = input.search.lastIndexOf("/");
+				const baseDir =
+					lastSlashIndex !== -1
+						? input.search.slice(0, lastSlashIndex + 1)
+						: "";
+				const searchTerm =
+					lastSlashIndex !== -1
+						? input.search.slice(lastSlashIndex + 1)
+						: input.search;
+
+				const searchPath = baseDir ? `${bucketPath}/${baseDir}` : bucketPath;
+				const listCommand = `rclone lsf ${rcloneFlags.join(" ")} "${searchPath}" | head -n 100`;
+
+				let stdout = "";
+
+				if (input.serverId) {
+					const result = await execAsyncRemote(listCommand, input.serverId);
+					stdout = result.stdout;
+				} else {
+					const result = await execAsync(listCommand);
+					stdout = result.stdout;
+				}
+
+				const files = stdout.split("\n").filter(Boolean);
+
+				const results = baseDir
+					? files.map((file) => `${baseDir}${file}`)
+					: files;
+
+				if (searchTerm) {
+					return results.filter((file) =>
+						file.toLowerCase().includes(searchTerm.toLowerCase()),
+					);
+				}
+
+				return results;
+			} catch (error) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message:
+						error instanceof Error
+							? error.message
+							: "Error listing backup files",
+					cause: error,
+				});
+			}
+		}),
+
+	restoreBackupWithLogs: protectedProcedure
+		.meta({
+			openapi: {
+				enabled: false,
+				path: "/restore-backup-with-logs",
+				method: "POST",
+				override: true,
+			},
+		})
+		.input(
+			z.object({
+				databaseId: z.string(),
+				databaseType: z.enum(["postgres", "mysql", "mariadb", "mongo"]),
+				databaseName: z.string().min(1),
+				backupFile: z.string().min(1),
+				destinationId: z.string().min(1),
+			}),
+		)
+		.subscription(async ({ input }) => {
+			const destination = await findDestinationById(input.destinationId);
+			if (input.databaseType === "postgres") {
+				const postgres = await findPostgresById(input.databaseId);
+
+				return observable<string>((emit) => {
+					restorePostgresBackup(
+						postgres,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mysql") {
+				const mysql = await findMySqlById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMySqlBackup(
+						mysql,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mariadb") {
+				const mariadb = await findMariadbById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMariadbBackup(
+						mariadb,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+			if (input.databaseType === "mongo") {
+				const mongo = await findMongoById(input.databaseId);
+				return observable<string>((emit) => {
+					restoreMongoBackup(
+						mongo,
+						destination,
+						input.databaseName,
+						input.backupFile,
+						(log) => {
+							emit.next(log);
+						},
+					);
+				});
+			}
+
+			return true;
+		}),
 });
-
-// export const getAdminId = async (backupId: string) => {
-// 	const backup = await findBackupById(backupId);
-
-// 	if (backup.databaseType === "postgres" && backup.postgresId) {
-// 		const postgres = await findPostgresById(backup.postgresId);
-// 		return postgres.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mariadb" && backup.mariadbId) {
-// 		const mariadb = await findMariadbById(backup.mariadbId);
-// 		return mariadb.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mysql" && backup.mysqlId) {
-// 		const mysql = await findMySqlById(backup.mysqlId);
-// 		return mysql.project.adminId;
-// 	}
-// 	if (backup.databaseType === "mongo" && backup.mongoId) {
-// 		const mongo = await findMongoById(backup.mongoId);
-// 		return mongo.project.adminId;
-// 	}
-
-// 	return null;
-// };

apps/dokploy/server/api/routers/cluster.ts

@@ -1,22 +1,35 @@
 import { getPublicIpWithFallback } from "@/server/wss/terminal";
-import { type DockerNode, IS_CLOUD, docker, execAsync } from "@dokploy/server";
+import {
+	type DockerNode,
+	IS_CLOUD,
+	execAsync,
+	getRemoteDocker,
+} from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
-
 export const clusterRouter = createTRPCRouter({
-	getNodes: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
-			return [];
-		}
-		const workers: DockerNode[] = await docker.listNodes();
+	getNodes: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			if (IS_CLOUD) {
+				return [];
+			}
 
-		return workers;
-	}),
+			const docker = await getRemoteDocker(input.serverId);
+			const workers: DockerNode[] = await docker.listNodes();
+
+			return workers;
+		}),
 	removeWorker: protectedProcedure
 		.input(
 			z.object({
 				nodeId: z.string(),
+				serverId: z.string().optional(),
 			}),
 		)
 		.mutation(async ({ input }) => {
@@ -40,37 +53,51 @@ export const clusterRouter = createTRPCRouter({
 				});
 			}
 		}),
-	addWorker: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
-			return {
-				command: "",
-				version: "",
-			};
-		}
-		const result = await docker.swarmInspect();
-		const docker_version = await docker.version();
+	addWorker: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			if (IS_CLOUD) {
+				return {
+					command: "",
+					version: "",
+				};
+			}
+			const docker = await getRemoteDocker(input.serverId);
+			const result = await docker.swarmInspect();
+			const docker_version = await docker.version();
 
-		return {
-			command: `docker swarm join --token ${
-				result.JoinTokens.Worker
-			} ${await getPublicIpWithFallback()}:2377`,
-			version: docker_version.Version,
-		};
-	}),
-	addManager: protectedProcedure.query(async () => {
-		if (IS_CLOUD) {
 			return {
-				command: "",
-				version: "",
+				command: `docker swarm join --token ${
+					result.JoinTokens.Worker
+				} ${await getPublicIpWithFallback()}:2377`,
+				version: docker_version.Version,
 			};
-		}
-		const result = await docker.swarmInspect();
-		const docker_version = await docker.version();
-		return {
-			command: `docker swarm join --token ${
-				result.JoinTokens.Manager
-			} ${await getPublicIpWithFallback()}:2377`,
-			version: docker_version.Version,
-		};
-	}),
+		}),
+	addManager: protectedProcedure
+		.input(
+			z.object({
+				serverId: z.string().optional(),
+			}),
+		)
+		.query(async ({ input }) => {
+			if (IS_CLOUD) {
+				return {
+					command: "",
+					version: "",
+				};
+			}
+			const docker = await getRemoteDocker(input.serverId);
+			const result = await docker.swarmInspect();
+			const docker_version = await docker.version();
+			return {
+				command: `docker swarm join --token ${
+					result.JoinTokens.Manager
+				} ${await getPublicIpWithFallback()}:2377`,
+				version: docker_version.Version,
+			};
+		}),
 });

apps/dokploy/server/api/routers/compose.ts

@@ -437,13 +437,12 @@ export const composeRouter = createTRPCRouter({
 				serverIp = "127.0.0.1";
 			}
 
+			const projectName = slugify(`${project.name} ${input.id}`);
 			const generate = processTemplate(template.config, {
 				serverIp: serverIp,
-				projectName: project.name,
+				projectName: projectName,
 			});
 
-			const projectName = slugify(`${project.name} ${input.id}`);
-
 			const compose = await createComposeByTemplate({
 				...input,
 				composeFile: template.dockerCompose,
@@ -607,7 +606,7 @@ export const composeRouter = createTRPCRouter({
 
 				const processedTemplate = processTemplate(config, {
 					serverIp: serverIp,
-					projectName: compose.project.name,
+					projectName: compose.appName,
 				});
 
 				return {
@@ -676,7 +675,7 @@ export const composeRouter = createTRPCRouter({
 
 				const processedTemplate = processTemplate(config, {
 					serverIp: serverIp,
-					projectName: compose.project.name,
+					projectName: compose.appName,
 				});
 
 				// Update compose file

apps/dokploy/server/api/routers/domain.ts

@@ -13,7 +13,9 @@ import {
 	findDomainById,
 	findDomainsByApplicationId,
 	findDomainsByComposeId,
+	findOrganizationById,
 	findPreviewDeploymentById,
+	findServerById,
 	generateTraefikMeDomain,
 	manageDomain,
 	removeDomain,
@@ -94,6 +96,19 @@ export const domainRouter = createTRPCRouter({
 				input.serverId,
 			);
 		}),
+	canGenerateTraefikMeDomains: protectedProcedure
+		.input(z.object({ serverId: z.string() }))
+		.query(async ({ input, ctx }) => {
+			const organization = await findOrganizationById(
+				ctx.session.activeOrganizationId,
+			);
+
+			if (input.serverId) {
+				const server = await findServerById(input.serverId);
+				return server.ipAddress;
+			}
+			return organization?.owner.serverIp;
+		}),
 
 	update: protectedProcedure
 		.input(apiUpdateDomain)

apps/dokploy/server/api/routers/settings.ts

@@ -97,14 +97,20 @@ export const settingsRouter = createTRPCRouter({
 	toggleDashboard: adminProcedure
 		.input(apiEnableDashboard)
 		.mutation(async ({ input }) => {
+			const ports = (await getTraefikPorts(input.serverId)).filter(
+				(port) =>
+					port.targetPort !== 80 &&
+					port.targetPort !== 443 &&
+					port.targetPort !== 8080,
+			);
 			await initializeTraefik({
+				additionalPorts: ports,
 				enableDashboard: input.enableDashboard,
 				serverId: input.serverId,
 				force: true,
 			});
 			return true;
 		}),
-
 	cleanUnusedImages: adminProcedure
 		.input(apiServerSchema)
 		.mutation(async ({ input }) => {
@@ -749,7 +755,6 @@ export const settingsRouter = createTRPCRouter({
 					z.object({
 						targetPort: z.number(),
 						publishedPort: z.number(),
-						publishMode: z.enum(["ingress", "host"]).default("host"),
 					}),
 				),
 			}),
@@ -782,59 +787,7 @@ export const settingsRouter = createTRPCRouter({
 	getTraefikPorts: adminProcedure
 		.input(apiServerSchema)
 		.query(async ({ input }) => {
-			const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
-
-			try {
-				let stdout = "";
-				if (input?.serverId) {
-					const result = await execAsyncRemote(input.serverId, command);
-					stdout = result.stdout;
-				} else if (!IS_CLOUD) {
-					const result = await execAsync(command);
-					stdout = result.stdout;
-				}
-
-				const portsMap = JSON.parse(stdout.trim());
-				const additionalPorts: Array<{
-					targetPort: number;
-					publishedPort: number;
-					publishMode: "host" | "ingress";
-				}> = [];
-
-				// Convert the Docker container port format to our expected format
-				for (const [containerPort, bindings] of Object.entries(portsMap)) {
-					if (!bindings) continue;
-
-					const [port = ""] = containerPort.split("/");
-					if (!port) continue;
-
-					const targetPortNum = Number.parseInt(port, 10);
-					if (Number.isNaN(targetPortNum)) continue;
-
-					// Skip default ports
-					if ([80, 443, 8080].includes(targetPortNum)) continue;
-
-					for (const binding of bindings as Array<{ HostPort: string }>) {
-						if (!binding.HostPort) continue;
-						const publishedPort = Number.parseInt(binding.HostPort, 10);
-						if (Number.isNaN(publishedPort)) continue;
-
-						additionalPorts.push({
-							targetPort: targetPortNum,
-							publishedPort,
-							publishMode: "host", // Docker standalone uses host mode by default
-						});
-					}
-				}
-
-				return additionalPorts;
-			} catch (error) {
-				throw new TRPCError({
-					code: "INTERNAL_SERVER_ERROR",
-					message: "Failed to get Traefik ports",
-					cause: error,
-				});
-			}
+			return await getTraefikPorts(input?.serverId);
 		}),
 	updateLogCleanup: adminProcedure
 		.input(
@@ -853,3 +806,56 @@ export const settingsRouter = createTRPCRouter({
 		return getLogCleanupStatus();
 	}),
 });
+
+export const getTraefikPorts = async (serverId?: string) => {
+	const command = `docker container inspect --format='{{json .NetworkSettings.Ports}}' dokploy-traefik`;
+	try {
+		let stdout = "";
+		if (serverId) {
+			const result = await execAsyncRemote(serverId, command);
+			stdout = result.stdout;
+		} else if (!IS_CLOUD) {
+			const result = await execAsync(command);
+			stdout = result.stdout;
+		}
+
+		const portsMap = JSON.parse(stdout.trim());
+		const additionalPorts: Array<{
+			targetPort: number;
+			publishedPort: number;
+		}> = [];
+
+		// Convert the Docker container port format to our expected format
+		for (const [containerPort, bindings] of Object.entries(portsMap)) {
+			if (!bindings) continue;
+
+			const [port = ""] = containerPort.split("/");
+			if (!port) continue;
+
+			const targetPortNum = Number.parseInt(port, 10);
+			if (Number.isNaN(targetPortNum)) continue;
+
+			// Skip default ports
+			if ([80, 443].includes(targetPortNum)) continue;
+
+			for (const binding of bindings as Array<{ HostPort: string }>) {
+				if (!binding.HostPort) continue;
+				const publishedPort = Number.parseInt(binding.HostPort, 10);
+				if (Number.isNaN(publishedPort)) continue;
+
+				additionalPorts.push({
+					targetPort: targetPortNum,
+					publishedPort,
+				});
+			}
+		}
+
+		return additionalPorts;
+	} catch (error) {
+		throw new TRPCError({
+			code: "INTERNAL_SERVER_ERROR",
+			message: "Failed to get Traefik ports",
+			cause: error,
+		});
+	}
+};

apps/dokploy/server/wss/listen-deployment.ts

@@ -61,7 +61,6 @@ export const setupDeploymentLogsWebSocketServer = (
 							}
 							stream
 								.on("close", () => {
-									console.log("Connection closed ✅");
 									client.end();
 									ws.close();
 								})
@@ -86,7 +85,6 @@ export const setupDeploymentLogsWebSocketServer = (
 					});
 
 				ws.on("close", () => {
-					console.log("Connection closed ✅, From WS");
 					client.end();
 				});
 			} else {

apps/dokploy/tailwind.config.ts

@@ -22,6 +22,9 @@ const config = {
 			fontFamily: {
 				sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
 			},
+			screens: {
+				"3xl": "120rem",
+			},
 			maxWidth: {
 				"2xl": "40rem",
 				"8xl": "85rem",

packages/server/package.json

@@ -40,7 +40,7 @@
     "@oslojs/encoding":"1.1.0",
     "@oslojs/crypto":"1.0.1",
     "drizzle-dbml-generator":"0.10.0",
-    "better-auth":"1.2.0",
+    "better-auth":"1.2.4",
     "@faker-js/faker": "^8.4.1",
     "@lucia-auth/adapter-drizzle": "1.0.7",
     "@octokit/auth-app": "^6.0.4",

packages/server/src/db/schema/application.ts

@@ -141,6 +141,7 @@ export const applications = pgTable("application", {
 	command: text("command"),
 	refreshToken: text("refreshToken").$defaultFn(() => nanoid()),
 	sourceType: sourceType("sourceType").notNull().default("github"),
+	cleanCache: boolean("cleanCache").default(false),
 	// Github
 	repository: text("repository"),
 	owner: text("owner"),
@@ -408,6 +409,7 @@ const createSchema = createInsertSchema(applications, {
 	previewPath: z.string().optional(),
 	previewCertificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
 	watchPaths: z.array(z.string()).optional(),
+	cleanCache: z.boolean().optional(),
 });
 
 export const apiCreateApplication = createSchema.pick({

packages/server/src/db/schema/schema.dbml

@@ -159,6 +159,7 @@ table application {
   command text
   refreshToken text
   sourceType sourceType [not null, default: 'github']
+  cleanCache boolean [default: false]
   repository text
   owner text
   branch text

packages/server/src/lib/auth.ts

@@ -8,6 +8,10 @@ import { db } from "../db";
 import * as schema from "../db/schema";
 import { sendEmail } from "../verification/send-verification-email";
 import { IS_CLOUD } from "../constants";
+import { getPublicIpWithFallback } from "../wss/utils";
+import { updateUser } from "../services/user";
+import { getUserByToken } from "../services/admin";
+import { APIError } from "better-auth/api";
 
 const { handler, api } = betterAuth({
 	database: drizzleAdapter(db, {
@@ -28,6 +32,26 @@ const { handler, api } = betterAuth({
 			clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
 		},
 	},
+	...(!IS_CLOUD && {
+		async trustedOrigins() {
+			const admin = await db.query.member.findFirst({
+				where: eq(schema.member.role, "owner"),
+				with: {
+					user: true,
+				},
+			});
+
+			if (admin) {
+				return [
+					...(admin.user.serverIp
+						? [`http://${admin.user.serverIp}:3000`]
+						: []),
+					...(admin.user.host ? [`https://${admin.user.host}`] : []),
+				];
+			}
+			return [];
+		},
+	}),
 	emailVerification: {
 		sendOnSignUp: true,
 		autoSignInAfterVerification: true,
@@ -68,11 +92,40 @@ const { handler, api } = betterAuth({
 	databaseHooks: {
 		user: {
 			create: {
+				before: async (_user, context) => {
+					if (!IS_CLOUD) {
+						const xDokployToken =
+							context?.request?.headers?.get("x-dokploy-token");
+						if (xDokployToken) {
+							const user = await getUserByToken(xDokployToken);
+							if (!user) {
+								throw new APIError("BAD_REQUEST", {
+									message: "User not found",
+								});
+							}
+						} else {
+							const isAdminPresent = await db.query.member.findFirst({
+								where: eq(schema.member.role, "owner"),
+							});
+							if (isAdminPresent) {
+								throw new APIError("BAD_REQUEST", {
+									message: "Admin is already created",
+								});
+							}
+						}
+					}
+				},
 				after: async (user) => {
 					const isAdminPresent = await db.query.member.findFirst({
 						where: eq(schema.member.role, "owner"),
 					});
 
+					if (!IS_CLOUD) {
+						await updateUser(user.id, {
+							serverIp: await getPublicIpWithFallback(),
+						});
+					}
+
 					if (IS_CLOUD || !isAdminPresent) {
 						await db.transaction(async (tx) => {
 							const organization = await tx
@@ -117,6 +170,10 @@ const { handler, api } = betterAuth({
 			},
 		},
 	},
+	session: {
+		expiresIn: 60 * 60 * 24 * 3,
+		updateAge: 60 * 60 * 24,
+	},
 	user: {
 		modelName: "users_temp",
 		additionalFields: {

packages/server/src/services/application.ts

@@ -182,12 +182,6 @@ export const deployApplication = async ({
 	});
 
 	try {
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheApplications) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
-
 		if (application.sourceType === "github") {
 			await cloneGithubRepository({
 				...application,
@@ -257,11 +251,6 @@ export const rebuildApplication = async ({
 	});
 
 	try {
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheApplications) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
 		if (application.sourceType === "github") {
 			await buildApplication(application, deployment.logPath);
 		} else if (application.sourceType === "gitlab") {
@@ -306,11 +295,6 @@ export const deployRemoteApplication = async ({
 
 	try {
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheApplications) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			let command = "set -e;";
 			if (application.sourceType === "github") {
 				command += await getGithubCloneCommand({
@@ -451,12 +435,6 @@ export const deployPreviewApplication = async ({
 		application.env = `${application.previewEnv}\nDOKPLOY_DEPLOY_URL=${previewDeployment?.domain?.host}`;
 		application.buildArgs = application.previewBuildArgs;
 
-		// const admin = await findUserById(application.project.userId);
-
-		// if (admin.cleanupCacheOnPreviews) {
-		// 	await cleanupFullDocker(application?.serverId);
-		// }
-
 		if (application.sourceType === "github") {
 			await cloneGithubRepository({
 				...application,
@@ -565,11 +543,6 @@ export const deployRemotePreviewApplication = async ({
 		application.buildArgs = application.previewBuildArgs;
 
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheOnPreviews) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			let command = "set -e;";
 			if (application.sourceType === "github") {
 				command += await getGithubCloneCommand({
@@ -634,11 +607,6 @@ export const rebuildRemoteApplication = async ({
 
 	try {
 		if (application.serverId) {
-			// const admin = await findUserById(application.project.userId);
-
-			// if (admin.cleanupCacheApplications) {
-			// 	await cleanupFullDocker(application?.serverId);
-			// }
 			if (application.sourceType !== "docker") {
 				let command = "set -e;";
 				command += getBuildCommand(application, deployment.logPath);

packages/server/src/services/compose.ts

@@ -216,10 +216,6 @@ export const deployCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
 		if (compose.sourceType === "github") {
 			await cloneGithubRepository({
 				...compose,
@@ -285,15 +281,10 @@ export const rebuildCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
-		if (compose.serverId) {
-			await getBuildComposeCommand(compose, deployment.logPath);
-		} else {
-			await buildCompose(compose, deployment.logPath);
+		if (compose.sourceType === "raw") {
+			await createComposeFile(compose, deployment.logPath);
 		}
+		await buildCompose(compose, deployment.logPath);
 
 		await updateDeploymentStatus(deployment.deploymentId, "done");
 		await updateCompose(composeId, {
@@ -331,10 +322,6 @@ export const deployRemoteCompose = async ({
 	});
 	try {
 		if (compose.serverId) {
-			// const admin = await findUserById(compose.project.userId);
-			// if (admin.cleanupCacheOnCompose) {
-			// 	await cleanupFullDocker(compose?.serverId);
-			// }
 			let command = "set -e;";
 
 			if (compose.sourceType === "github") {
@@ -429,10 +416,10 @@ export const rebuildRemoteCompose = async ({
 	});
 
 	try {
-		// const admin = await findUserById(compose.project.userId);
-		// if (admin.cleanupCacheOnCompose) {
-		// 	await cleanupFullDocker(compose?.serverId);
-		// }
+		if (compose.sourceType === "raw") {
+			const command = getCreateComposeFileCommand(compose, deployment.logPath);
+			await execAsyncRemote(compose.serverId, command);
+		}
 		if (compose.serverId) {
 			await getBuildComposeCommand(compose, deployment.logPath);
 		}

packages/server/src/services/docker.ts

@@ -136,26 +136,24 @@ export const getContainersByAppNameMatch = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim()
-					: "No state";
-				return {
-					containerId,
-					name,
-					state,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim()
+				: "No state";
+			return {
+				containerId,
+				name,
+				state,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -192,30 +190,28 @@ export const getStackContainersByAppName = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim().toLowerCase()
-					: "No state";
-				const node = parts[3]
-					? parts[3].replace("Node: ", "").trim()
-					: "No specific node";
-				return {
-					containerId,
-					name,
-					state,
-					node,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim().toLowerCase()
+				: "No state";
+			const node = parts[3]
+				? parts[3].replace("Node: ", "").trim()
+				: "No specific node";
+			return {
+				containerId,
+				name,
+				state,
+				node,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -253,31 +249,29 @@ export const getServiceContainersByAppName = async (
 			result = stdout.trim().split("\n");
 		}
 
-		const containers = result
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
+		const containers = result.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
 
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim().toLowerCase()
-					: "No state";
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim().toLowerCase()
+				: "No state";
 
-				const node = parts[3]
-					? parts[3].replace("Node: ", "").trim()
-					: "No specific node";
-				return {
-					containerId,
-					name,
-					state,
-					node,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+			const node = parts[3]
+				? parts[3].replace("Node: ", "").trim()
+				: "No specific node";
+			return {
+				containerId,
+				name,
+				state,
+				node,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}
@@ -318,25 +312,23 @@ export const getContainersByAppLabel = async (
 
 		const lines = stdout.trim().split("\n");
 
-		const containers = lines
-			.map((line) => {
-				const parts = line.split(" | ");
-				const containerId = parts[0]
-					? parts[0].replace("CONTAINER ID : ", "").trim()
-					: "No container id";
-				const name = parts[1]
-					? parts[1].replace("Name: ", "").trim()
-					: "No container name";
-				const state = parts[2]
-					? parts[2].replace("State: ", "").trim()
-					: "No state";
-				return {
-					containerId,
-					name,
-					state,
-				};
-			})
-			.sort((a, b) => a.name.localeCompare(b.name));
+		const containers = lines.map((line) => {
+			const parts = line.split(" | ");
+			const containerId = parts[0]
+				? parts[0].replace("CONTAINER ID : ", "").trim()
+				: "No container id";
+			const name = parts[1]
+				? parts[1].replace("Name: ", "").trim()
+				: "No container name";
+			const state = parts[2]
+				? parts[2].replace("State: ", "").trim()
+				: "No state";
+			return {
+				containerId,
+				name,
+				state,
+			};
+		});
 
 		return containers || [];
 	} catch (_error) {}

packages/server/src/setup/traefik-setup.ts

@@ -22,7 +22,6 @@ interface TraefikOptions {
 	additionalPorts?: {
 		targetPort: number;
 		publishedPort: number;
-		publishMode?: "ingress" | "host";
 	}[];
 	force?: boolean;
 }

packages/server/src/templates/index.ts

@@ -53,14 +53,12 @@ export const generatePassword = (quantity = 16): string => {
 };
 
 /**
- * Generate a random base64 string of specified length
+ * Generate a random base64 string from N random bytes
+ * @param bytes Number of random bytes to generate before base64 encoding (default: 32)
+ * @returns base64 encoded string of the random bytes
  */
-export function generateBase64(length: number): string {
-	// To get N characters in base64, we need to generate N * 3/4 bytes
-	const bytesNeeded = Math.ceil((length * 3) / 4);
-	return Buffer.from(randomBytes(bytesNeeded))
-		.toString("base64")
-		.substring(0, length);
+export function generateBase64(bytes = 32): string {
+	return randomBytes(bytes).toString("base64");
 }
 
 export function generateJwt(length = 256): string {

packages/server/src/templates/processors.ts

@@ -45,7 +45,7 @@ export interface CompleteTemplate {
 	variables: Record<string, string>;
 	config: {
 		domains: DomainConfig[];
-		env: Record<string, string>;
+		env: Record<string, string> | string[];
 		mounts?: MountConfig[];
 	};
 }
@@ -176,7 +176,6 @@ export function processDomains(
 	schema: Schema,
 ): Template["domains"] {
 	if (!template?.config?.domains) return [];
-
 	return template?.config?.domains?.map((domain: DomainConfig) => ({
 		...domain,
 		host: domain.host
@@ -195,7 +194,18 @@ export function processEnvVars(
 ): Template["envs"] {
 	if (!template?.config?.env) return [];
 
-	return Object.entries(template?.config?.env).map(
+	// Handle array of env vars
+	if (Array.isArray(template.config.env)) {
+		return template.config.env.map((env) => {
+			if (typeof env === "string") {
+				return processValue(env, variables, schema);
+			}
+			return env;
+		});
+	}
+
+	// Handle object of env vars
+	return Object.entries(template.config.env).map(
 		([key, value]: [string, string]) => {
 			const processedValue = processValue(value, variables, schema);
 			return `${key}=${processedValue}`;

packages/server/src/utils/builders/docker-file.ts

@@ -12,8 +12,14 @@ export const buildCustomDocker = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { appName, env, publishDirectory, buildArgs, dockerBuildStage } =
-		application;
+	const {
+		appName,
+		env,
+		publishDirectory,
+		buildArgs,
+		dockerBuildStage,
+		cleanCache,
+	} = application;
 	const dockerFilePath = getBuildAppDirectory(application);
 	try {
 		const image = `${appName}`;
@@ -29,6 +35,10 @@ export const buildCustomDocker = async (
 
 		const commandArgs = ["build", "-t", image, "-f", dockerFilePath, "."];
 
+		if (cleanCache) {
+			commandArgs.push("--no-cache");
+		}
+
 		if (dockerBuildStage) {
 			commandArgs.push("--target", dockerBuildStage);
 		}
@@ -65,8 +75,14 @@ export const getDockerCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { appName, env, publishDirectory, buildArgs, dockerBuildStage } =
-		application;
+	const {
+		appName,
+		env,
+		publishDirectory,
+		buildArgs,
+		dockerBuildStage,
+		cleanCache,
+	} = application;
 	const dockerFilePath = getBuildAppDirectory(application);
 
 	try {
@@ -88,6 +104,10 @@ export const getDockerCommand = (
 			commandArgs.push("--target", dockerBuildStage);
 		}
 
+		if (cleanCache) {
+			commandArgs.push("--no-cache");
+		}
+
 		for (const arg of args) {
 			commandArgs.push("--build-arg", arg);
 		}

packages/server/src/utils/builders/heroku.ts

@@ -9,7 +9,7 @@ export const buildHeroku = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -29,6 +29,10 @@ export const buildHeroku = async (
 			args.push("--env", env);
 		}
 
+		if (cleanCache) {
+			args.push("--clear-cache");
+		}
+
 		await spawnAsync("pack", args, (data) => {
 			if (writeStream.writable) {
 				writeStream.write(data);
@@ -44,7 +48,7 @@ export const getHerokuCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
@@ -61,6 +65,10 @@ export const getHerokuCommand = (
 		`heroku/builder:${application.herokuVersion || "24"}`,
 	];
 
+	if (cleanCache) {
+		args.push("--clear-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/nixpacks.ts

@@ -14,7 +14,7 @@ export const buildNixpacks = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName, publishDirectory } = application;
+	const { env, appName, publishDirectory, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const buildContainerId = `${appName}-${nanoid(10)}`;
@@ -32,6 +32,10 @@ export const buildNixpacks = async (
 	try {
 		const args = ["build", buildAppDirectory, "--name", appName];
 
+		if (cleanCache) {
+			args.push("--no-cache");
+		}
+
 		for (const env of envVariables) {
 			args.push("--env", env);
 		}
@@ -91,7 +95,7 @@ export const getNixpacksCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName, publishDirectory } = application;
+	const { env, appName, publishDirectory, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const buildContainerId = `${appName}-${nanoid(10)}`;
@@ -102,6 +106,10 @@ export const getNixpacksCommand = (
 
 	const args = ["build", buildAppDirectory, "--name", appName];
 
+	if (cleanCache) {
+		args.push("--no-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/paketo.ts

@@ -8,7 +8,7 @@ export const buildPaketo = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -24,6 +24,10 @@ export const buildPaketo = async (
 			"paketobuildpacks/builder-jammy-full",
 		];
 
+		if (cleanCache) {
+			args.push("--clear-cache");
+		}
+
 		for (const env of envVariables) {
 			args.push("--env", env);
 		}
@@ -43,7 +47,7 @@ export const getPaketoCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
@@ -60,6 +64,10 @@ export const getPaketoCommand = (
 		"paketobuildpacks/builder-jammy-full",
 	];
 
+	if (cleanCache) {
+		args.push("--clear-cache");
+	}
+
 	for (const env of envVariables) {
 		args.push("--env", `'${env}'`);
 	}

packages/server/src/utils/builders/railpack.ts

@@ -4,12 +4,22 @@ import { prepareEnvironmentVariables } from "../docker/utils";
 import { getBuildAppDirectory } from "../filesystem/directory";
 import { spawnAsync } from "../process/spawnAsync";
 import { execAsync } from "../process/execAsync";
+import { nanoid } from "nanoid";
+import { createHash } from "node:crypto";
+
+const calculateSecretsHash = (envVariables: string[]): string => {
+	const hash = createHash("sha256");
+	for (const env of envVariables.sort()) {
+		hash.update(env);
+	}
+	return hash.digest("hex");
+};
 
 export const buildRailpack = async (
 	application: ApplicationNested,
 	writeStream: WriteStream,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
@@ -17,32 +27,80 @@ export const buildRailpack = async (
 	);
 
 	try {
-		// Ensure buildkit container is running, create if it doesn't exist
 		await execAsync(
-			"docker container inspect buildkit >/dev/null 2>&1 || docker run --rm --privileged -d --name buildkit moby/buildkit",
+			"docker buildx create --use --name builder-containerd --driver docker-container || true",
 		);
 
-		// Build the application using railpack
-		const args = ["build", buildAppDirectory, "--name", appName];
+		await execAsync("docker buildx use builder-containerd");
 
-		// Add environment variables
+		// First prepare the build plan and info
+		const prepareArgs = [
+			"prepare",
+			buildAppDirectory,
+			"--plan-out",
+			`${buildAppDirectory}/railpack-plan.json`,
+			"--info-out",
+			`${buildAppDirectory}/railpack-info.json`,
+		];
+
+		// Add environment variables to prepare command
 		for (const env of envVariables) {
-			args.push("--env", env);
+			prepareArgs.push("--env", env);
 		}
 
+		// Run prepare command
+		await spawnAsync("railpack", prepareArgs, (data) => {
+			if (writeStream.writable) {
+				writeStream.write(data);
+			}
+		});
+
+		// Calculate secrets hash for layer invalidation
+		const secretsHash = calculateSecretsHash(envVariables);
+
+		// Build with BuildKit using the Railpack frontend
+		const cacheKey = cleanCache ? nanoid(10) : undefined;
+		const buildArgs = [
+			"buildx",
+			"build",
+			...(cacheKey
+				? [
+						"--build-arg",
+						`secrets-hash=${secretsHash}`,
+						"--build-arg",
+						`cache-key=${cacheKey}`,
+					]
+				: []),
+			"--build-arg",
+			"BUILDKIT_SYNTAX=ghcr.io/railwayapp/railpack-frontend:v0.0.55",
+			"-f",
+			`${buildAppDirectory}/railpack-plan.json`,
+			"--output",
+			`type=docker,name=${appName}`,
+		];
+
+		// Add secrets properly formatted
+		const env: { [key: string]: string } = {};
+		for (const envVar of envVariables) {
+			const [key, value] = envVar.split("=");
+			if (key && value) {
+				buildArgs.push("--secret", `id=${key},env=${key}`);
+				env[key] = value;
+			}
+		}
+
+		buildArgs.push(buildAppDirectory);
+
 		await spawnAsync(
-			"railpack",
-			args,
+			"docker",
+			buildArgs,
 			(data) => {
 				if (writeStream.writable) {
 					writeStream.write(data);
 				}
 			},
 			{
-				env: {
-					...process.env,
-					BUILDKIT_HOST: "docker-container://buildkit",
-				},
+				env: { ...process.env, ...env },
 			},
 		);
 
@@ -56,32 +114,84 @@ export const getRailpackCommand = (
 	application: ApplicationNested,
 	logPath: string,
 ) => {
-	const { env, appName } = application;
+	const { env, appName, cleanCache } = application;
 	const buildAppDirectory = getBuildAppDirectory(application);
 	const envVariables = prepareEnvironmentVariables(
 		env,
 		application.project.env,
 	);
 
-	// Build the application using railpack
-	const args = ["build", buildAppDirectory, "--name", appName];
+	// Prepare command
+	const prepareArgs = [
+		"prepare",
+		buildAppDirectory,
+		"--plan-out",
+		`${buildAppDirectory}/railpack-plan.json`,
+		"--info-out",
+		`${buildAppDirectory}/railpack-info.json`,
+	];
 
-	// Add environment variables
 	for (const env of envVariables) {
-		args.push("--env", env);
+		prepareArgs.push("--env", env);
 	}
 
-	const command = `railpack ${args.join(" ")}`;
+	// Calculate secrets hash for layer invalidation
+	const secretsHash = calculateSecretsHash(envVariables);
+
+	const cacheKey = cleanCache ? nanoid(10) : undefined;
+	// Build command
+	const buildArgs = [
+		"buildx",
+		"build",
+		...(cacheKey
+			? [
+					"--build-arg",
+					`secrets-hash=${secretsHash}`,
+					"--build-arg",
+					`cache-key=${cacheKey}`,
+				]
+			: []),
+		"--build-arg",
+		"BUILDKIT_SYNTAX=ghcr.io/railwayapp/railpack-frontend:v0.0.55",
+		"-f",
+		`${buildAppDirectory}/railpack-plan.json`,
+		"--output",
+		`type=docker,name=${appName}`,
+	];
+
+	// Add secrets properly formatted
+	const exportEnvs = [];
+	for (const envVar of envVariables) {
+		const [key, value] = envVar.split("=");
+		if (key && value) {
+			buildArgs.push("--secret", `id=${key},env=${key}`);
+			exportEnvs.push(`export ${key}=${value}`);
+		}
+	}
+
+	buildArgs.push(buildAppDirectory);
+
 	const bashCommand = `
-	echo "Building with Railpack..." >> "${logPath}";
-	docker container inspect buildkit >/dev/null 2>&1 || docker run --rm --privileged -d --name buildkit moby/buildkit;
-	export BUILDKIT_HOST=docker-container://buildkit;
-	${command} >> ${logPath} 2>> ${logPath} || { 
-		echo "❌ Railpack build failed" >> ${logPath};
-		exit 1;
-	  }
-	echo "✅ Railpack build completed." >> ${logPath};
-	`;
+# Ensure we have a builder with containerd
+docker buildx create --use --name builder-containerd --driver docker-container || true
+docker buildx use builder-containerd
+
+echo "Preparing Railpack build plan..." >> "${logPath}";
+railpack ${prepareArgs.join(" ")} >> ${logPath} 2>> ${logPath} || { 
+	echo "❌ Railpack prepare failed" >> ${logPath};
+	exit 1;
+}
+echo "✅ Railpack prepare completed." >> ${logPath};
+
+echo "Building with Railpack frontend..." >> "${logPath}";
+# Export environment variables for secrets
+${exportEnvs.join("\n")}
+docker ${buildArgs.join(" ")} >> ${logPath} 2>> ${logPath} || { 
+	echo "❌ Railpack build failed" >> ${logPath};
+	exit 1;
+}
+echo "✅ Railpack build completed." >> ${logPath};
+`;
 
 	return bashCommand;
 };

packages/server/src/utils/docker/domain.ts

@@ -238,9 +238,9 @@ export const addDomainToCompose = async (
 
 		if (Array.isArray(labels)) {
 			if (!labels.includes("traefik.enable=true")) {
-				labels.push("traefik.enable=true");
+				labels.unshift("traefik.enable=true");
 			}
-			labels.push(...httpLabels);
+			labels.unshift(...httpLabels);
 		}
 
 		if (!compose.isolatedDeployment) {

packages/server/src/utils/restore/index.ts

@@ -0,0 +1,4 @@
+export { restorePostgresBackup } from "./postgres";
+export { restoreMySqlBackup } from "./mysql";
+export { restoreMariadbBackup } from "./mariadb";
+export { restoreMongoBackup } from "./mongo";

packages/server/src/utils/restore/mariadb.ts

@@ -0,0 +1,56 @@
+import type { Mariadb } from "@dokploy/server/services/mariadb";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMariadbBackup = async (
+	mariadb: Mariadb,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databasePassword, databaseUser, serverId } = mariadb;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		const restoreCommand = `
+    rclone cat ${rcloneFlags.join(" ")} "${backupPath}" | gunzip | docker exec -i ${containerName} mariadb -u ${databaseUser} -p${databasePassword} ${database}
+  `;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${restoreCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, restoreCommand);
+		} else {
+			await execAsync(restoreCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error
+					? error.message
+					: "Error restoring mariadb backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mariadb backup",
+		);
+	}
+};

packages/server/src/utils/restore/mongo.ts

@@ -0,0 +1,64 @@
+import type { Mongo } from "@dokploy/server/services/mongo";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMongoBackup = async (
+	mongo: Mongo,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databasePassword, databaseUser, serverId } = mongo;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		// For MongoDB, we need to first download the backup file since mongorestore expects a directory
+		const tempDir = "/tmp/dokploy-restore";
+		const fileName = backupFile.split("/").pop() || "backup.dump.gz";
+		const decompressedName = fileName.replace(".gz", "");
+
+		const downloadCommand = `\
+rm -rf ${tempDir} && \
+mkdir -p ${tempDir} && \
+rclone copy ${rcloneFlags.join(" ")} "${backupPath}" ${tempDir} && \
+cd ${tempDir} && \
+gunzip -f "${fileName}" && \
+docker exec -i ${containerName} mongorestore --username ${databaseUser} --password ${databasePassword} --authenticationDatabase admin --db ${database} --archive < "${decompressedName}" && \
+rm -rf ${tempDir}`;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${downloadCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, downloadCommand);
+		} else {
+			await execAsync(downloadCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error ? error.message : "Error restoring mongo backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mongo backup",
+		);
+	}
+};

packages/server/src/utils/restore/mysql.ts

@@ -0,0 +1,54 @@
+import type { MySql } from "@dokploy/server/services/mysql";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restoreMySqlBackup = async (
+	mysql: MySql,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databaseRootPassword, serverId } = mysql;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		const restoreCommand = `
+    rclone cat ${rcloneFlags.join(" ")} "${backupPath}" | gunzip | docker exec -i ${containerName} mysql -u root -p${databaseRootPassword} ${database}
+  `;
+
+		emit("Starting restore...");
+
+		emit(`Executing command: ${restoreCommand}`);
+
+		if (serverId) {
+			await execAsyncRemote(serverId, restoreCommand);
+		} else {
+			await execAsync(restoreCommand);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		console.error(error);
+		emit(
+			`Error: ${
+				error instanceof Error ? error.message : "Error restoring mysql backup"
+			}`,
+		);
+		throw new Error(
+			error instanceof Error ? error.message : "Error restoring mysql backup",
+		);
+	}
+};

packages/server/src/utils/restore/postgres.ts

@@ -0,0 +1,60 @@
+import type { Postgres } from "@dokploy/server/services/postgres";
+import type { Destination } from "@dokploy/server/services/destination";
+import {
+	getRemoteServiceContainer,
+	getServiceContainer,
+} from "../docker/utils";
+import { execAsync, execAsyncRemote } from "../process/execAsync";
+import { getS3Credentials } from "../backups/utils";
+
+export const restorePostgresBackup = async (
+	postgres: Postgres,
+	destination: Destination,
+	database: string,
+	backupFile: string,
+	emit: (log: string) => void,
+) => {
+	try {
+		const { appName, databaseUser, serverId } = postgres;
+
+		const rcloneFlags = getS3Credentials(destination);
+		const bucketPath = `:s3:${destination.bucket}`;
+
+		const backupPath = `${bucketPath}/${backupFile}`;
+
+		const { Id: containerName } = serverId
+			? await getRemoteServiceContainer(serverId, appName)
+			: await getServiceContainer(appName);
+
+		emit("Starting restore...");
+		emit(`Backup path: ${backupPath}`);
+
+		const command = `\
+rclone cat ${rcloneFlags.join(" ")} "${backupPath}" | gunzip | docker exec -i ${containerName} pg_restore -U ${databaseUser} -d ${database} --clean --if-exists`;
+
+		emit(`Executing command: ${command}`);
+
+		if (serverId) {
+			const { stdout, stderr } = await execAsyncRemote(serverId, command);
+			emit(stdout);
+			emit(stderr);
+		} else {
+			const { stdout, stderr } = await execAsync(command);
+			console.log("stdout", stdout);
+			console.log("stderr", stderr);
+			emit(stdout);
+			emit(stderr);
+		}
+
+		emit("Restore completed successfully!");
+	} catch (error) {
+		emit(
+			`Error: ${
+				error instanceof Error
+					? error.message
+					: "Error restoring postgres backup"
+			}`,
+		);
+		throw error;
+	}
+};

pnpm-lock.yaml

@@ -269,8 +269,8 @@ importers:
         specifier: 5.1.1
         version: 5.1.1(encoding@0.1.13)
       better-auth:
-        specifier: 1.2.0
-        version: 1.2.0(typescript@5.5.3)
+        specifier: 1.2.4
+        version: 1.2.4(typescript@5.5.3)
       bl:
         specifier: 6.0.11
         version: 6.0.11
@@ -303,10 +303,10 @@ importers:
         version: 16.4.5
       drizzle-orm:
         specifier: ^0.39.1
-        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
+        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
       drizzle-zod:
         specifier: 0.5.1
-        version: 0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8)
+        version: 0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8)
       fancy-ansi:
         specifier: ^0.1.3
         version: 0.1.3
@@ -547,7 +547,7 @@ importers:
         version: 16.4.5
       drizzle-orm:
         specifier: ^0.39.1
-        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
+        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
       hono:
         specifier: ^4.5.8
         version: 4.5.8
@@ -646,8 +646,8 @@ importers:
         specifier: 5.1.1
         version: 5.1.1(encoding@0.1.13)
       better-auth:
-        specifier: 1.2.0
-        version: 1.2.0(typescript@5.5.3)
+        specifier: 1.2.4
+        version: 1.2.4(typescript@5.5.3)
       bl:
         specifier: 6.0.11
         version: 6.0.11
@@ -665,13 +665,13 @@ importers:
         version: 16.4.5
       drizzle-dbml-generator:
         specifier: 0.10.0
-        version: 0.10.0(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))
+        version: 0.10.0(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))
       drizzle-orm:
         specifier: ^0.39.1
-        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
+        version: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
       drizzle-zod:
         specifier: 0.5.1
-        version: 0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8)
+        version: 0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8)
       hi-base32:
         specifier: ^0.5.1
         version: 0.5.1
@@ -4030,8 +4030,8 @@ packages:
   before-after-hook@2.2.3:
     resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
 
-  better-auth@1.2.0:
-    resolution: {integrity: sha512-eIRGOXfix25bh4fgs8jslZAZssufpIkxfEeEokQu5G4wICoDee1wPctkFb8v80PvhtI4dPm28SuAoZaAdRc6Wg==}
+  better-auth@1.2.4:
+    resolution: {integrity: sha512-/ZK2jbUjm8JwdeCLFrUWUBmexPyI9PkaLVXWLWtN60sMDHTY8B5G72wcHglo1QMFBaw4G0qFkP5ayl9k6XfDaA==}
 
   better-call@1.0.3:
     resolution: {integrity: sha512-DUKImKoDIy5UtCvQbHTg0wuBRse6gu1Yvznn7+1B3I5TeY8sclRPFce0HI+4WF2bcb+9PqmkET8nXZubrHQh9A==}
@@ -5486,8 +5486,8 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  kysely@0.27.5:
-    resolution: {integrity: sha512-s7hZHcQeSNKpzCkHRm8yA+0JPLjncSWnjb+2TIElwS2JAqYr+Kv3Ess+9KFfJS0C1xcQ1i9NkNHpWwCYpHMWsA==}
+  kysely@0.27.6:
+    resolution: {integrity: sha512-FIyV/64EkKhJmjgC0g2hygpBv5RNWVPyNCqSAD7eTCv6eFWNIi4PN1UvdSJGicN/o35bnevgis4Y0UDC0qi8jQ==}
     engines: {node: '>=14.0.0'}
 
   leac@0.6.0:
@@ -10902,7 +10902,7 @@ snapshots:
 
   before-after-hook@2.2.3: {}
 
-  better-auth@1.2.0(typescript@5.5.3):
+  better-auth@1.2.4(typescript@5.5.3):
     dependencies:
       '@better-auth/utils': 0.2.3
       '@better-fetch/fetch': 1.1.15
@@ -10913,7 +10913,7 @@ snapshots:
       better-call: 1.0.3
       defu: 6.1.4
       jose: 5.9.6
-      kysely: 0.27.5
+      kysely: 0.27.6
       nanostores: 0.11.3
       valibot: 1.0.0-beta.15(typescript@5.5.3)
       zod: 3.24.1
@@ -11534,9 +11534,9 @@ snapshots:
 
   drange@1.1.1: {}
 
-  drizzle-dbml-generator@0.10.0(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)):
+  drizzle-dbml-generator@0.10.0(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)):
     dependencies:
-      drizzle-orm: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
+      drizzle-orm: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
 
   drizzle-kit@0.30.4:
     dependencies:
@@ -11547,18 +11547,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7):
+  drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7):
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
       '@types/react': 18.3.5
-      kysely: 0.27.5
+      kysely: 0.27.6
       postgres: 3.4.4
       react: 18.2.0
       sqlite3: 5.1.7
 
-  drizzle-zod@0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8):
+  drizzle-zod@0.5.1(drizzle-orm@0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7))(zod@3.23.8):
     dependencies:
-      drizzle-orm: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.5)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
+      drizzle-orm: 0.39.1(@opentelemetry/api@1.9.0)(@types/react@18.3.5)(kysely@0.27.6)(postgres@3.4.4)(react@18.2.0)(sqlite3@5.1.7)
       zod: 3.23.8
 
   eastasianwidth@0.2.0: {}
@@ -12450,7 +12450,7 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
-  kysely@0.27.5: {}
+  kysely@0.27.6: {}
 
   leac@0.6.0: {}