Merge pull request #897 from Dokploy/canary

v0.15.0

.gitignore

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

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

@@ -6,6 +6,10 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
 
 interface Props {
 	logPath: string | null;
@@ -15,9 +19,26 @@ interface Props {
 }
 export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	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 +69,20 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
+
 
 	return (
 		<Dialog
@@ -76,17 +104,27 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment
+						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</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-[#d4d4d4] 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/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

@@ -90,7 +90,6 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,6 +20,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";
@@ -100,10 +102,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"

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

@@ -6,6 +6,11 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { LogLine, parseLogs } from "../../docker/logs/utils";
+import { Badge } from "@/components/ui/badge";
+import { Loader2 } from "lucide-react";
+
 
 interface Props {
 	logPath: string | null;
@@ -20,9 +25,26 @@ export const ShowDeploymentCompose = ({
 	serverId,
 }: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	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;
 
@@ -54,13 +76,19 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
-	};
+
+	useEffect(() => {
+		const logs = parseLogs(data);
+		setFilteredLogs(logs);
+	}, [data]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+	
+		if (autoScroll && scrollRef.current) {
+		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	  }, [filteredLogs, autoScroll]);
 
 	return (
 		<Dialog
@@ -78,21 +106,35 @@ 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
+					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
 					</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-[#d4d4d4] 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/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/logs/show.tsx

@@ -96,7 +96,6 @@ export const ShowDockerLogsCompose = ({
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
 			</CardContent>

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,115 +1,309 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Terminal } from "@xterm/xterm";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+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 { TerminalLine } from "./terminal-line";
+import { type LogLine, getLogType, parseLogs } from "./utils";
 
 interface Props {
-	id: string;
-	containerId: string;
-	serverId?: string | null;
+  containerId: string;
+  serverId?: string | null;
 }
 
-export const DockerLogsId: React.FC<Props> = ({
-	id,
-	containerId,
-	serverId,
-}) => {
-	const [term, setTerm] = React.useState<Terminal>();
-	const [lines, setLines] = React.useState<number>(40);
-	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
+type TypeFilter = "all" | "error" | "warning" | "success" | "info" | "debug";
 
-	useEffect(() => {
-		// if (containerId === "select-a-container") {
-		// 	return;
-		// }
-		const container = document.getElementById(id);
-		if (container) {
-			container.innerHTML = "";
-		}
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
+  const { data } = api.docker.getConfig.useQuery(
+    {
+      containerId,
+      serverId: serverId ?? undefined,
+    },
+    {
+      enabled: !!containerId,
+    }
+  );
 
-		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',
+  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>("");
 
-			convertEol: true,
-			theme: {
-				cursor: "transparent",
-				background: "rgba(0, 0, 0, 0)",
-			},
-		});
+  const [since, setSince] = React.useState<TimeFilter>("all");
+  const [typeFilter, setTypeFilter] = React.useState<TypeFilter>("all");
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isLoading, setIsLoading] = React.useState(false);
 
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const scrollToBottom = () => {
+    if (autoScroll && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  };
 
-		const wsUrl = `${protocol}//${window.location.host}/docker-container-logs?containerId=${containerId}&tail=${lines}${serverId ? `&serverId=${serverId}` : ""}`;
-		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);
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
 
-		ws.onerror = (error) => {
-			console.error("WebSocket error: ", error);
-		};
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+    setAutoScroll(isAtBottom);
+  };
 
-		ws.onmessage = (e) => {
-			termi.write(e.data);
-		};
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value || "");
+  };
 
-		ws.onclose = (e) => {
-			console.log(e.reason);
+  const handleLines = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setLines(Number(e.target.value) || 1);
+  };
 
-			termi.write(`Connection closed!\nReason: ${e.reason}\n`);
-			wsRef.current = null;
-		};
-		return () => {
-			if (wsRef.current?.readyState === WebSocket.OPEN) {
-				ws.close();
-				wsRef.current = null;
-			}
-		};
-	}, [lines, containerId]);
+  const handleSince = (value: TimeFilter) => {
+    setRawLogs("");
+    setFilteredLogs([]);
+    setSince(value);
+  };
 
-	useEffect(() => {
-		term?.clear();
-	}, [lines, term]);
+  const handleTypeFilter = (value: TypeFilter) => {
+    setTypeFilter(value);
+  };
 
-	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>
+  useEffect(() => {
+    if (!containerId) return;
+    
+    let isCurrentConnection = true;
+    let noDataTimeout: NodeJS.Timeout;
+    setIsLoading(true);
+    setRawLogs("");
+    setFilteredLogs([]);
 
-			<div className="w-full h-full rounded-lg p-2 bg-[#19191A]">
-				<div id={id} />
-			</div>
-		</div>
-	);
-};
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new globalThis.URLSearchParams({
+      containerId,
+      tail: lines.toString(),
+      since,
+      search,
+    });
+
+    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);
+
+    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) => {
+      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) => {
+      if (!isCurrentConnection) return;
+      console.log("WebSocket closed:", e.reason);
+      setIsLoading(false);
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+    };
+
+    return () => {
+      isCurrentConnection = false;
+      if (noDataTimeout) clearTimeout(noDataTimeout);
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [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;
+
+      const matchesType = typeFilter === "all" || logType === typeFilter;
+
+      return matchesType;
+    });
+  };
+
+  useEffect(() => {
+    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="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">
+              <Input
+                type="text"
+                placeholder="Number of lines to show"
+                value={lines}
+                onChange={handleLines}
+                className="inline-flex h-9 text-sm placeholder-gray-400 w-full sm:w-auto"
+              />
+
+              <Select value={since} onValueChange={handleSince}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Time filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1h">Last hour</SelectItem>
+                  <SelectItem value="6h">Last 6 hours</SelectItem>
+                  <SelectItem value="24h">Last 24 hours</SelectItem>
+                  <SelectItem value="168h">Last 7 days</SelectItem>
+                  <SelectItem value="720h">Last 30 days</SelectItem>
+                  <SelectItem value="all">All time</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={handleTypeFilter}>
+                <SelectTrigger className="sm:w-[180px] w-full h-9">
+                  <SelectValue placeholder="Type filter" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">
+                    <Badge variant="blank">All</Badge>
+                  </SelectItem>
+                  <SelectItem value="error">
+                    <Badge variant="red">Error</Badge>
+                  </SelectItem>
+                  <SelectItem value="warning">
+                    <Badge variant="orange">Warning</Badge>
+                  </SelectItem>
+                  <SelectItem value="debug">
+                    <Badge variant="yellow">Debug</Badge>
+                  </SelectItem>
+                  <SelectItem value="success">
+                    <Badge variant="green">Success</Badge>
+                  </SelectItem>
+                  <SelectItem value="info">
+                    <Badge variant="blue">Info</Badge>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+
+              <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"
+              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-[#d4d4d4] dark:bg-[#050506] rounded custom-logs-scrollbar"
+          >
+            {filteredLogs.length > 0 ? (
+              filteredLogs.map((filteredLog: LogLine, index: number) => (
+                <TerminalLine
+                  key={index}
+                  log={filteredLog}
+                  searchTerm={search}
+                />
+              ))
+            ) : 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/show-docker-modal-logs.tsx

@@ -46,11 +46,7 @@ export const ShowDockerModalLogs = ({
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
-					<DockerLogsId
-						id="terminal"
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -0,0 +1,111 @@
+import { Badge } from "@/components/ui/badge";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipPortal,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { escapeRegExp } from "lodash";
+import React from "react";
+import { type LogLine, getLogType } from "./utils";
+
+interface LogLineProps {
+	log: LogLine;
+	noTimestamp?: boolean;
+	searchTerm?: string;
+}
+
+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 text;
+
+		const parts = text.split(new RegExp(`(${escapeRegExp(term)})`, "gi"));
+		return parts.map((part, index) =>
+			part.toLowerCase() === term.toLowerCase() ? (
+				<span key={index} className="bg-yellow-200 dark:bg-yellow-900">
+					{part}
+				</span>
+			) : (
+				part
+			),
+		);
+	};
+
+	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">
+				{searchTerm ? highlightMessage(message, searchTerm) : message}
+			</span>
+		</div>
+	);
+}

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

@@ -0,0 +1,148 @@
+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.tsx

@@ -25,8 +25,6 @@ export const DockerTerminal: React.FC<Props> = ({
 		}
 		const term = new Terminal({
 			cursorBlink: true,
-			cols: 80,
-			rows: 30,
 			lineHeight: 1.4,
 			convertEol: true,
 			theme: {
@@ -45,6 +43,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 +65,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-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

@@ -1,35 +1,35 @@
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
 import {
-	AlertTriangle,
-	BookIcon,
-	ExternalLink,
-	ExternalLinkIcon,
-	FolderInput,
-	MoreHorizontalIcon,
-	TrashIcon,
+  AlertTriangle,
+  BookIcon,
+  ExternalLink,
+  ExternalLinkIcon,
+  FolderInput,
+  MoreHorizontalIcon,
+  TrashIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { Fragment } from "react";
@@ -38,253 +38,257 @@ import { ProjectEnviroment } from "./project-enviroment";
 import { UpdateProject } from "./update";
 
 export const ShowProjects = () => {
-	const utils = api.useUtils();
-	const { data } = api.project.all.useQuery();
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
-	const { mutateAsync } = api.project.remove.useMutation();
+  const utils = api.useUtils();
+  const { data } = api.project.all.useQuery();
+  const { data: auth } = api.auth.get.useQuery();
+  const { data: user } = api.user.byAuthId.useQuery(
+    {
+      authId: auth?.id || "",
+    },
+    {
+      enabled: !!auth?.id && auth?.rol === "user",
+    }
+  );
+  const { mutateAsync } = api.project.remove.useMutation();
 
-	return (
-		<>
-			{data?.length === 0 && (
-				<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
-					<FolderInput className="size-10 md:size-28 text-muted-foreground" />
-					<span className="text-center font-medium text-muted-foreground">
-						No projects added yet. Click on Create project.
-					</span>
-				</div>
-			)}
-			<div className="mt-6  w-full  grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
-				{data?.map((project) => {
-					const emptyServices =
-						project?.mariadb.length === 0 &&
-						project?.mongo.length === 0 &&
-						project?.mysql.length === 0 &&
-						project?.postgres.length === 0 &&
-						project?.redis.length === 0 &&
-						project?.applications.length === 0 &&
-						project?.compose.length === 0;
+  return (
+    <>
+      {data?.length === 0 && (
+        <div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
+          <FolderInput className="size-10 md:size-28 text-muted-foreground" />
+          <span className="text-center font-medium text-muted-foreground">
+            No projects added yet. Click on Create project.
+          </span>
+        </div>
+      )}
+      <div className="mt-6  w-full  grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
+        {data?.map((project) => {
+          const emptyServices =
+            project?.mariadb.length === 0 &&
+            project?.mongo.length === 0 &&
+            project?.mysql.length === 0 &&
+            project?.postgres.length === 0 &&
+            project?.redis.length === 0 &&
+            project?.applications.length === 0 &&
+            project?.compose.length === 0;
 
-					const totalServices =
-						project?.mariadb.length +
-						project?.mongo.length +
-						project?.mysql.length +
-						project?.postgres.length +
-						project?.redis.length +
-						project?.applications.length +
-						project?.compose.length;
+          const totalServices =
+            project?.mariadb.length +
+            project?.mongo.length +
+            project?.mysql.length +
+            project?.postgres.length +
+            project?.redis.length +
+            project?.applications.length +
+            project?.compose.length;
 
-					const flattedDomains = [
-						...project.applications.flatMap((a) => a.domains),
-						...project.compose.flatMap((a) => a.domains),
-					];
+          const flattedDomains = [
+            ...project.applications.flatMap((a) => a.domains),
+            ...project.compose.flatMap((a) => a.domains),
+          ];
 
-					const renderDomainsDropdown = (
-						item: typeof project.compose | typeof project.applications,
-					) =>
-						item[0] ? (
-							<DropdownMenuGroup>
-								<DropdownMenuLabel>
-									{"applicationId" in item[0] ? "Applications" : "Compose"}
-								</DropdownMenuLabel>
-								{item.map((a) => (
-									<Fragment
-										key={"applicationId" in a ? a.applicationId : a.composeId}
-									>
-										<DropdownMenuSeparator />
-										<DropdownMenuGroup>
-											<DropdownMenuLabel className="font-normal capitalize text-xs ">
-												{a.name}
-											</DropdownMenuLabel>
-											<DropdownMenuSeparator />
-											{a.domains.map((domain) => (
-												<DropdownMenuItem key={domain.domainId} asChild>
-													<Link
-														className="space-x-4 text-xs cursor-pointer justify-between"
-														target="_blank"
-														href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
-													>
-														<span>{domain.host}</span>
-														<ExternalLink className="size-4 shrink-0" />
-													</Link>
-												</DropdownMenuItem>
-											))}
-										</DropdownMenuGroup>
-									</Fragment>
-								))}
-							</DropdownMenuGroup>
-						) : null;
+          const renderDomainsDropdown = (
+            item: typeof project.compose | typeof project.applications
+          ) =>
+            item[0] ? (
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>
+                  {"applicationId" in item[0] ? "Applications" : "Compose"}
+                </DropdownMenuLabel>
+                {item.map((a) => (
+                  <Fragment
+                    key={"applicationId" in a ? a.applicationId : a.composeId}
+                  >
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuLabel className="font-normal capitalize text-xs ">
+                        {a.name}
+                      </DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      {a.domains.map((domain) => (
+                        <DropdownMenuItem key={domain.domainId} asChild>
+                          <Link
+                            className="space-x-4 text-xs cursor-pointer justify-between"
+                            target="_blank"
+                            href={`${domain.https ? "https" : "http"}://${
+                              domain.host
+                            }${domain.path}`}
+                          >
+                            <span>{domain.host}</span>
+                            <ExternalLink className="size-4 shrink-0" />
+                          </Link>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuGroup>
+                  </Fragment>
+                ))}
+              </DropdownMenuGroup>
+            ) : null;
 
-					return (
-						<div key={project.projectId} className="w-full lg:max-w-md">
-							<Link href={`/dashboard/project/${project.projectId}`}>
-								<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
-									{flattedDomains.length > 1 ? (
-										<DropdownMenu>
-											<DropdownMenuTrigger asChild>
-												<Button
-													className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-													size="sm"
-													variant="default"
-												>
-													<ExternalLinkIcon className="size-3.5" />
-												</Button>
-											</DropdownMenuTrigger>
-											<DropdownMenuContent
-												className="w-[200px] space-y-2"
-												onClick={(e) => e.stopPropagation()}
-											>
-												{renderDomainsDropdown(project.applications)}
-												{renderDomainsDropdown(project.compose)}
-											</DropdownMenuContent>
-										</DropdownMenu>
-									) : flattedDomains[0] ? (
-										<Button
-											className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-											size="sm"
-											variant="default"
-											onClick={(e) => e.stopPropagation()}
-										>
-											<Link
-												href={`${flattedDomains[0].https ? "https" : "http"}://${flattedDomains[0].host}${flattedDomains[0].path}`}
-												target="_blank"
-											>
-												<ExternalLinkIcon className="size-3.5" />
-											</Link>
-										</Button>
-									) : null}
+          return (
+            <div key={project.projectId} className="w-full lg:max-w-md">
+              <Link href={`/dashboard/project/${project.projectId}`}>
+                <Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
+                  {flattedDomains.length > 1 ? (
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+                          size="sm"
+                          variant="default"
+                        >
+                          <ExternalLinkIcon className="size-3.5" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="w-[200px] space-y-2"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {renderDomainsDropdown(project.applications)}
+                        {renderDomainsDropdown(project.compose)}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  ) : flattedDomains[0] ? (
+                    <Button
+                      className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+                      size="sm"
+                      variant="default"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Link
+                        href={`${
+                          flattedDomains[0].https ? "https" : "http"
+                        }://${flattedDomains[0].host}${flattedDomains[0].path}`}
+                        target="_blank"
+                      >
+                        <ExternalLinkIcon className="size-3.5" />
+                      </Link>
+                    </Button>
+                  ) : null}
 
-									<CardHeader>
-										<CardTitle className="flex items-center justify-between gap-2">
-											<span className="flex flex-col gap-1.5">
-												<div className="flex items-center gap-2">
-													<BookIcon className="size-4 text-muted-foreground" />
-													<span className="text-base font-medium leading-none">
-														{project.name}
-													</span>
-												</div>
+                  <CardHeader>
+                    <CardTitle className="flex items-center justify-between gap-2">
+                      <span className="flex flex-col gap-1.5">
+                        <div className="flex items-center gap-2">
+                          <BookIcon className="size-4 text-muted-foreground" />
+                          <span className="text-base font-medium leading-none">
+                            {project.name}
+                          </span>
+                        </div>
 
-												<span className="text-sm font-medium text-muted-foreground">
-													{project.description}
-												</span>
-											</span>
-											<div className="flex self-start space-x-1">
-												<DropdownMenu>
-													<DropdownMenuTrigger asChild>
-														<Button
-															variant="ghost"
-															size="icon"
-															className="px-2"
-														>
-															<MoreHorizontalIcon className="size-5" />
-														</Button>
-													</DropdownMenuTrigger>
-													<DropdownMenuContent className="w-[200px] space-y-2">
-														<DropdownMenuLabel className="font-normal">
-															Actions
-														</DropdownMenuLabel>
-														<div onClick={(e) => e.stopPropagation()}>
-															<ProjectEnviroment
-																projectId={project.projectId}
-															/>
-														</div>
-														<div onClick={(e) => e.stopPropagation()}>
-															<UpdateProject projectId={project.projectId} />
-														</div>
+                        <span className="text-sm font-medium text-muted-foreground">
+                          {project.description}
+                        </span>
+                      </span>
+                      <div className="flex self-start space-x-1">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="px-2"
+                            >
+                              <MoreHorizontalIcon className="size-5" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent className="w-[200px] space-y-2">
+                            <DropdownMenuLabel className="font-normal">
+                              Actions
+                            </DropdownMenuLabel>
+                            <div onClick={(e) => e.stopPropagation()}>
+                              <ProjectEnviroment
+                                projectId={project.projectId}
+                              />
+                            </div>
+                            <div onClick={(e) => e.stopPropagation()}>
+                              <UpdateProject projectId={project.projectId} />
+                            </div>
 
-														<div onClick={(e) => e.stopPropagation()}>
-															{(auth?.rol === "admin" ||
-																user?.canDeleteProjects) && (
-																<AlertDialog>
-																	<AlertDialogTrigger className="w-full">
-																		<DropdownMenuItem
-																			className="w-full cursor-pointer  space-x-3"
-																			onSelect={(e) => e.preventDefault()}
-																		>
-																			<TrashIcon className="size-4" />
-																			<span>Delete</span>
-																		</DropdownMenuItem>
-																	</AlertDialogTrigger>
-																	<AlertDialogContent>
-																		<AlertDialogHeader>
-																			<AlertDialogTitle>
-																				Are you sure to delete this project?
-																			</AlertDialogTitle>
-																			{!emptyServices ? (
-																				<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
-																					<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
-																					<span className="text-sm text-yellow-600 dark:text-yellow-400">
-																						You have active services, please
-																						delete them first
-																					</span>
-																				</div>
-																			) : (
-																				<AlertDialogDescription>
-																					This action cannot be undone
-																				</AlertDialogDescription>
-																			)}
-																		</AlertDialogHeader>
-																		<AlertDialogFooter>
-																			<AlertDialogCancel>
-																				Cancel
-																			</AlertDialogCancel>
-																			<AlertDialogAction
-																				disabled={!emptyServices}
-																				onClick={async () => {
-																					await mutateAsync({
-																						projectId: project.projectId,
-																					})
-																						.then(() => {
-																							toast.success(
-																								"Project delete succesfully",
-																							);
-																						})
-																						.catch(() => {
-																							toast.error(
-																								"Error to delete this project",
-																							);
-																						})
-																						.finally(() => {
-																							utils.project.all.invalidate();
-																						});
-																				}}
-																			>
-																				Delete
-																			</AlertDialogAction>
-																		</AlertDialogFooter>
-																	</AlertDialogContent>
-																</AlertDialog>
-															)}
-														</div>
-													</DropdownMenuContent>
-												</DropdownMenu>
-											</div>
-										</CardTitle>
-									</CardHeader>
-									<CardFooter className="pt-4">
-										<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
-											<DateTooltip date={project.createdAt}>
-												Created
-											</DateTooltip>
-											<span>
-												{totalServices}{" "}
-												{totalServices === 1 ? "service" : "services"}
-											</span>
-										</div>
-									</CardFooter>
-								</Card>
-							</Link>
-						</div>
-					);
-				})}
-			</div>
-		</>
-	);
+                            <div onClick={(e) => e.stopPropagation()}>
+                              {(auth?.rol === "admin" ||
+                                user?.canDeleteProjects) && (
+                                <AlertDialog>
+                                  <AlertDialogTrigger className="w-full">
+                                    <DropdownMenuItem
+                                      className="w-full cursor-pointer  space-x-3"
+                                      onSelect={(e) => e.preventDefault()}
+                                    >
+                                      <TrashIcon className="size-4" />
+                                      <span>Delete</span>
+                                    </DropdownMenuItem>
+                                  </AlertDialogTrigger>
+                                  <AlertDialogContent>
+                                    <AlertDialogHeader>
+                                      <AlertDialogTitle>
+                                        Are you sure to delete this project?
+                                      </AlertDialogTitle>
+                                      {!emptyServices ? (
+                                        <div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+                                          <AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
+                                          <span className="text-sm text-yellow-600 dark:text-yellow-400">
+                                            You have active services, please
+                                            delete them first
+                                          </span>
+                                        </div>
+                                      ) : (
+                                        <AlertDialogDescription>
+                                          This action cannot be undone
+                                        </AlertDialogDescription>
+                                      )}
+                                    </AlertDialogHeader>
+                                    <AlertDialogFooter>
+                                      <AlertDialogCancel>
+                                        Cancel
+                                      </AlertDialogCancel>
+                                      <AlertDialogAction
+                                        disabled={!emptyServices}
+                                        onClick={async () => {
+                                          await mutateAsync({
+                                            projectId: project.projectId,
+                                          })
+                                            .then(() => {
+                                              toast.success(
+                                                "Project delete succesfully"
+                                              );
+                                            })
+                                            .catch(() => {
+                                              toast.error(
+                                                "Error to delete this project"
+                                              );
+                                            })
+                                            .finally(() => {
+                                              utils.project.all.invalidate();
+                                            });
+                                        }}
+                                      >
+                                        Delete
+                                      </AlertDialogAction>
+                                    </AlertDialogFooter>
+                                  </AlertDialogContent>
+                                </AlertDialog>
+                              )}
+                            </div>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </div>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardFooter className="pt-4">
+                    <div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+                      <DateTooltip date={project.createdAt}>
+                        Created
+                      </DateTooltip>
+                      <span>
+                        {totalServices}{" "}
+                        {totalServices === 1 ? "service" : "services"}
+                      </span>
+                    </div>
+                  </CardFooter>
+                </Card>
+              </Link>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
 };

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 React from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandList,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandDialog,
+  CommandSeparator,
+} from "@/components/ui/command";
+import { useRouter } from "next/router";
+import {
+  extractServices,
+  type Services,
+} from "@/pages/dashboard/project/[projectId]";
+import type { findProjectById } from "@dokploy/server/services/project";
+import { BookIcon, CircuitBoard, GlobeIcon } from "lucide-react";
+import {
+  MariadbIcon,
+  MongodbIcon,
+  MysqlIcon,
+  PostgresqlIcon,
+  RedisIcon,
+} from "@/components/icons/data-tools-icons";
+import { api } from "@/utils/api";
+import { Badge } from "@/components/ui/badge";
+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/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/profile/profile-form.tsx

@@ -26,10 +26,12 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 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,6 +99,7 @@ export const ProfileForm = () => {
 			email: values.email.toLowerCase(),
 			password: values.password,
 			image: values.image,
+			currentPassword: values.currentPassword,
 		})
 			.then(async () => {
 				await refetch();
@@ -116,6 +122,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 +143,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 { 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 { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { useRouter } from "next/router";
+
+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/edit-script.tsx

@@ -0,0 +1,167 @@
+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,8 +32,10 @@ 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 { ValidateServer } from "./validate-server";
+import { SecurityAudit } from "./security-audit";
 
 interface Props {
 	serverId: string;
@@ -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

@@ -31,8 +31,12 @@ import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
+import { useRouter } from "next/router";
+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 +46,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 +118,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>

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 { Card, CardContent } from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { CopyIcon } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
+import { CodeEditor } from "@/components/shared/code-editor";
+import Link from "next/link";
+
+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,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+} from "@/components/ui/card";
+import { RocketIcon } from "lucide-react";
+import { toast } from "sonner";
+import { EditScript } from "../edit-script";
+import { api } from "@/utils/api";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+} from "@/components/ui/select";
+
+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,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+} from "@/components/ui/card";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { api } from "@/utils/api";
+import { useState } from "react";
+import { Label } from "@/components/ui/label";
+
+import {
+	Select,
+	SelectTrigger,
+	SelectValue,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+} from "@/components/ui/select";
+import { StatusRow } from "../gpu-support";
+import { AlertBlock } from "@/components/shared/alert-block";
+
+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 { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { BookIcon, Puzzle } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { defineStepper } from "@stepperize/react";
+import React from "react";
+import { Separator } from "@/components/ui/separator";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CreateServer } from "./create-server";
+import { CreateSSHKey } from "./create-ssh-key";
+import { Setup } from "./setup";
+import { Verify } from "./verify";
+import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
+import ConfettiExplosion from "react-confetti-explosion";
+import Link from "next/link";
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+
+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/show-modal-logs.tsx

@@ -91,11 +91,7 @@ export const ShowModalLogs = ({ appName, children, serverId }: Props) => {
 							</SelectGroup>
 						</SelectContent>
 					</Select>
-					<DockerLogsId
-						id="terminal"
-						containerId={containerId || ""}
-						serverId={serverId}
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -20,13 +20,11 @@ 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",
+				background: "transparent",
 			},
 		});
 		const addonFit = new FitAddon();
@@ -40,6 +38,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 +49,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/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/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-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-500/15 text-yellow-500 text-xs h-4 px-1 py-1 rounded-md",
+				orange:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-orange-500/15 text-orange-500 text-xs h-4 px-1 py-1 rounded-md",
+				green:
+					"border-transparent select-none items-center whitespace-nowrap font-medium bg-emerald-500/15 text-emerald-500 text-xs h-4 px-1 py-1 rounded-md",
+				blue: "border-transparent select-none items-center whitespace-nowrap font-medium bg-blue-500/15 text-blue-500 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/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/meta/_journal.json

@@ -351,6 +351,20 @@
       "when": 1733628762978,
       "tag": "0049_dark_leopardon",
       "breakpoints": true
+    },
+    {
+      "idx": 50,
+      "version": "6",
+      "when": 1733889104203,
+      "tag": "0050_nappy_wrecker",
+      "breakpoints": true
+    },
+    {
+      "idx": 51,
+      "version": "6",
+      "when": 1734241482851,
+      "tag": "0051_hard_gorgon",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/lib/languages.ts

@@ -11,6 +11,8 @@ export enum Languages {
 	Persian = "fa",
 	Korean = "ko",
 	Portuguese = "pt-br",
+	Italian = "it",
+	Japanese = "ja",
 }
 
 export type Language = keyof typeof Languages;

apps/dokploy/next-i18next.config.cjs

@@ -1,23 +0,0 @@
-/** @type {import('next-i18next').UserConfig} */
-module.exports = {
-	fallbackLng: "en",
-	keySeparator: false,
-	i18n: {
-		defaultLocale: "en",
-		locales: [
-			"en",
-			"pl",
-			"ru",
-			"fr",
-			"de",
-			"tr",
-			"kz",
-			"zh-Hant",
-			"zh-Hans",
-			"fa",
-			"ko",
-			"pt-br",
-		],
-		localeDetection: false,
-	},
-};

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.14.1",
+	"version": "v0.15.0",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -35,6 +35,8 @@
 		"test": "vitest --config __test__/vitest.config.ts"
 	},
 	"dependencies": {
+		"react-confetti-explosion":"2.1.2",
+		"@stepperize/react": "4.0.1",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.1",
 		"@codemirror/language": "^6.10.1",

apps/dokploy/pages/_app.tsx

@@ -1,5 +1,6 @@
 import "@/styles/globals.css";
 
+import { SearchCommand } from "@/components/dashboard/search-command";
 import { Toaster } from "@/components/ui/sonner";
 import { Languages } from "@/lib/languages";
 import { api } from "@/utils/api";
@@ -33,10 +34,10 @@ const MyApp = ({
 	return (
 		<>
 			<style jsx global>{`
-                :root {
-                    --font-inter: ${inter.style.fontFamily};
-                }
-            `}</style>
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+        }
+      `}</style>
 			<Head>
 				<title>Dokploy</title>
 			</Head>
@@ -56,6 +57,7 @@ const MyApp = ({
 				forcedTheme={Component.theme}
 			>
 				<Toaster richColors />
+				<SearchCommand />
 				{getLayout(<Component {...pageProps} />)}
 			</ThemeProvider>
 		</>
@@ -63,20 +65,13 @@ const MyApp = ({
 };
 
 export default api.withTRPC(
-	appWithTranslation(
-		MyApp,
-		// keep this in sync with next-i18next.config.js
-		// if you want to know why don't just import the config file, this because next-i18next.config.js must be a CJS, but the rest of the code is ESM.
-		// Add the config here is due to the issue: https://github.com/i18next/next-i18next/issues/2259
-		// if one day every page is translated, we can safely remove this config.
-		{
-			i18n: {
-				defaultLocale: "en",
-				locales: Object.values(Languages),
-				localeDetection: false,
-			},
-			fallbackLng: "en",
-			keySeparator: false,
+	appWithTranslation(MyApp, {
+		i18n: {
+			defaultLocale: "en",
+			locales: Object.values(Languages),
+			localeDetection: false,
 		},
-	),
+		fallbackLng: "en",
+		keySeparator: false,
+	}),
 );

apps/dokploy/pages/api/providers/gitlab/callback.ts

@@ -13,7 +13,7 @@ export default async function handler(
 
 	const gitlab = await findGitlabById(gitlabId as string);
 
-	const response = await fetch("https://gitlab.com/oauth/token", {
+	const response = await fetch(`${gitlab.gitlabUrl}/oauth/token`, {
 		method: "POST",
 		headers: {
 			"Content-Type": "application/x-www-form-urlencoded",

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

@@ -39,6 +39,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { type ReactElement } from "react";
@@ -189,6 +190,9 @@ const Project = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>Project: {data?.name} | Dokploy</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between flex-wrap gap-2">
 					<div className="flex flex-col gap-2">
 						<h1 className="text-xl font-bold lg:text-3xl">{data?.name}</h1>

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

@@ -41,9 +41,10 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
+import React, { useState, useEffect, type ReactElement } from "react";
 import superjson from "superjson";
 
 type TabState =
@@ -61,7 +62,14 @@ const Service = (
 	const { applicationId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
-	const [tab, setSab] = useState<TabState>(activeTab);
+	const [tab, setTab] = useState<TabState>(activeTab);
+
+	useEffect(() => {
+		if (router.query.tab) {
+			setTab(router.query.tab as TabState);
+		}
+	}, [router.query.tab]);
+
 	const { data } = api.application.one.useQuery(
 		{ applicationId },
 		{
@@ -101,6 +109,11 @@ const Service = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Application: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">
@@ -185,9 +198,9 @@ const Service = (
 					defaultValue="general"
 					className="w-full"
 					onValueChange={(e) => {
-						setSab(e as TabState);
+						setTab(e as TabState);
 						const newPath = `/dashboard/project/${projectId}/services/application/${applicationId}?tab=${e}`;
-						router.push(newPath, undefined, { shallow: true });
+						router.push(newPath);
 					}}
 				>
 					<div className="flex flex-row items-center justify-between  w-full gap-4">

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

@@ -35,9 +35,10 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
+import React, { useState, useEffect, type ReactElement } from "react";
 import superjson from "superjson";
 
 type TabState =
@@ -54,7 +55,14 @@ const Service = (
 	const { composeId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
-	const [tab, setSab] = useState<TabState>(activeTab);
+	const [tab, setTab] = useState<TabState>(activeTab);
+
+	useEffect(() => {
+		if (router.query.tab) {
+			setTab(router.query.tab as TabState);
+		}
+	}, [router.query.tab]);
+
 	const { data } = api.compose.one.useQuery(
 		{ composeId },
 		{
@@ -94,6 +102,11 @@ const Service = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Compose: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">
@@ -177,9 +190,9 @@ const Service = (
 					defaultValue="general"
 					className="w-full"
 					onValueChange={(e) => {
-						setSab(e as TabState);
+						setTab(e as TabState);
 						const newPath = `/dashboard/project/${projectId}/services/compose/${composeId}?tab=${e}`;
-						router.push(newPath, undefined, { shallow: true });
+						router.push(newPath);
 					}}
 				>
 					<div className="flex flex-row items-center justify-between  w-full gap-4">

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

@@ -35,6 +35,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState, type ReactElement } from "react";
@@ -82,6 +83,11 @@ const Mariadb = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Database: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">

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

@@ -35,6 +35,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState, type ReactElement } from "react";
@@ -83,6 +84,11 @@ const Mongo = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Database: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">

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

@@ -35,6 +35,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState, type ReactElement } from "react";
@@ -81,6 +82,11 @@ const MySql = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Database: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">

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

@@ -35,6 +35,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState, type ReactElement } from "react";
@@ -82,6 +83,11 @@ const Postgresql = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Database: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">

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

@@ -34,6 +34,7 @@ import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
+import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useState, type ReactElement } from "react";
@@ -81,6 +82,11 @@ const Redis = (
 						<BreadcrumbLink>{data?.name}</BreadcrumbLink>
 					</BreadcrumbItem>
 				</Breadcrumb>
+				<Head>
+					<title>
+						Database: {data?.name} - {data?.project.name} | Dokploy
+					</title>
+				</Head>
 				<header className="mb-6 flex w-full items-center justify-between max-sm:flex-wrap gap-4">
 					<div className="flex  flex-col justify-between w-fit gap-2">
 						<div className="flex flex-row items-center gap-2 xl:gap-4 flex-wrap">

apps/dokploy/pages/dashboard/settings/appearance.tsx

@@ -21,7 +21,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Appearance">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/billing.tsx

@@ -16,7 +16,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Billing">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/certificates.tsx

@@ -19,7 +19,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Certificates">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/cluster.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Nodes">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/destinations.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="S3 Destinations">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/git-providers.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Git Providers">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/notifications.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Notifications">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/profile.tsx

@@ -1,5 +1,6 @@
 import { GenerateToken } from "@/components/dashboard/settings/profile/generate-token";
 import { ProfileForm } from "@/components/dashboard/settings/profile/profile-form";
+import { RemoveSelfAccount } from "@/components/dashboard/settings/profile/remove-self-account";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { SettingsLayout } from "@/components/layouts/settings-layout";
 import { appRouter } from "@/server/api/root";
@@ -21,10 +22,14 @@ const Page = () => {
 			enabled: !!data?.id && data?.rol === "user",
 		},
 	);
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	return (
 		<div className="flex flex-col gap-4 w-full">
 			<ProfileForm />
 			{(user?.canAccessToAPI || data?.rol === "admin") && <GenerateToken />}
+
+			{isCloud && <RemoveSelfAccount />}
 		</div>
 	);
 };
@@ -33,7 +38,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Profile">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/registry.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Registry">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/server.tsx

@@ -23,7 +23,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Server">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/servers.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Servers">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/ssh-keys.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="SSH Keys">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/dashboard/settings/users.tsx

@@ -20,7 +20,7 @@ export default Page;
 
 Page.getLayout = (page: ReactElement) => {
 	return (
-		<DashboardLayout tab={"settings"}>
+		<DashboardLayout tab={"settings"} metaName="Users">
 			<SettingsLayout>{page}</SettingsLayout>
 		</DashboardLayout>
 	);

apps/dokploy/pages/register.tsx

@@ -134,7 +134,7 @@ const Register = ({ isCloud }: Props) => {
 								</span>
 							</div>
 						)}
-						{data && (
+						{data?.type === "cloud" && (
 							<AlertBlock type="success" className="mx-4 my-2">
 								<span>
 									Registration succesfuly, Please check your inbox or spam

apps/dokploy/public/locales/it/common.json

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,44 @@
+{
+	"settings.common.save": "Salva",
+	"settings.server.domain.title": "Dominio del server",
+	"settings.server.domain.description": "Aggiungi un dominio alla tua applicazione server.",
+	"settings.server.domain.form.domain": "Dominio",
+	"settings.server.domain.form.letsEncryptEmail": "Email di Let's Encrypt",
+	"settings.server.domain.form.certificate.label": "Certificato",
+	"settings.server.domain.form.certificate.placeholder": "Seleziona un certificato",
+	"settings.server.domain.form.certificateOptions.none": "Nessuno",
+	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Predefinito)",
+
+	"settings.server.webServer.title": "Server Web",
+	"settings.server.webServer.description": "Ricarica o pulisci il server web.",
+	"settings.server.webServer.actions": "Azioni",
+	"settings.server.webServer.reload": "Ricarica",
+	"settings.server.webServer.watchLogs": "Guarda i log",
+	"settings.server.webServer.updateServerIp": "Aggiorna IP del server",
+	"settings.server.webServer.server.label": "Server",
+	"settings.server.webServer.traefik.label": "Traefik",
+	"settings.server.webServer.traefik.modifyEnv": "Modifica Env",
+	"settings.server.webServer.storage.label": "Spazio",
+	"settings.server.webServer.storage.cleanUnusedImages": "Pulisci immagini inutilizzate",
+	"settings.server.webServer.storage.cleanUnusedVolumes": "Pulisci volumi inutilizzati",
+	"settings.server.webServer.storage.cleanStoppedContainers": "Pulisci container fermati",
+	"settings.server.webServer.storage.cleanDockerBuilder": "Pulisci Docker Builder e sistema",
+	"settings.server.webServer.storage.cleanMonitoring": "Pulisci monitoraggio",
+	"settings.server.webServer.storage.cleanAll": "Pulisci tutto",
+
+	"settings.profile.title": "Account",
+	"settings.profile.description": "Modifica i dettagli del tuo profilo qui.",
+	"settings.profile.email": "Email",
+	"settings.profile.password": "Password",
+	"settings.profile.avatar": "Avatar",
+
+	"settings.appearance.title": "Aspetto",
+	"settings.appearance.description": "Personalizza il tema della tua dashboard.",
+	"settings.appearance.theme": "Tema",
+	"settings.appearance.themeDescription": "Seleziona un tema per la tua dashboard",
+	"settings.appearance.themes.light": "Chiaro",
+	"settings.appearance.themes.dark": "Scuro",
+	"settings.appearance.themes.system": "Sistema",
+	"settings.appearance.language": "Lingua",
+	"settings.appearance.languageDescription": "Seleziona una lingua per la tua dashboard"
+}

apps/dokploy/public/locales/ja/common.json

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,44 @@
+{
+	"settings.common.save": "保存",
+	"settings.server.domain.title": "サーバードメイン",
+	"settings.server.domain.description": "サーバーアプリケーションにドメインを追加",
+	"settings.server.domain.form.domain": "ドメイン",
+	"settings.server.domain.form.letsEncryptEmail": "Let's Encrypt メールアドレス",
+	"settings.server.domain.form.certificate.label": "証明書",
+	"settings.server.domain.form.certificate.placeholder": "証明書を選択",
+	"settings.server.domain.form.certificateOptions.none": "なし",
+	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (デフォルト)",
+
+	"settings.server.webServer.title": "ウェブサーバー",
+	"settings.server.webServer.description": "ウェブサーバーをリロードまたはクリーンアップします",
+	"settings.server.webServer.actions": "アクション",
+	"settings.server.webServer.reload": "リロード",
+	"settings.server.webServer.watchLogs": "ログを監視",
+	"settings.server.webServer.updateServerIp": "サーバーIPを更新",
+	"settings.server.webServer.server.label": "サーバー",
+	"settings.server.webServer.traefik.label": "Traefik",
+	"settings.server.webServer.traefik.modifyEnv": "環境設定を変更",
+	"settings.server.webServer.storage.label": "ストレージ",
+	"settings.server.webServer.storage.cleanUnusedImages": "未使用のイメージを削除",
+	"settings.server.webServer.storage.cleanUnusedVolumes": "未使用のボリュームを削除",
+	"settings.server.webServer.storage.cleanStoppedContainers": "停止中のコンテナを削除",
+	"settings.server.webServer.storage.cleanDockerBuilder": "Docker ビルダー＆システムをクリーンアップ",
+	"settings.server.webServer.storage.cleanMonitoring": "モニタリングをクリーンアップ",
+	"settings.server.webServer.storage.cleanAll": "すべてをクリーンアップ",
+
+	"settings.profile.title": "アカウント",
+	"settings.profile.description": "ここでプロフィールの詳細を変更できます",
+	"settings.profile.email": "メールアドレス",
+	"settings.profile.password": "パスワード",
+	"settings.profile.avatar": "アバター",
+
+	"settings.appearance.title": "外観",
+	"settings.appearance.description": "ダッシュボードのテーマをカスタマイズ",
+	"settings.appearance.theme": "テーマ",
+	"settings.appearance.themeDescription": "ダッシュボードのテーマを選択してください",
+	"settings.appearance.themes.light": "ライト",
+	"settings.appearance.themes.dark": "ダーク",
+	"settings.appearance.themes.system": "システム",
+	"settings.appearance.language": "言語",
+	"settings.appearance.languageDescription": "ダッシュボードの言語を選択してください"
+}

apps/dokploy/public/templates/elasticsearch.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="M100.085 110.364l57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="M40.536 71.918l39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="M175.724 165.317l43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>

apps/dokploy/public/templates/huly.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 71 25"><path fill="#fff" d="M22.4 16a1.6 1.6 0 0 1 1.6 1.6v4.8a1.6 1.6 0 0 1-1.6 1.6h-4.8a1.6 1.6 0 0 1-1.6-1.6v-4.8a1.6 1.6 0 0 1 1.6-1.6zM6.4 0A1.6 1.6 0 0 1 8 1.6v4.8A1.6 1.6 0 0 1 6.4 8H1.6A1.6 1.6 0 0 1 0 6.4V1.6A1.6 1.6 0 0 1 1.6 0zM23.531 8.469c.3-.3.469-.707.469-1.132V1.6A1.6 1.6 0 0 0 22.4 0h-4.8A1.6 1.6 0 0 0 16 1.6v4.8A1.6 1.6 0 0 1 14.4 8H8.663a1.6 1.6 0 0 0-1.132.469L.47 15.53A1.6 1.6 0 0 0 0 16.663V22.4A1.6 1.6 0 0 0 1.6 24h4.8A1.6 1.6 0 0 0 8 22.4v-4.8A1.6 1.6 0 0 1 9.6 16h5.737a1.6 1.6 0 0 0 1.132-.469zM31.22 20V3.8h3.62v7.1q.42-.72 1.18-1.12.78-.42 1.78-.42 1.74 0 2.64 1.12.92 1.1.92 3.24V20h-3.62v-5.6q0-1.82-1.38-1.82-.74 0-1.14.52-.38.5-.38 1.44V20zm16.6.32q-2.46 0-3.74-1.24-1.26-1.24-1.26-3.62V9.68h3.64v5.66q0 1.76 1.38 1.76.7 0 1.02-.42t.32-1.34V9.68h3.64v5.78q0 2.38-1.28 3.62-1.26 1.24-3.72 1.24m6.546-.32V3.8h3.62V20zm5.955 4.9 2.58-5.46-4.24-9.76h3.98l2.1 6.06 1.94-6.06h3.88l-6.6 15.22z"/></svg>

apps/dokploy/public/templates/langflow.svg

@@ -0,0 +1,6 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="28" fill="black"/>
+<path d="M89.6763 65.8642L102.71 65.8642C104.285 65.8642 105.563 67.1415 105.563 68.717L105.563 77.7818C105.563 79.3573 104.285 80.6346 102.71 80.6346L91.1299 80.6346C90.3733 80.6346 89.6477 80.9351 89.1127 81.4701L71.4183 99.1645C70.8833 99.6995 70.1577 100 69.4011 100L59.5869 100C58.04 100 56.7749 98.7673 56.735 97.2209L56.4975 88.0155C56.4561 86.4116 57.7449 85.0891 59.3493 85.0891L68.0882 85.0891C68.8448 85.0891 69.5704 84.7885 70.1054 84.2535L87.6591 66.6998C88.1941 66.1648 88.9197 65.8642 89.6763 65.8642Z" fill="white"/>
+<path d="M55.9431 27.707L68.9766 27.707C70.5521 27.707 71.8293 28.9843 71.8293 30.5598L71.8293 39.6246C71.8293 41.2001 70.5521 42.4774 68.9766 42.4774L57.3967 42.4774C56.6401 42.4774 55.9144 42.7779 55.3794 43.3129L37.685 61.0073C37.15 61.5423 36.4244 61.8429 35.6678 61.8429L25.8536 61.8429C24.3067 61.8429 23.0417 60.6101 23.0018 59.0637L22.7642 49.8583C22.7228 48.2544 24.0117 46.9319 25.616 46.9319L34.3549 46.9319C35.1115 46.9319 35.8371 46.6313 36.3721 46.0963L53.9258 28.5426C54.4608 28.0076 55.1865 27.707 55.9431 27.707Z" fill="white"/>
+<path d="M89.6763 36.3423L102.71 36.3423C104.285 36.3423 105.563 37.6195 105.563 39.1951L105.563 48.2598C105.563 49.8354 104.285 51.1126 102.71 51.1126L91.1299 51.1126C90.3733 51.1126 89.6477 51.4132 89.1127 51.9482L71.4183 69.6426C70.8833 70.1776 70.1577 70.4782 69.4011 70.4782L58.5061 70.4782C57.7705 70.4782 57.0633 70.7623 56.5322 71.2714L36.7587 90.2227C36.2276 90.7318 35.5204 91.0159 34.7847 91.0159L26.1705 91.0159C24.5949 91.0159 23.3177 89.7387 23.3177 88.1632L23.3177 78.9108C23.3177 77.3353 24.5949 76.0581 26.1704 76.0581L34.7494 76.0581C35.506 76.0581 36.2316 75.7575 36.7666 75.2225L55.5864 56.4027C56.1214 55.8677 56.847 55.5672 57.6036 55.5672L68.0882 55.5672C68.8448 55.5672 69.5704 55.2666 70.1054 54.7316L87.6591 37.1778C88.1941 36.6428 88.9197 36.3423 89.6763 36.3423Z" fill="white"/>
+</svg>

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

@@ -20,6 +20,8 @@ import {
 	getUserByToken,
 	lucia,
 	luciaToken,
+	removeAdminByAuthId,
+	removeUserByAuthId,
 	sendDiscordNotification,
 	sendEmailNotification,
 	updateAuthById,
@@ -59,14 +61,20 @@ export const authRouter = createTRPCRouter({
 				if (IS_CLOUD) {
 					await sendDiscordNotificationWelcome(newAdmin);
 					await sendVerificationEmail(newAdmin.id);
-					return true;
+					return {
+						status: "success",
+						type: "cloud",
+					};
 				}
 				const session = await lucia.createSession(newAdmin.id || "", {});
 				ctx.res.appendHeader(
 					"Set-Cookie",
 					lucia.createSessionCookie(session.id).serialize(),
 				);
-				return true;
+				return {
+					status: "success",
+					type: "selfhosted",
+				};
 			} catch (error) {
 				throw new TRPCError({
 					code: "BAD_REQUEST",
@@ -178,6 +186,20 @@ export const authRouter = createTRPCRouter({
 	update: protectedProcedure
 		.input(apiUpdateAuth)
 		.mutation(async ({ ctx, input }) => {
+			const currentAuth = await findAuthByEmail(ctx.user.email);
+
+			if (input.password) {
+				const correctPassword = bcrypt.compareSync(
+					input.password,
+					currentAuth?.password || "",
+				);
+				if (!correctPassword) {
+					throw new TRPCError({
+						code: "BAD_REQUEST",
+						message: "Current password is incorrect",
+					});
+				}
+			}
 			const auth = await updateAuthById(ctx.user.authId, {
 				...(input.email && { email: input.email.toLowerCase() }),
 				...(input.password && {
@@ -188,6 +210,47 @@ export const authRouter = createTRPCRouter({
 
 			return auth;
 		}),
+	removeSelfAccount: protectedProcedure
+		.input(
+			z.object({
+				password: z.string().min(1),
+			}),
+		)
+		.mutation(async ({ ctx, input }) => {
+			if (!IS_CLOUD) {
+				throw new TRPCError({
+					code: "NOT_FOUND",
+					message: "This feature is only available in the cloud version",
+				});
+			}
+			const currentAuth = await findAuthByEmail(ctx.user.email);
+
+			const correctPassword = bcrypt.compareSync(
+				input.password,
+				currentAuth?.password || "",
+			);
+
+			if (!correctPassword) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: "Password is incorrect",
+				});
+			}
+			const { req, res } = ctx;
+			const { session } = await validateRequest(req, res);
+			if (!session) return false;
+
+			await lucia.invalidateSession(session.id);
+			res.setHeader("Set-Cookie", lucia.createBlankSessionCookie().serialize());
+
+			if (ctx.user.rol === "admin") {
+				await removeAdminByAuthId(ctx.user.authId);
+			} else {
+				await removeUserByAuthId(ctx.user.authId);
+			}
+
+			return true;
+		}),
 
 	generateToken: protectedProcedure.mutation(async ({ ctx, input }) => {
 		const auth = await findAuthById(ctx.user.authId);
@@ -440,7 +503,7 @@ export const sendDiscordNotificationWelcome = async (newAdmin: Auth) => {
 			webhookUrl: process.env.DISCORD_WEBHOOK_URL || "",
 		},
 		{
-			title: "✅ New User Registered",
+			title: " New User Registered",
 			color: 0x00ff00,
 			fields: [
 				{

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

@@ -142,6 +142,10 @@ export const gitlabRouter = createTRPCRouter({
 					name: input.name,
 					adminId: ctx.user.adminId,
 				});
+
+				await updateGitlab(input.gitlabId, {
+					...input,
+				});
 			} else {
 				await updateGitlab(input.gitlabId, {
 					...input,

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

@@ -18,6 +18,7 @@ import {
 import {
 	IS_CLOUD,
 	createServer,
+	defaultCommand,
 	deleteServer,
 	findAdminById,
 	findServerById,
@@ -25,6 +26,7 @@ import {
 	getPublicIpWithFallback,
 	haveActiveServices,
 	removeDeploymentsByServerId,
+	serverAudit,
 	serverSetup,
 	serverValidate,
 	updateServerById,
@@ -69,6 +71,11 @@ export const serverRouter = createTRPCRouter({
 
 			return server;
 		}),
+	getDefaultCommand: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			return defaultCommand();
+		}),
 	all: protectedProcedure.query(async ({ ctx }) => {
 		const result = await db
 			.select({
@@ -160,6 +167,57 @@ export const serverRouter = createTRPCRouter({
 				});
 			}
 		}),
+
+	security: protectedProcedure
+		.input(apiFindOneServer)
+		.query(async ({ input, ctx }) => {
+			try {
+				const server = await findServerById(input.serverId);
+				if (server.adminId !== ctx.user.adminId) {
+					throw new TRPCError({
+						code: "UNAUTHORIZED",
+						message: "You are not authorized to validate this server",
+					});
+				}
+				const response = await serverAudit(input.serverId);
+				return response as unknown as {
+					ufw: {
+						installed: boolean;
+						active: boolean;
+						defaultIncoming: string;
+					};
+					ssh: {
+						enabled: boolean;
+						keyAuth: boolean;
+						permitRootLogin: string;
+						passwordAuth: string;
+						usePam: string;
+					};
+					nonRootUser: {
+						hasValidSudoUser: boolean;
+					};
+					unattendedUpgrades: {
+						installed: boolean;
+						active: boolean;
+						updateEnabled: number;
+						upgradeEnabled: number;
+					};
+					fail2ban: {
+						installed: boolean;
+						enabled: boolean;
+						active: boolean;
+						sshEnabled: string;
+						sshMode: string;
+					};
+				};
+			} catch (error) {
+				throw new TRPCError({
+					code: "BAD_REQUEST",
+					message: error instanceof Error ? error?.message : `Error: ${error}`,
+					cause: error as Error,
+				});
+			}
+		}),
 	remove: protectedProcedure
 		.input(apiRemoveServer)
 		.mutation(async ({ input, ctx }) => {

apps/dokploy/server/api/routers/ssh-key.ts

@@ -17,7 +17,7 @@ import {
 	updateSSHKeyById,
 } from "@dokploy/server";
 import { TRPCError } from "@trpc/server";
-import { eq } from "drizzle-orm";
+import { desc, eq } from "drizzle-orm";
 
 export const sshRouter = createTRPCRouter({
 	create: protectedProcedure
@@ -71,6 +71,7 @@ export const sshRouter = createTRPCRouter({
 	all: protectedProcedure.query(async ({ ctx }) => {
 		return await db.query.sshKeys.findMany({
 			...(IS_CLOUD && { where: eq(sshKeys.adminId, ctx.user.adminId) }),
+			orderBy: desc(sshKeys.createdAt),
 		});
 		// TODO: Remove this line when the cloud version is ready
 	}),

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

@@ -81,7 +81,7 @@ export const stripeRouter = createTRPCRouter({
 					adminId: admin.adminId,
 				},
 				allow_promotion_codes: true,
-				success_url: `${WEBSITE_URL}/dashboard/settings/billing`,
+				success_url: `${WEBSITE_URL}/dashboard/settings/servers?success=true`,
 				cancel_url: `${WEBSITE_URL}/dashboard/settings/billing`,
 			});
 

apps/dokploy/server/wss/docker-container-logs.ts

@@ -31,6 +31,8 @@ export const setupDockerContainerLogsWebSocketServer = (
 		const url = new URL(req.url || "", `http://${req.headers.host}`);
 		const containerId = url.searchParams.get("containerId");
 		const tail = url.searchParams.get("tail");
+		const search = url.searchParams.get("search");
+		const since = url.searchParams.get("since");
 		const serverId = url.searchParams.get("serverId");
 		const { user, session } = await validateWebSocketRequest(req);
 
@@ -51,9 +53,13 @@ export const setupDockerContainerLogsWebSocketServer = (
 				const client = new Client();
 				client
 					.once("ready", () => {
-						const command = `
-						bash -c "docker container logs --tail ${tail} --follow ${containerId}"
-					`;
+						const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+							since === "all" ? "" : `--since ${since}`
+						} --follow ${containerId}`;
+						const escapedSearch = search ? search.replace(/'/g, "'\\''") : "";
+						const command = search
+							? `${baseCommand} 2>&1 | grep --line-buffered -iF "${escapedSearch}"`
+							: baseCommand;
 						client.exec(command, (err, stream) => {
 							if (err) {
 								console.error("Execution error:", err);
@@ -91,21 +97,20 @@ export const setupDockerContainerLogsWebSocketServer = (
 				});
 			} else {
 				const shell = getShell();
-				const ptyProcess = spawn(
-					shell,
-					[
-						"-c",
-						`docker container logs --tail ${tail} --follow ${containerId}`,
-					],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
-				);
+				const baseCommand = `docker container logs --timestamps --tail ${tail} ${
+					since === "all" ? "" : `--since ${since}`
+				} --follow ${containerId}`;
+				const command = search
+					? `${baseCommand} 2>&1 | grep -iF '${search}'`
+					: baseCommand;
+				const ptyProcess = spawn(shell, ["-c", command], {
+					name: "xterm-256color",
+					cwd: process.env.HOME,
+					env: process.env,
+					encoding: "utf8",
+					cols: 80,
+					rows: 30,
+				});
 
 				ptyProcess.onData((data) => {
 					ws.send(data);

apps/dokploy/server/wss/docker-container-terminal.ts

@@ -102,21 +102,13 @@ export const setupDockerContainerTerminalWebSocketServer = (
 						port: server.port,
 						username: server.username,
 						privateKey: server.sshKey?.privateKey,
-						timeout: 99999,
 					});
 			} else {
 				const shell = getShell();
 				const ptyProcess = spawn(
 					shell,
 					["-c", `docker exec -it ${containerId} ${activeWay}`],
-					{
-						name: "xterm-256color",
-						cwd: process.env.HOME,
-						env: process.env,
-						encoding: "utf8",
-						cols: 80,
-						rows: 30,
-					},
+					{},
 				);
 
 				ptyProcess.onData((data) => {

apps/dokploy/server/wss/terminal.ts

@@ -70,53 +70,44 @@ export const setupTerminalWebSocketServer = (
 		let stderr = "";
 		conn
 			.once("ready", () => {
-				conn.shell(
-					{
-						term: "terminal",
-						cols: 80,
-						rows: 30,
-						height: 30,
-						width: 80,
-					},
-					(err, stream) => {
-						if (err) throw err;
+				conn.shell({}, (err, stream) => {
+					if (err) throw err;
 
-						stream
-							.on("close", (code: number, signal: string) => {
-								ws.send(`\nContainer closed with code: ${code}\n`);
-								conn.end();
-							})
-							.on("data", (data: string) => {
-								stdout += data.toString();
-								ws.send(data.toString());
-							})
-							.stderr.on("data", (data) => {
-								stderr += data.toString();
-								ws.send(data.toString());
-								console.error("Error: ", data.toString());
-							});
+					stream
+						.on("close", (code: number, signal: string) => {
+							ws.send(`\nContainer closed with code: ${code}\n`);
+							conn.end();
+						})
+						.on("data", (data: string) => {
+							stdout += data.toString();
+							ws.send(data.toString());
+						})
+						.stderr.on("data", (data) => {
+							stderr += data.toString();
+							ws.send(data.toString());
+							console.error("Error: ", data.toString());
+						});
 
-						ws.on("message", (message) => {
-							try {
-								let command: string | Buffer[] | Buffer | ArrayBuffer;
-								if (Buffer.isBuffer(message)) {
-									command = message.toString("utf8");
-								} else {
-									command = message;
-								}
-								stream.write(command.toString());
-							} catch (error) {
-								// @ts-ignore
-								const errorMessage = error?.message as unknown as string;
-								ws.send(errorMessage);
+					ws.on("message", (message) => {
+						try {
+							let command: string | Buffer[] | Buffer | ArrayBuffer;
+							if (Buffer.isBuffer(message)) {
+								command = message.toString("utf8");
+							} else {
+								command = message;
 							}
-						});
+							stream.write(command.toString());
+						} catch (error) {
+							// @ts-ignore
+							const errorMessage = error?.message as unknown as string;
+							ws.send(errorMessage);
+						}
+					});
 
-						ws.on("close", () => {
-							stream.end();
-						});
-					},
-				);
+					ws.on("close", () => {
+						stream.end();
+					});
+				});
 			})
 			.on("error", (err) => {
 				if (err.level === "client-authentication") {
@@ -133,7 +124,6 @@ export const setupTerminalWebSocketServer = (
 				port: server.port,
 				username: server.username,
 				privateKey: server.sshKey?.privateKey,
-				timeout: 99999,
 			});
 	});
 };

apps/dokploy/styles/globals.css

@@ -173,3 +173,29 @@
 		padding-top: 1rem !important;
 	}
 }
+
+/* Docker Logs Scrollbar */
+@layer utilities {
+	.custom-logs-scrollbar {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--muted-foreground)) transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb {
+		background-color: hsl(var(--muted-foreground) / 0.3);
+		border-radius: 20px;
+	}
+
+	.custom-logs-scrollbar::-webkit-scrollbar-thumb:hover {
+		background-color: hsl(var(--muted-foreground) / 0.5);
+	}
+}

apps/dokploy/templates/elastic-search/docker-compose.yml

@@ -0,0 +1,34 @@
+version: '3.8'
+
+services:
+  elasticsearch:
+    image: docker.elastic.co/elasticsearch/elasticsearch:8.10.2
+    container_name: elasticsearch
+    environment:
+      - discovery.type=single-node
+      - xpack.security.enabled=false
+      - bootstrap.memory_lock=true
+      - ES_JAVA_OPTS=-Xms512m -Xmx512m
+    ulimits:
+      memlock:
+        soft: -1
+        hard: -1
+    ports:
+      - "9200"
+    volumes:
+      - es_data:/usr/share/elasticsearch/data
+
+  kibana:
+    image: docker.elastic.co/kibana/kibana:8.10.2
+    container_name: kibana
+    environment:
+      - ELASTICSEARCH_HOSTS=http://elasticsearch:9200
+    ports:
+      - "5601"
+    depends_on:
+      - elasticsearch
+
+volumes:
+  es_data:
+    driver: local
+ 

apps/dokploy/templates/elastic-search/index.ts

@@ -0,0 +1,28 @@
+import {
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generateRandomDomain,
+} from "../utils";
+
+export function generate(schema: Schema): Template {
+	const mainDomain = generateRandomDomain(schema);
+	const apiDomain = generateRandomDomain(schema);
+
+	const domains: DomainSchema[] = [
+		{
+			host: mainDomain,
+			port: 5601,
+			serviceName: "kibana",
+		},
+		{
+			host: apiDomain,
+			port: 9200,
+			serviceName: "elasticsearch",
+		},
+	];
+
+	return {
+		domains,
+	};
+}