Merge pull request #1006 from Dokploy/canary

v0.16.0

.circleci/config.yml

@@ -99,14 +99,14 @@ workflows:
               only:
                 - main
                 - canary
-                - 379-preview-deployment
+                - fix/nixpacks-version
       - build-arm64:
           filters:
             branches:
               only:
                 - main
                 - canary
-                - 379-preview-deployment
+                - fix/nixpacks-version
       - combine-manifests:
           requires:
             - build-amd64
@@ -116,4 +116,4 @@ workflows:
               only:
                 - main
                 - canary
-                - 379-preview-deployment
+                - fix/nixpacks-version

.gitignore

@@ -34,7 +34,6 @@ yarn-debug.log*
 yarn-error.log*
 
 # Editor
-.vscode
 .idea
 
 # Misc

Dockerfile

@@ -48,6 +48,8 @@ RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm
 
 # Install Nixpacks and tsx
 # | VERBOSE=1 VERSION=1.21.0 bash
+
+ARG NIXPACKS_VERSION=1.29.1
 RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && chmod +x install.sh \
     && ./install.sh \

apps/dokploy/components/auth/login-2fa.tsx

@@ -87,7 +87,7 @@ export const Login2FA = ({ authId }: Props) => {
 						</span>
 					</div>
 				)}
-				<CardTitle className="text-xl font-bold">2FA Setup</CardTitle>
+				<CardTitle className="text-xl font-bold">2FA Login</CardTitle>
 
 				<FormField
 					control={form.control}

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -102,9 +103,26 @@ export const DeleteApplication = ({ applicationId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -1,3 +1,5 @@
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -5,7 +7,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
@@ -15,8 +20,25 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [showExtraLogs, setShowExtraLogs] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
 
 	useEffect(() => {
 		if (!open || !logPath) return;
@@ -48,13 +70,34 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+	useEffect(() => {
+		const logs = parseLogs(data);
+		let filteredLogsResult = logs;
+		if (serverId) {
+			let hideSubsequentLogs = false;
+			filteredLogsResult = logs.filter((log) => {
+				if (
+					log.message.includes(
+						"===================================EXTRA LOGS============================================",
+					)
+				) {
+					hideSubsequentLogs = true;
+					return showExtraLogs;
+				}
+				return showExtraLogs ? true : !hideSubsequentLogs;
+			});
+		}
+
+		setFilteredLogs(filteredLogsResult);
+	}, [data, showExtraLogs]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -75,18 +118,49 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
-					<DialogDescription>
-						See all the details of this deployment
+					<DialogDescription className="flex items-center gap-2">
+						<span>
+							See all the details of this deployment |{" "}
+							<Badge variant="blank" className="text-xs">
+								{filteredLogs.length} lines
+							</Badge>
+						</span>
+
+						{serverId && (
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="show-extra-logs"
+									checked={showExtraLogs}
+									onCheckedChange={(checked) =>
+										setShowExtraLogs(checked as boolean)
+									}
+								/>
+								<label
+									htmlFor="show-extra-logs"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									Show Extra Logs
+								</label>
+							</div>
+						)}
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
-						<div ref={endOfLogsRef} />
-					</code>
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+					{" "}
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -264,21 +264,21 @@ export const AddDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>

apps/dokploy/components/dashboard/application/general/deploy-application.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
+import { useRouter } from "next/router";
 import { toast } from "sonner";
 
 interface Props {
@@ -18,6 +19,7 @@ interface Props {
 }
 
 export const DeployApplication = ({ applicationId }: Props) => {
+	const router = useRouter();
 	const { data, refetch } = api.application.one.useQuery(
 		{
 			applicationId,
@@ -51,6 +53,9 @@ export const DeployApplication = ({ applicationId }: Props) => {
 								.then(async () => {
 									toast.success("Application deployed succesfully");
 									await refetch();
+									router.push(
+										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+									);
 								})
 
 								.catch(() => {

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -15,6 +16,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
@@ -29,28 +31,67 @@ export const DockerLogs = dynamic(
 	},
 );
 
+export const badgeStateColor = (state: string) => {
+	switch (state) {
+		case "running":
+			return "green";
+		case "exited":
+		case "shutdown":
+			return "red";
+		case "accepted":
+		case "created":
+			return "blue";
+		default:
+			return "default";
+	}
+};
+
 interface Props {
 	appName: string;
 	serverId?: string;
 }
 
 export const ShowDockerLogs = ({ appName, serverId }: Props) => {
-	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
-		{
-			appName,
-			serverId,
-		},
-		{
-			enabled: !!appName,
-		},
-	);
 	const [containerId, setContainerId] = useState<string | undefined>();
+	const [option, setOption] = useState<"swarm" | "native">("native");
+
+	const { data: services, isLoading: servicesLoading } =
+		api.docker.getServiceContainersByAppName.useQuery(
+			{
+				appName,
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "swarm",
+			},
+		);
+
+	const { data: containers, isLoading: containersLoading } =
+		api.docker.getContainersByAppNameMatch.useQuery(
+			{
+				appName,
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "native",
+			},
+		);
 
 	useEffect(() => {
-		if (data && data?.length > 0) {
-			setContainerId(data[0]?.containerId);
+		if (option === "native") {
+			if (containers && containers?.length > 0) {
+				setContainerId(containers[0]?.containerId);
+			}
+		} else {
+			if (services && services?.length > 0) {
+				setContainerId(services[0]?.containerId);
+			}
 		}
-	}, [data]);
+	}, [option, services, containers]);
+
+	const isLoading = option === "native" ? containersLoading : servicesLoading;
+	const containersLenght =
+		option === "native" ? containers?.length : services?.length;
 
 	return (
 		<Card className="bg-background">
@@ -62,7 +103,21 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 			</CardHeader>
 
 			<CardContent className="flex flex-col gap-4">
-				<Label>Select a container to view logs</Label>
+				<div className="flex flex-row justify-between items-center gap-2">
+					<Label>Select a container to view logs</Label>
+					<div className="flex flex-row gap-2 items-center">
+						<span className="text-sm text-muted-foreground">
+							{option === "native" ? "Native" : "Swarm"}
+						</span>
+						<Switch
+							checked={option === "native"}
+							onCheckedChange={(checked) => {
+								setOption(checked ? "native" : "swarm");
+							}}
+						/>
+					</div>
+				</div>
+
 				<Select onValueChange={setContainerId} value={containerId}>
 					<SelectTrigger>
 						{isLoading ? (
@@ -76,22 +131,45 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 					</SelectTrigger>
 					<SelectContent>
 						<SelectGroup>
-							{data?.map((container) => (
-								<SelectItem
-									key={container.containerId}
-									value={container.containerId}
-								>
-									{container.name} ({container.containerId}) {container.state}
-								</SelectItem>
-							))}
-							<SelectLabel>Containers ({data?.length})</SelectLabel>
+							{option === "native" ? (
+								<div>
+									{containers?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}){" "}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</div>
+							) : (
+								<>
+									{services?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}@{container.node}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</>
+							)}
+
+							<SelectLabel>Containers ({containersLenght})</SelectLabel>
 						</SelectGroup>
 					</SelectContent>
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
+					runType={option}
 				/>
 			</CardContent>
 		</Card>

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

@@ -265,21 +265,21 @@ export const AddPreviewDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>

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

@@ -18,15 +18,26 @@ import { ShowDeployment } from "../deployments/show-deployment";
 interface Props {
 	deployments: RouterOutputs["deployment"]["all"];
 	serverId?: string;
+	trigger?: React.ReactNode;
 }
 
-export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
+export const ShowPreviewBuilds = ({
+	deployments,
+	serverId,
+	trigger,
+}: Props) => {
 	const [activeLog, setActiveLog] = useState<string | null>(null);
 	const [isOpen, setIsOpen] = useState(false);
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="outline">View Builds</Button>
+				{trigger ? (
+					trigger
+				) : (
+					<Button className="sm:w-auto w-full" size="sm" variant="outline">
+						View Builds
+					</Button>
+				)}
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
 				<DialogHeader>

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

@@ -1,5 +1,8 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -8,30 +11,34 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { Pencil, RocketIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import {
+	ExternalLink,
+	FileText,
+	GitPullRequest,
+	Layers,
+	PenSquare,
+	RocketIcon,
+	Trash2,
+} from "lucide-react";
+import React from "react";
 import { toast } from "sonner";
-import { ShowDeployment } from "../deployments/show-deployment";
-import Link from "next/link";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { AddPreviewDomain } from "./add-preview-domain";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import { ShowPreviewSettings } from "./show-preview-settings";
 import { ShowPreviewBuilds } from "./show-preview-builds";
+import { ShowPreviewSettings } from "./show-preview-settings";
 
 interface Props {
 	applicationId: string;
 }
 
 export const ShowPreviewDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
 	const { data } = api.application.one.useQuery({ applicationId });
 
 	const { mutateAsync: deletePreviewDeployment, isLoading } =
 		api.previewDeployment.delete.useMutation();
+
 	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
 		api.previewDeployment.all.useQuery(
 			{ applicationId },
@@ -39,10 +46,19 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 				enabled: !!applicationId,
 			},
 		);
-	// const [url, setUrl] = React.useState("");
-	// useEffect(() => {
-	// 	setUrl(document.location.origin);
-	// }, []);
+
+	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
+		deletePreviewDeployment({
+			previewDeploymentId: previewDeploymentId,
+		})
+			.then(() => {
+				refetchPreviewDeployments();
+				toast.success("Preview deployment deleted");
+			})
+			.catch((error) => {
+				toast.error(error.message);
+			});
+	};
 
 	return (
 		<Card className="bg-background">
@@ -65,7 +81,7 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 								each pull request you create.
 							</span>
 						</div>
-						{data?.previewDeployments?.length === 0 ? (
+						{!previewDeployments?.length ? (
 							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 								<RocketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
@@ -74,120 +90,131 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 							</div>
 						) : (
 							<div className="flex flex-col gap-4">
-								{previewDeployments?.map((previewDeployment) => {
-									const { deployments, domain } = previewDeployment;
-
+								{previewDeployments?.map((deployment) => {
+									const deploymentUrl = `${deployment.domain?.https ? "https" : "http"}://${deployment.domain?.host}${deployment.domain?.path || "/"}`;
+									const status = deployment.previewStatus;
 									return (
 										<div
-											key={previewDeployment?.previewDeploymentId}
-											className="flex flex-col  justify-between rounded-lg border p-4 gap-2"
+											key={deployment.previewDeploymentId}
+											className="group relative overflow-hidden border rounded-lg transition-colors"
 										>
-											<div className="flex justify-between gap-2 max-sm:flex-wrap">
-												<div className="flex flex-col gap-2">
-													{deployments?.length === 0 ? (
-														<div>
-															<span className="text-sm text-muted-foreground">
-																No deployments found
-															</span>
-														</div>
-													) : (
-														<div className="flex items-center gap-2">
-															<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-																{previewDeployment?.pullRequestTitle}
-															</span>
-															<StatusTooltip
-																status={previewDeployment.previewStatus}
-																className="size-2.5"
-															/>
-														</div>
-													)}
-													<div className="flex flex-col gap-1">
-														{previewDeployment?.pullRequestTitle && (
-															<div className="flex items-center gap-2">
-																<span className="break-all text-sm text-muted-foreground w-fit">
-																	Title: {previewDeployment?.pullRequestTitle}
-																</span>
-															</div>
-														)}
+											<div
+												className={`absolute left-0 top-0 w-1 h-full ${
+													status === "done"
+														? "bg-green-500"
+														: status === "running"
+															? "bg-yellow-500"
+															: "bg-red-500"
+												}`}
+											/>
 
-														{previewDeployment?.pullRequestURL && (
-															<div className="flex items-center gap-2">
-																<GithubIcon />
-																<Link
-																	target="_blank"
-																	href={previewDeployment?.pullRequestURL}
-																	className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-																>
-																	Pull Request URL
-																</Link>
+											<div className="p-4">
+												<div className="flex items-start justify-between mb-3">
+													<div className="flex items-start gap-3">
+														<GitPullRequest className="size-5 text-muted-foreground mt-1 flex-shrink-0" />
+														<div>
+															<div className="font-medium text-sm">
+																{deployment.pullRequestTitle}
+															</div>
+															<div className="text-sm text-muted-foreground mt-1">
+																{deployment.branch}
 															</div>
-														)}
-													</div>
-													<div className="flex flex-col ">
-														<span>Domain </span>
-														<div className="flex flex-row items-center gap-4">
-															<Link
-																target="_blank"
-																href={`http://${domain?.host}`}
-																className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-															>
-																{domain?.host}
-															</Link>
-															<AddPreviewDomain
-																previewDeploymentId={
-																	previewDeployment.previewDeploymentId
-																}
-																domainId={domain?.domainId}
-															>
-																<Button variant="outline" size="sm">
-																	<Pencil className="size-4 text-muted-foreground" />
-																</Button>
-															</AddPreviewDomain>
 														</div>
 													</div>
+													<Badge variant="outline" className="gap-2">
+														<StatusTooltip
+															status={deployment.previewStatus}
+															className="size-2"
+														/>
+														<DateTooltip date={deployment.createdAt} />
+													</Badge>
 												</div>
 
-												<div className="flex flex-col sm:items-end gap-2 max-sm:w-full">
-													{previewDeployment?.createdAt && (
-														<div className="text-sm capitalize text-muted-foreground">
-															<DateTooltip
-																date={previewDeployment?.createdAt}
-															/>
-														</div>
-													)}
-													<ShowPreviewBuilds
-														deployments={previewDeployment?.deployments || []}
-														serverId={data?.serverId || ""}
-													/>
+												<div className="pl-8 space-y-3">
+													<div className="relative flex-grow">
+														<Input
+															value={deploymentUrl}
+															readOnly
+															className="pr-8 text-sm text-blue-500 hover:text-blue-600 cursor-pointer"
+															onClick={() =>
+																window.open(deploymentUrl, "_blank")
+															}
+														/>
+														<ExternalLink className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" />
+													</div>
 
-													<ShowModalLogs
-														appName={previewDeployment.appName}
-														serverId={data?.serverId || ""}
-													>
-														<Button variant="outline">View Logs</Button>
-													</ShowModalLogs>
-
-													<DialogAction
-														title="Delete Preview"
-														description="Are you sure you want to delete this preview?"
-														onClick={() => {
-															deletePreviewDeployment({
-																previewDeploymentId:
-																	previewDeployment.previewDeploymentId,
-															})
-																.then(() => {
-																	refetchPreviewDeployments();
-																	toast.success("Preview deployment deleted");
-																})
-																.catch((error) => {
-																	toast.error(error.message);
-																});
-														}}
-													>
-														<Button variant="destructive" isLoading={isLoading}>
-															Delete Preview
+													<div className="flex gap-2 opacity-80 group-hover:opacity-100 transition-opacity">
+														<Button
+															variant="outline"
+															size="sm"
+															className="gap-2"
+															onClick={() =>
+																window.open(deployment.pullRequestURL, "_blank")
+															}
+														>
+															<GithubIcon className="size-4" />
+															Pull Request
 														</Button>
-													</DialogAction>
+														<ShowModalLogs
+															appName={deployment.appName}
+															serverId={data?.serverId || ""}
+														>
+															<Button
+																variant="outline"
+																size="sm"
+																className="gap-2"
+															>
+																<FileText className="size-4" />
+																Logs
+															</Button>
+														</ShowModalLogs>
+
+														<ShowPreviewBuilds
+															deployments={deployment.deployments || []}
+															serverId={data?.serverId || ""}
+															trigger={
+																<Button
+																	variant="outline"
+																	size="sm"
+																	className="gap-2"
+																>
+																	<Layers className="size-4" />
+																	Builds
+																</Button>
+															}
+														/>
+
+														<AddPreviewDomain
+															previewDeploymentId={`${deployment.previewDeploymentId}`}
+															domainId={deployment.domain?.domainId}
+														>
+															<Button
+																variant="ghost"
+																size="sm"
+																className="gap-2"
+															>
+																<PenSquare className="size-4" />
+															</Button>
+														</AddPreviewDomain>
+														<DialogAction
+															title="Delete Preview"
+															description="Are you sure you want to delete this preview?"
+															onClick={() =>
+																handleDeletePreviewDeployment(
+																	deployment.previewDeploymentId,
+																)
+															}
+														>
+															<Button
+																variant="ghost"
+																size="sm"
+																isLoading={isLoading}
+																className="text-red-600 hover:text-red-700 hover:bg-red-50"
+															>
+																<Trash2 className="size-4" />
+															</Button>
+														</DialogAction>
+													</div>
 												</div>
 											</div>
 										</div>

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

@@ -1,5 +1,3 @@
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,12 +18,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input, NumberInput } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { Secrets } from "@/components/ui/secrets";
-import { toast } from "sonner";
-import { Switch } from "@/components/ui/switch";
 import {
 	Select,
 	SelectContent,
@@ -33,6 +26,14 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const schema = z.object({
 	env: z.string(),
@@ -116,7 +117,10 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 		<div>
 			<Dialog open={isOpen} onOpenChange={setIsOpen}>
 				<DialogTrigger asChild>
-					<Button variant="outline">View Settings</Button>
+					<Button variant="outline">
+						<Settings2 className="size-4" />
+						Configure
+					</Button>
 				</DialogTrigger>
 				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
 					<DialogHeader>
@@ -218,21 +222,21 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											name="previewCertificateType"
 											render={({ field }) => (
 												<FormItem>
-													<FormLabel>Certificate</FormLabel>
+													<FormLabel>Certificate Provider</FormLabel>
 													<Select
 														onValueChange={field.onChange}
 														defaultValue={field.value || ""}
 													>
 														<FormControl>
 															<SelectTrigger>
-																<SelectValue placeholder="Select a certificate" />
+																<SelectValue placeholder="Select a certificate provider" />
 															</SelectTrigger>
 														</FormControl>
 
 														<SelectContent>
 															<SelectItem value="none">None</SelectItem>
 															<SelectItem value={"letsencrypt"}>
-																Letsencrypt (Default)
+																Let's Encrypt
 															</SelectItem>
 														</SelectContent>
 													</Select>

apps/dokploy/components/dashboard/compose/advanced/add-command.tsx

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -91,7 +92,7 @@ export const AddCommandCompose = ({ composeId }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Run Command</CardTitle>
 					<CardDescription>
-						Append a custom command to the compose file
+						Override a custom command to the compose file
 					</CardDescription>
 				</div>
 			</CardHeader>
@@ -101,6 +102,12 @@ export const AddCommandCompose = ({ composeId }: Props) => {
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-4"
 					>
+						<AlertBlock type="warning">
+							Modifying the default command may affect deployment stability,
+							impacting logs and monitoring. Proceed carefully and test
+							thoroughly. By default, the command starts with{" "}
+							<strong>docker</strong>.
+						</AlertBlock>
 						<div className="flex flex-col gap-4">
 							<FormField
 								control={form.control}

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

@@ -1,4 +1,6 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -11,6 +13,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -19,6 +22,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Copy } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -30,6 +34,7 @@ const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
 		message: "Compose name is required",
 	}),
+	deleteVolumes: z.boolean(),
 });
 
 type DeleteCompose = z.infer<typeof deleteComposeSchema>;
@@ -49,6 +54,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const form = useForm<DeleteCompose>({
 		defaultValues: {
 			projectName: "",
+			deleteVolumes: false,
 		},
 		resolver: zodResolver(deleteComposeSchema),
 	});
@@ -56,7 +62,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const onSubmit = async (formData: DeleteCompose) => {
 		const expectedName = `${data?.name}/${data?.appName}`;
 		if (formData.projectName === expectedName) {
-			await mutateAsync({ composeId })
+			const { deleteVolumes } = formData;
+			await mutateAsync({ composeId, deleteVolumes })
 				.then((result) => {
 					push(`/dashboard/project/${result?.projectId}`);
 					toast.success("Compose deleted successfully");
@@ -100,10 +107,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>{" "}
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
+										</FormLabel>
 										<FormControl>
 											<Input
 												placeholder="Enter compose name to confirm"
@@ -114,6 +138,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="deleteVolumes"
+								render={({ field }) => (
+									<FormItem>
+										<div className="flex items-center">
+											<FormControl>
+												<Checkbox
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+
+											<FormLabel className="ml-2">
+												Delete volumes associated with this compose
+											</FormLabel>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</form>
 					</Form>
 				</div>

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

@@ -1,3 +1,5 @@
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -5,7 +7,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
@@ -20,8 +25,25 @@ export const ShowDeploymentCompose = ({
 	serverId,
 }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [showExtraLogs, setShowExtraLogs] = useState(false);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
 
 	useEffect(() => {
 		if (!open || !logPath) return;
@@ -54,13 +76,34 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+	useEffect(() => {
+		const logs = parseLogs(data);
+		let filteredLogsResult = logs;
+		if (serverId) {
+			let hideSubsequentLogs = false;
+			filteredLogsResult = logs.filter((log) => {
+				if (
+					log.message.includes(
+						"===================================EXTRA LOGS============================================",
+					)
+				) {
+					hideSubsequentLogs = true;
+					return showExtraLogs;
+				}
+				return showExtraLogs ? true : !hideSubsequentLogs;
+			});
+		}
+
+		setFilteredLogs(filteredLogsResult);
+	}, [data, showExtraLogs]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -78,21 +121,50 @@ export const ShowDeploymentCompose = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
-					<DialogDescription>
-						See all the details of this deployment
+					<DialogDescription className="flex items-center gap-2">
+						<span>
+							See all the details of this deployment |{" "}
+							<Badge variant="blank" className="text-xs">
+								{filteredLogs.length} lines
+							</Badge>
+						</span>
+						{serverId && (
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="show-extra-logs"
+									checked={showExtraLogs}
+									onCheckedChange={(checked) =>
+										setShowExtraLogs(checked as boolean)
+									}
+								/>
+								<label
+									htmlFor="show-extra-logs"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									Show Extra Logs
+								</label>
+							</div>
+						)}
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
-					<code>
-						<pre className="whitespace-pre-wrap break-words">
-							{data || "Loading..."}
-						</pre>
-						<div ref={endOfLogsRef} />
-					</code>
+				<div
+					ref={scrollRef}
+					onScroll={handleScroll}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+				>
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -400,21 +400,21 @@ export const AddDomainCompose = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>

apps/dokploy/components/dashboard/compose/general/deploy-compose.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
+import { useRouter } from "next/router";
 import { toast } from "sonner";
 
 interface Props {
@@ -18,6 +19,7 @@ interface Props {
 }
 
 export const DeployCompose = ({ composeId }: Props) => {
+	const router = useRouter();
 	const { data, refetch } = api.compose.one.useQuery(
 		{
 			composeId,
@@ -48,9 +50,15 @@ export const DeployCompose = ({ composeId }: Props) => {
 							await refetch();
 							await deploy({
 								composeId,
-							}).catch(() => {
-								toast.error("Error to deploy Compose");
-							});
+							})
+								.then(async () => {
+									router.push(
+										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+									);
+								})
+								.catch(() => {
+									toast.error("Error to deploy Compose");
+								});
 
 							await refetch();
 						}}

apps/dokploy/components/dashboard/compose/import-template.tsx

@@ -1,161 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ImportIcon, SquarePen } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const updateComposeSchema = z.object({
-	name: z.string().min(1, {
-		message: "Name is required",
-	}),
-	description: z.string().optional(),
-});
-
-type UpdateCompose = z.infer<typeof updateComposeSchema>;
-
-interface Props {
-	composeId: string;
-}
-
-export const ImportTemplate = ({ composeId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
-	const { mutateAsync, error, isError, isLoading } =
-		api.compose.update.useMutation();
-	const { data } = api.compose.one.useQuery(
-		{
-			composeId,
-		},
-		{
-			enabled: !!composeId,
-		},
-	);
-	const form = useForm<UpdateCompose>({
-		defaultValues: {
-			description: data?.description ?? "",
-			name: data?.name ?? "",
-		},
-		resolver: zodResolver(updateComposeSchema),
-	});
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				description: data.description ?? "",
-				name: data.name,
-			});
-		}
-	}, [data, form, form.reset]);
-
-	const onSubmit = async (formData: UpdateCompose) => {
-		await mutateAsync({
-			name: formData.name,
-			composeId: composeId,
-			description: formData.description || "",
-		})
-			.then(() => {
-				toast.success("Compose updated succesfully");
-				utils.compose.one.invalidate({
-					composeId: composeId,
-				});
-				setIsOpen(false);
-			})
-			.catch(() => {
-				toast.error("Error to update the Compose");
-			})
-			.finally(() => {});
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="ghost">
-					<ImportIcon className="size-5 text-muted-foreground" />
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Import Template</DialogTitle>
-					<DialogDescription>Import external template</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-compose"
-								className="grid w-full gap-4 "
-							>
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Name</FormLabel>
-											<FormControl>
-												<Input placeholder="Tesla" {...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-compose"
-										type="submit"
-									>
-										Update
-									</Button>
-								</DialogFooter>
-							</form>
-						</Form>
-					</div>
-				</div>
-			</DialogContent>
-		</Dialog>
-	);
-};

apps/dokploy/components/dashboard/compose/logs/show-stack.tsx

@@ -0,0 +1,165 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+export const DockerLogs = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	appName: string;
+	serverId?: string;
+}
+
+badgeStateColor;
+
+export const ShowDockerLogsStack = ({ appName, serverId }: Props) => {
+	const [option, setOption] = useState<"swarm" | "native">("native");
+	const [containerId, setContainerId] = useState<string | undefined>();
+
+	const { data: services, isLoading: servicesLoading } =
+		api.docker.getStackContainersByAppName.useQuery(
+			{
+				appName,
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "swarm",
+			},
+		);
+
+	const { data: containers, isLoading: containersLoading } =
+		api.docker.getContainersByAppNameMatch.useQuery(
+			{
+				appName,
+				appType: "stack",
+				serverId,
+			},
+			{
+				enabled: !!appName && option === "native",
+			},
+		);
+
+	useEffect(() => {
+		if (option === "native") {
+			if (containers && containers?.length > 0) {
+				setContainerId(containers[0]?.containerId);
+			}
+		} else {
+			if (services && services?.length > 0) {
+				setContainerId(services[0]?.containerId);
+			}
+		}
+	}, [option, services, containers]);
+
+	const isLoading = option === "native" ? containersLoading : servicesLoading;
+	const containersLenght =
+		option === "native" ? containers?.length : services?.length;
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Logs</CardTitle>
+				<CardDescription>
+					Watch the logs of the application in real time
+				</CardDescription>
+			</CardHeader>
+
+			<CardContent className="flex flex-col gap-4">
+				<div className="flex flex-row justify-between items-center gap-2">
+					<Label>Select a container to view logs</Label>
+					<div className="flex flex-row gap-2 items-center">
+						<span className="text-sm text-muted-foreground">
+							{option === "native" ? "Native" : "Swarm"}
+						</span>
+						<Switch
+							checked={option === "native"}
+							onCheckedChange={(checked) => {
+								setOption(checked ? "native" : "swarm");
+							}}
+						/>
+					</div>
+				</div>
+				<Select onValueChange={setContainerId} value={containerId}>
+					<SelectTrigger>
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<SelectValue placeholder="Select a container" />
+						)}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							{option === "native" ? (
+								<div>
+									{containers?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}){" "}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</div>
+							) : (
+								<>
+									{services?.map((container) => (
+										<SelectItem
+											key={container.containerId}
+											value={container.containerId}
+										>
+											{container.name} ({container.containerId}@{container.node}
+											)
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
+										</SelectItem>
+									))}
+								</>
+							)}
+
+							<SelectLabel>Containers ({containersLenght})</SelectLabel>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+				<DockerLogs
+					serverId={serverId || ""}
+					containerId={containerId || "select-a-container"}
+					runType={option}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -1,3 +1,5 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -87,7 +89,10 @@ export const ShowDockerLogsCompose = ({
 									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>
@@ -96,8 +101,8 @@ export const ShowDockerLogsCompose = ({
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
+					runType="native"
 				/>
 			</CardContent>
 		</Card>

apps/dokploy/components/dashboard/docker/config/show-container-config.tsx

@@ -1,3 +1,4 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Dialog,
 	DialogContent,
@@ -34,7 +35,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 					View Config
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className={"w-full md:w-[70vw] max-w-max"}>
+			<DialogContent className={"w-full md:w-[70vw] min-w-[70vw]"}>
 				<DialogHeader>
 					<DialogTitle>Container Config</DialogTitle>
 					<DialogDescription>
@@ -44,7 +45,13 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 				<div className="text-wrap rounded-lg border p-4 text-sm bg-card overflow-y-auto max-h-[80vh]">
 					<code>
 						<pre className="whitespace-pre-wrap break-words">
-							{JSON.stringify(data, null, 2)}
+							<CodeEditor
+								language="json"
+								lineWrapping
+								lineNumbers={false}
+								readOnly
+								value={JSON.stringify(data, null, 2)}
+							/>
 						</pre>
 					</code>
 				</div>

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

@@ -1,114 +1,296 @@
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Terminal } from "@xterm/xterm";
+import { api } from "@/utils/api";
+import { Download as DownloadIcon, Loader2 } from "lucide-react";
 import React, { useEffect, useRef } from "react";
-import { FitAddon } from "xterm-addon-fit";
-import "@xterm/xterm/css/xterm.css";
+import { LineCountFilter } from "./line-count-filter";
+import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
+import { StatusLogsFilter } from "./status-logs-filter";
+import { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";
 
 interface Props {
-	id: string;
 	containerId: string;
 	serverId?: string | null;
+	runType: "swarm" | "native";
 }
 
+export const priorities = [
+	{
+		label: "Info",
+		value: "info",
+	},
+	{
+		label: "Success",
+		value: "success",
+	},
+	{
+		label: "Warning",
+		value: "warning",
+	},
+	{
+		label: "Debug",
+		value: "debug",
+	},
+	{
+		label: "Error",
+		value: "error",
+	},
+];
+
 export const DockerLogsId: React.FC<Props> = ({
-	id,
 	containerId,
 	serverId,
+	runType,
 }) => {
-	const [term, setTerm] = React.useState<Terminal>();
-	const [lines, setLines] = React.useState<number>(40);
-	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const { data } = api.docker.getConfig.useQuery(
+		{
+			containerId,
+			serverId: serverId ?? undefined,
+		},
+		{
+			enabled: !!containerId,
+		},
+	);
+
+	const [rawLogs, setRawLogs] = React.useState("");
+	const [filteredLogs, setFilteredLogs] = React.useState<LogLine[]>([]);
+	const [autoScroll, setAutoScroll] = React.useState(true);
+	const [lines, setLines] = React.useState<number>(100);
+	const [search, setSearch] = React.useState<string>("");
+	const [showTimestamp, setShowTimestamp] = React.useState(true);
+	const [since, setSince] = React.useState<TimeFilter>("all");
+	const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [isLoading, setIsLoading] = React.useState(false);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
+
+	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setSearch(e.target.value || "");
+	};
+
+	const handleLines = (lines: number) => {
+		setRawLogs("");
+		setFilteredLogs([]);
+		setLines(lines);
+	};
+
+	const handleSince = (value: TimeFilter) => {
+		setRawLogs("");
+		setFilteredLogs([]);
+		setSince(value);
+	};
 
 	useEffect(() => {
-		// if (containerId === "select-a-container") {
-		// 	return;
-		// }
-		const container = document.getElementById(id);
-		if (container) {
-			container.innerHTML = "";
-		}
+		if (!containerId) return;
 
-		if (wsRef.current) {
-			if (wsRef.current.readyState === WebSocket.OPEN) {
-				wsRef.current.close();
-			}
-			wsRef.current = null;
-		}
-		const termi = new Terminal({
-			cursorBlink: true,
-			cols: 80,
-			rows: 30,
-			lineHeight: 1.25,
-			fontWeight: 400,
-			fontSize: 14,
-			fontFamily:
-				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-
-			convertEol: true,
-			theme: {
-				cursor: "transparent",
-				background: "rgba(0, 0, 0, 0)",
-			},
-		});
+		let isCurrentConnection = true;
+		let noDataTimeout: NodeJS.Timeout;
+		setIsLoading(true);
+		setRawLogs("");
+		setFilteredLogs([]);
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+		const params = new globalThis.URLSearchParams({
+			containerId,
+			tail: lines.toString(),
+			since,
+			search,
+			runType,
+		});
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
+		if (serverId) {
+			params.append("serverId", serverId);
+		}
+
+		const wsUrl = `${protocol}//${
+			window.location.host
+		}/docker-container-logs?${params.toString()}`;
+		console.log("Connecting to WebSocket:", wsUrl);
 		const ws = new WebSocket(wsUrl);
-		wsRef.current = ws;
-		const fitAddon = new FitAddon();
-		termi.loadAddon(fitAddon);
-		// @ts-ignore
-		termi.open(container);
-		fitAddon.fit();
-		termi.focus();
-		setTerm(termi);
 
-		ws.onerror = (error) => {
-			console.error("WebSocket error: ", error);
+		const resetNoDataTimeout = () => {
+			if (noDataTimeout) clearTimeout(noDataTimeout);
+			noDataTimeout = setTimeout(() => {
+				if (isCurrentConnection) {
+					setIsLoading(false);
+				}
+			}, 2000); // Wait 2 seconds for data before showing "No logs found"
+		};
+
+		ws.onopen = () => {
+			if (!isCurrentConnection) {
+				ws.close();
+				return;
+			}
+			console.log("WebSocket connected");
+			resetNoDataTimeout();
 		};
 
 		ws.onmessage = (e) => {
-			termi.write(e.data);
+			if (!isCurrentConnection) return;
+			setRawLogs((prev) => prev + e.data);
+			setIsLoading(false);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
+		};
+
+		ws.onerror = (error) => {
+			if (!isCurrentConnection) return;
+			console.error("WebSocket error:", error);
+			setIsLoading(false);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};
 
 		ws.onclose = (e) => {
-			console.log(e.reason);
-
-			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
-			wsRef.current = null;
+			if (!isCurrentConnection) return;
+			console.log("WebSocket closed:", e.reason);
+			setIsLoading(false);
+			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};
+
 		return () => {
-			if (wsRef.current?.readyState === WebSocket.OPEN) {
+			isCurrentConnection = false;
+			if (noDataTimeout) clearTimeout(noDataTimeout);
+			if (ws.readyState === WebSocket.OPEN) {
 				ws.close();
-				wsRef.current = null;
 			}
 		};
-	}, [lines, containerId]);
+	}, [containerId, serverId, lines, search, since]);
+
+	const handleDownload = () => {
+		const logContent = filteredLogs
+			.map(
+				({ timestamp, message }: { timestamp: Date | null; message: string }) =>
+					`${timestamp?.toISOString() || "No timestamp"} ${message}`,
+			)
+			.join("\n");
+
+		const blob = new Blob([logContent], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		const appName = data.Name.replace("/", "") || "app";
+		const isoDate = new Date().toISOString();
+		a.href = url;
+		a.download = `${appName}-${isoDate.slice(0, 10).replace(/-/g, "")}_${isoDate
+			.slice(11, 19)
+			.replace(/:/g, "")}.log.txt`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
+
+	const handleFilter = (logs: LogLine[]) => {
+		return logs.filter((log) => {
+			const logType = getLogType(log.message).type;
+
+			if (typeFilter.length === 0) {
+				return true;
+			}
+
+			return typeFilter.includes(logType);
+		});
+	};
 
 	useEffect(() => {
-		term?.clear();
-	}, [lines, term]);
+		setRawLogs("");
+		setFilteredLogs([]);
+	}, [containerId]);
+
+	useEffect(() => {
+		const logs = parseLogs(rawLogs);
+		const filtered = handleFilter(logs);
+		setFilteredLogs(filtered);
+	}, [rawLogs, search, lines, since, typeFilter]);
+
+	useEffect(() => {
+		scrollToBottom();
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="flex flex-col gap-2">
-				<Label>
-					<span>Number of lines to show</span>
-				</Label>
-				<Input
-					type="text"
-					placeholder="Number of lines to show (Defaults to 35)"
-					value={lines}
-					onChange={(e) => {
-						setLines(Number(e.target.value) || 1);
-					}}
-				/>
-			</div>
+			<div className="rounded-lg overflow-hidden">
+				<div className="space-y-4">
+					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
+						<div className="flex flex-wrap gap-4">
+							<LineCountFilter value={lines} onValueChange={handleLines} />
 
-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
-				<div id={id} />
+							<SinceLogsFilter
+								value={since}
+								onValueChange={handleSince}
+								showTimestamp={showTimestamp}
+								onTimestampChange={setShowTimestamp}
+							/>
+
+							<StatusLogsFilter
+								value={typeFilter}
+								setValue={setTypeFilter}
+								title="Log type"
+								options={priorities}
+							/>
+
+							<Input
+								type="search"
+								placeholder="Search logs..."
+								value={search}
+								onChange={handleSearch}
+								className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
+							/>
+						</div>
+
+						<Button
+							variant="outline"
+							size="sm"
+							className="h-9 sm:w-auto w-full"
+							onClick={handleDownload}
+							disabled={filteredLogs.length === 0 || !data?.Name}
+						>
+							<DownloadIcon className="mr-2 h-4 w-4" />
+							Download logs
+						</Button>
+					</div>
+					<div
+						ref={scrollRef}
+						onScroll={handleScroll}
+						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					>
+						{filteredLogs.length > 0 ? (
+							filteredLogs.map((filteredLog: LogLine, index: number) => (
+								<TerminalLine
+									key={index}
+									log={filteredLog}
+									searchTerm={search}
+									noTimestamp={!showTimestamp}
+								/>
+							))
+						) : isLoading ? (
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								<Loader2 className="h-6 w-6 animate-spin" />
+							</div>
+						) : (
+							<div className="flex justify-center items-center h-full text-muted-foreground">
+								No logs found
+							</div>
+						)}
+					</div>
+				</div>
 			</div>
 		</div>
 	);

apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx

@@ -0,0 +1,173 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
+import { debounce } from "lodash";
+import { CheckIcon, Hash } from "lucide-react";
+import React, { useCallback, useRef } from "react";
+
+const lineCountOptions = [
+	{ label: "100 lines", value: 100 },
+	{ label: "300 lines", value: 300 },
+	{ label: "500 lines", value: 500 },
+	{ label: "1000 lines", value: 1000 },
+	{ label: "5000 lines", value: 5000 },
+] as const;
+
+interface LineCountFilterProps {
+	value: number;
+	onValueChange: (value: number) => void;
+	title?: string;
+}
+
+export function LineCountFilter({
+	value,
+	onValueChange,
+	title = "Limit to",
+}: LineCountFilterProps) {
+	const [open, setOpen] = React.useState(false);
+	const [inputValue, setInputValue] = React.useState("");
+	const pendingValueRef = useRef<number | null>(null);
+
+	const isPresetValue = lineCountOptions.some(
+		(option) => option.value === value,
+	);
+
+	const debouncedValueChange = useCallback(
+		debounce((numValue: number) => {
+			if (numValue > 0 && numValue !== value) {
+				onValueChange(numValue);
+				pendingValueRef.current = null;
+			}
+		}, 500),
+		[onValueChange, value],
+	);
+
+	const handleInputChange = (input: string) => {
+		setInputValue(input);
+
+		// Extract numbers from input and convert
+		const numValue = Number.parseInt(input.replace(/[^0-9]/g, ""));
+		if (!Number.isNaN(numValue)) {
+			pendingValueRef.current = numValue;
+			debouncedValueChange(numValue);
+		}
+	};
+
+	const handleSelect = (selectedValue: string) => {
+		const preset = lineCountOptions.find((opt) => opt.label === selectedValue);
+		if (preset) {
+			if (preset.value !== value) {
+				onValueChange(preset.value);
+			}
+			setInputValue("");
+			setOpen(false);
+			return;
+		}
+
+		const numValue = Number.parseInt(selectedValue);
+		if (
+			!Number.isNaN(numValue) &&
+			numValue > 0 &&
+			numValue !== value &&
+			numValue !== pendingValueRef.current
+		) {
+			onValueChange(numValue);
+			setInputValue("");
+			setOpen(false);
+		}
+	};
+
+	React.useEffect(() => {
+		return () => {
+			debouncedValueChange.cancel();
+		};
+	}, [debouncedValueChange]);
+
+	const displayValue = isPresetValue
+		? lineCountOptions.find((option) => option.value === value)?.label
+		: `${value} lines`;
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							{displayValue}
+						</Badge>
+					</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<CommandPrimitive className="overflow-hidden rounded-md border border-none bg-popover text-popover-foreground">
+					<div className="flex items-center border-b px-3">
+						<Hash className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+						<CommandPrimitive.Input
+							placeholder="Number of lines"
+							value={inputValue}
+							onValueChange={handleInputChange}
+							className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+							onKeyDown={(e) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									const numValue = Number.parseInt(
+										inputValue.replace(/[^0-9]/g, ""),
+									);
+									if (
+										!Number.isNaN(numValue) &&
+										numValue > 0 &&
+										numValue !== value &&
+										numValue !== pendingValueRef.current
+									) {
+										handleSelect(inputValue);
+									}
+								}
+							}}
+						/>
+					</div>
+					<CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+						<CommandPrimitive.Group className="px-2 py-1.5">
+							{lineCountOptions.map((option) => {
+								const isSelected = value === option.value;
+								return (
+									<CommandPrimitive.Item
+										key={option.value}
+										onSelect={() => handleSelect(option.label)}
+										className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 aria-selected:bg-accent aria-selected:text-accent-foreground"
+									>
+										<div
+											className={cn(
+												"flex h-4 w-4 items-center justify-center rounded-sm border border-primary mr-2",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										<span>{option.label}</span>
+									</CommandPrimitive.Item>
+								);
+							})}
+						</CommandPrimitive.Group>
+					</CommandPrimitive.List>
+				</CommandPrimitive>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export default LineCountFilter;

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-logs.tsx

@@ -47,9 +47,9 @@ export const ShowDockerModalLogs = ({
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
 					<DockerLogsId
-						id="terminal"
 						containerId={containerId || ""}
 						serverId={serverId}
+						runType="native"
 					/>
 				</div>
 			</DialogContent>

apps/dokploy/components/dashboard/docker/logs/show-docker-modal-stack-logs.tsx

@@ -0,0 +1,58 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import dynamic from "next/dynamic";
+import type React from "react";
+export const DockerLogsId = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	containerId: string;
+	children?: React.ReactNode;
+	serverId?: string | null;
+}
+
+export const ShowDockerModalStackLogs = ({
+	containerId,
+	children,
+	serverId,
+}: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					{children}
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+				<DialogHeader>
+					<DialogTitle>View Logs</DialogTitle>
+					<DialogDescription>View the logs for {containerId}</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4 pt-2.5">
+					<DockerLogsId
+						containerId={containerId || ""}
+						serverId={serverId}
+						runType="swarm"
+					/>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/docker/logs/since-logs-filter.tsx

@@ -0,0 +1,125 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+import React from "react";
+
+export type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+
+const timeRanges: Array<{ label: string; value: TimeFilter }> = [
+	{
+		label: "All time",
+		value: "all",
+	},
+	{
+		label: "Last hour",
+		value: "1h",
+	},
+	{
+		label: "Last 6 hours",
+		value: "6h",
+	},
+	{
+		label: "Last 24 hours",
+		value: "24h",
+	},
+	{
+		label: "Last 7 days",
+		value: "168h",
+	},
+	{
+		label: "Last 30 days",
+		value: "720h",
+	},
+] as const;
+
+interface SinceLogsFilterProps {
+	value: TimeFilter;
+	onValueChange: (value: TimeFilter) => void;
+	showTimestamp: boolean;
+	onTimestampChange: (show: boolean) => void;
+	title?: string;
+}
+
+export function SinceLogsFilter({
+	value,
+	onValueChange,
+	showTimestamp,
+	onTimestampChange,
+	title = "Time range",
+}: SinceLogsFilterProps) {
+	const selectedLabel =
+		timeRanges.find((range) => range.value === value)?.label ??
+		"Select time range";
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							{selectedLabel}
+						</Badge>
+					</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<Command>
+					<CommandList>
+						<CommandGroup>
+							{timeRanges.map((range) => {
+								const isSelected = value === range.value;
+								return (
+									<CommandItem
+										key={range.value}
+										onSelect={() => {
+											if (!isSelected) {
+												onValueChange(range.value);
+											}
+										}}
+									>
+										<div
+											className={cn(
+												"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										<span className="text-sm">{range.label}</span>
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+				<Separator className="my-2" />
+				<div className="p-2 flex items-center justify-between">
+					<span className="text-sm">Show timestamps</span>
+					<Switch checked={showTimestamp} onCheckedChange={onTimestampChange} />
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/dashboard/docker/logs/status-logs-filter.tsx

@@ -0,0 +1,170 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { CheckIcon } from "lucide-react";
+import type React from "react";
+
+interface StatusLogsFilterProps {
+	value?: string[];
+	setValue?: (value: string[]) => void;
+	title?: string;
+	options: {
+		label: string;
+		value: string;
+		icon?: React.ComponentType<{ className?: string }>;
+	}[];
+}
+
+export function StatusLogsFilter({
+	value = [],
+	setValue,
+	title,
+	options,
+}: StatusLogsFilterProps) {
+	const selectedValues = new Set(value as string[]);
+	const allSelected = selectedValues.size === 0;
+
+	const getSelectedBadges = () => {
+		if (allSelected) {
+			return (
+				<Badge variant="blank" className="rounded-sm px-1 font-normal">
+					All
+				</Badge>
+			);
+		}
+
+		if (selectedValues.size >= 1) {
+			const selected = options.find((opt) => selectedValues.has(opt.value));
+			return (
+				<>
+					<Badge
+						variant={
+							selected?.value === "success"
+								? "green"
+								: selected?.value === "error"
+									? "red"
+									: selected?.value === "warning"
+										? "orange"
+										: selected?.value === "info"
+											? "blue"
+											: selected?.value === "debug"
+												? "yellow"
+												: "blank"
+						}
+						className="rounded-sm px-1 font-normal"
+					>
+						{selected?.label}
+					</Badge>
+					{selectedValues.size > 1 && (
+						<Badge variant="blank" className="rounded-sm px-1 font-normal">
+							+{selectedValues.size - 1}
+						</Badge>
+					)}
+				</>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-9 bg-input text-sm placeholder-gray-400 w-full sm:w-auto"
+				>
+					{title}
+					<Separator orientation="vertical" className="mx-2 h-4" />
+					<div className="space-x-1 flex">{getSelectedBadges()}</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0" align="start">
+				<Command>
+					<CommandList>
+						<CommandGroup>
+							<CommandItem
+								onSelect={() => {
+									setValue?.([]); // Empty array means "All"
+								}}
+							>
+								<div
+									className={cn(
+										"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+										allSelected
+											? "bg-primary text-primary-foreground"
+											: "opacity-50 [&_svg]:invisible",
+									)}
+								>
+									<CheckIcon className={cn("h-4 w-4")} />
+								</div>
+								<Badge variant="blank">All</Badge>
+							</CommandItem>
+							{options.map((option) => {
+								const isSelected = selectedValues.has(option.value);
+								return (
+									<CommandItem
+										key={option.value}
+										onSelect={() => {
+											const newValues = new Set(selectedValues);
+											if (isSelected) {
+												newValues.delete(option.value);
+											} else {
+												newValues.add(option.value);
+											}
+											setValue?.(Array.from(newValues));
+										}}
+									>
+										<div
+											className={cn(
+												"mr-2 flex h-4 w-4 items-center rounded-sm border border-primary",
+												isSelected
+													? "bg-primary text-primary-foreground"
+													: "opacity-50 [&_svg]:invisible",
+											)}
+										>
+											<CheckIcon className={cn("h-4 w-4")} />
+										</div>
+										{option.icon && (
+											<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+										)}
+										<Badge
+											variant={
+												option.value === "success"
+													? "green"
+													: option.value === "error"
+														? "red"
+														: option.value === "warning"
+															? "orange"
+															: option.value === "info"
+																? "blue"
+																: option.value === "debug"
+																	? "yellow"
+																	: "blank"
+											}
+										>
+											{option.label}
+										</Badge>
+									</CommandItem>
+								);
+							})}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}

apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx

@@ -0,0 +1,139 @@
+import { Badge } from "@/components/ui/badge";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipPortal,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { FancyAnsi } from "fancy-ansi";
+import { escapeRegExp } from "lodash";
+import React from "react";
+import { type LogLine, getLogType } from "./utils";
+
+interface LogLineProps {
+	log: LogLine;
+	noTimestamp?: boolean;
+	searchTerm?: string;
+}
+
+const fancyAnsi = new FancyAnsi();
+
+export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
+	const { timestamp, message, rawTimestamp } = log;
+	const { type, variant, color } = getLogType(message);
+
+	const formattedTime = timestamp
+		? timestamp.toLocaleString([], {
+				month: "2-digit",
+				day: "2-digit",
+				hour: "2-digit",
+				minute: "2-digit",
+				year: "2-digit",
+				second: "2-digit",
+			})
+		: "--- No time found ---";
+
+	const highlightMessage = (text: string, term: string) => {
+		if (!term) {
+			return (
+				<span
+					className="transition-colors"
+					dangerouslySetInnerHTML={{
+						__html: fancyAnsi.toHtml(text),
+					}}
+				/>
+			);
+		}
+
+		const htmlContent = fancyAnsi.toHtml(text);
+		const modifiedContent = htmlContent.replace(
+			/<span([^>]*)>([^<]*)<\/span>/g,
+			(match, attrs, content) => {
+				const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+				if (!content.match(searchRegex)) return match;
+
+				const segments = content.split(searchRegex);
+				const wrappedSegments = segments
+					.map((segment: string) =>
+						segment.toLowerCase() === term.toLowerCase()
+							? `<span${attrs} class="bg-yellow-200/50 dark:bg-yellow-900/50">${segment}</span>`
+							: segment,
+					)
+					.join("");
+
+				return `<span${attrs}>${wrappedSegments}</span>`;
+			},
+		);
+
+		return (
+			<span
+				className="transition-colors"
+				dangerouslySetInnerHTML={{ __html: modifiedContent }}
+			/>
+		);
+	};
+
+	const tooltip = (color: string, timestamp: string | null) => {
+		const square = (
+			<div className={cn("w-2 h-full flex-shrink-0 rounded-[3px]", color)} />
+		);
+		return timestamp ? (
+			<TooltipProvider delayDuration={0} disableHoverableContent>
+				<Tooltip>
+					<TooltipTrigger asChild>{square}</TooltipTrigger>
+					<TooltipPortal>
+						<TooltipContent
+							sideOffset={5}
+							className="bg-popover border-border z-[99999]"
+						>
+							<p className="text text-xs text-muted-foreground break-all max-w-md">
+								<pre>{timestamp}</pre>
+							</p>
+						</TooltipContent>
+					</TooltipPortal>
+				</Tooltip>
+			</TooltipProvider>
+		) : (
+			square
+		);
+	};
+
+	return (
+		<div
+			className={cn(
+				"font-mono text-xs flex flex-row gap-3 py-2 sm:py-0.5 group",
+				type === "error"
+					? "bg-red-500/10 hover:bg-red-500/15"
+					: type === "warning"
+						? "bg-yellow-500/10 hover:bg-yellow-500/15"
+						: type === "debug"
+							? "bg-orange-500/10 hover:bg-orange-500/15"
+							: "hover:bg-gray-200/50 dark:hover:bg-gray-800/50",
+			)}
+		>
+			{" "}
+			<div className="flex items-start gap-x-2">
+				{/* Icon to expand the log item maybe implement a colapsible later */}
+				{/* <Square className="size-4 text-muted-foreground opacity-0 group-hover/logitem:opacity-100 transition-opacity" /> */}
+				{tooltip(color, rawTimestamp)}
+				{!noTimestamp && (
+					<span className="select-none pl-2 text-muted-foreground w-full sm:w-40 flex-shrink-0">
+						{formattedTime}
+					</span>
+				)}
+
+				<Badge
+					variant={variant}
+					className="w-14 justify-center text-[10px] px-1 py-0"
+				>
+					{type}
+				</Badge>
+			</div>
+			<span className="dark:text-gray-200 font-mono text-foreground whitespace-pre-wrap break-all">
+				{highlightMessage(message, searchTerm || "")}
+			</span>
+		</div>
+	);
+}

apps/dokploy/components/dashboard/docker/logs/utils.ts

@@ -0,0 +1,152 @@
+export type LogType = "error" | "warning" | "success" | "info" | "debug";
+export type LogVariant = "red" | "yellow" | "green" | "blue" | "orange";
+
+export interface LogLine {
+	rawTimestamp: string | null;
+	timestamp: Date | null;
+	message: string;
+}
+
+interface LogStyle {
+	type: LogType;
+	variant: LogVariant;
+	color: string;
+}
+
+const LOG_STYLES: Record<LogType, LogStyle> = {
+	error: {
+		type: "error",
+		variant: "red",
+		color: "bg-red-500/40",
+	},
+	warning: {
+		type: "warning",
+		variant: "orange",
+		color: "bg-orange-500/40",
+	},
+	debug: {
+		type: "debug",
+		variant: "yellow",
+		color: "bg-yellow-500/40",
+	},
+	success: {
+		type: "success",
+		variant: "green",
+		color: "bg-green-500/40",
+	},
+	info: {
+		type: "info",
+		variant: "blue",
+		color: "bg-blue-600/40",
+	},
+} as const;
+
+export function parseLogs(logString: string): LogLine[] {
+	// Regex to match the log line format
+	// Exemple of return :
+	// 1 2024-12-10T10:00:00.000Z The server is running on port 8080
+	// Should return :
+	// { timestamp: new Date("2024-12-10T10:00:00.000Z"),
+	// message: "The server is running on port 8080" }
+	const logRegex =
+		/^(?:(\d+)\s+)?(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC)?\s*(.*)$/;
+
+	return logString
+		.split("\n")
+		.map((line) => line.trim())
+		.filter((line) => line !== "")
+		.map((line) => {
+			const match = line.match(logRegex);
+			if (!match) return null;
+
+			const [, , timestamp, message] = match;
+
+			if (!message?.trim()) return null;
+
+			// Delete other timestamps and keep only the one from --timestamps
+			const cleanedMessage = message
+				?.replace(
+					/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
+					"",
+				)
+				.trim();
+
+			return {
+				rawTimestamp: timestamp ?? null,
+				timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
+				message: cleanedMessage,
+			};
+		})
+		.filter((log) => log !== null);
+}
+
+// Detect log type based on message content
+export const getLogType = (message: string): LogStyle => {
+	const lowerMessage = message.toLowerCase();
+
+	if (
+		/(?:^|\s)(?:info|inf|information):?\s/i.test(lowerMessage) ||
+		/\[(?:info|information)\]/i.test(lowerMessage) ||
+		/\b(?:status|state|current|progress)\b:?\s/i.test(lowerMessage) ||
+		/\b(?:processing|executing|performing)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.info;
+	}
+
+	if (
+		/(?:^|\s)(?:error|err):?\s/i.test(lowerMessage) ||
+		/\b(?:exception|failed|failure)\b/i.test(lowerMessage) ||
+		/(?:stack\s?trace):\s*$/i.test(lowerMessage) ||
+		/^\s*at\s+[\w.]+\s*\(?.+:\d+:\d+\)?/.test(lowerMessage) ||
+		/\b(?:uncaught|unhandled)\s+(?:exception|error)\b/i.test(lowerMessage) ||
+		/Error:\s.*(?:in|at)\s+.*:\d+(?::\d+)?/.test(lowerMessage) ||
+		/\b(?:errno|code):\s*(?:\d+|[A-Z_]+)\b/i.test(lowerMessage) ||
+		/\[(?:error|err|fatal)\]/i.test(lowerMessage) ||
+		/\b(?:crash|critical|fatal)\b/i.test(lowerMessage) ||
+		/\b(?:fail(?:ed|ure)?|broken|dead)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.error;
+	}
+
+	if (
+		/(?:^|\s)(?:warning|warn):?\s/i.test(lowerMessage) ||
+		/\[(?:warn(?:ing)?|attention)\]/i.test(lowerMessage) ||
+		/(?:deprecated|obsolete)\s+(?:since|in|as\s+of)/i.test(lowerMessage) ||
+		/\b(?:caution|attention|notice):\s/i.test(lowerMessage) ||
+		/(?:might|may|could)\s+(?:not|cause|lead\s+to)/i.test(lowerMessage) ||
+		/(?:!+\s*(?:warning|caution|attention)\s*!+)/i.test(lowerMessage) ||
+		/\b(?:deprecated|obsolete)\b/i.test(lowerMessage) ||
+		/\b(?:unstable|experimental)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.warning;
+	}
+
+	if (
+		/(?:successfully|complete[d]?)\s+(?:initialized|started|completed|created|done|deployed)/i.test(
+			lowerMessage,
+		) ||
+		/\[(?:success|ok|done)\]/i.test(lowerMessage) ||
+		/(?:listening|running)\s+(?:on|at)\s+(?:port\s+)?\d+/i.test(lowerMessage) ||
+		/(?:connected|established|ready)\s+(?:to|for|on)/i.test(lowerMessage) ||
+		/\b(?:loaded|mounted|initialized)\s+successfully\b/i.test(lowerMessage) ||
+		/✓|√|✅|\[ok\]|done!/i.test(lowerMessage) ||
+		/\b(?:success(?:ful)?|completed|ready)\b/i.test(lowerMessage) ||
+		/\b(?:started|starting|active)\b/i.test(lowerMessage)
+	) {
+		return LOG_STYLES.success;
+	}
+
+	if (
+		/(?:^|\s)(?:info|inf):?\s/i.test(lowerMessage) ||
+		/\[(info|log|debug|trace|server|db|api|http|request|response)\]/i.test(
+			lowerMessage,
+		) ||
+		/\b(?:version|config|import|load|get|HTTP|PATCH|POST|debug)\b:?/i.test(
+			lowerMessage,
+		)
+	) {
+		return LOG_STYLES.debug;
+	}
+
+	return LOG_STYLES.info;
+};

apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx

@@ -59,7 +59,10 @@ export const DockerTerminalModal = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent
+				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
+				onEscapeKeyDown={(event) => event.preventDefault()}
+			>
 				<DialogHeader>
 					<DialogTitle>Docker Terminal</DialogTitle>
 					<DialogDescription>
@@ -73,7 +76,7 @@ export const DockerTerminalModal = ({
 					serverId={serverId || ""}
 				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
-					<DialogContent>
+					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
 						<DialogHeader>
 							<DialogTitle>
 								Are you sure you want to close the terminal?

apps/dokploy/components/dashboard/docker/terminal/docker-terminal.tsx

@@ -4,6 +4,7 @@ import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AttachAddon } from "@xterm/addon-attach";
+import { useTheme } from "next-themes";
 
 interface Props {
 	id: string;
@@ -18,6 +19,7 @@ export const DockerTerminal: React.FC<Props> = ({
 }) => {
 	const termRef = useRef(null);
 	const [activeWay, setActiveWay] = React.useState<string | undefined>("bash");
+	const { resolvedTheme } = useTheme();
 	useEffect(() => {
 		const container = document.getElementById(id);
 		if (container) {
@@ -25,13 +27,12 @@ export const DockerTerminal: React.FC<Props> = ({
 		}
 		const term = new Terminal({
 			cursorBlink: true,
-			cols: 80,
-			rows: 30,
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
-				cursor: "transparent",
+				cursor: resolvedTheme === "light" ? "#000000" : "transparent",
 				background: "rgba(0, 0, 0, 0)",
+				foreground: "currentColor",
 			},
 		});
 		const addonFit = new FitAddon();
@@ -45,6 +46,7 @@ export const DockerTerminal: React.FC<Props> = ({
 		const addonAttach = new AttachAddon(ws);
 		// @ts-ignore
 		term.open(termRef.current);
+		// @ts-ignore
 		term.loadAddon(addonFit);
 		term.loadAddon(addonAttach);
 		addonFit.fit();
@@ -66,7 +68,7 @@ export const DockerTerminal: React.FC<Props> = ({
 					</TabsList>
 				</Tabs>
 			</div>
-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
+			<div className="w-full h-full rounded-lg p-2 bg-transparent border">
 				<div id={id} ref={termRef} />
 			</div>
 		</div>

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -99,9 +100,26 @@ export const DeleteMariadb = ({ mariadbId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -98,9 +99,26 @@ export const DeleteMongo = ({ mongoId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -97,9 +98,26 @@ export const DeleteMysql = ({ mysqlId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -100,9 +101,26 @@ export const DeletePostgres = ({ postgresId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -213,7 +213,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 							name="appName"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>AppName</FormLabel>
+									<FormLabel>App Name</FormLabel>
 									<FormControl>
 										<Input placeholder="my-app" {...field} />
 									</FormControl>

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

@@ -220,7 +220,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 							name="appName"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel>AppName</FormLabel>
+									<FormLabel>App Name</FormLabel>
 									<FormControl>
 										<Input placeholder="my-app" {...field} />
 									</FormControl>

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

@@ -18,6 +18,7 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -35,6 +36,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
@@ -95,6 +97,7 @@ const mySchema = z.discriminatedUnion("type", [
 		.object({
 			type: z.literal("mongo"),
 			databaseUser: z.string().default("mongo"),
+			replicaSets: z.boolean().default(false),
 		})
 		.merge(baseDatabaseSchema),
 	z
@@ -216,6 +219,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 				databaseUser:
 					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
 				serverId: data.serverId,
+				replicaSets: data.replicaSets,
 			});
 		} else if (data.type === "redis") {
 			promise = redisMutation.mutateAsync({
@@ -412,7 +416,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 									name="appName"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>AppName</FormLabel>
+											<FormLabel>App Name</FormLabel>
 											<FormControl>
 												<Input placeholder="my-app" {...field} />
 											</FormControl>
@@ -471,6 +475,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 												<FormControl>
 													<Input
 														placeholder={`Default ${databasesUserDefaultPlaceholder[type]}`}
+														autoComplete="off"
 														{...field}
 													/>
 												</FormControl>
@@ -491,6 +496,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 												<Input
 													type="password"
 													placeholder="******************"
+													autoComplete="off"
 													{...field}
 												/>
 											</FormControl>
@@ -540,6 +546,30 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 										);
 									}}
 								/>
+
+								{type === "mongo" && (
+									<FormField
+										control={form.control}
+										name="replicaSets"
+										render={({ field }) => {
+											return (
+												<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Use Replica Sets</FormLabel>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+
+													<FormMessage />
+												</FormItem>
+											);
+										}}
+									/>
+								)}
 							</div>
 						</div>
 					</form>

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

@@ -92,7 +92,8 @@ export const AddTemplate = ({ projectId }: Props) => {
 				template.tags.some((tag) => selectedTags.includes(tag));
 			const matchesQuery =
 				query === "" ||
-				template.name.toLowerCase().includes(query.toLowerCase());
+				template.name.toLowerCase().includes(query.toLowerCase()) ||
+				template.description.toLowerCase().includes(query.toLowerCase());
 			return matchesTags && matchesQuery;
 		}) || [];
 

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

@@ -109,7 +109,9 @@ export const ShowProjects = () => {
 													<Link
 														className="space-x-4 text-xs cursor-pointer justify-between"
 														target="_blank"
-														href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+														href={`${domain.https ? "https" : "http"}://${
+															domain.host
+														}${domain.path}`}
 													>
 														<span>{domain.host}</span>
 														<ExternalLink className="size-4 shrink-0" />
@@ -153,7 +155,9 @@ export const ShowProjects = () => {
 											onClick={(e) => e.stopPropagation()}
 										>
 											<Link
-												href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
+												href={`${
+													flattedDomains[0].https ? "https" : "http"
+												}://${flattedDomains[0].host}${flattedDomains[0].path}`}
 												target="_blank"
 											>
 												<ExternalLinkIcon className="size-3.5" />

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
+import { Copy, TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -97,9 +98,26 @@ export const DeleteRedis = ({ redisId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
+										<FormLabel className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
 										</FormLabel>
 										<FormControl>
 											<Input

apps/dokploy/components/dashboard/search-command.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import {
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+	RedisIcon,
+} from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
+import {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+} from "@/components/ui/command";
+import {
+	type Services,
+	extractServices,
+} from "@/pages/dashboard/project/[projectId]";
+import { api } from "@/utils/api";
+import type { findProjectById } from "@dokploy/server/services/project";
+import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import React from "react";
+import { StatusTooltip } from "../shared/status-tooltip";
+
+type Project = Awaited<ReturnType<typeof findProjectById>>;
+
+export const SearchCommand = () => {
+	const router = useRouter();
+	const [open, setOpen] = React.useState(false);
+	const [search, setSearch] = React.useState("");
+
+	const { data } = api.project.all.useQuery();
+	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
+
+	React.useEffect(() => {
+		const down = (e: KeyboardEvent) => {
+			if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				setOpen((open) => !open);
+			}
+		};
+
+		document.addEventListener("keydown", down);
+		return () => document.removeEventListener("keydown", down);
+	}, []);
+
+	return (
+		<div>
+			<CommandDialog open={open} onOpenChange={setOpen}>
+				<CommandInput
+					placeholder={"Search projects or settings"}
+					value={search}
+					onValueChange={setSearch}
+				/>
+				<CommandList>
+					<CommandEmpty>
+						No projects added yet. Click on Create project.
+					</CommandEmpty>
+					<CommandGroup heading={"Projects"}>
+						<CommandList>
+							{data?.map((project) => (
+								<CommandItem
+									key={project.projectId}
+									onSelect={() => {
+										router.push(`/dashboard/project/${project.projectId}`);
+										setOpen(false);
+									}}
+								>
+									<BookIcon className="size-4 text-muted-foreground mr-2" />
+									{project.name}
+								</CommandItem>
+							))}
+						</CommandList>
+					</CommandGroup>
+					<CommandSeparator />
+					<CommandGroup heading={"Services"}>
+						<CommandList>
+							{data?.map((project) => {
+								const applications: Services[] = extractServices(project);
+								return applications.map((application) => (
+									<CommandItem
+										key={application.id}
+										onSelect={() => {
+											router.push(
+												`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`,
+											);
+											setOpen(false);
+										}}
+									>
+										{application.type === "postgres" && (
+											<PostgresqlIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "redis" && (
+											<RedisIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mariadb" && (
+											<MariadbIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mongo" && (
+											<MongodbIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mysql" && (
+											<MysqlIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "application" && (
+											<GlobeIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "compose" && (
+											<CircuitBoard className="h-6 w-6 mr-2" />
+										)}
+										<span className="flex-grow">
+											{project.name} / {application.name}{" "}
+											<div style={{ display: "none" }}>{application.id}</div>
+										</span>
+										<div>
+											<StatusTooltip status={application.status} />
+										</div>
+									</CommandItem>
+								));
+							})}
+						</CommandList>
+					</CommandGroup>
+					<CommandSeparator />
+					<CommandGroup heading={"Application"} hidden={true}>
+						<CommandItem
+							onSelect={() => {
+								router.push("/dashboard/projects");
+								setOpen(false);
+							}}
+						>
+							Projects
+						</CommandItem>
+						{!isCloud && (
+							<>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/monitoring");
+										setOpen(false);
+									}}
+								>
+									Monitoring
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/traefik");
+										setOpen(false);
+									}}
+								>
+									Traefik
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/docker");
+										setOpen(false);
+									}}
+								>
+									Docker
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/requests");
+										setOpen(false);
+									}}
+								>
+									Requests
+								</CommandItem>
+							</>
+						)}
+						<CommandItem
+							onSelect={() => {
+								router.push("/dashboard/settings/server");
+								setOpen(false);
+							}}
+						>
+							Settings
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</CommandDialog>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx

@@ -45,6 +45,9 @@ import { z } from "zod";
 const certificateDataHolder =
 	"-----BEGIN CERTIFICATE-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n------END CERTIFICATE-----";
 
+const privateKeyDataHolder =
+	"-----BEGIN PRIVATE KEY-----\nMIIFRDCCAyygAwIBAgIUEPOR47ys6VDwMVB9tYoeEka83uQwDQYJKoZIhvcNAQELBQAwGTEXMBUGA1UEAwwObWktZG9taW5pby5jb20wHhcNMjQwMzExMDQyNzU3WhcN\n-----END PRIVATE KEY-----";
+
 const addCertificate = z.object({
 	name: z.string().min(1, "Name is required"),
 	certificateData: z.string().min(1, "Certificate data is required"),
@@ -154,7 +157,7 @@ export const AddCertificate = () => {
 									<FormControl>
 										<Textarea
 											className="h-32"
-											placeholder={certificateDataHolder}
+											placeholder={privateKeyDataHolder}
 											{...field}
 										/>
 									</FormControl>

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

@@ -6,13 +6,144 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { ShieldCheck } from "lucide-react";
+import { AlertCircle, Link, ShieldCheck } from "lucide-react";
 import { AddCertificate } from "./add-certificate";
 import { DeleteCertificate } from "./delete-certificate";
 
 export const ShowCertificates = () => {
 	const { data } = api.certificates.all.useQuery();
 
+	const extractExpirationDate = (certData: string): Date | null => {
+		try {
+			const match = certData.match(
+				/-----BEGIN CERTIFICATE-----\s*([^-]+)\s*-----END CERTIFICATE-----/,
+			);
+			if (!match?.[1]) return null;
+
+			const base64Cert = match[1].replace(/\s/g, "");
+			const binaryStr = window.atob(base64Cert);
+			const bytes = new Uint8Array(binaryStr.length);
+
+			for (let i = 0; i < binaryStr.length; i++) {
+				bytes[i] = binaryStr.charCodeAt(i);
+			}
+
+			let dateFound = 0;
+			for (let i = 0; i < bytes.length - 2; i++) {
+				if (bytes[i] === 0x17 || bytes[i] === 0x18) {
+					const dateType = bytes[i];
+					const dateLength = bytes[i + 1];
+					if (typeof dateLength === "undefined") continue;
+
+					if (dateFound === 0) {
+						dateFound++;
+						i += dateLength + 1;
+						continue;
+					}
+
+					let dateStr = "";
+					for (let j = 0; j < dateLength; j++) {
+						const charCode = bytes[i + 2 + j];
+						if (typeof charCode === "undefined") continue;
+						dateStr += String.fromCharCode(charCode);
+					}
+
+					if (dateType === 0x17) {
+						// UTCTime (YYMMDDhhmmssZ)
+						const year = Number.parseInt(dateStr.slice(0, 2));
+						const fullYear = year >= 50 ? 1900 + year : 2000 + year;
+						return new Date(
+							Date.UTC(
+								fullYear,
+								Number.parseInt(dateStr.slice(2, 4)) - 1,
+								Number.parseInt(dateStr.slice(4, 6)),
+								Number.parseInt(dateStr.slice(6, 8)),
+								Number.parseInt(dateStr.slice(8, 10)),
+								Number.parseInt(dateStr.slice(10, 12)),
+							),
+						);
+					}
+
+					// GeneralizedTime (YYYYMMDDhhmmssZ)
+					return new Date(
+						Date.UTC(
+							Number.parseInt(dateStr.slice(0, 4)),
+							Number.parseInt(dateStr.slice(4, 6)) - 1,
+							Number.parseInt(dateStr.slice(6, 8)),
+							Number.parseInt(dateStr.slice(8, 10)),
+							Number.parseInt(dateStr.slice(10, 12)),
+							Number.parseInt(dateStr.slice(12, 14)),
+						),
+					);
+				}
+			}
+			return null;
+		} catch (error) {
+			console.error("Error parsing certificate:", error);
+			return null;
+		}
+	};
+
+	const getExpirationStatus = (certData: string) => {
+		const expirationDate = extractExpirationDate(certData);
+
+		if (!expirationDate)
+			return {
+				status: "unknown" as const,
+				className: "text-muted-foreground",
+				message: "Could not determine expiration",
+			};
+
+		const now = new Date();
+		const daysUntilExpiration = Math.ceil(
+			(expirationDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+		);
+
+		if (daysUntilExpiration < 0) {
+			return {
+				status: "expired" as const,
+				className: "text-red-500",
+				message: `Expired on ${expirationDate.toLocaleDateString([], {
+					year: "numeric",
+					month: "long",
+					day: "numeric",
+				})}`,
+			};
+		}
+
+		if (daysUntilExpiration <= 30) {
+			return {
+				status: "warning" as const,
+				className: "text-yellow-500",
+				message: `Expires in ${daysUntilExpiration} days`,
+			};
+		}
+
+		return {
+			status: "valid" as const,
+			className: "text-muted-foreground",
+			message: `Expires ${expirationDate.toLocaleDateString([], {
+				year: "numeric",
+				month: "long",
+				day: "numeric",
+			})}`,
+		};
+	};
+
+	const getCertificateChainInfo = (certData: string) => {
+		const certCount = (certData.match(/-----BEGIN CERTIFICATE-----/g) || [])
+			.length;
+		return certCount > 1
+			? {
+					isChain: true,
+					count: certCount,
+				}
+			: {
+					isChain: false,
+					count: 1,
+				};
+	};
+
 	return (
 		<div className="h-full">
 			<Card className="bg-transparent h-full">
@@ -23,7 +154,7 @@ export const ShowCertificates = () => {
 					</CardDescription>
 				</CardHeader>
 				<CardContent className="space-y-2 pt-4 h-full">
-					{data?.length === 0 ? (
+					{!data?.length ? (
 						<div className="flex flex-col items-center gap-3">
 							<ShieldCheck className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
@@ -35,21 +166,53 @@ export const ShowCertificates = () => {
 					) : (
 						<div className="flex flex-col gap-6">
 							<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-								{data?.map((destination, index) => (
-									<div
-										key={destination.certificateId}
-										className="flex items-center justify-between border p-4 rounded-lg"
-									>
-										<span className="text-sm text-muted-foreground">
-											{index + 1}. {destination.name}
-										</span>
-										<div className="flex flex-row gap-3">
-											<DeleteCertificate
-												certificateId={destination.certificateId}
-											/>
+								{data.map((certificate, index) => {
+									const expiration = getExpirationStatus(
+										certificate.certificateData,
+									);
+									const chainInfo = getCertificateChainInfo(
+										certificate.certificateData,
+									);
+									return (
+										<div
+											key={certificate.certificateId}
+											className="flex flex-col border p-4 rounded-lg space-y-2"
+										>
+											<div className="flex items-center justify-between">
+												<div className="flex items-center gap-2">
+													<span className="text-sm font-medium">
+														{index + 1}. {certificate.name}
+													</span>
+													{chainInfo.isChain && (
+														<div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-muted/50">
+															<Link className="size-3 text-muted-foreground" />
+															<span className="text-xs text-muted-foreground">
+																Chain ({chainInfo.count})
+															</span>
+														</div>
+													)}
+												</div>
+												<DeleteCertificate
+													certificateId={certificate.certificateId}
+												/>
+											</div>
+											<div
+												className={`text-xs flex items-center gap-1.5 ${expiration.className}`}
+											>
+												{expiration.status !== "valid" && (
+													<AlertCircle className="size-3" />
+												)}
+												{expiration.message}
+												{certificate.autoRenew &&
+													expiration.status !== "valid" && (
+														<span className="text-xs text-emerald-500 ml-1">
+															(Auto-renewal enabled)
+														</span>
+													)}
+											</div>
 										</div>
-									</div>
-								))}
+									);
+								})}
 							</div>
 							<div>
 								<AddCertificate />

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

@@ -1,3 +1,4 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Dialog,
 	DialogContent,
@@ -33,7 +34,13 @@ export const ShowNodeData = ({ data }: Props) => {
 				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card">
 					<code>
 						<pre className="whitespace-pre-wrap break-words">
-							{JSON.stringify(data, null, 2)}
+							<CodeEditor
+								language="json"
+								lineWrapping
+								lineNumbers={false}
+								readOnly
+								value={JSON.stringify(data, null, 2)}
+							/>
 						</pre>
 					</code>
 				</div>

apps/dokploy/components/dashboard/settings/cluster/registry/add-docker-registry.tsx

@@ -159,7 +159,11 @@ export const AddRegistry = () => {
 									<FormItem>
 										<FormLabel>Username</FormLabel>
 										<FormControl>
-											<Input placeholder="Username" {...field} />
+											<Input
+												placeholder="Username"
+												autoComplete="off"
+												{...field}
+											/>
 										</FormControl>
 
 										<FormMessage />
@@ -177,6 +181,7 @@ export const AddRegistry = () => {
 										<FormControl>
 											<Input
 												placeholder="Password"
+												autoComplete="off"
 												{...field}
 												type="password"
 											/>

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

@@ -107,7 +107,24 @@ export const AddGithubProvider = () => {
 								/>
 								<br />
 
-								<div className="flex w-full justify-end">
+								<div className="flex w-full items-center justify-between">
+									<a
+										href={
+											isOrganization && organizationName
+												? `https://github.com/organizations/${organizationName}/settings/installations`
+												: "https://github.com/settings/installations"
+										}
+										className={`text-muted-foreground text-sm hover:underline duration-300
+											 ${
+													isOrganization && !organizationName
+														? "pointer-events-none opacity-50"
+														: ""
+												}`}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										Unsure if you already have an app?
+									</a>
 									<Button
 										disabled={isOrganization && organizationName.length < 1}
 										type="submit"

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

@@ -33,6 +33,9 @@ const Schema = z.object({
 	name: z.string().min(1, {
 		message: "Name is required",
 	}),
+	gitlabUrl: z.string().min(1, {
+		message: "GitLab URL is required",
+	}),
 	applicationId: z.string().min(1, {
 		message: "Application ID is required",
 	}),
@@ -62,16 +65,22 @@ export const AddGitlabProvider = () => {
 			applicationSecret: "",
 			groupName: "",
 			redirectUri: webhookUrl,
+			name: "",
+			gitlabUrl: "https://gitlab.com",
 		},
 		resolver: zodResolver(Schema),
 	});
 
+	const gitlabUrl = form.watch("gitlabUrl");
+
 	useEffect(() => {
 		form.reset({
 			applicationId: "",
 			applicationSecret: "",
 			groupName: "",
 			redirectUri: webhookUrl,
+			name: "",
+			gitlabUrl: "https://gitlab.com",
 		});
 	}, [form, isOpen]);
 
@@ -83,6 +92,7 @@ export const AddGitlabProvider = () => {
 			authId: auth?.id || "",
 			name: data.name || "",
 			redirectUri: data.redirectUri || "",
+			gitlabUrl: data.gitlabUrl || "https://gitlab.com",
 		})
 			.then(async () => {
 				await utils.gitProvider.getAll.invalidate();
@@ -129,7 +139,7 @@ export const AddGitlabProvider = () => {
 									<li className="flex flex-row gap-2 items-center">
 										Go to your GitLab profile settings{" "}
 										<Link
-											href="https://gitlab.com/-/profile/applications"
+											href={`${gitlabUrl}/-/profile/applications`}
 											target="_blank"
 										>
 											<ExternalLink className="w-fit text-primary size-4" />
@@ -169,6 +179,20 @@ export const AddGitlabProvider = () => {
 									)}
 								/>
 
+								<FormField
+									control={form.control}
+									name="gitlabUrl"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Gitlab URL</FormLabel>
+											<FormControl>
+												<Input placeholder="https://gitlab.com/" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
 								<FormField
 									control={form.control}
 									name="redirectUri"

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

@@ -30,6 +30,9 @@ const Schema = z.object({
 	name: z.string().min(1, {
 		message: "Name is required",
 	}),
+	gitlabUrl: z.string().url({
+		message: "Invalid Gitlab URL",
+	}),
 	groupName: z.string().optional(),
 });
 
@@ -40,7 +43,7 @@ interface Props {
 }
 
 export const EditGitlabProvider = ({ gitlabId }: Props) => {
-	const { data: gitlab } = api.gitlab.one.useQuery(
+	const { data: gitlab, refetch } = api.gitlab.one.useQuery(
 		{
 			gitlabId,
 		},
@@ -57,6 +60,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 		defaultValues: {
 			groupName: "",
 			name: "",
+			gitlabUrl: "https://gitlab.com",
 		},
 		resolver: zodResolver(Schema),
 	});
@@ -67,6 +71,7 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 		form.reset({
 			groupName: gitlab?.groupName || "",
 			name: gitlab?.gitProvider.name || "",
+			gitlabUrl: gitlab?.gitlabUrl || "",
 		});
 	}, [form, isOpen]);
 
@@ -76,11 +81,13 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 			gitProviderId: gitlab?.gitProviderId || "",
 			groupName: data.groupName || "",
 			name: data.name || "",
+			gitlabUrl: data.gitlabUrl || "",
 		})
 			.then(async () => {
 				await utils.gitProvider.getAll.invalidate();
 				toast.success("Gitlab updated successfully");
 				setIsOpen(false);
+				refetch();
 			})
 			.catch(() => {
 				toast.error("Error to update Gitlab");
@@ -126,6 +133,19 @@ export const EditGitlabProvider = ({ gitlabId }: Props) => {
 										</FormItem>
 									)}
 								/>
+								<FormField
+									control={form.control}
+									name="gitlabUrl"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Gitlab Url</FormLabel>
+											<FormControl>
+												<Input placeholder="https://gitlab.com" {...field} />
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 
 								<FormField
 									control={form.control}

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

@@ -23,12 +23,16 @@ export const ShowGitProviders = () => {
 
 	const url = useUrl();
 
-	const getGitlabUrl = (clientId: string, gitlabId: string) => {
+	const getGitlabUrl = (
+		clientId: string,
+		gitlabId: string,
+		gitlabUrl: string,
+	) => {
 		const redirectUri = `${url}/api/providers/gitlab/callback?gitlabId=${gitlabId}`;
 
 		const scope = "api read_user read_repository";
 
-		const authUrl = `https://gitlab.com/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
+		const authUrl = `${gitlabUrl}/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&response_type=code&scope=${encodeURIComponent(scope)}`;
 
 		return authUrl;
 	};
@@ -142,6 +146,7 @@ export const ShowGitProviders = () => {
 												href={getGitlabUrl(
 													gitProvider.gitlab?.applicationId || "",
 													gitProvider.gitlab?.gitlabId || "",
+													gitProvider.gitlab?.gitlabUrl,
 												)}
 												target="_blank"
 												className={buttonVariants({

apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx

@@ -64,6 +64,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
 		.object({
 			type: z.literal("discord"),
 			webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
+			decoration: z.boolean().default(true),
 		})
 		.merge(notificationBaseSchema),
 	z
@@ -195,6 +196,7 @@ export const AddNotification = () => {
 				dokployRestart: dokployRestart,
 				databaseBackup: databaseBackup,
 				webhookUrl: data.webhookUrl,
+				decoration: data.decoration,
 				name: data.name,
 				dockerCleanup: dockerCleanup,
 			});
@@ -397,23 +399,47 @@ export const AddNotification = () => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 
 								{type === "email" && (
@@ -708,6 +734,7 @@ export const AddNotification = () => {
 									} else if (type === "discord") {
 										await testDiscordConnection({
 											webhookUrl: form.getValues("webhookUrl"),
+											decoration: form.getValues("decoration"),
 										});
 									} else if (type === "email") {
 										await testEmailConnection({

apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
-import { TrashIcon } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
 
@@ -24,8 +24,13 @@ export const DeleteNotification = ({ notificationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground" />
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-9 w-9 group hover:bg-red-500/10"
+					isLoading={isLoading}
+				>
+					<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>

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

@@ -40,34 +40,45 @@ export const ShowNotifications = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-4">
-							<div className="grid lg:grid-cols-2 xl:grid-cols-3 gap-4">
+							<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
 								{data?.map((notification, index) => (
 									<div
 										key={notification.notificationId}
-										className="flex items-center justify-between border gap-2 p-3.5 rounded-lg"
+										className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 bg-gray-200/50 border border-card"
 									>
-										<div className="flex flex-row gap-2 items-center w-full ">
+										<div className="flex items-center gap-4">
 											{notification.notificationType === "slack" && (
-												<SlackIcon className="text-muted-foreground size-6 flex-shrink-0" />
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<SlackIcon className="h-6 w-6 text-indigo-400" />
+												</div>
 											)}
 											{notification.notificationType === "telegram" && (
-												<TelegramIcon className="text-muted-foreground size-8 flex-shrink-0" />
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
+													<TelegramIcon className="h-6 w-6 text-indigo-400" />
+												</div>
 											)}
 											{notification.notificationType === "discord" && (
-												<DiscordIcon className="text-muted-foreground size-7 flex-shrink-0" />
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<DiscordIcon className="h-6 w-6 text-indigo-400" />
+												</div>
 											)}
 											{notification.notificationType === "email" && (
-												<Mail
-													size={29}
-													className="text-muted-foreground size-6 flex-shrink-0"
-												/>
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
+													<Mail className="h-6 w-6 text-indigo-400" />
+												</div>
 											)}
-											<span className="text-sm text-muted-foreground">
-												{notification.name}
-											</span>
+											<div className="flex flex-col">
+												<span className="text-sm font-medium dark:text-zinc-300 text-zinc-800">
+													{notification.name}
+												</span>
+												<span className="text-xs font-medium text-muted-foreground">
+													{notification.notificationType?.[0]?.toUpperCase() +
+														notification.notificationType?.slice(1)}{" "}
+													notification
+												</span>
+											</div>
 										</div>
-
-										<div className="flex flex-row gap-1 w-fit">
+										<div className="flex items-center gap-2">
 											<UpdateNotification
 												notificationId={notification.notificationId}
 											/>
@@ -78,6 +89,7 @@ export const ShowNotifications = () => {
 									</div>
 								))}
 							</div>
+
 							<div className="flex flex-col gap-4 justify-end w-full items-end">
 								<AddNotification />
 							</div>

apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx

@@ -26,9 +26,9 @@ import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Mail, PenBoxIcon } from "lucide-react";
+import { Mail, Pen } from "lucide-react";
 import { useEffect, useState } from "react";
-import { FieldErrors, useFieldArray, useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import {
 	type NotificationSchema,
@@ -113,6 +113,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 					databaseBackup: data.databaseBackup,
 					type: data.notificationType,
 					webhookUrl: data.discord?.webhookUrl,
+					decoration: data.discord?.decoration || undefined,
 					name: data.name,
 					dockerCleanup: data.dockerCleanup,
 				});
@@ -178,6 +179,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 				dokployRestart: dokployRestart,
 				databaseBackup: databaseBackup,
 				webhookUrl: formData.webhookUrl,
+				decoration: formData.decoration,
 				name: formData.name,
 				notificationId: notificationId,
 				discordId: data?.discordId,
@@ -218,8 +220,12 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost">
-					<PenBoxIcon className="size-4  text-muted-foreground" />
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80"
+				>
+					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
@@ -356,23 +362,46 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="decoration"
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 								{type === "email" && (
 									<>
@@ -667,6 +696,7 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 									} else if (type === "discord") {
 										await testDiscordConnection({
 											webhookUrl: form.getValues("webhookUrl"),
+											decoration: form.getValues("decoration"),
 										});
 									} else if (type === "email") {
 										await testEmailConnection({

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -30,6 +31,7 @@ import { Enable2FA } from "./enable-2fa";
 const profileSchema = z.object({
 	email: z.string(),
 	password: z.string().nullable(),
+	currentPassword: z.string().nullable(),
 	image: z.string().optional(),
 });
 
@@ -52,7 +54,8 @@ const randomImages = [
 
 export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
-	const { mutateAsync, isLoading } = api.auth.update.useMutation();
+	const { mutateAsync, isLoading, isError, error } =
+		api.auth.update.useMutation();
 	const { t } = useTranslation("settings");
 	const [gravatarHash, setGravatarHash] = useState<string | null>(null);
 
@@ -68,6 +71,7 @@ export const ProfileForm = () => {
 			email: data?.email || "",
 			password: "",
 			image: data?.image || "",
+			currentPassword: "",
 		},
 		resolver: zodResolver(profileSchema),
 	});
@@ -78,6 +82,7 @@ export const ProfileForm = () => {
 				email: data?.email || "",
 				password: "",
 				image: data?.image || "",
+				currentPassword: "",
 			});
 
 			if (data.email) {
@@ -94,10 +99,12 @@ export const ProfileForm = () => {
 			email: values.email.toLowerCase(),
 			password: values.password,
 			image: values.image,
+			currentPassword: values.currentPassword,
 		})
 			.then(async () => {
 				await refetch();
 				toast.success("Profile Updated");
+				form.reset();
 			})
 			.catch(() => {
 				toast.error("Error to Update the profile");
@@ -116,6 +123,8 @@ export const ProfileForm = () => {
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
 			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
 				<Form {...form}>
 					<form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
 						<div className="space-y-4">
@@ -135,6 +144,24 @@ export const ProfileForm = () => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="currentPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Current Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 							<FormField
 								control={form.control}
 								name="password"

apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx

@@ -0,0 +1,130 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const profileSchema = z.object({
+	password: z.string().min(1, {
+		message: "Password is required",
+	}),
+});
+
+type Profile = z.infer<typeof profileSchema>;
+
+export const RemoveSelfAccount = () => {
+	const { data } = api.auth.get.useQuery();
+	const { mutateAsync, isLoading, error, isError } =
+		api.auth.removeSelfAccount.useMutation();
+	const { t } = useTranslation("settings");
+	const router = useRouter();
+
+	const form = useForm<Profile>({
+		defaultValues: {
+			password: "",
+		},
+		resolver: zodResolver(profileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				password: "",
+			});
+		}
+		form.reset();
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (values: Profile) => {
+		await mutateAsync({
+			password: values.password,
+		})
+			.then(async () => {
+				toast.success("Profile Deleted");
+				router.push("/");
+			})
+			.catch(() => {});
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="flex flex-row gap-2 flex-wrap justify-between items-center">
+				<div>
+					<CardTitle className="text-xl">Remove Self Account</CardTitle>
+					<CardDescription>
+						If you want to remove your account, you can do it here
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="space-y-2">
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						onSubmit={(e) => e.preventDefault()}
+						onKeyDown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+							}
+						}}
+						className="grid gap-4"
+					>
+						<div className="space-y-4">
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder={t("settings.profile.password")}
+												{...field}
+												value={field.value || ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+				</Form>
+				<div>
+					<DialogAction
+						title="Are you sure you want to remove your account?"
+						description="This action cannot be undone, all your projects/servers will be deleted."
+						onClick={() => form.handleSubmit(onSubmit)()}
+					>
+						<Button type="button" isLoading={isLoading} variant="destructive">
+							Remove
+						</Button>
+					</DialogAction>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -25,6 +25,7 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "next-i18next";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
+import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";
 
 interface Props {
@@ -128,6 +129,14 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 										<span>Enter the terminal</span>
 									</DropdownMenuItem>
 								</DockerTerminalModal> */}
+					<ManageTraefikPorts serverId={serverId}>
+						<DropdownMenuItem
+							onSelect={(e) => e.preventDefault()}
+							className="cursor-pointer"
+						>
+							<span>{t("settings.server.webServer.traefik.managePorts")}</span>
+						</DropdownMenuItem>
+					</ManageTraefikPorts>
 				</DropdownMenuGroup>
 			</DropdownMenuContent>
 		</DropdownMenu>

apps/dokploy/components/dashboard/settings/servers/edit-script.tsx

@@ -0,0 +1,168 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FileTerminal } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	serverId: string;
+}
+
+const schema = z.object({
+	command: z.string().min(1, {
+		message: "Command is required",
+	}),
+});
+
+type Schema = z.infer<typeof schema>;
+
+export const EditScript = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const { mutateAsync, isLoading } = api.server.update.useMutation();
+
+	const { data: defaultCommand } = api.server.getDefaultCommand.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		if (server) {
+			form.reset({
+				command: server.command || defaultCommand,
+			});
+		}
+	}, [server, defaultCommand]);
+
+	const onSubmit = async (formData: Schema) => {
+		if (server) {
+			await mutateAsync({
+				...server,
+				command: formData.command || "",
+				serverId,
+			})
+				.then((data) => {
+					toast.success("Script modified successfully");
+				})
+				.catch(() => {
+					toast.error("Error modifying the script");
+				});
+		}
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					Modify Script
+					<FileTerminal className="size-4 text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl overflow-x-hidden">
+				<DialogHeader>
+					<DialogTitle>Modify Script</DialogTitle>
+					<DialogDescription>
+						Modify the script which install everything necessary to deploy
+						applications on your server,
+					</DialogDescription>
+
+					<AlertBlock type="warning">
+						We recommend not modifying this script unless you know what you are
+						doing.
+					</AlertBlock>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="hook-form-delete-application"
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl className="max-h-[75vh] max-w-[60rem] overflow-y-scroll overflow-x-hidden">
+											<CodeEditor
+												language="shell"
+												wrapperClassName="font-mono"
+												{...field}
+												placeholder={`
+set -e
+echo "Hello world"
+`}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter className="flex justify-between w-full">
+					<Button
+						variant="secondary"
+						onClick={() => {
+							form.reset({
+								command: defaultCommand || "",
+							});
+						}}
+					>
+						Reset
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-application"
+						type="submit"
+					>
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/gpu-support.tsx

@@ -262,16 +262,16 @@ export function StatusRow({
 			<div className="flex items-center gap-2">
 				{showIcon ? (
 					<>
-						{isEnabled ? (
-							<CheckCircle2 className="size-4 text-green-500" />
-						) : (
-							<XCircle className="size-4 text-red-500" />
-						)}
 						<span
 							className={`text-sm ${isEnabled ? "text-green-500" : "text-red-500"}`}
 						>
 							{description || (isEnabled ? "Installed" : "Not Installed")}
 						</span>
+						{isEnabled ? (
+							<CheckCircle2 className="size-4 text-green-500" />
+						) : (
+							<XCircle className="size-4 text-red-500" />
+						)}
 					</>
 				) : (
 					<span className="text-sm text-muted-foreground">{value}</span>

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

@@ -0,0 +1,233 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Loader2, LockKeyhole, RefreshCw } from "lucide-react";
+import { useState } from "react";
+import { StatusRow } from "./gpu-support";
+
+interface Props {
+	serverId: string;
+}
+
+export const SecurityAudit = ({ serverId }: Props) => {
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const { data, refetch, error, isLoading, isError } =
+		api.server.security.useQuery(
+			{ serverId },
+			{
+				enabled: !!serverId,
+			},
+		);
+	const utils = api.useUtils();
+	return (
+		<CardContent className="p-0">
+			<div className="flex flex-col gap-4">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+						<div className="flex flex-row gap-2 justify-between w-full  max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<LockKeyhole className="size-5" />
+									<CardTitle className="text-xl">
+										Setup Security Sugestions
+									</CardTitle>
+								</div>
+								<CardDescription>Check the security sugestions</CardDescription>
+							</div>
+							<Button
+								isLoading={isRefreshing}
+								onClick={async () => {
+									setIsRefreshing(true);
+									await refetch();
+									setIsRefreshing(false);
+								}}
+							>
+								<RefreshCw className="size-4" />
+								Refresh
+							</Button>
+						</div>
+						<div className="flex items-center gap-2 w-full">
+							{isError && (
+								<AlertBlock type="error" className="w-full">
+									{error.message}
+								</AlertBlock>
+							)}
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4">
+						<AlertBlock type="info" className="w-full">
+							Ubuntu/Debian OS support is currently supported (Experimental)
+						</AlertBlock>
+						{isLoading ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking Server configuration</span>
+							</div>
+						) : (
+							<div className="grid w-full gap-4">
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">UFW</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										UFW (Uncomplicated Firewall) is a simple firewall that can
+										be used to block incoming and outgoing traffic from your
+										server.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="UFW Installed"
+											isEnabled={data?.ufw?.installed}
+											description={
+												data?.ufw?.installed
+													? "Installed (Recommended)"
+													: "Not Installed (UFW should be installed for security)"
+											}
+										/>
+										<StatusRow
+											label="Status"
+											isEnabled={data?.ufw?.active}
+											description={
+												data?.ufw?.active
+													? "Active (Recommended)"
+													: "Not Active (UFW should be enabled for security)"
+											}
+										/>
+										<StatusRow
+											label="Default Incoming"
+											isEnabled={data?.ufw?.defaultIncoming === "deny"}
+											description={
+												data?.ufw?.defaultIncoming === "deny"
+													? "Default: Deny (Recommended)"
+													: `Default: ${data?.ufw?.defaultIncoming} (Should be set to 'deny' for security)`
+											}
+										/>
+									</div>
+								</div>
+
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">SSH</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										SSH (Secure Shell) is a protocol that allows you to securely
+										connect to a server and execute commands on it.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Enabled"
+											isEnabled={data?.ssh.enabled}
+											description={
+												data?.ssh.enabled
+													? "Enabled"
+													: "Not Enabled (SSH should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Key Auth"
+											isEnabled={data?.ssh.keyAuth}
+											description={
+												data?.ssh.keyAuth
+													? "Enabled (Recommended)"
+													: "Not Enabled (Key Authentication should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Password Auth"
+											isEnabled={data?.ssh.passwordAuth === "no"}
+											description={
+												data?.ssh.passwordAuth === "no"
+													? "Disabled (Recommended)"
+													: "Enabled (Password Authentication should be disabled)"
+											}
+										/>
+										<StatusRow
+											label="Permit Root Login"
+											isEnabled={data?.ssh.permitRootLogin === "no"}
+											description={
+												data?.ssh.permitRootLogin === "no"
+													? "Disabled (Recommended)"
+													: `Enabled: ${data?.ssh.permitRootLogin} (Root Login should be disabled)`
+											}
+										/>
+										<StatusRow
+											label="Use PAM"
+											isEnabled={data?.ssh.usePam === "no"}
+											description={
+												data?.ssh.usePam === "no"
+													? "Disabled (Recommended for key-based auth)"
+													: "Enabled (Should be disabled when using key-based auth)"
+											}
+										/>
+									</div>
+								</div>
+
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Fail2Ban</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Fail2Ban (Fail2Ban) is a service that can be used to prevent
+										brute force attacks on your server.
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Installed"
+											isEnabled={data?.fail2ban.installed}
+											description={
+												data?.fail2ban.installed
+													? "Installed (Recommended)"
+													: "Not Installed (Fail2Ban should be installed for protection against brute force attacks)"
+											}
+										/>
+
+										<StatusRow
+											label="Enabled"
+											isEnabled={data?.fail2ban.enabled}
+											description={
+												data?.fail2ban.enabled
+													? "Enabled (Recommended)"
+													: "Not Enabled (Fail2Ban service should be enabled)"
+											}
+										/>
+										<StatusRow
+											label="Active"
+											isEnabled={data?.fail2ban.active}
+											description={
+												data?.fail2ban.active
+													? "Active (Recommended)"
+													: "Not Active (Fail2Ban service should be running)"
+											}
+										/>
+
+										<StatusRow
+											label="SSH Protection"
+											isEnabled={data?.fail2ban.sshEnabled === "true"}
+											description={
+												data?.fail2ban.sshEnabled === "true"
+													? "Enabled (Recommended)"
+													: "Not Enabled (SSH protection should be enabled to prevent brute force attacks)"
+											}
+										/>
+
+										<StatusRow
+											label="SSH Mode"
+											isEnabled={data?.fail2ban.sshMode === "aggressive"}
+											description={
+												data?.fail2ban.sshMode === "aggressive"
+													? "Aggressive Mode (Recommended)"
+													: `Mode: ${data?.fail2ban.sshMode || "Not Set"} (Aggressive mode recommended for better protection)`
+											}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+};

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

@@ -32,7 +32,9 @@ import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
+import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
+import { SecurityAudit } from "./security-audit";
 import { ValidateServer } from "./validate-server";
 
 interface Props {
@@ -89,12 +91,18 @@ export const SetupServer = ({ serverId }: Props) => {
 						</AlertBlock>
 					</div>
 				) : (
-					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
+					<div id="hook-form-add-gitlab" className="grid w-full gap-4">
+						<AlertBlock type="warning">
+							Using a root user is required to ensure everything works as
+							expected.
+						</AlertBlock>
+
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-4 w-[600px]">
+							<TabsList className="grid grid-cols-5 w-[700px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
 								<TabsTrigger value="validate">Validate</TabsTrigger>
+								<TabsTrigger value="audit">Security</TabsTrigger>
 								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
@@ -139,7 +147,7 @@ export const SetupServer = ({ serverId }: Props) => {
 											Automatic process
 										</span>
 										<Link
-											href="https://docs.dokploy.com/en/docs/core/get-started/introduction"
+											href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
 											target="_blank"
 											className="text-primary flex flex-row gap-2"
 										>
@@ -198,6 +206,28 @@ export const SetupServer = ({ serverId }: Props) => {
 											</li>
 										</ul>
 									</div>
+									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+										<span className="text-base font-semibold text-primary">
+											Supported Distros:
+										</span>
+										<p>
+											We strongly recommend to use the following distros to
+											ensure the best experience:
+										</p>
+										<ul>
+											<li>1. Ubuntu 24.04 LTS</li>
+											<li>2. Ubuntu 23.10 LTS </li>
+											<li>3. Ubuntu 22.04 LTS</li>
+											<li>4. Ubuntu 20.04 LTS</li>
+											<li>5. Ubuntu 18.04 LTS</li>
+											<li>6. Debian 12</li>
+											<li>7. Debian 11</li>
+											<li>8. Debian 10</li>
+											<li>9. Fedora 40</li>
+											<li>10. Centos 9</li>
+											<li>11. Centos 8</li>
+										</ul>
+									</div>
 								</div>
 							</TabsContent>
 							<TabsContent value="deployments">
@@ -214,24 +244,29 @@ export const SetupServer = ({ serverId }: Props) => {
 															See all the 5 Server Setup
 														</CardDescription>
 													</div>
-													<DialogAction
-														title={"Setup Server?"}
-														description="This will setup the server and all associated data"
-														onClick={async () => {
-															await mutateAsync({
-																serverId: server?.serverId || "",
-															})
-																.then(async () => {
-																	refetch();
-																	toast.success("Server setup successfully");
+													<div className="flex flex-row gap-2">
+														<EditScript serverId={server?.serverId || ""} />
+														<DialogAction
+															title={"Setup Server?"}
+															description="This will setup the server and all associated data"
+															onClick={async () => {
+																await mutateAsync({
+																	serverId: server?.serverId || "",
 																})
-																.catch(() => {
-																	toast.error("Error configuring server");
-																});
-														}}
-													>
-														<Button isLoading={isLoading}>Setup Server</Button>
-													</DialogAction>
+																	.then(async () => {
+																		refetch();
+																		toast.success("Server setup successfully");
+																	})
+																	.catch(() => {
+																		toast.error("Error configuring server");
+																	});
+															}}
+														>
+															<Button isLoading={isLoading}>
+																Setup Server
+															</Button>
+														</DialogAction>
+													</div>
 												</div>
 											</CardHeader>
 											<CardContent className="flex flex-col gap-4">
@@ -303,6 +338,14 @@ export const SetupServer = ({ serverId }: Props) => {
 									<ValidateServer serverId={serverId} />
 								</div>
 							</TabsContent>
+							<TabsContent
+								value="audit"
+								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+							>
+								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
+									<SecurityAudit serverId={serverId} />
+								</div>
+							</TabsContent>
 							<TabsContent
 								value="gpu-setup"
 								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"

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

@@ -23,16 +23,21 @@ import { api } from "@/utils/api";
 import { format } from "date-fns";
 import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { ShowServerActions } from "./actions/show-server-actions";
 import { AddServer } from "./add-server";
 import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
+import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
+import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
 
 export const ShowServers = () => {
+	const router = useRouter();
+	const query = router.query;
 	const { data, refetch } = api.server.all.useQuery();
 	const { mutateAsync } = api.server.remove.useMutation();
 	const { data: sshKeys } = api.sshKey.all.useQuery();
@@ -42,12 +47,26 @@ export const ShowServers = () => {
 
 	return (
 		<div className="p-6 space-y-6">
+			{query?.success && isCloud && <WelcomeSuscription />}
 			<div className="space-y-2 flex flex-row justify-between items-end">
-				<div>
-					<h1 className="text-2xl font-bold">Servers</h1>
-					<p className="text-muted-foreground">
-						Add servers to deploy your applications remotely.
-					</p>
+				<div className="flex flex-col gap-2">
+					<div>
+						<h1 className="text-2xl font-bold">Servers</h1>
+						<p className="text-muted-foreground">
+							Add servers to deploy your applications remotely.
+						</p>
+					</div>
+
+					{isCloud && (
+						<span
+							className="text-primary cursor-pointer text-sm"
+							onClick={() => {
+								router.push("/dashboard/settings/servers?success=true");
+							}}
+						>
+							Reset Onboarding
+						</span>
+					)}
 				</div>
 
 				{sshKeys && sshKeys?.length > 0 && (
@@ -100,7 +119,9 @@ export const ShowServers = () => {
 				{data && data?.length > 0 && (
 					<div className="flex flex-col gap-6 overflow-auto">
 						<Table>
-							<TableCaption>See all servers</TableCaption>
+							<TableCaption>
+								<div className="flex flex-col  gap-4">See all servers</div>
+							</TableCaption>
 							<TableHeader>
 								<TableRow>
 									<TableHead className="w-[100px]">Name</TableHead>
@@ -239,6 +260,9 @@ export const ShowServers = () => {
 																<ShowDockerContainersModal
 																	serverId={server.serverId}
 																/>
+																<ShowSwarmOverviewModal
+																	serverId={server.serverId}
+																/>
 															</>
 														)}
 													</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx

@@ -0,0 +1,51 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContainerIcon } from "lucide-react";
+import { useState } from "react";
+import SwarmMonitorCard from "../../swarm/monitoring-card";
+
+interface Props {
+	serverId: string;
+}
+
+export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Swarm Overview
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+				<DialogHeader>
+					<div className="flex flex-col gap-1.5">
+						<DialogTitle className="flex items-center gap-2">
+							<ContainerIcon className="size-5" />
+							Swarm Overview
+						</DialogTitle>
+						<p className="text-muted-foreground text-sm">
+							See all details of your swarm node
+						</p>
+					</div>
+				</DialogHeader>
+
+				<div className="grid w-full gap-1">
+					<div className="flex flex-wrap gap-4 py-4">
+						<SwarmMonitorCard serverId={serverId} />
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/validate-server.tsx

@@ -1,4 +1,5 @@
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -8,9 +9,8 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Loader2, PcCase, RefreshCw } from "lucide-react";
-import { StatusRow } from "./gpu-support";
-import { Button } from "@/components/ui/button";
 import { useState } from "react";
+import { StatusRow } from "./gpu-support";
 
 interface Props {
 	serverId: string;
@@ -66,7 +66,7 @@ export const ValidateServer = ({ serverId }: Props) => {
 						{isLoading ? (
 							<div className="flex items-center justify-center text-muted-foreground py-4">
 								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								<span>Checking Server Configuration</span>
+								<span>Checking Server configuration</span>
 							</div>
 						) : (
 							<div className="grid w-full gap-4">
@@ -113,16 +113,31 @@ export const ValidateServer = ({ serverId }: Props) => {
 											}
 										/>
 										<StatusRow
-											label="Dokploy Network Installed"
-											isEnabled={data?.isDokployNetworkInstalled}
+											label="Docker Swarm Initialized"
+											isEnabled={data?.isSwarmInstalled}
+											description={
+												data?.isSwarmInstalled
+													? "Initialized"
+													: "Not Initialized"
+											}
 										/>
 										<StatusRow
-											label="Swarm Installed"
-											isEnabled={data?.isSwarmInstalled}
+											label="Dokploy Network Created"
+											isEnabled={data?.isDokployNetworkInstalled}
+											description={
+												data?.isDokployNetworkInstalled
+													? "Created"
+													: "Not Created"
+											}
 										/>
 										<StatusRow
 											label="Main Directory Created"
 											isEnabled={data?.isMainDirectoryInstalled}
+											description={
+												data?.isMainDirectoryInstalled
+													? "Created"
+													: "Not Created"
+											}
 										/>
 									</div>
 								</div>

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx

@@ -0,0 +1,284 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { DialogFooter } from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const Schema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+	ipAddress: z.string().min(1, {
+		message: "IP Address is required",
+	}),
+	port: z.number().optional(),
+	username: z.string().optional(),
+	sshKeyId: z.string().min(1, {
+		message: "SSH Key is required",
+	}),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+interface Props {
+	stepper: any;
+}
+
+export const CreateServer = ({ stepper }: Props) => {
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: canCreateMoreServers, refetch } =
+		api.stripe.canCreateMoreServers.useQuery();
+	const { mutateAsync, error, isError } = api.server.create.useMutation();
+	const cloudSSHKey = sshKeys?.find(
+		(sshKey) => sshKey.name === "dokploy-cloud-ssh-key",
+	);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			description: "Dokploy Cloud Server",
+			name: "My First Server",
+			ipAddress: "",
+			port: 22,
+			username: "root",
+			sshKeyId: cloudSSHKey?.sshKeyId || "",
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			description: "Dokploy Cloud Server",
+			name: "My First Server",
+			ipAddress: "",
+			port: 22,
+			username: "root",
+			sshKeyId: cloudSSHKey?.sshKeyId || "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful, sshKeys]);
+
+	useEffect(() => {
+		refetch();
+	}, [isOpen]);
+
+	const onSubmit = async (data: Schema) => {
+		await mutateAsync({
+			name: data.name,
+			description: data.description || "",
+			ipAddress: data.ipAddress || "",
+			port: data.port || 22,
+			username: data.username || "root",
+			sshKeyId: data.sshKeyId || "",
+		})
+			.then(async (data) => {
+				toast.success("Server Created");
+				stepper.next();
+			})
+			.catch(() => {
+				toast.error("Error to create a server");
+			});
+	};
+	return (
+		<Card className="bg-background flex flex-col gap-4">
+			<div className="flex flex-col gap-2 pt-5 px-4">
+				{!canCreateMoreServers && (
+					<AlertBlock type="warning">
+						You cannot create more servers,{" "}
+						<Link href="/dashboard/settings/billing" className="text-primary">
+							Please upgrade your plan
+						</Link>
+					</AlertBlock>
+				)}
+			</div>
+
+			<CardContent className="flex flex-col">
+				<Form {...form}>
+					<form
+						id="hook-form-add-server"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4 ">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input placeholder="Hostinger Server" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<FormField
+							control={form.control}
+							name="description"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Description</FormLabel>
+									<FormControl>
+										<Textarea
+											placeholder="This server is for databases..."
+											className="resize-none"
+											{...field}
+										/>
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="sshKeyId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Select a SSH Key</FormLabel>
+									{!cloudSSHKey && (
+										<AlertBlock>
+											Looks like you didn't have the SSH Key yet, you can create
+											one{" "}
+											<Link
+												href="/dashboard/settings/ssh-keys"
+												className="text-primary"
+											>
+												here
+											</Link>
+										</AlertBlock>
+									)}
+
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a SSH Key" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{sshKeys?.map((sshKey) => (
+													<SelectItem
+														key={sshKey.sshKeyId}
+														value={sshKey.sshKeyId}
+													>
+														{sshKey.name}
+													</SelectItem>
+												))}
+												<SelectLabel>
+													Registries ({sshKeys?.length})
+												</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="grid grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="ipAddress"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>IP Address</FormLabel>
+										<FormControl>
+											<Input placeholder="192.168.1.100" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="port"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="22"
+												{...field}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="root" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+
+					<DialogFooter className="pt-5">
+						<Button
+							isLoading={form.formState.isSubmitting}
+							disabled={!canCreateMoreServers}
+							form="hook-form-add-server"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx

@@ -0,0 +1,152 @@
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Card, CardContent } from "@/components/ui/card";
+import { api } from "@/utils/api";
+import copy from "copy-to-clipboard";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
+import { CopyIcon } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+
+export const CreateSSHKey = () => {
+	const { data, refetch } = api.sshKey.all.useQuery();
+	const generateMutation = api.sshKey.generate.useMutation();
+	const { mutateAsync, isLoading } = api.sshKey.create.useMutation();
+	const hasCreatedKey = useRef(false);
+
+	const cloudSSHKey = data?.find(
+		(sshKey) => sshKey.name === "dokploy-cloud-ssh-key",
+	);
+
+	useEffect(() => {
+		const createKey = async () => {
+			if (!data || cloudSSHKey || hasCreatedKey.current || isLoading) {
+				return;
+			}
+
+			hasCreatedKey.current = true;
+
+			try {
+				const keys = await generateMutation.mutateAsync({
+					type: "rsa",
+				});
+				await mutateAsync({
+					name: "dokploy-cloud-ssh-key",
+					description: "Used on Dokploy Cloud",
+					privateKey: keys.privateKey,
+					publicKey: keys.publicKey,
+				});
+				await refetch();
+			} catch (error) {
+				console.error("Error creating SSH key:", error);
+				hasCreatedKey.current = false;
+			}
+		};
+
+		createKey();
+	}, [data]);
+
+	return (
+		<Card className="h-full bg-transparent">
+			<CardContent>
+				<div className="grid w-full gap-4 pt-4">
+					{isLoading || !cloudSSHKey ? (
+						<div className="min-h-[25vh] justify-center flex items-center gap-4">
+							<Loader2
+								className="animate-spin text-muted-foreground"
+								size={32}
+							/>
+						</div>
+					) : (
+						<>
+							<div className="flex flex-col gap-2 text-sm text-muted-foreground">
+								<p className="text-primary text-base font-semibold">
+									You have two options to add SSH Keys to your server:
+								</p>
+
+								<ul>
+									<li>1. Add The SSH Key to Server Manually</li>
+
+									<li>
+										2. Add the public SSH Key when you create a server in your
+										preffered provider (Hostinger, Digital Ocean, Hetzner, etc){" "}
+									</li>
+								</ul>
+
+								<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 1
+									</span>
+									<ul>
+										<li className="items-center flex gap-1">
+											1. Login to your server{" "}
+										</li>
+										<li>
+											2. When you are logged in run the following command
+											<div className="flex  relative flex-col gap-4 w-full mt-2">
+												<CodeEditor
+													lineWrapping
+													language="properties"
+													value={`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`}
+													readOnly
+													className="font-mono opacity-60"
+												/>
+												<button
+													type="button"
+													className="absolute right-2 top-2"
+													onClick={() => {
+														copy(
+															`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`,
+														);
+														toast.success("Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4" />
+												</button>
+											</div>
+										</li>
+										<li className="mt-1">
+											3. You're done, follow the next step to insert the details
+											of your server.
+										</li>
+									</ul>
+								</div>
+								<div className="flex flex-col gap-2 w-full mt-2 border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 2
+									</span>
+									<div className="flex flex-col gap-4 w-full overflow-auto">
+										<div className="flex relative flex-col gap-2 overflow-y-auto">
+											<div className="text-sm text-primary flex flex-row gap-2 items-center">
+												Copy Public Key
+												<button
+													type="button"
+													className=" right-2 top-8"
+													onClick={() => {
+														copy(
+															cloudSSHKey?.publicKey || "Generate a SSH Key",
+														);
+														toast.success("SSH Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4 text-muted-foreground" />
+												</button>
+											</div>
+										</div>
+									</div>
+									<Link
+										href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
+										target="_blank"
+										className="text-primary flex flex-row gap-2"
+									>
+										View Tutorial <ExternalLinkIcon className="size-4" />
+									</Link>
+								</div>
+							</div>
+						</>
+					)}
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx

@@ -0,0 +1,163 @@
+import { ShowDeployment } from "@/components/dashboard/application/deployments/show-deployment";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { RocketIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { EditScript } from "../edit-script";
+
+export const Setup = () => {
+	const { data: servers } = api.server.all.useQuery();
+	const [serverId, setServerId] = useState<string>(
+		servers?.[0]?.serverId || "",
+	);
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const { data: deployments, refetch } = api.deployment.allByServer.useQuery(
+		{ serverId },
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	const { mutateAsync, isLoading } = api.server.setup.useMutation();
+
+	return (
+		<div className="flex flex-col gap-4">
+			<Card className="bg-background">
+				<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+					<div className="flex flex-col gap-2 w-full">
+						<Label>Select the server and click on setup server</Label>
+						<Select onValueChange={setServerId} defaultValue={serverId}>
+							<SelectTrigger>
+								<SelectValue placeholder="Select a server" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									{servers?.map((server) => (
+										<SelectItem key={server.serverId} value={server.serverId}>
+											{server.name}
+										</SelectItem>
+									))}
+									<SelectLabel>Servers ({servers?.length})</SelectLabel>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
+					<div className="flex flex-row gap-2 justify-between w-full max-sm:flex-col">
+						<div className="flex flex-col gap-1">
+							<CardTitle className="text-xl">Deployments</CardTitle>
+							<CardDescription>See all the 5 Server Setup</CardDescription>
+						</div>
+						<div className="flex flex-row gap-2">
+							<EditScript serverId={server?.serverId || ""} />
+							<DialogAction
+								title={"Setup Server?"}
+								description="This will setup the server and all associated data"
+								onClick={async () => {
+									await mutateAsync({
+										serverId: server?.serverId || "",
+									})
+										.then(async () => {
+											refetch();
+											toast.success("Server setup successfully");
+										})
+										.catch(() => {
+											toast.error("Error configuring server");
+										});
+								}}
+							>
+								<Button isLoading={isLoading}>Setup Server</Button>
+							</DialogAction>
+						</div>
+					</div>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4 min-h-[30vh]">
+					{server?.deployments?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+							<RocketIcon className="size-8 text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								No deployments found
+							</span>
+						</div>
+					) : (
+						<div className="flex flex-col gap-4">
+							{deployments?.map((deployment) => (
+								<div
+									key={deployment.deploymentId}
+									className="flex items-center justify-between rounded-lg border p-4 gap-2"
+								>
+									<div className="flex flex-col">
+										<span className="flex items-center gap-4 font-medium capitalize text-foreground">
+											{deployment.status}
+
+											<StatusTooltip
+												status={deployment?.status}
+												className="size-2.5"
+											/>
+										</span>
+										<span className="text-sm text-muted-foreground">
+											{deployment.title}
+										</span>
+										{deployment.description && (
+											<span className="break-all text-sm text-muted-foreground">
+												{deployment.description}
+											</span>
+										)}
+									</div>
+									<div className="flex flex-col items-end gap-2">
+										<div className="text-sm capitalize text-muted-foreground">
+											<DateTooltip date={deployment.createdAt} />
+										</div>
+
+										<Button
+											onClick={() => {
+												setActiveLog(deployment.logPath);
+											}}
+										>
+											View
+										</Button>
+									</div>
+								</div>
+							))}
+						</div>
+					)}
+
+					<ShowDeployment
+						open={activeLog !== null}
+						onClose={() => setActiveLog(null)}
+						logPath={activeLog}
+					/>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx

@@ -0,0 +1,189 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { useState } from "react";
+
+import { AlertBlock } from "@/components/shared/alert-block";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { StatusRow } from "../gpu-support";
+
+export const Verify = () => {
+	const { data: servers } = api.server.all.useQuery();
+	const [serverId, setServerId] = useState<string>(
+		servers?.[0]?.serverId || "",
+	);
+	const { data, refetch, error, isLoading, isError } =
+		api.server.validate.useQuery(
+			{ serverId },
+			{
+				enabled: !!serverId,
+			},
+		);
+	const [isRefreshing, setIsRefreshing] = useState(false);
+
+	const { data: server } = api.server.one.useQuery(
+		{
+			serverId,
+		},
+		{
+			enabled: !!serverId,
+		},
+	);
+
+	return (
+		<CardContent className="p-0">
+			<div className="flex flex-col gap-4">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+						<div className="flex flex-col gap-2 w-full">
+							<Label>Select a server</Label>
+							<Select onValueChange={setServerId} defaultValue={serverId}>
+								<SelectTrigger>
+									<SelectValue placeholder="Select a server" />
+								</SelectTrigger>
+								<SelectContent>
+									<SelectGroup>
+										{servers?.map((server) => (
+											<SelectItem key={server.serverId} value={server.serverId}>
+												{server.name}
+											</SelectItem>
+										))}
+										<SelectLabel>Servers ({servers?.length})</SelectLabel>
+									</SelectGroup>
+								</SelectContent>
+							</Select>
+						</div>
+						<div className="flex flex-row gap-2 justify-between w-full  max-sm:flex-col">
+							<div className="flex flex-col gap-1">
+								<div className="flex items-center gap-2">
+									<PcCase className="size-5" />
+									<CardTitle className="text-xl">Setup Validation</CardTitle>
+								</div>
+								<CardDescription>
+									Check if your server is ready for deployment
+								</CardDescription>
+							</div>
+							<Button
+								isLoading={isRefreshing}
+								onClick={async () => {
+									setIsRefreshing(true);
+									await refetch();
+									setIsRefreshing(false);
+								}}
+							>
+								<RefreshCw className="size-4" />
+								Refresh
+							</Button>
+						</div>
+						<div className="flex items-center gap-2 w-full">
+							{isError && (
+								<AlertBlock type="error" className="w-full">
+									{error.message}
+								</AlertBlock>
+							)}
+						</div>
+					</CardHeader>
+
+					<CardContent className="flex flex-col gap-4 min-h-[25vh]">
+						{isLoading ? (
+							<div className="flex items-center justify-center text-muted-foreground py-4">
+								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+								<span>Checking Server configuration</span>
+							</div>
+						) : (
+							<div className="grid w-full gap-4">
+								<div className="border rounded-lg p-4">
+									<h3 className="text-lg font-semibold mb-1">Status</h3>
+									<p className="text-sm text-muted-foreground mb-4">
+										Shows the server configuration status
+									</p>
+									<div className="grid gap-2.5">
+										<StatusRow
+											label="Docker Installed"
+											isEnabled={data?.docker?.enabled}
+											description={
+												data?.docker?.enabled
+													? `Installed: ${data?.docker?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="RClone Installed"
+											isEnabled={data?.rclone?.enabled}
+											description={
+												data?.rclone?.enabled
+													? `Installed: ${data?.rclone?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Nixpacks Installed"
+											isEnabled={data?.nixpacks?.enabled}
+											description={
+												data?.nixpacks?.enabled
+													? `Installed: ${data?.nixpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Buildpacks Installed"
+											isEnabled={data?.buildpacks?.enabled}
+											description={
+												data?.buildpacks?.enabled
+													? `Installed: ${data?.buildpacks?.version}`
+													: undefined
+											}
+										/>
+										<StatusRow
+											label="Docker Swarm Initialized"
+											isEnabled={data?.isSwarmInstalled}
+											description={
+												data?.isSwarmInstalled
+													? "Initialized"
+													: "Not Initialized"
+											}
+										/>
+										<StatusRow
+											label="Dokploy Network Created"
+											isEnabled={data?.isDokployNetworkInstalled}
+											description={
+												data?.isDokployNetworkInstalled
+													? "Created"
+													: "Not Created"
+											}
+										/>
+										<StatusRow
+											label="Main Directory Created"
+											isEnabled={data?.isMainDirectoryInstalled}
+											description={
+												data?.isMainDirectoryInstalled
+													? "Created"
+													: "Not Created"
+											}
+										/>
+									</div>
+								</div>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</CardContent>
+	);
+};

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx

@@ -0,0 +1,411 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { defineStepper } from "@stepperize/react";
+import { BookIcon, Puzzle } from "lucide-react";
+import { Code2, Database, GitMerge, Globe, Plug, Users } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import React from "react";
+import ConfettiExplosion from "react-confetti-explosion";
+import { CreateServer } from "./create-server";
+import { CreateSSHKey } from "./create-ssh-key";
+import { Setup } from "./setup";
+import { Verify } from "./verify";
+
+export const { useStepper, steps, Scoped } = defineStepper(
+	{
+		id: "requisites",
+		title: "Requisites",
+		description: "Check your requisites",
+	},
+	{
+		id: "create-ssh-key",
+		title: "SSH Key",
+		description: "Create your ssh key",
+	},
+	{
+		id: "connect-server",
+		title: "Connect",
+		description: "Connect",
+	},
+	{ id: "setup", title: "Setup", description: "Setup your server" },
+	{ id: "verify", title: "Verify", description: "Verify your server" },
+	{ id: "complete", title: "Complete", description: "Checkout complete" },
+);
+
+export const WelcomeSuscription = () => {
+	const [showConfetti, setShowConfetti] = useState(false);
+	const stepper = useStepper();
+	const [isOpen, setIsOpen] = useState(true);
+	const { push } = useRouter();
+
+	useEffect(() => {
+		const confettiShown = localStorage.getItem("hasShownConfetti");
+		if (!confettiShown) {
+			setShowConfetti(true);
+			localStorage.setItem("hasShownConfetti", "true");
+		}
+	}, [showConfetti]);
+
+	return (
+		<Dialog open={isOpen}>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-7xl min-h-[75vh]">
+				{showConfetti ?? "Flaso"}
+				<div className="flex justify-center items-center w-full">
+					{showConfetti && (
+						<ConfettiExplosion
+							duration={3000}
+							force={0.3}
+							particleSize={12}
+							particleCount={300}
+							className="z-[9999]"
+							zIndex={9999}
+							width={1500}
+						/>
+					)}
+				</div>
+
+				<DialogHeader>
+					<DialogTitle className="text-2xl text-center">
+						Welcome To Dokploy Cloud 🎉
+					</DialogTitle>
+					<DialogDescription className="text-center max-w-xl mx-auto">
+						Thank you for choosing Dokploy Cloud! 🚀 We're excited to have you
+						onboard. Before you dive in, you'll need to configure your remote
+						server to unlock all the features we offer.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<div className="flex justify-between">
+						<h2 className="text-lg font-semibold">Steps</h2>
+						<div className="flex items-center gap-2">
+							<span className="text-sm text-muted-foreground">
+								Step {stepper.current.index + 1} of {steps.length}
+							</span>
+							<div />
+						</div>
+					</div>
+					<Scoped>
+						<nav aria-label="Checkout Steps" className="group my-4">
+							<ol
+								className="flex items-center justify-between gap-2"
+								aria-orientation="horizontal"
+							>
+								{stepper.all.map((step, index, array) => (
+									<React.Fragment key={step.id}>
+										<li className="flex items-center gap-4 flex-shrink-0">
+											<Button
+												type="button"
+												role="tab"
+												variant={
+													index <= stepper.current.index ? "secondary" : "ghost"
+												}
+												aria-current={
+													stepper.current.id === step.id ? "step" : undefined
+												}
+												aria-posinset={index + 1}
+												aria-setsize={steps.length}
+												aria-selected={stepper.current.id === step.id}
+												className="flex size-10 items-center justify-center rounded-full border-2 border-border"
+												onClick={() => stepper.goTo(step.id)}
+											>
+												{index + 1}
+											</Button>
+											<span className="text-sm font-medium">{step.title}</span>
+										</li>
+										{index < array.length - 1 && (
+											<Separator
+												className={`flex-1 ${
+													index < stepper.current.index
+														? "bg-primary"
+														: "bg-muted"
+												}`}
+											/>
+										)}
+									</React.Fragment>
+								))}
+							</ol>
+						</nav>
+						{stepper.switch({
+							requisites: () => (
+								<div className="flex flex-col gap-2 border p-4 rounded-lg">
+									<span className="text-primary text-base font-bold">
+										Before getting started, please follow the steps below to
+										ensure the best experience:
+									</span>
+									<div>
+										<p className="text-primary text-sm font-medium">
+											Supported Distributions:
+										</p>
+										<ul className="list-inside list-disc pl-4 text-sm text-muted-foreground  mt-4">
+											<li>Ubuntu 24.04 LTS</li>
+											<li>Ubuntu 23.10</li>
+											<li>Ubuntu 22.04 LTS</li>
+											<li>Ubuntu 20.04 LTS</li>
+											<li>Ubuntu 18.04 LTS</li>
+											<li>Debian 12</li>
+											<li>Debian 11</li>
+											<li>Debian 10</li>
+											<li>Fedora 40</li>
+											<li>CentOS 9</li>
+											<li>CentOS 8</li>
+										</ul>
+									</div>
+									<div>
+										<p className="text-primary text-sm font-medium">
+											You will need to purchase or rent a Virtual Private Server
+											(VPS) to proceed, we recommend to use one of these
+											providers since has been heavily tested.
+										</p>
+										<ul className="list-inside list-disc pl-4 text-sm text-muted-foreground mt-4">
+											<li>
+												<a
+													href="https://www.hostinger.com/vps-hosting?REFERRALCODE=1SIUMAURICI97"
+													className="text-link underline"
+												>
+													Hostinger - Get 20% Discount
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://m.do.co/c/db24efd43f35"
+													className="text-link underline"
+												>
+													DigitalOcean - Get $200 Credits
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://hetzner.cloud/?ref=vou4fhxJ1W2D"
+													className="text-link underline"
+												>
+													Hetzner - Get €20 Credits
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://www.vultr.com/?ref=9679828"
+													className="text-link underline"
+												>
+													Vultr
+												</a>
+											</li>
+											<li>
+												<a
+													href="https://www.linode.com/es/pricing/#compute-shared"
+													className="text-link underline"
+												>
+													Linode
+												</a>
+											</li>
+										</ul>
+										<AlertBlock className="mt-4 px-4">
+											You are free to use whatever provider, but we recommend to
+											use one of the above, to avoid issues.
+										</AlertBlock>
+									</div>
+								</div>
+							),
+							"create-ssh-key": () => <CreateSSHKey />,
+							"connect-server": () => <CreateServer stepper={stepper} />,
+							setup: () => <Setup />,
+							verify: () => <Verify />,
+							complete: () => {
+								const features = [
+									{
+										title: "Scalable Deployments",
+										description:
+											"Deploy and scale your applications effortlessly to handle any workload.",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Automated Backups",
+										description: "Protect your data with automatic backups",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Open Source Templates",
+										description:
+											"Big list of common open source templates in one-click",
+										icon: <Puzzle className="text-primary" />,
+									},
+									{
+										title: "Custom Domains",
+										description:
+											"Link your own domains to your applications for a professional presence.",
+										icon: <Globe className="text-primary" />,
+									},
+									{
+										title: "CI/CD Integration",
+										description:
+											"Implement continuous integration and deployment workflows to streamline development.",
+										icon: <GitMerge className="text-primary" />,
+									},
+									{
+										title: "Database Management",
+										description:
+											"Efficiently manage your databases with intuitive tools.",
+										icon: <Database className="text-primary" />,
+									},
+									{
+										title: "Team Collaboration",
+										description:
+											"Collaborate with your team on shared projects with customizable permissions.",
+										icon: <Users className="text-primary" />,
+									},
+									{
+										title: "Multi-language Support",
+										description:
+											"Deploy applications in multiple programming languages to suit your needs.",
+										icon: <Code2 className="text-primary" />,
+									},
+									{
+										title: "API Access",
+										description:
+											"Integrate and manage your applications via robust and well-documented APIs.",
+										icon: <Plug className="text-primary" />,
+									},
+								];
+								return (
+									<div className="flex flex-col gap-6">
+										<div className="flex flex-col gap-2">
+											<h2 className="text-lg font-semibold">You're All Set!</h2>
+											<p className=" text-muted-foreground">
+												Did you know you can deploy any number of applications
+												that your server can handle?
+											</p>
+											<p className="text-muted-foreground">
+												Here are some of the things you can do with Dokploy
+												Cloud:
+											</p>
+										</div>
+
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+											{features.map((feature, index) => (
+												<div
+													key={index}
+													className="flex flex-col items-start p-4 bg-card rounded-lg shadow-md hover:shadow-lg transition-shadow"
+												>
+													<div className="text-3xl mb-2">{feature.icon}</div>
+													<h3 className="text-lg font-medium mb-1">
+														{feature.title}
+													</h3>
+													<p className="text-sm text-muted-foreground">
+														{feature.description}
+													</p>
+												</div>
+											))}
+										</div>
+
+										<div className="flex flex-col gap-2 mt-4">
+											<span className="text-base text-primary">
+												Need Help? We are here to help you.
+											</span>
+											<span className="text-sm text-muted-foreground">
+												Join to our Discord server and we will help you.
+											</span>
+											<div className="flex flex-row gap-4">
+												<Button className="rounded-full bg-[#5965F2] hover:bg-[#4A55E0] w-fit">
+													<Link
+														href="https://discord.gg/2tBnJ3jDJc"
+														aria-label="Dokploy on GitHub"
+														target="_blank"
+														className="flex flex-row items-center gap-2 text-white"
+													>
+														<svg
+															role="img"
+															className="h-6 w-6 fill-white"
+															viewBox="0 0 24 24"
+															xmlns="http://www.w3.org/2000/svg"
+														>
+															<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+														</svg>
+														Join Discord
+													</Link>
+												</Button>
+												<Button className="rounded-full  w-fit">
+													<Link
+														href="https://github.com/Dokploy/dokploy"
+														aria-label="Dokploy on GitHub"
+														target="_blank"
+														className="flex flex-row items-center gap-2 "
+													>
+														<GithubIcon />
+														Github
+													</Link>
+												</Button>
+
+												<Button
+													className="rounded-full  w-fit"
+													variant="outline"
+												>
+													<Link
+														href="https://docs.dokploy.com/docs/core"
+														aria-label="Dokploy Docs"
+														target="_blank"
+														className="flex flex-row items-center gap-2 "
+													>
+														<BookIcon size={16} />
+														Docs
+													</Link>
+												</Button>
+											</div>
+										</div>
+									</div>
+								);
+							},
+						})}
+					</Scoped>
+				</div>
+				<DialogFooter>
+					<div className="flex items-center justify-between w-full">
+						{!stepper.isLast && (
+							<Button
+								variant="secondary"
+								onClick={() => {
+									setIsOpen(false);
+									push("/dashboard/settings/servers");
+								}}
+							>
+								Skip for now
+							</Button>
+						)}
+
+						<div className="flex items-center gap-2 w-full justify-end">
+							<Button
+								onClick={stepper.prev}
+								disabled={stepper.isFirst}
+								variant="secondary"
+							>
+								Back
+							</Button>
+							<Button
+								onClick={() => {
+									if (stepper.isLast) {
+										setIsOpen(false);
+										push("/dashboard/projects");
+									} else {
+										stepper.next();
+									}
+								}}
+							>
+								{stepper.isLast ? "Complete" : "Next"}
+							</Button>
+						</div>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -80,7 +80,10 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 	return (
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl">
+			<DialogContent
+				className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl"
+				onEscapeKeyDown={(event) => event.preventDefault()}
+			>
 				<DialogHeader>
 					<DialogTitle>Docker Terminal</DialogTitle>
 					<DialogDescription>
@@ -119,7 +122,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 					containerId={containerId || "select-a-container"}
 				/>
 				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
-					<DialogContent>
+					<DialogContent onEscapeKeyDown={(event) => event.preventDefault()}>
 						<DialogHeader>
 							<DialogTitle>
 								Are you sure you want to close the terminal?

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -80,8 +80,10 @@ export const EditTraefikEnv = ({ children, serverId }: Props) => {
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
 				<DialogHeader>
-					<DialogTitle>Update Traefik Env</DialogTitle>
-					<DialogDescription>Update the traefik env</DialogDescription>
+					<DialogTitle>Update Traefik Environment</DialogTitle>
+					<DialogDescription>
+						Update the traefik environment variables
+					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 

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

@@ -0,0 +1,303 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+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";
+import { useTranslation } from "next-i18next";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	children: React.ReactNode;
+	serverId?: string;
+}
+
+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({
+	ports: z.array(PortSchema),
+});
+
+type TraefikPortsForm = z.infer<typeof TraefikPortsSchema>;
+
+export const ManageTraefikPorts = ({ children, serverId }: Props) => {
+	const { t } = useTranslation("settings");
+	const [open, setOpen] = useState(false);
+
+	const form = useForm<TraefikPortsForm>({
+		resolver: zodResolver(TraefikPortsSchema),
+		defaultValues: {
+			ports: [],
+		},
+	});
+
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "ports",
+	});
+
+	const { data: currentPorts, refetch: refetchPorts } =
+		api.settings.getTraefikPorts.useQuery({
+			serverId,
+		});
+
+	const { mutateAsync: updatePorts, isLoading } =
+		api.settings.updateTraefikPorts.useMutation({
+			onSuccess: () => {
+				refetchPorts();
+			},
+		});
+
+	useEffect(() => {
+		if (currentPorts) {
+			form.reset({ ports: currentPorts });
+		}
+	}, [currentPorts, form]);
+
+	const handleAddPort = () => {
+		append({ targetPort: 0, publishedPort: 0, publishMode: "host" });
+	};
+
+	const onSubmit = async (data: TraefikPortsForm) => {
+		try {
+			await updatePorts({
+				serverId,
+				additionalPorts: data.ports,
+			});
+			toast.success(t("settings.server.webServer.traefik.portsUpdated"));
+			setOpen(false);
+		} catch (error) {
+			toast.error(t("settings.server.webServer.traefik.portsUpdateError"));
+		}
+	};
+
+	return (
+		<>
+			<div onClick={() => setOpen(true)}>{children}</div>
+			<Dialog open={open} onOpenChange={setOpen}>
+				<DialogContent className="sm:max-w-3xl">
+					<DialogHeader>
+						<DialogTitle className="flex items-center gap-2 text-xl">
+							{t("settings.server.webServer.traefik.managePorts")}
+						</DialogTitle>
+						<DialogDescription className="text-base w-full">
+							<div className="flex items-center justify-between">
+								{t("settings.server.webServer.traefik.managePortsDescription")}
+								<Button
+									onClick={handleAddPort}
+									variant="default"
+									className="gap-2"
+								>
+									<Plus className="h-4 w-4" />
+									Add Mapping
+								</Button>
+							</div>
+						</DialogDescription>
+					</DialogHeader>
+
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+							<div className="grid gap-6 py-4">
+								{fields.length === 0 ? (
+									<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+										<ArrowRightLeft className="size-8 text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											No port mappings configured
+										</span>
+										<p className="text-sm text-muted-foreground text-center">
+											Add one to get started
+										</p>
+									</div>
+								) : (
+									<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">
+													<FormField
+														control={form.control}
+														name={`ports.${index}.targetPort`}
+														render={({ field }) => (
+															<FormItem>
+																<FormLabel className="text-sm font-medium text-muted-foreground">
+																	{t(
+																		"settings.server.webServer.traefik.targetPort",
+																	)}
+																</FormLabel>
+																<FormControl>
+																	<Input
+																		type="number"
+																		{...field}
+																		onChange={(e) =>
+																			field.onChange(Number(e.target.value))
+																		}
+																		className="w-full dark:bg-black"
+																		placeholder="e.g. 8080"
+																	/>
+																</FormControl>
+																<FormMessage />
+															</FormItem>
+														)}
+													/>
+
+													<FormField
+														control={form.control}
+														name={`ports.${index}.publishedPort`}
+														render={({ field }) => (
+															<FormItem>
+																<FormLabel className="text-sm font-medium text-muted-foreground">
+																	{t(
+																		"settings.server.webServer.traefik.publishedPort",
+																	)}
+																</FormLabel>
+																<FormControl>
+																	<Input
+																		type="number"
+																		{...field}
+																		onChange={(e) =>
+																			field.onChange(Number(e.target.value))
+																		}
+																		className="w-full dark:bg-black"
+																		placeholder="e.g. 80"
+																	/>
+																</FormControl>
+																<FormMessage />
+															</FormItem>
+														)}
+													/>
+
+													<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)}
+															variant="ghost"
+															size="icon"
+															className="text-muted-foreground hover:text-destructive"
+														>
+															<Trash2 className="h-4 w-4" />
+														</Button>
+													</div>
+												</CardContent>
+											</Card>
+										))}
+									</div>
+								)}
+
+								{fields.length > 0 && (
+									<AlertBlock type="info">
+										<div className="flex flex-col gap-2">
+											<span className="text-sm">
+												<strong>
+													Each port mapping defines how external traffic reaches
+													your containers.
+												</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>
+													</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>
+													</li>
+												</ul>
+											</span>
+										</div>
+									</AlertBlock>
+								)}
+							</div>
+
+							<DialogFooter>
+								<Button
+									type="submit"
+									variant="default"
+									className="text-sm"
+									isLoading={isLoading}
+								>
+									Save
+								</Button>
+							</DialogFooter>
+						</form>
+					</Form>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+};
+
+export default ManageTraefikPorts;

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

@@ -92,9 +92,9 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 						</SelectContent>
 					</Select>
 					<DockerLogsId
-						id="terminal"
 						containerId={containerId || ""}
 						serverId={serverId}
+						runType="native"
 					/>
 				</div>
 			</DialogContent>

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

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
+import { useTheme } from "next-themes";
 
 interface Props {
 	id: string;
@@ -12,7 +13,7 @@ interface Props {
 
 export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 	const termRef = useRef(null);
-
+	const { resolvedTheme } = useTheme();
 	useEffect(() => {
 		const container = document.getElementById(id);
 		if (container) {
@@ -20,13 +21,12 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 		}
 		const term = new XTerm({
 			cursorBlink: true,
-			cols: 80,
-			rows: 30,
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
-				cursor: "transparent",
-				background: "#19191A",
+				cursor: resolvedTheme === "light" ? "#000000" : "transparent",
+				background: "rgba(0, 0, 0, 0)",
+				foreground: "currentColor",
 			},
 		});
 		const addonFit = new FitAddon();
@@ -40,6 +40,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 		// @ts-ignore
 		term.open(termRef.current);
+		// @ts-ignore
 		term.loadAddon(addonFit);
 		term.loadAddon(addonAttach);
 		addonFit.fit();
@@ -50,7 +51,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="w-full h-full bg-input rounded-lg p-2 ">
+			<div className="w-full h-full bg-transparent border rounded-lg p-2 ">
 				<div id={id} ref={termRef} className="rounded-xl" />
 			</div>
 		</div>

apps/dokploy/components/dashboard/settings/web-server/toggle-auto-check-updates.tsx

@@ -0,0 +1,28 @@
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useState } from "react";
+
+export const ToggleAutoCheckUpdates = ({ disabled }: { disabled: boolean }) => {
+	const [enabled, setEnabled] = useState<boolean>(
+		localStorage.getItem("enableAutoCheckUpdates") === "true",
+	);
+
+	const handleToggle = (checked: boolean) => {
+		setEnabled(checked);
+		localStorage.setItem("enableAutoCheckUpdates", String(checked));
+	};
+
+	return (
+		<div className="flex items-center gap-4">
+			<Switch
+				checked={enabled}
+				onCheckedChange={handleToggle}
+				id="autoCheckUpdatesToggle"
+				disabled={disabled}
+			/>
+			<Label className="text-primary" htmlFor="autoCheckUpdatesToggle">
+				Automatically check for new updates
+			</Label>
+		</div>
+	);
+};

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

@@ -3,91 +3,224 @@ import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
-	DialogDescription,
-	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
+import {
+	Bug,
+	Download,
+	Info,
+	RefreshCcw,
+	Server,
+	ServerCrash,
+	Sparkles,
+	Stars,
+} from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { toast } from "sonner";
+import { ToggleAutoCheckUpdates } from "./toggle-auto-check-updates";
 import { UpdateWebServer } from "./update-webserver";
 
 export const UpdateServer = () => {
-	const [isUpdateAvailable, setIsUpdateAvailable] = useState<null | boolean>(
-		null,
-	);
-	const { mutateAsync: checkAndUpdateImage, isLoading } =
-		api.settings.checkAndUpdateImage.useMutation();
+	const [hasCheckedUpdate, setHasCheckedUpdate] = useState(false);
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState(false);
+	const { mutateAsync: getUpdateData, isLoading } =
+		api.settings.getUpdateData.useMutation();
+	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
+	const { data: releaseTag } = api.settings.getReleaseTag.useQuery();
 	const [isOpen, setIsOpen] = useState(false);
+	const [latestVersion, setLatestVersion] = useState("");
+
+	const handleCheckUpdates = async () => {
+		try {
+			const updateData = await getUpdateData();
+			const versionToUpdate = updateData.latestVersion || "";
+			setHasCheckedUpdate(true);
+			setIsUpdateAvailable(updateData.updateAvailable);
+			setLatestVersion(versionToUpdate);
+
+			if (updateData.updateAvailable) {
+				toast.success(versionToUpdate, {
+					description: "New version available!",
+				});
+			} else {
+				toast.info("No updates available");
+			}
+		} catch (error) {
+			console.error("Error checking for updates:", error);
+			setHasCheckedUpdate(true);
+			setIsUpdateAvailable(false);
+			toast.error(
+				"An error occurred while checking for updates, please try again.",
+			);
+		}
+	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="secondary">
-					<RefreshCcw className="h-4 w-4" />
+				<Button variant="secondary" className="gap-2">
+					<Sparkles className="h-4 w-4" />
 					Updates
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:m:max-w-lg ">
-				<DialogHeader>
-					<DialogTitle>Web Server Update</DialogTitle>
-					<DialogDescription>
-						Check new releases and update your dokploy
-					</DialogDescription>
-				</DialogHeader>
+			<DialogContent className="max-w-lg p-6">
+				<div className="flex items-center justify-between mb-8">
+					<DialogTitle className="text-2xl font-semibold">
+						Web Server Update
+					</DialogTitle>
+					{dokployVersion && (
+						<div className="flex items-center gap-1.5 rounded-full px-3 py-1 mr-2 bg-muted">
+							<Server className="h-4 w-4 text-muted-foreground" />
+							<span className="text-sm text-muted-foreground">
+								{dokployVersion} | {releaseTag}
+							</span>
+						</div>
+					)}
+				</div>
 
-				<div className="flex flex-col gap-4">
-					<span className="text-sm text-muted-foreground">
-						We suggest to update your dokploy to the latest version only if you:
-					</span>
-					<ul className="list-disc list-inside text-sm text-muted-foreground">
-						<li>Want to try the latest features</li>
-						<li>Some bug that is blocking to use some features</li>
-					</ul>
-					<AlertBlock type="info">
-						We recommend checking the latest version for any breaking changes
-						before updating. Go to{" "}
-						<Link
-							href="https://github.com/Dokploy/dokploy/releases"
-							target="_blank"
-							className="text-foreground"
-						>
-							Dokploy Releases
-						</Link>{" "}
-						to check the latest version.
-					</AlertBlock>
+				{/* Initial state */}
+				{!hasCheckedUpdate && (
+					<div className="mb-8">
+						<p className="text text-muted-foreground">
+							Check for new releases and update Dokploy.
+							<br />
+							<br />
+							We recommend checking for updates regularly to ensure you have the
+							latest features and security improvements.
+						</p>
+					</div>
+				)}
 
-					<div className="w-full flex flex-col gap-4">
-						{isUpdateAvailable === false && (
-							<div className="flex flex-col items-center gap-3">
-								<RefreshCcw className="size-6 self-center text-muted-foreground" />
-								<span className="text-sm text-muted-foreground">
-									You are using the latest version
+				{/* Update available state */}
+				{isUpdateAvailable && latestVersion && (
+					<div className="mb-8">
+						<div className="inline-flex items-center gap-2 rounded-lg px-3 py-2 border border-emerald-900 bg-emerald-900 dark:bg-emerald-900/40 mb-4 w-full">
+							<div className="flex items-center gap-1.5">
+								<span className="flex h-2 w-2">
+									<span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75" />
+									<span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+								</span>
+								<Download className="h-4 w-4 text-emerald-400" />
+								<span className="text font-medium text-emerald-400 ">
+									New version available:
 								</span>
 							</div>
-						)}
+							<span className="text font-semibold text-emerald-300">
+								{latestVersion}
+							</span>
+						</div>
+
+						<div className="space-y-4 text-muted-foreground">
+							<p className="text">
+								A new version of the server software is available. Consider
+								updating if you:
+							</p>
+							<ul className="space-y-3">
+								<li className="flex items-start gap-2">
+									<Stars className="h-5 w-5 mt-0.5 text-[#5B9DFF]" />
+									<span className="text">
+										Want to access the latest features and improvements
+									</span>
+								</li>
+								<li className="flex items-start gap-2">
+									<Bug className="h-5 w-5 mt-0.5 text-[#5B9DFF]" />
+									<span className="text">
+										Are experiencing issues that may be resolved in the new
+										version
+									</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+				)}
+
+				{/* Up to date state */}
+				{hasCheckedUpdate && !isUpdateAvailable && !isLoading && (
+					<div className="mb-8">
+						<div className="flex flex-col items-center gap-6 mb-6">
+							<div className="rounded-full p-4 bg-emerald-400/40">
+								<Sparkles className="h-8 w-8 text-emerald-400" />
+							</div>
+							<div className="text-center space-y-2">
+								<h3 className="text-lg font-medium">
+									You are using the latest version
+								</h3>
+								<p className="text text-muted-foreground">
+									Your server is up to date with all the latest features and
+									security improvements.
+								</p>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{hasCheckedUpdate && isLoading && (
+					<div className="mb-8">
+						<div className="flex flex-col items-center gap-6 mb-6">
+							<div className="rounded-full p-4 bg-[#5B9DFF]/40 text-foreground">
+								<RefreshCcw className="h-8 w-8 animate-spin" />
+							</div>
+							<div className="text-center space-y-2">
+								<h3 className="text-lg font-medium">Checking for updates...</h3>
+								<p className="text text-muted-foreground">
+									Please wait while we pull the latest version information from
+									Docker Hub.
+								</p>
+							</div>
+						</div>
+					</div>
+				)}
+
+				{isUpdateAvailable && (
+					<div className="rounded-lg bg-[#16254D] p-4 mb-8">
+						<div className="flex gap-2">
+							<Info className="h-5 w-5 flex-shrink-0 text-[#5B9DFF]" />
+							<div className="text-[#5B9DFF]">
+								We recommend reviewing the{" "}
+								<Link
+									href="https://github.com/Dokploy/dokploy/releases"
+									target="_blank"
+									className="text-white underline hover:text-zinc-200"
+								>
+									release notes
+								</Link>{" "}
+								for any breaking changes before updating.
+							</div>
+						</div>
+					</div>
+				)}
+
+				<div className="flex items-center justify-between pt-2">
+					<ToggleAutoCheckUpdates disabled={isLoading} />
+				</div>
+
+				<div className="space-y-4 flex items-center justify-end">
+					<div className="flex items-center gap-2">
+						<Button variant="outline" onClick={() => setIsOpen(false)}>
+							Cancel
+						</Button>
 						{isUpdateAvailable ? (
 							<UpdateWebServer />
 						) : (
 							<Button
-								className="w-full"
-								onClick={async () => {
-									await checkAndUpdateImage()
-										.then(async (e) => {
-											setIsUpdateAvailable(e);
-										})
-										.catch(() => {
-											setIsUpdateAvailable(false);
-											toast.error("Error to check updates");
-										});
-									toast.success("Check updates");
-								}}
-								isLoading={isLoading}
+								variant="secondary"
+								onClick={handleCheckUpdates}
+								disabled={isLoading}
 							>
-								Check Updates
+								{isLoading ? (
+									<>
+										<RefreshCcw className="h-4 w-4 animate-spin" />
+										Checking for updates
+									</>
+								) : (
+									<>
+										<RefreshCcw className="h-4 w-4" />
+										Check for updates
+									</>
+								)}
 							</Button>
 						)}
 					</div>
@@ -96,3 +229,5 @@ export const UpdateServer = () => {
 		</Dialog>
 	);
 };
+
+export default UpdateServer;

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

@@ -11,24 +11,53 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
+import { HardDriveDownload } from "lucide-react";
 import { toast } from "sonner";
 
-export const UpdateWebServer = () => {
+interface Props {
+	isNavbar?: boolean;
+}
+
+export const UpdateWebServer = ({ isNavbar }: Props) => {
 	const { mutateAsync: updateServer, isLoading } =
 		api.settings.updateServer.useMutation();
+
+	const buttonLabel = isNavbar ? "Update available" : "Update Server";
+
+	const handleConfirm = async () => {
+		try {
+			await updateServer();
+			toast.success(
+				"The server has been updated. The page will be reloaded to reflect the changes...",
+			);
+			setTimeout(() => {
+				// Allow seeing the toast before reloading
+				window.location.reload();
+			}, 2000);
+		} catch (error) {
+			console.error("Error updating server:", error);
+			toast.error(
+				"An error occurred while updating the server, please try again.",
+			);
+		}
+	};
+
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
 				<Button
 					className="relative w-full"
-					variant="secondary"
+					variant={isNavbar ? "outline" : "secondary"}
 					isLoading={isLoading}
 				>
-					<span className="absolute -right-1 -top-2 flex h-3 w-3">
-						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-						<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
-					</span>
-					Update Server
+					{!isLoading && <HardDriveDownload className="h-4 w-4" />}
+					{!isLoading && (
+						<span className="absolute -right-1 -top-2 flex h-3 w-3">
+							<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+							<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
+						</span>
+					)}
+					{isLoading ? "Updating..." : buttonLabel}
 				</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>
@@ -36,19 +65,12 @@ export const UpdateWebServer = () => {
 					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
 					<AlertDialogDescription>
 						This action cannot be undone. This will update the web server to the
-						new version.
+						new version. The page will be reloaded once the update is finished.
 					</AlertDialogDescription>
 				</AlertDialogHeader>
 				<AlertDialogFooter>
 					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await updateServer();
-							toast.success("Please reload the browser to see the changes");
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
+					<AlertDialogAction onClick={handleConfirm}>Confirm</AlertDialogAction>
 				</AlertDialogFooter>
 			</AlertDialogContent>
 		</AlertDialog>

apps/dokploy/components/dashboard/swarm/applications/columns.tsx

@@ -0,0 +1,245 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import { Badge } from "@/components/ui/badge";
+import { ShowDockerModalStackLogs } from "../../docker/logs/show-docker-modal-stack-logs";
+
+export interface ApplicationList {
+	ID: string;
+	Image: string;
+	Mode: string;
+	Name: string;
+	Ports: string;
+	Replicas: string;
+	CurrentState: string;
+	DesiredState: string;
+	Error: string;
+	Node: string;
+	serverId: string;
+}
+
+export const columns: ColumnDef<ApplicationList>[] = [
+	{
+		accessorKey: "ID",
+		accessorFn: (row) => row.ID,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					ID
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("ID")}</div>;
+		},
+	},
+	{
+		accessorKey: "Name",
+		accessorFn: (row) => row.Name,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Name
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("Name")}</div>;
+		},
+	},
+	{
+		accessorKey: "Image",
+		accessorFn: (row) => row.Image,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Image
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("Image")}</div>;
+		},
+	},
+	{
+		accessorKey: "Mode",
+		accessorFn: (row) => row.Mode,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Mode
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("Mode")}</div>;
+		},
+	},
+	{
+		accessorKey: "CurrentState",
+		accessorFn: (row) => row.CurrentState,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Current State
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			const value = row.getValue("CurrentState") as string;
+			const valueStart = value.startsWith("Running")
+				? "Running"
+				: value.startsWith("Shutdown")
+					? "Shutdown"
+					: value;
+			return (
+				<div className="capitalize">
+					<Badge
+						variant={
+							valueStart === "Running"
+								? "default"
+								: value === "Shutdown"
+									? "destructive"
+									: "secondary"
+						}
+					>
+						{value}
+					</Badge>
+				</div>
+			);
+		},
+	},
+	{
+		accessorKey: "DesiredState",
+		accessorFn: (row) => row.DesiredState,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Desired State
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("DesiredState")}</div>;
+		},
+	},
+
+	{
+		accessorKey: "Replicas",
+		accessorFn: (row) => row.Replicas,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Replicas
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("Replicas")}</div>;
+		},
+	},
+
+	{
+		accessorKey: "Ports",
+		accessorFn: (row) => row.Ports,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Ports
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("Ports")}</div>;
+		},
+	},
+	{
+		accessorKey: "Errors",
+		accessorFn: (row) => row.Error,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Errors
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div className="w-[10rem]">{row.getValue("Errors")}</div>;
+		},
+	},
+	{
+		accessorKey: "Logs",
+		accessorFn: (row) => row.Error,
+		header: ({ column }) => {
+			return <span>Logs</span>;
+		},
+		cell: ({ row }) => {
+			return (
+				<span className="w-[10rem]">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="ghost" className="h-8 w-8 p-0">
+								<span className="sr-only">Open menu</span>
+								<MoreHorizontal className="h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							<DropdownMenuLabel>Actions</DropdownMenuLabel>
+							<ShowDockerModalStackLogs
+								containerId={row.original.ID}
+								serverId={row.original.serverId}
+							>
+								View Logs
+							</ShowDockerModalStackLogs>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</span>
+			);
+		},
+	},
+];

apps/dokploy/components/dashboard/swarm/applications/data-table.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import {
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { ChevronDown } from "lucide-react";
+import React from "react";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+	columns,
+	data,
+}: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[],
+	);
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = React.useState({});
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0, //initial page index
+		pageSize: 8, //default page size
+	});
+
+	const table = useReactTable({
+		data,
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
+	return (
+		<div className="mt-6 grid gap-4 pb-20 w-full">
+			<div className="flex flex-col gap-4  </div>w-full overflow-auto">
+				<div className="flex items-center gap-2 max-sm:flex-wrap">
+					<Input
+						placeholder="Filter by name..."
+						value={(table.getColumn("Name")?.getFilterValue() as string) ?? ""}
+						onChange={(event) =>
+							table.getColumn("Name")?.setFilterValue(event.target.value)
+						}
+						className="md:max-w-sm"
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="sm:ml-auto max-sm:w-full">
+								Columns <ChevronDown className="ml-2 h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{table
+								.getAllColumns()
+								.filter((column) => column.getCanHide())
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder
+												? null
+												: flexRender(
+														header.column.columnDef.header,
+														header.getContext(),
+													)}
+										</TableHead>
+									);
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table?.getRowModel()?.rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow
+									key={row.id}
+									data-state={row.getIsSelected() && "selected"}
+								>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext(),
+											)}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell
+									colSpan={columns.length}
+									className="h-24 text-center"
+								>
+									No results.
+									{/* {isLoading ? (
+                    <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+                      <span className="text-muted-foreground text-lg font-medium">
+                        Loading...
+                      </span>
+                    </div>
+                  ) : (
+                    <>No results.</>
+                  )} */}
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx

@@ -0,0 +1,104 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { Layers, Loader2 } from "lucide-react";
+import React from "react";
+import { type ApplicationList, columns } from "./columns";
+import { DataTable } from "./data-table";
+
+interface Props {
+	serverId?: string;
+}
+
+export const ShowNodeApplications = ({ serverId }: Props) => {
+	const { data: NodeApps, isLoading: NodeAppsLoading } =
+		api.swarm.getNodeApps.useQuery({ serverId });
+
+	let applicationList = "";
+
+	if (NodeApps && NodeApps.length > 0) {
+		applicationList = NodeApps.map((app) => app.Name).join(" ");
+	}
+
+	const { data: NodeAppDetails, isLoading: NodeAppDetailsLoading } =
+		api.swarm.getAppInfos.useQuery({ appName: applicationList, serverId });
+
+	if (NodeAppsLoading || NodeAppDetailsLoading) {
+		return (
+			<Dialog>
+				<DialogTrigger asChild>
+					<Button variant="outline" size="sm" className="w-full">
+						<Loader2 className="h-4 w-4 mr-2 animate-spin" />
+					</Button>
+				</DialogTrigger>
+			</Dialog>
+		);
+	}
+
+	if (!NodeApps || !NodeAppDetails) {
+		return (
+			<span className="text-sm w-full flex text-center justify-center items-center">
+				No data found
+			</span>
+		);
+	}
+
+	const combinedData: ApplicationList[] = NodeApps.flatMap((app) => {
+		const appDetails =
+			NodeAppDetails?.filter((detail) =>
+				detail.Name.startsWith(`${app.Name}.`),
+			) || [];
+
+		if (appDetails.length === 0) {
+			return [
+				{
+					...app,
+					CurrentState: "N/A",
+					DesiredState: "N/A",
+					Error: "",
+					Node: "N/A",
+					Ports: app.Ports,
+				},
+			];
+		}
+
+		return appDetails.map((detail) => ({
+			...app,
+			CurrentState: detail.CurrentState,
+			DesiredState: detail.DesiredState,
+			Error: detail.Error,
+			Node: detail.Node,
+			Ports: detail.Ports || app.Ports,
+			serverId: serverId || "",
+		}));
+	});
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline" size="sm" className="w-full">
+					<Layers className="h-4 w-4 mr-2" />
+					Services
+				</Button>
+			</DialogTrigger>
+			<DialogContent className={"sm:max-w-6xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Node Applications</DialogTitle>
+					<DialogDescription>
+						See in detail the applications running on this node
+					</DialogDescription>
+				</DialogHeader>
+				<div className="max-h-[80vh]">
+					<DataTable columns={columns} data={combinedData ?? []} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,140 @@
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { api } from "@/utils/api";
+import {
+	AlertCircle,
+	CheckCircle,
+	HelpCircle,
+	Loader2,
+	LoaderIcon,
+} from "lucide-react";
+import { ShowNodeApplications } from "../applications/show-applications";
+import { ShowNodeConfig } from "./show-node-config";
+
+export interface SwarmList {
+	ID: string;
+	Hostname: string;
+	Availability: string;
+	EngineVersion: string;
+	Status: string;
+	ManagerStatus: string;
+	TLSStatus: string;
+}
+
+interface Props {
+	node: SwarmList;
+	serverId?: string;
+}
+
+export function NodeCard({ node, serverId }: Props) {
+	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
+		nodeId: node.ID,
+		serverId,
+	});
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "Ready":
+				return <CheckCircle className="h-4 w-4 text-green-500" />;
+			case "Down":
+				return <AlertCircle className="h-4 w-4 text-red-500" />;
+			default:
+				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<Card className="w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-center justify-between text-lg">
+						<span className="flex items-center gap-2">
+							{getStatusIcon(node.Status)}
+							{node.Hostname}
+						</span>
+						<Badge variant="outline" className="text-xs">
+							{node.ManagerStatus || "Worker"}
+						</Badge>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex items-center justify-center">
+						<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card className="w-full bg-transparent">
+			<CardHeader>
+				<CardTitle className="flex items-center justify-between">
+					<span className="flex items-center gap-2 text-lg">
+						{getStatusIcon(node.Status)}
+						{node.Hostname}
+					</span>
+					<Badge variant="outline" className="text-xs">
+						{node.ManagerStatus || "Worker"}
+					</Badge>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="grid gap-2 text-sm">
+					<div className="flex justify-between">
+						<span className="font-medium">Status:</span>
+						<span>{node.Status}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">IP Address:</span>
+						{isLoading ? (
+							<LoaderIcon className="animate-spin" />
+						) : (
+							<span>{data?.Status?.Addr}</span>
+						)}
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Availability:</span>
+						<span>{node.Availability}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Engine Version:</span>
+						<span>{node.EngineVersion}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">CPU:</span>
+						{isLoading ? (
+							<LoaderIcon className="animate-spin" />
+						) : (
+							<span>
+								{(data?.Description?.Resources?.NanoCPUs / 1e9).toFixed(2)} GHz
+							</span>
+						)}
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Memory:</span>
+						{isLoading ? (
+							<LoaderIcon className="animate-spin" />
+						) : (
+							<span>
+								{(
+									data?.Description?.Resources?.MemoryBytes /
+									1024 ** 3
+								).toFixed(2)}{" "}
+								GB
+							</span>
+						)}
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">TLS Status:</span>
+						<span>{node.TLSStatus}</span>
+					</div>
+				</div>
+				<div className="flex gap-2 mt-4">
+					<ShowNodeConfig nodeId={node.ID} serverId={serverId} />
+					<ShowNodeApplications serverId={serverId} />
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/dashboard/swarm/details/show-node-config.tsx

@@ -0,0 +1,56 @@
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { Settings } from "lucide-react";
+
+interface Props {
+	nodeId: string;
+	serverId?: string;
+}
+
+export const ShowNodeConfig = ({ nodeId, serverId }: Props) => {
+	const { data, isLoading } = api.swarm.getNodeInfo.useQuery({
+		nodeId,
+		serverId,
+	});
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="outline" size="sm" className="w-full">
+					<Settings className="h-4 w-4 mr-2" />
+					Config
+				</Button>
+			</DialogTrigger>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Node Config</DialogTitle>
+					<DialogDescription>
+						See in detail the metadata of this node
+					</DialogDescription>
+				</DialogHeader>
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card max-h-[70vh] overflow-auto ">
+					<code>
+						<pre className="whitespace-pre-wrap break-words items-center justify-center">
+							{/* {JSON.stringify(data, null, 2)} */}
+							<CodeEditor
+								language="json"
+								lineWrapping={false}
+								lineNumbers={false}
+								readOnly
+								value={JSON.stringify(data, null, 2)}
+							/>
+						</pre>
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,188 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import {
+	AlertCircle,
+	CheckCircle,
+	HelpCircle,
+	Loader2,
+	Server,
+} from "lucide-react";
+import { NodeCard } from "./details/details-card";
+
+interface Props {
+	serverId?: string;
+}
+
+export default function SwarmMonitorCard({ serverId }: Props) {
+	const { data: nodes, isLoading } = api.swarm.getNodes.useQuery({
+		serverId,
+	});
+
+	if (isLoading) {
+		return (
+			<div className="w-full max-w-7xl mx-auto">
+				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+					<div className="flex items-center justify-center h-full  text-muted-foreground">
+						<Loader2 className="h-6 w-6 animate-spin" />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (!nodes) {
+		return (
+			<div className="w-full max-w-7xl mx-auto">
+				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+					<div className="flex items-center justify-center h-full  text-destructive">
+						<span>Failed to load data</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	const totalNodes = nodes.length;
+	const activeNodesCount = nodes.filter(
+		(node) => node.Status === "Ready",
+	).length;
+	const managerNodesCount = nodes.filter(
+		(node) =>
+			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
+	).length;
+
+	const activeNodes = nodes.filter((node) => node.Status === "Ready");
+	const managerNodes = nodes.filter(
+		(node) =>
+			node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable",
+	);
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "Ready":
+				return <CheckCircle className="h-4 w-4 text-green-500" />;
+			case "Down":
+				return <AlertCircle className="h-4 w-4 text-red-500" />;
+			case "Disconnected":
+				return <AlertCircle className="h-4 w-4 text-red-800" />;
+			default:
+				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
+		}
+	};
+
+	return (
+		<div className="w-full max-w-7xl mx-auto">
+			<div className="flex justify-between items-center mb-4">
+				<h1 className="text-xl font-bold">Docker Swarm Overview</h1>
+				{!serverId && (
+					<Button
+						type="button"
+						onClick={() =>
+							window.location.replace("/dashboard/settings/cluster")
+						}
+					>
+						Manage Cluster
+					</Button>
+				)}
+			</div>
+			<Card className="mb-6 bg-transparent">
+				<CardHeader className="flex flex-row items-center justify-between">
+					<CardTitle className="flex items-center gap-2 text-xl">
+						<Server className="size-4" />
+						Monitor
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+						<div className="flex justify-between items-center">
+							<span className="text-sm font-medium">Total Nodes:</span>
+							<Badge variant="secondary">{totalNodes}</Badge>
+						</div>
+						<div className="flex justify-between items-center">
+							<span className="text-sm font-medium">Active Nodes:</span>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger>
+										<Badge
+											variant="secondary"
+											className="bg-green-100 dark:bg-green-400 text-black"
+										>
+											{activeNodesCount} / {totalNodes}
+										</Badge>
+									</TooltipTrigger>
+									<TooltipContent>
+										<div className="max-h-48 overflow-y-auto">
+											{activeNodes.map((node) => (
+												<div key={node.ID} className="flex items-center gap-2">
+													{getStatusIcon(node.Status)}
+													{node.Hostname}
+												</div>
+											))}
+										</div>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+						<div className="flex justify-between items-center">
+							<span className="text-sm font-medium">Manager Nodes:</span>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger>
+										<Badge
+											variant="secondary"
+											className="bg-blue-100 dark:bg-blue-400 text-black"
+										>
+											{managerNodesCount} / {totalNodes}
+										</Badge>
+									</TooltipTrigger>
+									<TooltipContent>
+										<div className="max-h-48 overflow-y-auto">
+											{managerNodes.map((node) => (
+												<div key={node.ID} className="flex items-center gap-2">
+													{getStatusIcon(node.Status)}
+													{node.Hostname}
+												</div>
+											))}
+										</div>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+					</div>
+					<div className="border-t pt-4 mt-4">
+						<h4 className="text-sm font-semibold mb-2">Node Status:</h4>
+						<ul className="space-y-2">
+							{nodes.map((node) => (
+								<li
+									key={node.ID}
+									className="flex justify-between items-center text-sm"
+								>
+									<span className="flex items-center gap-2">
+										{getStatusIcon(node.Status)}
+										{node.Hostname}
+									</span>
+									<Badge variant="outline" className="text-xs">
+										{node.ManagerStatus || "Worker"}
+									</Badge>
+								</li>
+							))}
+						</ul>
+					</div>
+				</CardContent>
+			</Card>
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				{nodes.map((node) => (
+					<NodeCard key={node.ID} node={node} serverId={serverId} />
+				))}
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/layouts/dashboard-layout.tsx

@@ -1,25 +1,34 @@
+import Head from "next/head";
 import { Navbar } from "./navbar";
 import { NavigationTabs, type TabState } from "./navigation-tabs";
 
 interface Props {
 	children: React.ReactNode;
 	tab: TabState;
+	metaName?: string;
 }
 
-export const DashboardLayout = ({ children, tab }: Props) => {
+export const DashboardLayout = ({ children, tab, metaName }: Props) => {
 	return (
-		<div>
-			<div
-				className="bg-radial relative flex flex-col bg-background min-h-screen w-full"
-				id="app-container"
-			>
-				<Navbar />
-				<main className="pt-6 flex w-full flex-col items-center">
-					<div className="w-full max-w-8xl px-4 lg:px-8">
-						<NavigationTabs tab={tab}>{children}</NavigationTabs>
-					</div>
-				</main>
+		<>
+			<Head>
+				<title>
+					{metaName ?? tab.charAt(0).toUpperCase() + tab.slice(1)} | Dokploy
+				</title>
+			</Head>
+			<div>
+				<div
+					className="bg-radial relative flex flex-col bg-background min-h-screen w-full"
+					id="app-container"
+				>
+					<Navbar />
+					<main className="pt-6 flex w-full flex-col items-center">
+						<div className="w-full max-w-8xl px-4 lg:px-8">
+							<NavigationTabs tab={tab}>{children}</NavigationTabs>
+						</div>
+					</main>
+				</div>
 			</div>
-		</div>
+		</>
 	);
 };

apps/dokploy/components/layouts/navbar.tsx

@@ -12,11 +12,16 @@ import { api } from "@/utils/api";
 import { HeartIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useEffect, useRef, useState } from "react";
+import { UpdateWebServer } from "../dashboard/settings/web-server/update-webserver";
 import { Logo } from "../shared/logo";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { buttonVariants } from "../ui/button";
 
+const AUTO_CHECK_UPDATES_INTERVAL_MINUTES = 7;
+
 export const Navbar = () => {
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState<boolean>(false);
 	const router = useRouter();
 	const { data } = api.auth.get.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
@@ -29,6 +34,59 @@ export const Navbar = () => {
 		},
 	);
 	const { mutateAsync } = api.auth.logout.useMutation();
+	const { mutateAsync: getUpdateData } =
+		api.settings.getUpdateData.useMutation();
+
+	const checkUpdatesIntervalRef = useRef<null | NodeJS.Timeout>(null);
+
+	useEffect(() => {
+		// Handling of automatic check for server updates
+		if (isCloud) {
+			return;
+		}
+
+		if (!localStorage.getItem("enableAutoCheckUpdates")) {
+			// Enable auto update checking by default if user didn't change it
+			localStorage.setItem("enableAutoCheckUpdates", "true");
+		}
+
+		const clearUpdatesInterval = () => {
+			if (checkUpdatesIntervalRef.current) {
+				clearInterval(checkUpdatesIntervalRef.current);
+			}
+		};
+
+		const checkUpdates = async () => {
+			try {
+				if (localStorage.getItem("enableAutoCheckUpdates") !== "true") {
+					return;
+				}
+
+				const { updateAvailable } = await getUpdateData();
+
+				if (updateAvailable) {
+					// Stop interval when update is available
+					clearUpdatesInterval();
+					setIsUpdateAvailable(true);
+				}
+			} catch (error) {
+				console.error("Error auto-checking for updates:", error);
+			}
+		};
+
+		checkUpdatesIntervalRef.current = setInterval(
+			checkUpdates,
+			AUTO_CHECK_UPDATES_INTERVAL_MINUTES * 60000,
+		);
+
+		// Also check for updates on initial page load
+		checkUpdates();
+
+		return () => {
+			clearUpdatesInterval();
+		};
+	}, []);
+
 	return (
 		<nav className="border-divider sticky inset-x-0 top-0 z-40 flex h-auto w-full items-center justify-center border-b bg-background/70 backdrop-blur-lg backdrop-saturate-150 data-[menu-open=true]:border-none data-[menu-open=true]:backdrop-blur-xl">
 			<header className="relative z-40 flex w-full max-w-8xl flex-row flex-nowrap items-center justify-between gap-4 px-4 sm:px-6 h-16">
@@ -43,6 +101,11 @@ export const Navbar = () => {
 						</span>
 					</Link>
 				</div>
+				{isUpdateAvailable && (
+					<div>
+						<UpdateWebServer isNavbar />
+					</div>
+				)}
 				<Link
 					className={buttonVariants({
 						variant: "outline",

apps/dokploy/components/layouts/navigation-tabs.tsx

@@ -21,7 +21,8 @@ export type TabState =
 	| "settings"
 	| "traefik"
 	| "requests"
-	| "docker";
+	| "docker"
+	| "swarm";
 
 const getTabMaps = (isCloud: boolean) => {
 	const elements: TabInfo[] = [
@@ -60,6 +61,15 @@ const getTabMaps = (isCloud: boolean) => {
 				},
 				type: "docker",
 			},
+			{
+				label: "Swarm",
+				description: "Manage your docker swarm and Servers",
+				index: "/dashboard/swarm",
+				isShow: ({ rol, user }) => {
+					return Boolean(rol === "admin" || user?.canAccessToDocker);
+				},
+				type: "swarm",
+			},
 			{
 				label: "Requests",
 				description: "Manage your requests",

apps/dokploy/components/layouts/settings-layout.tsx

@@ -77,7 +77,7 @@ export const SettingsLayout = ({ children }: Props) => {
 									{
 										title: "Registry",
 										label: "",
-										icon: ListMusic,
+										icon: GalleryVerticalEnd,
 										href: "/dashboard/settings/registry",
 									},
 
@@ -150,6 +150,7 @@ import {
 	BoxesIcon,
 	CreditCardIcon,
 	Database,
+	GalleryVerticalEnd,
 	GitBranch,
 	KeyIcon,
 	KeyRound,

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

@@ -2,7 +2,9 @@ import { cn } from "@/lib/utils";
 import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
+
 import { properties } from "@codemirror/legacy-modes/mode/properties";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
 import { EditorView } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
@@ -10,14 +12,16 @@ import { useTheme } from "next-themes";
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
-	language?: "yaml" | "json" | "properties";
+	language?: "yaml" | "json" | "properties" | "shell";
 	lineWrapping?: boolean;
+	lineNumbers?: boolean;
 }
 
 export const CodeEditor = ({
 	className,
 	wrapperClassName,
 	language = "yaml",
+	lineNumbers = true,
 	...props
 }: Props) => {
 	const { resolvedTheme } = useTheme();
@@ -25,7 +29,7 @@ export const CodeEditor = ({
 		<div className={cn("relative overflow-auto", wrapperClassName)}>
 			<CodeMirror
 				basicSetup={{
-					lineNumbers: true,
+					lineNumbers,
 					foldGutter: true,
 					highlightSelectionMatches: true,
 					highlightActiveLine: !props.disabled,
@@ -37,7 +41,9 @@ export const CodeEditor = ({
 						? yaml()
 						: language === "json"
 							? json()
-							: StreamLanguage.define(properties),
+							: language === "shell"
+								? StreamLanguage.define(shell)
+								: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
 				]}
 				{...props}

apps/dokploy/components/ui/badge.tsx

@@ -14,6 +14,16 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
 				destructive:
 					"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+				red: "border-transparent select-none items-center whitespace-nowrap font-medium bg-red-600/20 dark:bg-red-500/15 text-destructive text-xs h-4 px-1 py-1 rounded-md",
+				yellow:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-yellow-600/20 dark:bg-yellow-500/15 dark:text-yellow-500 text-yellow-600 text-xs h-4 px-1 py-1 rounded-md",
+				orange:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-600/20 dark:bg-orange-500/15 dark:text-orange-500 text-orange-600 text-xs h-4 px-1 py-1 rounded-md",
+				green:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-600/20 dark:bg-emerald-500/15 dark:text-emerald-500 text-emerald-600 text-xs h-4 px-1 py-1 rounded-md",
+				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-600/20 dark:bg-blue-500/15 dark:text-blue-500 text-blue-600 text-xs h-4 px-1 py-1 rounded-md",
+				blank:
+					"border-transparent select-none items-center whitespace-nowrap font-medium dark:bg-white/15 bg-black/15 text-foreground text-xs h-4 px-1 py-1 rounded-md",
 				outline: "text-foreground",
 			},
 		},

apps/dokploy/components/ui/secrets.tsx

@@ -62,6 +62,7 @@ export const Secrets = (props: Props) => {
 									}
 									language="properties"
 									disabled={isVisible}
+									lineWrapping
 									placeholder={props.placeholder}
 									className="h-96 font-mono"
 									{...field}

apps/dokploy/components/ui/tooltip.tsx

@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipPortal = TooltipPrimitive.Portal;
+
 const TooltipContent = React.forwardRef<
 	React.ElementRef<typeof TooltipPrimitive.Content>,
 	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -25,4 +27,10 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export {
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+	TooltipProvider,
+	TooltipPortal,
+};

apps/dokploy/drizzle/0050_nappy_wrecker.sql

@@ -0,0 +1 @@
+ALTER TABLE "gitlab" ADD COLUMN "gitlabUrl" text DEFAULT 'https://gitlab.com' NOT NULL;

apps/dokploy/drizzle/0051_hard_gorgon.sql

@@ -0,0 +1 @@
+ALTER TABLE "server" ADD COLUMN "command" text DEFAULT '' NOT NULL;

apps/dokploy/drizzle/0052_bumpy_luckman.sql

@@ -0,0 +1 @@
+ALTER TABLE "discord" ADD COLUMN "decoration" boolean;

apps/dokploy/drizzle/0053_broken_kulan_gath.sql

@@ -0,0 +1 @@
+ALTER TABLE "mongo" ADD COLUMN "replicaSets" boolean DEFAULT false;