refactor: wip

.circleci/config.yml

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

.gitignore

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

Dockerfile

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

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

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

apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx

@@ -259,7 +259,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 				refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the swarm settings");
+				toast.error("Error to update the swarm settings");
 			});
 	};
 	return (

apps/dokploy/components/dashboard/application/advanced/cluster/show-cluster-settings.tsx

@@ -94,7 +94,7 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 				});
 			})
 			.catch(() => {
-				toast.error("Error updating the command");
+				toast.error("Error to update the command");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/general/add-command.tsx

@@ -71,7 +71,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 				});
 			})
 			.catch(() => {
-				toast.error("Error updating the command");
+				toast.error("Error to update the command");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/ports/add-port.tsx

@@ -86,7 +86,7 @@ export const AddPort = ({
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error creating the port");
+				toast.error("Error to create the port");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/ports/delete-port.tsx

@@ -47,10 +47,10 @@ export const DeletePort = ({ portId }: Props) => {
 										applicationId: data?.applicationId,
 									});
 
-									toast.success("Port delete successfully");
+									toast.success("Port delete succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the port");
+									toast.error("Error to delete the port");
 								});
 						}}
 					>

apps/dokploy/components/dashboard/application/advanced/ports/update-port.tsx

@@ -93,7 +93,7 @@ export const UpdatePort = ({ portId }: Props) => {
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the port");
+				toast.error("Error to update the port");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/redirects/add-redirect.tsx

@@ -124,7 +124,7 @@ export const AddRedirect = ({
 				onDialogToggle(false);
 			})
 			.catch(() => {
-				toast.error("Error creating the redirect");
+				toast.error("Error to create the redirect");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/redirects/delete-redirect.tsx

@@ -50,10 +50,10 @@ export const DeleteRedirect = ({ redirectId }: Props) => {
 									utils.application.readTraefikConfig.invalidate({
 										applicationId: data?.applicationId,
 									});
-									toast.success("Redirect delete successfully");
+									toast.success("Redirect delete succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the redirect");
+									toast.error("Error to delete the redirect");
 								});
 						}}
 					>

apps/dokploy/components/dashboard/application/advanced/redirects/update-redirect.tsx

@@ -88,7 +88,7 @@ export const UpdateRedirect = ({ redirectId }: Props) => {
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the redirect");
+				toast.error("Error to update the redirect");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/security/add-security.tsx

@@ -75,7 +75,7 @@ export const AddSecurity = ({
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error creating security");
+				toast.error("Error to create the security");
 			});
 	};
 

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

@@ -50,10 +50,10 @@ export const DeleteSecurity = ({ securityId }: Props) => {
 									utils.application.readTraefikConfig.invalidate({
 										applicationId: data?.applicationId,
 									});
-									toast.success("Security delete successfully");
+									toast.success("Security delete succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the security");
+									toast.error("Error to delete the security");
 								});
 						}}
 					>

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

@@ -83,7 +83,7 @@ export const UpdateSecurity = ({ securityId }: Props) => {
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the security");
+				toast.error("Error to update the security");
 			});
 	};
 

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

@@ -22,13 +22,6 @@ import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { InfoIcon } from "lucide-react";
 
 const addResourcesApplication = z.object({
 	memoryReservation: z.number().nullable().optional(),
@@ -79,7 +72,7 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the resources");
+				toast.error("Error to Update the resources");
 			});
 	};
 	return (
@@ -108,25 +101,10 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 								name="memoryReservation"
 								render={({ field }) => (
 									<FormItem>
-										<div className="flex items-center gap-2">
-											<FormLabel>Memory Reservation</FormLabel>
-											<TooltipProvider>
-												<Tooltip delayDuration={0}>
-													<TooltipTrigger>
-														<InfoIcon className="h-4 w-4 text-muted-foreground" />
-													</TooltipTrigger>
-													<TooltipContent>
-														<p>
-															Memory soft limit in bytes. Example: 256MB =
-															268435456 bytes
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
-										</div>
+										<FormLabel>Memory Reservation</FormLabel>
 										<FormControl>
 											<Input
-												placeholder="268435456 (256MB in bytes)"
+												placeholder="256 MB"
 												{...field}
 												value={field.value?.toString() || ""}
 												onChange={(e) => {
@@ -142,6 +120,7 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 												}}
 											/>
 										</FormControl>
+
 										<FormMessage />
 									</FormItem>
 								)}
@@ -153,25 +132,10 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>Memory Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																Memory hard limit in bytes. Example: 1GB =
-																1073741824 bytes
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Memory Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1073741824 (1GB in bytes)"
+													placeholder={"1024 MB"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
@@ -199,36 +163,21 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU quota in units of 10^-9 CPUs. Example: 2
-																CPUs = 2000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="2000000000 (2 CPUs)"
+													placeholder={"2"}
 													{...field}
+													type="number"
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
-														if (value === "") {
-															field.onChange(null);
-														} else {
-															const number = Number.parseInt(value, 10);
-															if (!Number.isNaN(number)) {
-																field.onChange(number);
-															}
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
 														}
 													}}
 												/>
@@ -244,36 +193,21 @@ export const ShowApplicationResources = ({ applicationId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Reservation</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU shares (relative weight). Example: 1 CPU =
-																1000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Reservation</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1000000000 (1 CPU)"
+													placeholder={"1"}
 													{...field}
+													type="number"
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
-														if (value === "") {
-															field.onChange(null);
-														} else {
-															const number = Number.parseInt(value, 10);
-															if (!Number.isNaN(number)) {
-																field.onChange(number);
-															}
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
 														}
 													}}
 												/>

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -105,7 +105,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 				form.reset();
 			})
 			.catch(() => {
-				toast.error("Error updating the Traefik config");
+				toast.error("Error to update the traefik config");
 			});
 	};
 

apps/dokploy/components/dashboard/application/advanced/volumes/add-volumes.tsx

@@ -107,7 +107,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error creating the Bind mount");
+					toast.error("Error to create the Bind mount");
 				});
 		} else if (data.type === "volume") {
 			await mutateAsync({
@@ -122,7 +122,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error creating the Volume mount");
+					toast.error("Error to create the Volume mount");
 				});
 		} else if (data.type === "file") {
 			await mutateAsync({
@@ -138,7 +138,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error creating the File mount");
+					toast.error("Error to create the File mount");
 				});
 		}
 

apps/dokploy/components/dashboard/application/advanced/volumes/delete-volume.tsx

@@ -45,10 +45,10 @@ export const DeleteVolume = ({ mountId, refetch }: Props) => {
 							})
 								.then(() => {
 									refetch();
-									toast.success("Mount deleted successfully");
+									toast.success("Mount deleted succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the mount");
+									toast.error("Error to delete the mount");
 								});
 						}}
 					>

apps/dokploy/components/dashboard/application/advanced/volumes/update-volume.tsx

@@ -139,7 +139,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the Bind mount");
+					toast.error("Error to update the Bind mount");
 				});
 		} else if (data.type === "volume") {
 			await mutateAsync({
@@ -153,7 +153,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the Volume mount");
+					toast.error("Error to update the Volume mount");
 				});
 		} else if (data.type === "file") {
 			await mutateAsync({
@@ -168,7 +168,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the File mount");
+					toast.error("Error to update the File mount");
 				});
 		}
 		refetch();

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

@@ -126,7 +126,7 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the build type");
+				toast.error("Error to save the build type");
 			});
 	};
 

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

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,7 +19,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Copy, TrashIcon } from "lucide-react";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -103,26 +102,9 @@ export const DeleteApplication = ({ applicationId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<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>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
 										</FormLabel>
 										<FormControl>
 											<Input

apps/dokploy/components/dashboard/application/deployments/refresh-token.tsx

@@ -47,7 +47,7 @@ export const RefreshToken = ({ applicationId }: Props) => {
 									toast.success("Refresh updated");
 								})
 								.catch(() => {
-									toast.error("Error updating the refresh token");
+									toast.error("Error to update the refresh token");
 								});
 						}}
 					>

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

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

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

@@ -105,8 +105,8 @@ export const AddDomain = ({
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
 		error: domainId
-			? "Error updating the domain"
-			: "Error creating the domain",
+			? "Error to update the domain"
+			: "Error to create the domain",
 		submit: domainId ? "Update" : "Create",
 		dialogDescription: domainId
 			? "In this section you can edit a domain"
@@ -264,21 +264,21 @@ export const AddDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate Provider</FormLabel>
+												<FormLabel>Certificate</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate provider" />
+															<SelectValue placeholder="Select a certificate" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Let's Encrypt
+															Letsencrypt (Default)
 														</SelectItem>
 													</SelectContent>
 												</Select>

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

@@ -57,10 +57,10 @@ export const DeleteDomain = ({ domainId }: Props) => {
 										});
 									}
 
-									toast.success("Domain delete successfully");
+									toast.success("Domain delete succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the Domain");
+									toast.error("Error to delete Domain");
 								});
 						}}
 					>

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

@@ -51,7 +51,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error adding environment");
+				toast.error("Error to add environment");
 			});
 	};
 

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

@@ -11,7 +11,6 @@ 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 {
@@ -19,7 +18,6 @@ interface Props {
 }
 
 export const DeployApplication = ({ applicationId }: Props) => {
-	const router = useRouter();
 	const { data, refetch } = api.application.one.useQuery(
 		{
 			applicationId,
@@ -51,15 +49,12 @@ export const DeployApplication = ({ applicationId }: Props) => {
 								applicationId,
 							})
 								.then(async () => {
-									toast.success("Application deployed successfully");
+									toast.success("Application deployed succesfully");
 									await refetch();
-									router.push(
-										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-									);
 								})
 
 								.catch(() => {
-									toast.error("Error deploying the Application");
+									toast.error("Error to deploy Application");
 								});
 
 							await refetch();

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

@@ -137,7 +137,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Bitbucket provider");
+				toast.error("Error to save the Bitbucket provider");
 			});
 	};
 

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

@@ -68,7 +68,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Docker provider");
+				toast.error("Error to save the Docker provider");
 			});
 	};
 

apps/dokploy/components/dashboard/application/general/generic/save-drag-n-drop.tsx

@@ -56,7 +56,7 @@ export const SaveDragNDrop = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the deployment");
+				toast.error("Error to save the deployment");
 			});
 	};
 

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

@@ -84,7 +84,7 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Git provider");
+				toast.error("Error to save the Git provider");
 			});
 	};
 

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

@@ -131,7 +131,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the github provider");
+				toast.error("Error to save the github provider");
 			});
 	};
 

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

@@ -144,7 +144,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the gitlab provider");
+				toast.error("Error to save the gitlab provider");
 			});
 	};
 

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

@@ -56,7 +56,7 @@ export const ResetApplication = ({ applicationId, appName }: Props) => {
 									toast.success("Service Reloaded");
 								})
 								.catch(() => {
-									toast.error("Error reloading the service");
+									toast.error("Error to reload the service");
 								});
 							await refetch();
 						}}

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

@@ -69,7 +69,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										await refetch();
 									})
 									.catch(() => {
-										toast.error("Error updating Auto Deploy");
+										toast.error("Error to update Auto Deploy");
 									});
 							}}
 							className="flex flex-row gap-2 items-center"

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

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

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

@@ -105,8 +105,8 @@ export const AddPreviewDomain = ({
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
 		error: domainId
-			? "Error updating the domain"
-			: "Error creating the domain",
+			? "Error to update the domain"
+			: "Error to create the domain",
 		submit: domainId ? "Update" : "Create",
 		dialogDescription: domainId
 			? "In this section you can edit a domain"
@@ -265,21 +265,21 @@ export const AddPreviewDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate Provider</FormLabel>
+												<FormLabel>Certificate</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate provider" />
+															<SelectValue placeholder="Select a certificate" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Let's Encrypt
+															Letsencrypt (Default)
 														</SelectItem>
 													</SelectContent>
 												</Select>

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

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

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

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

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

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

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

@@ -63,7 +63,7 @@ export const RedbuildApplication = ({ applicationId }: Props) => {
 									});
 								})
 								.catch(() => {
-									toast.error("Error rebuilding the application");
+									toast.error("Error to rebuild the application");
 								});
 						}}
 					>

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

@@ -49,10 +49,10 @@ export const StartApplication = ({ applicationId }: Props) => {
 									await utils.application.one.invalidate({
 										applicationId,
 									});
-									toast.success("Application started successfully");
+									toast.success("Application started succesfully");
 								})
 								.catch(() => {
-									toast.error("Error starting the Application");
+									toast.error("Error to start the Application");
 								});
 						}}
 					>

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

@@ -49,10 +49,10 @@ export const StopApplication = ({ applicationId }: Props) => {
 									await utils.application.one.invalidate({
 										applicationId,
 									});
-									toast.success("Application stopped successfully");
+									toast.success("Application stopped succesfully");
 								})
 								.catch(() => {
-									toast.error("Error stopping the Application");
+									toast.error("Error to stop the Application");
 								});
 						}}
 					>

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

@@ -76,14 +76,14 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 			description: formData.description || "",
 		})
 			.then(() => {
-				toast.success("Application updated successfully");
+				toast.success("Application updated succesfully");
 				utils.application.one.invalidate({
 					applicationId: applicationId,
 				});
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Application");
+				toast.error("Error to update the application");
 			})
 			.finally(() => {});
 	};

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

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

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

@@ -1,6 +1,4 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -13,7 +11,6 @@ import {
 import {
 	Form,
 	FormControl,
-	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -22,7 +19,6 @@ 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";
@@ -34,7 +30,6 @@ const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
 		message: "Compose name is required",
 	}),
-	deleteVolumes: z.boolean(),
 });
 
 type DeleteCompose = z.infer<typeof deleteComposeSchema>;
@@ -54,7 +49,6 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const form = useForm<DeleteCompose>({
 		defaultValues: {
 			projectName: "",
-			deleteVolumes: false,
 		},
 		resolver: zodResolver(deleteComposeSchema),
 	});
@@ -62,8 +56,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const onSubmit = async (formData: DeleteCompose) => {
 		const expectedName = `${data?.name}/${data?.appName}`;
 		if (formData.projectName === expectedName) {
-			const { deleteVolumes } = formData;
-			await mutateAsync({ composeId, deleteVolumes })
+			await mutateAsync({ composeId })
 				.then((result) => {
 					push(`/dashboard/project/${result?.projectId}`);
 					toast.success("Compose deleted successfully");
@@ -107,27 +100,10 @@ export const DeleteCompose = ({ composeId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<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>
+										<FormLabel>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
+										</FormLabel>{" "}
 										<FormControl>
 											<Input
 												placeholder="Enter compose name to confirm"
@@ -138,27 +114,6 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
-							<FormField
-								control={form.control}
-								name="deleteVolumes"
-								render={({ field }) => (
-									<FormItem>
-										<div className="flex items-center">
-											<FormControl>
-												<Checkbox
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-
-											<FormLabel className="ml-2">
-												Delete volumes associated with this compose
-											</FormLabel>
-										</div>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
 						</form>
 					</Form>
 				</div>

apps/dokploy/components/dashboard/compose/deployments/refresh-token-compose.tsx

@@ -47,7 +47,7 @@ export const RefreshTokenCompose = ({ composeId }: Props) => {
 									toast.success("Refresh Token updated");
 								})
 								.catch(() => {
-									toast.error("Error updating the refresh token");
+									toast.error("Error to update the refresh token");
 								});
 						}}
 					>

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

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

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

@@ -127,8 +127,8 @@ export const AddDomainCompose = ({
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
 		error: domainId
-			? "Error updating the domain"
-			: "Error creating the domain",
+			? "Error to update the domain"
+			: "Error to create the domain",
 		submit: domainId ? "Update" : "Create",
 		dialogDescription: domainId
 			? "In this section you can edit a domain"
@@ -400,21 +400,21 @@ export const AddDomainCompose = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate Provider</FormLabel>
+												<FormLabel>Certificate</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate provider" />
+															<SelectValue placeholder="Select a certificate" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Let's Encrypt
+															Letsencrypt (Default)
 														</SelectItem>
 													</SelectContent>
 												</Select>

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

@@ -70,7 +70,7 @@ export const ShowEnvironmentCompose = ({ composeId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error adding environment");
+				toast.error("Error to add environment");
 			});
 	};
 

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

@@ -83,7 +83,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								await refetch();
 							})
 							.catch(() => {
-								toast.error("Error updating Auto Deploy");
+								toast.error("Error to update Auto Deploy");
 							});
 					}}
 					className="flex flex-row gap-2 items-center"

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

@@ -77,7 +77,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 				});
 			})
 			.catch((e) => {
-				toast.error("Error updating the Compose config");
+				toast.error("Error to update the compose config");
 			});
 	};
 	return (

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

@@ -11,7 +11,6 @@ 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 {
@@ -19,7 +18,6 @@ interface Props {
 }
 
 export const DeployCompose = ({ composeId }: Props) => {
-	const router = useRouter();
 	const { data, refetch } = api.compose.one.useQuery(
 		{
 			composeId,
@@ -50,15 +48,9 @@ export const DeployCompose = ({ composeId }: Props) => {
 							await refetch();
 							await deploy({
 								composeId,
-							})
-								.then(async () => {
-									router.push(
-										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
-									);
-								})
-								.catch(() => {
-									toast.error("Error deploying Compose");
-								});
+							}).catch(() => {
+								toast.error("Error to deploy Compose");
+							});
 
 							await refetch();
 						}}

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

@@ -139,7 +139,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Bitbucket provider");
+				toast.error("Error to save the Bitbucket provider");
 			});
 	};
 

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

@@ -83,7 +83,7 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Git provider");
+				toast.error("Error to save the Git provider");
 			});
 	};
 

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

@@ -133,7 +133,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Github provider");
+				toast.error("Error to save the github provider");
 			});
 	};
 

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

@@ -146,7 +146,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the Gitlab provider");
+				toast.error("Error to save the gitlab provider");
 			});
 	};
 

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

@@ -90,7 +90,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 				toast.success("Compose updated");
 			})
 			.catch(() => {
-				toast.error("Error randomizing the compose");
+				toast.error("Error to randomize the compose");
 			});
 	};
 
@@ -105,7 +105,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 				toast.success("Compose randomized");
 			})
 			.catch(() => {
-				toast.error("Error randomizing the compose");
+				toast.error("Error to randomize the compose");
 			});
 	};
 

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

@@ -62,7 +62,7 @@ export const RedbuildCompose = ({ composeId }: Props) => {
 									});
 								})
 								.catch(() => {
-									toast.error("Error rebuilding the compose");
+									toast.error("Error to rebuild the compose");
 								});
 						}}
 					>

apps/dokploy/components/dashboard/compose/general/show-converted-compose.tsx

@@ -73,7 +73,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 									toast.success("Fetched source type");
 								})
 								.catch((err) => {
-									toast.error("Error fetching source type", {
+									toast.error("Error to fetch source type", {
 										description: err.message,
 									});
 								});

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

@@ -53,10 +53,10 @@ export const StopCompose = ({ composeId }: Props) => {
 									await utils.compose.one.invalidate({
 										composeId,
 									});
-									toast.success("Compose stopped successfully");
+									toast.success("Compose stopped succesfully");
 								})
 								.catch(() => {
-									toast.error("Error stopping the compose");
+									toast.error("Error to stop the compose");
 								});
 						}}
 					>

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

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

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

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

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

@@ -1,5 +1,3 @@
-import { badgeStateColor } from "@/components/dashboard/application/logs/show";
-import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -89,10 +87,7 @@ export const ShowDockerLogsCompose = ({
 									key={container.containerId}
 									value={container.containerId}
 								>
-									{container.name} ({container.containerId}){" "}
-									<Badge variant={badgeStateColor(container.state)}>
-										{container.state}
-									</Badge>
+									{container.name} ({container.containerId}) {container.state}
 								</SelectItem>
 							))}
 							<SelectLabel>Containers ({data?.length})</SelectLabel>
@@ -101,8 +96,8 @@ export const ShowDockerLogsCompose = ({
 				</Select>
 				<DockerLogs
 					serverId={serverId || ""}
+					id="terminal"
 					containerId={containerId || "select-a-container"}
-					runType="native"
 				/>
 			</CardContent>
 		</Card>

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

@@ -49,10 +49,10 @@ export const StartCompose = ({ composeId }: Props) => {
 									await utils.compose.one.invalidate({
 										composeId,
 									});
-									toast.success("Compose started successfully");
+									toast.success("Compose started succesfully");
 								})
 								.catch(() => {
-									toast.error("Error starting the Compose");
+									toast.error("Error to start the Compose");
 								});
 						}}
 					>

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

@@ -49,10 +49,10 @@ export const StopCompose = ({ composeId }: Props) => {
 									await utils.compose.one.invalidate({
 										composeId,
 									});
-									toast.success("Compose stopped successfully");
+									toast.success("Compose stopped succesfully");
 								})
 								.catch(() => {
-									toast.error("Error stopping the Compose");
+									toast.error("Error to stop the Compose");
 								});
 						}}
 					>

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

@@ -76,14 +76,14 @@ export const UpdateCompose = ({ composeId }: Props) => {
 			description: formData.description || "",
 		})
 			.then(() => {
-				toast.success("Compose updated successfully");
+				toast.success("Compose updated succesfully");
 				utils.compose.one.invalidate({
 					composeId: composeId,
 				});
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Compose");
+				toast.error("Error to update the Compose");
 			})
 			.finally(() => {});
 	};

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

@@ -125,7 +125,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 				refetch();
 			})
 			.catch(() => {
-				toast.error("Error creating a backup");
+				toast.error("Error to create a backup");
 			});
 	};
 	return (

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

@@ -46,10 +46,10 @@ export const DeleteBackup = ({ backupId, refetch }: Props) => {
 								.then(() => {
 									refetch();
 
-									toast.success("Backup deleted successfully");
+									toast.success("Backup delete succesfully");
 								})
 								.catch(() => {
-									toast.error("Error deleting the backup");
+									toast.error("Error to delete the backup");
 								});
 						}}
 					>

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

@@ -109,7 +109,7 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Backup");
+				toast.error("Error to update the backup");
 			});
 	};
 

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

@@ -1,4 +1,3 @@
-import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Dialog,
 	DialogContent,
@@ -35,7 +34,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 					View Config
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className={"w-full md:w-[70vw] min-w-[70vw]"}>
+			<DialogContent className={"w-full md:w-[70vw] max-w-max"}>
 				<DialogHeader>
 					<DialogTitle>Container Config</DialogTitle>
 					<DialogDescription>
@@ -45,13 +44,7 @@ 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">
-							<CodeEditor
-								language="json"
-								lineWrapping
-								lineNumbers={false}
-								readOnly
-								value={JSON.stringify(data, null, 2)}
-							/>
+							{JSON.stringify(data, null, 2)}
 						</pre>
 					</code>
 				</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/dokploy/components/dashboard/file-system/show-traefik-file.tsx

@@ -86,7 +86,7 @@ export const ShowTraefikFile = ({ path, serverId }: Props) => {
 				refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the Traefik config");
+				toast.error("Error to update the traefik config");
 			});
 	};
 

apps/dokploy/components/dashboard/mariadb/advanced/show-mariadb-advanced-settings.tsx

@@ -65,7 +65,7 @@ export const ShowAdvancedMariadb = ({ mariadbId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the resources");
+				toast.error("Error to Update the resources");
 			});
 	};
 	return (

apps/dokploy/components/dashboard/mariadb/advanced/show-mariadb-resources.tsx

@@ -18,13 +18,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	TooltipProvider,
-	TooltipTrigger,
-	TooltipContent,
-	Tooltip,
-} from "@/components/ui/tooltip";
-import { InfoIcon } from "lucide-react";
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -78,7 +71,7 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the resources");
+				toast.error("Error to Update the resources");
 			});
 	};
 	return (
@@ -107,40 +100,28 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 								name="memoryReservation"
 								render={({ field }) => (
 									<FormItem>
-										<div className="flex items-center gap-2">
-											<FormLabel>Memory Reservation</FormLabel>
-											<TooltipProvider>
-												<Tooltip delayDuration={0}>
-													<TooltipTrigger>
-														<InfoIcon className="h-4 w-4 text-muted-foreground" />
-													</TooltipTrigger>
-													<TooltipContent>
-														<p>
-															Memory soft limit in bytes. Example: 256MB =
-															268435456 bytes
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
-										</div>
+										<FormLabel>Memory Reservation</FormLabel>
 										<FormControl>
 											<Input
-												placeholder="268435456 (256MB in bytes)"
+												placeholder="256 MB"
 												{...field}
 												value={field.value?.toString() || ""}
 												onChange={(e) => {
 													const value = e.target.value;
 													if (value === "") {
+														// Si el campo está vacío, establece el valor como null.
 														field.onChange(null);
 													} else {
 														const number = Number.parseInt(value, 10);
 														if (!Number.isNaN(number)) {
+															// Solo actualiza el valor si se convierte a un número válido.
 															field.onChange(number);
 														}
 													}
 												}}
 											/>
 										</FormControl>
+
 										<FormMessage />
 									</FormItem>
 								)}
@@ -152,34 +133,21 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>Memory Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																Memory hard limit in bytes. Example: 1GB =
-																1073741824 bytes
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Memory Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1073741824 (1GB in bytes)"
+													placeholder={"1024 MB"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}
@@ -198,34 +166,21 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU quota in units of 10^-9 CPUs. Example: 2
-																CPUs = 2000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="2000000000 (2 CPUs)"
+													placeholder={"2"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}
@@ -243,34 +198,21 @@ export const ShowMariadbResources = ({ mariadbId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Reservation</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU shares (relative weight). Example: 1 CPU =
-																1000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Reservation</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1000000000 (1 CPU)"
+													placeholder={"1"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}

apps/dokploy/components/dashboard/mariadb/backups/show-backup-mariadb.tsx

@@ -144,7 +144,7 @@ export const ShowBackupMariadb = ({ mariadbId }: Props) => {
 																			})
 																			.catch(() => {
 																				toast.error(
-																					"Error creating the manual backup",
+																					"Error to Create the manual backup",
 																				);
 																			});
 																	}}

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

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,7 +19,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Copy, TrashIcon } from "lucide-react";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -100,26 +99,9 @@ export const DeleteMariadb = ({ mariadbId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<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>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -70,7 +70,7 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error adding environment");
+				toast.error("Error to add environment");
 			});
 	};
 

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

@@ -55,12 +55,12 @@ export const DeployMariadb = ({ mariadbId }: Props) => {
 									await deploy({
 										mariadbId,
 									}).catch(() => {
-										toast.error("Error deploying Database");
+										toast.error("Error to deploy Database");
 									});
 									await refetch();
 								})
 								.catch((e) => {
-									toast.error(e.message || "Error deploying Database");
+									toast.error(e.message || "Error to deploy Database");
 								});
 						}}
 					>

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

@@ -55,7 +55,7 @@ export const ResetMariadb = ({ mariadbId, appName }: Props) => {
 									toast.success("Service Reloaded");
 								})
 								.catch(() => {
-									toast.error("Error reloading the service");
+									toast.error("Error to reload the service");
 								});
 							await refetch();
 						}}

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

@@ -72,7 +72,7 @@ export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error saving the external port");
+				toast.error("Error to save the external port");
 			});
 	};
 

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

@@ -49,10 +49,10 @@ export const StopMariadb = ({ mariadbId }: Props) => {
 									await utils.mariadb.one.invalidate({
 										mariadbId,
 									});
-									toast.success("Application stopped successfully");
+									toast.success("Application stopped succesfully");
 								})
 								.catch(() => {
-									toast.error("Error stopping the Application");
+									toast.error("Error to stop the Application");
 								});
 						}}
 					>

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

@@ -49,10 +49,10 @@ export const StartMariadb = ({ mariadbId }: Props) => {
 									await utils.mariadb.one.invalidate({
 										mariadbId,
 									});
-									toast.success("Database started successfully");
+									toast.success("Database started succesfully");
 								})
 								.catch(() => {
-									toast.error("Error starting the Database");
+									toast.error("Error to start the Database");
 								});
 						}}
 					>

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

@@ -75,13 +75,13 @@ export const UpdateMariadb = ({ mariadbId }: Props) => {
 			description: formData.description || "",
 		})
 			.then(() => {
-				toast.success("MariaDB updated successfully");
+				toast.success("MariaDB updated succesfully");
 				utils.mariadb.one.invalidate({
 					mariadbId: mariadbId,
 				});
 			})
 			.catch(() => {
-				toast.error("Error updating the Mariadb");
+				toast.error("Error to update the Mariadb");
 			})
 			.finally(() => {});
 	};

apps/dokploy/components/dashboard/mongo/advanced/show-mongo-advanced-settings.tsx

@@ -65,7 +65,7 @@ export const ShowAdvancedMongo = ({ mongoId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the resources");
+				toast.error("Error to Update the resources");
 			});
 	};
 	return (

apps/dokploy/components/dashboard/mongo/advanced/show-mongo-resources.tsx

@@ -19,13 +19,6 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useEffect } from "react";
-import {
-	TooltipProvider,
-	TooltipTrigger,
-	TooltipContent,
-	Tooltip,
-} from "@/components/ui/tooltip";
-import { InfoIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -78,7 +71,7 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error updating the resources");
+				toast.error("Error to Update the resources");
 			});
 	};
 	return (
@@ -96,6 +89,10 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 					the changes.
 				</AlertBlock>
 				<Form {...form}>
+					<AlertBlock type="info">
+						Please remember to click Redeploy after modify the resources to
+						apply the changes.
+					</AlertBlock>
 					<form
 						id="hook-form"
 						onSubmit={form.handleSubmit(onSubmit)}
@@ -107,40 +104,28 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 								name="memoryReservation"
 								render={({ field }) => (
 									<FormItem>
-										<div className="flex items-center gap-2">
-											<FormLabel>Memory Reservation</FormLabel>
-											<TooltipProvider>
-												<Tooltip delayDuration={0}>
-													<TooltipTrigger>
-														<InfoIcon className="h-4 w-4 text-muted-foreground" />
-													</TooltipTrigger>
-													<TooltipContent>
-														<p>
-															Memory soft limit in bytes. Example: 256MB =
-															268435456 bytes
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
-										</div>
+										<FormLabel>Memory Reservation</FormLabel>
 										<FormControl>
 											<Input
-												placeholder="268435456 (256MB in bytes)"
+												placeholder="256 MB"
 												{...field}
 												value={field.value?.toString() || ""}
 												onChange={(e) => {
 													const value = e.target.value;
 													if (value === "") {
+														// Si el campo está vacío, establece el valor como null.
 														field.onChange(null);
 													} else {
 														const number = Number.parseInt(value, 10);
 														if (!Number.isNaN(number)) {
+															// Solo actualiza el valor si se convierte a un número válido.
 															field.onChange(number);
 														}
 													}
 												}}
 											/>
 										</FormControl>
+
 										<FormMessage />
 									</FormItem>
 								)}
@@ -152,34 +137,21 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>Memory Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																Memory hard limit in bytes. Example: 1GB =
-																1073741824 bytes
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Memory Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1073741824 (1GB in bytes)"
+													placeholder={"1024 MB"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}
@@ -198,34 +170,21 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU quota in units of 10^-9 CPUs. Example: 2
-																CPUs = 2000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Limit</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="2000000000 (2 CPUs)"
+													placeholder={"2"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}
@@ -243,34 +202,21 @@ export const ShowMongoResources = ({ mongoId }: Props) => {
 								render={({ field }) => {
 									return (
 										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Reservation</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU shares (relative weight). Example: 1 CPU =
-																1000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
+											<FormLabel>Cpu Reservation</FormLabel>
 											<FormControl>
 												<Input
-													placeholder="1000000000 (1 CPU)"
+													placeholder={"1"}
 													{...field}
 													value={field.value?.toString() || ""}
 													onChange={(e) => {
 														const value = e.target.value;
 														if (value === "") {
+															// Si el campo está vacío, establece el valor como null.
 															field.onChange(null);
 														} else {
 															const number = Number.parseInt(value, 10);
 															if (!Number.isNaN(number)) {
+																// Solo actualiza el valor si se convierte a un número válido.
 																field.onChange(number);
 															}
 														}

apps/dokploy/components/dashboard/mongo/backups/show-backup-mongo.tsx

@@ -144,7 +144,7 @@ export const ShowBackupMongo = ({ mongoId }: Props) => {
 																			})
 																			.catch(() => {
 																				toast.error(
-																					"Error creating the manual backup",
+																					"Error to Create the manual backup",
 																				);
 																			});
 																	}}

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

@@ -1,4 +1,3 @@
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,7 +19,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Copy, TrashIcon } from "lucide-react";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -99,26 +98,9 @@ export const DeleteMongo = ({ mongoId }: Props) => {
 								name="projectName"
 								render={({ field }) => (
 									<FormItem>
-										<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>
+											To confirm, type "{data?.name}/{data?.appName}" in the box
+											below
 										</FormLabel>
 										<FormControl>
 											<Input

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

@@ -70,7 +70,7 @@ export const ShowMongoEnvironment = ({ mongoId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error adding environment");
+				toast.error("Error to add environment");
 			});
 	};