Merge pull request #886 from DJKnaeckebrot/feature/delete-docker-volumes

feat: option to delete docker volumes on service deletion
2025-06-26 18:27:59 +00:00 · 2024-12-23 02:38:28 -06:00
parent 455cae6b8c 353effd720
commit 96cdffb5b9
41 changed files with 988 additions and 936 deletions
--- a/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
+++ b/apps/dokploy/components/dashboard/application/deployments/show-deployment.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -5,11 +6,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
-import { LogLine, parseLogs } from "../../docker/logs/utils";
-import { Badge } from "@/components/ui/badge";
-import { Loader2 } from "lucide-react";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";

 interface Props {
 	logPath: string | null;
@@ -24,21 +24,20 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 	const [autoScroll, setAutoScroll] = useState(true);
 	const scrollRef = useRef<HTMLDivElement>(null);

-
 	const scrollToBottom = () => {
 		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			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;

@@ -69,7 +68,6 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);

-
 	useEffect(() => {
 		const logs = parseLogs(data);
 		setFilteredLogs(logs);
@@ -77,12 +75,11 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {

 	useEffect(() => {
 		scrollToBottom();
-	
-		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-		}
-	  }, [filteredLogs, autoScroll]);

+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);

 	return (
 		<Dialog
@@ -104,27 +101,28 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-						See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
+						See all the details of this deployment |{" "}
+						<Badge variant="blank" className="text-xs">
+							{filteredLogs.length} lines
+						</Badge>
 					</DialogDescription>
 				</DialogHeader>

-				<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((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>
-						)}
+				>
+					{" "}
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<div className="flex justify-center items-center h-full text-muted-foreground">
+							<Loader2 className="h-6 w-6 animate-spin" />
+						</div>
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-builds.tsx
@@ -26,7 +26,9 @@ export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button className="sm:w-auto w-full" size="sm" variant="outline">View Builds</Button>
+				<Button className="sm:w-auto w-full" size="sm" variant="outline">
+					View Builds
+				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
 				<DialogHeader>
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-deployments.tsx
@@ -1,237 +1,237 @@
-import React from "react";
+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 { Separator } from "@/components/ui/separator";
 import {
-  Clock,
-  GitBranch,
-  GitPullRequest,
-  Pencil,
-  RocketIcon,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { api } from "@/utils/api";
+import {
+	Clock,
+	GitBranch,
+	GitPullRequest,
+	Pencil,
+	RocketIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { api } from "@/utils/api";
-import { ShowPreviewBuilds } from "./show-preview-builds";
-import { DateTooltip } from "@/components/shared/date-tooltip";
+import React from "react";
 import { toast } from "sonner";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { AddPreviewDomain } from "./add-preview-domain";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { ShowPreviewBuilds } from "./show-preview-builds";
 import { ShowPreviewSettings } from "./show-preview-settings";

 interface Props {
-  applicationId: string;
+	applicationId: string;
 }

 export const ShowPreviewDeployments = ({ applicationId }: Props) => {
-  const { data } = api.application.one.useQuery({ applicationId });
+	const { data } = api.application.one.useQuery({ applicationId });

-  const { mutateAsync: deletePreviewDeployment, isLoading } =
-    api.previewDeployment.delete.useMutation();
+	const { mutateAsync: deletePreviewDeployment, isLoading } =
+		api.previewDeployment.delete.useMutation();

-  const { data: previewDeployments, refetch: refetchPreviewDeployments } =
-    api.previewDeployment.all.useQuery(
-      { applicationId },
-      {
-        enabled: !!applicationId,
-      }
-    );
+	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+		api.previewDeployment.all.useQuery(
+			{ applicationId },
+			{
+				enabled: !!applicationId,
+			},
+		);

-  const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
-    deletePreviewDeployment({
-      previewDeploymentId: previewDeploymentId,
-    })
-      .then(() => {
-        refetchPreviewDeployments();
-        toast.success("Preview deployment deleted");
-      })
-      .catch((error) => {
-        toast.error(error.message);
-      });
-  };
+	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
+		deletePreviewDeployment({
+			previewDeploymentId: previewDeploymentId,
+		})
+			.then(() => {
+				refetchPreviewDeployments();
+				toast.success("Preview deployment deleted");
+			})
+			.catch((error) => {
+				toast.error(error.message);
+			});
+	};

-  return (
-    <Card className="bg-background">
-      <CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-        <div className="flex flex-col gap-2">
-          <CardTitle className="text-xl">Preview Deployments</CardTitle>
-          <CardDescription>See all the preview deployments</CardDescription>
-        </div>
-        {data?.isPreviewDeploymentsActive && (
-          <ShowPreviewSettings applicationId={applicationId} />
-        )}
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {data?.isPreviewDeploymentsActive ? (
-          <>
-            <div className="flex flex-col gap-2 text-sm">
-              <span>
-                Preview deployments are a way to test your application before it
-                is deployed to production. It will create a new deployment for
-                each pull request you create.
-              </span>
-            </div>
-            {!previewDeployments?.length ? (
-              <div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
-                <RocketIcon className="size-8 text-muted-foreground" />
-                <span className="text-base text-muted-foreground">
-                  No preview deployments found
-                </span>
-              </div>
-            ) : (
-              <div className="flex flex-col gap-4">
-                {previewDeployments.map((previewDeployment) => (
-                  <div
-                    key={previewDeployment.previewDeploymentId}
-                    className="w-full border rounded-xl"
-                  >
-                    <div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
-                      <span className="text-lg font-bold">
-                        {previewDeployment.pullRequestTitle}
-                      </span>
-                      <Badge
-                        variant="outline"
-                        className="text-sm font-medium gap-x-2"
-                      >
-                        <StatusTooltip
-                          status={previewDeployment.previewStatus}
-                          className="size-2.5"
-                        />
-                        {previewDeployment.previewStatus
-                          ?.replace("running", "Running")
-                          .replace("done", "Done")
-                          .replace("error", "Error")
-                          .replace("idle", "Idle") || "Idle"}
-                      </Badge>
-                    </div>
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Preview Deployments</CardTitle>
+					<CardDescription>See all the preview deployments</CardDescription>
+				</div>
+				{data?.isPreviewDeploymentsActive && (
+					<ShowPreviewSettings applicationId={applicationId} />
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.isPreviewDeploymentsActive ? (
+					<>
+						<div className="flex flex-col gap-2 text-sm">
+							<span>
+								Preview deployments are a way to test your application before it
+								is deployed to production. It will create a new deployment for
+								each pull request you create.
+							</span>
+						</div>
+						{!previewDeployments?.length ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<RocketIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No preview deployments found
+								</span>
+							</div>
+						) : (
+							<div className="flex flex-col gap-4">
+								{previewDeployments.map((previewDeployment) => (
+									<div
+										key={previewDeployment.previewDeploymentId}
+										className="w-full border rounded-xl"
+									>
+										<div className="md:p-6 p-2 md:pb-3 flex flex-row items-center justify-between">
+											<span className="text-lg font-bold">
+												{previewDeployment.pullRequestTitle}
+											</span>
+											<Badge
+												variant="outline"
+												className="text-sm font-medium gap-x-2"
+											>
+												<StatusTooltip
+													status={previewDeployment.previewStatus}
+													className="size-2.5"
+												/>
+												{previewDeployment.previewStatus
+													?.replace("running", "Running")
+													.replace("done", "Done")
+													.replace("error", "Error")
+													.replace("idle", "Idle") || "Idle"}
+											</Badge>
+										</div>

-                    <div className="md:p-6 p-2 md:pt-0 space-y-4">
-                      <div className="flex sm:flex-row flex-col items-center gap-2">
-                        <Link
-                          href={`http://${previewDeployment.domain?.host}`}
-                          target="_blank"
-                          className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
-                        >
-                          {previewDeployment.domain?.host}
-                        </Link>
+										<div className="md:p-6 p-2 md:pt-0 space-y-4">
+											<div className="flex sm:flex-row flex-col items-center gap-2">
+												<Link
+													href={`http://${previewDeployment.domain?.host}`}
+													target="_blank"
+													className="text-sm text-blue-500/95 hover:underline gap-2 flex w-full sm:flex-row flex-col items-center justify-between rounded-lg border p-2"
+												>
+													{previewDeployment.domain?.host}
+												</Link>

-                        <AddPreviewDomain
-                          previewDeploymentId={
-                            previewDeployment.previewDeploymentId
-                          }
-                          domainId={previewDeployment.domain?.domainId}
-                        >
-                          <Button
-                            className="sm:w-auto w-full"
-                            size="sm"
-                            variant="outline"
-                          >
-                            <Pencil className="size-4" />
-                            Edit
-                          </Button>
-                        </AddPreviewDomain>
-                      </div>
+												<AddPreviewDomain
+													previewDeploymentId={
+														previewDeployment.previewDeploymentId
+													}
+													domainId={previewDeployment.domain?.domainId}
+												>
+													<Button
+														className="sm:w-auto w-full"
+														size="sm"
+														variant="outline"
+													>
+														<Pencil className="size-4" />
+														Edit
+													</Button>
+												</AddPreviewDomain>
+											</div>

-                      <div className="flex sm:flex-row text-sm flex-col items-center justify-between">
-                        <div className="flex items-center space-x-2">
-                          <GitBranch className="size-5 text-gray-400" />
-                          <span>Branch:</span>
-                          <Badge className="p-2" variant="blank">
-                            {previewDeployment.branch}
-                          </Badge>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Clock className="size-5 text-gray-400" />
-                          <span>Deployed:</span>
-                          <Badge className="p-2" variant="blank">
-                            <DateTooltip date={previewDeployment.createdAt} />
-                          </Badge>
-                        </div>
-                      </div>
+											<div className="flex sm:flex-row text-sm flex-col items-center justify-between">
+												<div className="flex items-center space-x-2">
+													<GitBranch className="size-5 text-gray-400" />
+													<span>Branch:</span>
+													<Badge className="p-2" variant="blank">
+														{previewDeployment.branch}
+													</Badge>
+												</div>
+												<div className="flex items-center space-x-2">
+													<Clock className="size-5 text-gray-400" />
+													<span>Deployed:</span>
+													<Badge className="p-2" variant="blank">
+														<DateTooltip date={previewDeployment.createdAt} />
+													</Badge>
+												</div>
+											</div>

-                      <Separator />
+											<Separator />

-                      <div className="rounded-lg bg-muted p-4">
-                        <h3 className="mb-2 text-sm font-medium">
-                          Pull Request
-                        </h3>
-                        <div className="flex items-center space-x-2 text-sm text-muted-foreground">
-                          <GitPullRequest className="size-5 text-gray-400" />
-                          <Link
-                            className="hover:text-blue-500/95 hover:underline"
-                            target="_blank"
-                            href={previewDeployment.pullRequestURL}
-                          >
-                            {previewDeployment.pullRequestTitle}
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
+											<div className="rounded-lg bg-muted p-4">
+												<h3 className="mb-2 text-sm font-medium">
+													Pull Request
+												</h3>
+												<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+													<GitPullRequest className="size-5 text-gray-400" />
+													<Link
+														className="hover:text-blue-500/95 hover:underline"
+														target="_blank"
+														href={previewDeployment.pullRequestURL}
+													>
+														{previewDeployment.pullRequestTitle}
+													</Link>
+												</div>
+											</div>
+										</div>

-                    <div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
-                      <div className="flex flex-wrap justify-end gap-2">
-                        <ShowModalLogs
-                          appName={previewDeployment.appName}
-                          serverId={data?.serverId || ""}
-                        >
-                          <Button
-                            className="sm:w-auto w-full"
-                            variant="outline"
-                            size="sm"
-                          >
-                            View Logs
-                          </Button>
-                        </ShowModalLogs>
+										<div className="justify-center flex-wrap md:p-6 p-2 md:pt-0">
+											<div className="flex flex-wrap justify-end gap-2">
+												<ShowModalLogs
+													appName={previewDeployment.appName}
+													serverId={data?.serverId || ""}
+												>
+													<Button
+														className="sm:w-auto w-full"
+														variant="outline"
+														size="sm"
+													>
+														View Logs
+													</Button>
+												</ShowModalLogs>

-                        <ShowPreviewBuilds
-                          deployments={previewDeployment.deployments || []}
-                          serverId={data?.serverId || ""}
-                        />
+												<ShowPreviewBuilds
+													deployments={previewDeployment.deployments || []}
+													serverId={data?.serverId || ""}
+												/>

-                        <DialogAction
-                          title="Delete Preview"
-                          description="Are you sure you want to delete this preview?"
-                          onClick={() =>
-                            handleDeletePreviewDeployment(
-                              previewDeployment.previewDeploymentId
-                            )
-                          }
-                        >
-                          <Button
-                            className="sm:w-auto w-full"
-                            variant="destructive"
-                            isLoading={isLoading}
-                            size="sm"
-                          >
-                            Delete Preview
-                          </Button>
-                        </DialogAction>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </>
-        ) : (
-          <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">
-              Preview deployments are disabled for this application, please
-              enable it
-            </span>
-            <ShowPreviewSettings applicationId={applicationId} />
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
+												<DialogAction
+													title="Delete Preview"
+													description="Are you sure you want to delete this preview?"
+													onClick={() =>
+														handleDeletePreviewDeployment(
+															previewDeployment.previewDeploymentId,
+														)
+													}
+												>
+													<Button
+														className="sm:w-auto w-full"
+														variant="destructive"
+														isLoading={isLoading}
+														size="sm"
+													>
+														Delete Preview
+													</Button>
+												</DialogAction>
+											</div>
+										</div>
+									</div>
+								))}
+							</div>
+						)}
+					</>
+				) : (
+					<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">
+							Preview deployments are disabled for this application, please
+							enable it
+						</span>
+						<ShowPreviewSettings applicationId={applicationId} />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
 };
--- a/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
+++ b/apps/dokploy/components/dashboard/application/preview-deployments/show-preview-settings.tsx
@@ -1,5 +1,3 @@
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -20,12 +18,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input, NumberInput } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { Secrets } from "@/components/ui/secrets";
-import { toast } from "sonner";
-import { Switch } from "@/components/ui/switch";
 import {
 	Select,
 	SelectContent,
@@ -33,6 +26,13 @@ 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 { 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(),
--- a/apps/dokploy/components/dashboard/compose/delete-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/delete-compose.tsx
@@ -1,5 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -12,6 +13,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -32,6 +34,7 @@ const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
 		message: "Compose name is required",
 	}),
+	deleteVolumes: z.boolean(),
 });

 type DeleteCompose = z.infer<typeof deleteComposeSchema>;
@@ -51,6 +54,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const form = useForm<DeleteCompose>({
 		defaultValues: {
 			projectName: "",
+			deleteVolumes: false,
 		},
 		resolver: zodResolver(deleteComposeSchema),
 	});
@@ -58,7 +62,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	const onSubmit = async (formData: DeleteCompose) => {
 		const expectedName = `${data?.name}/${data?.appName}`;
 		if (formData.projectName === expectedName) {
-			await mutateAsync({ composeId })
+			const { deleteVolumes } = formData;
+			await mutateAsync({ composeId, deleteVolumes })
 				.then((result) => {
 					push(`/dashboard/project/${result?.projectId}`);
 					toast.success("Compose deleted successfully");
@@ -133,6 +138,27 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="deleteVolumes"
+								render={({ field }) => (
+									<FormItem>
+										<div className="flex items-center">
+											<FormControl>
+												<Checkbox
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+
+											<FormLabel className="ml-2">
+												Delete volumes associated with this compose
+											</FormLabel>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</form>
 					</Form>
 				</div>
--- a/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/deployments/show-deployment-compose.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -5,12 +6,10 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
-import { LogLine, parseLogs } from "../../docker/logs/utils";
-import { Badge } from "@/components/ui/badge";
-import { Loader2 } from "lucide-react";
-
+import { type LogLine, parseLogs } from "../../docker/logs/utils";

 interface Props {
 	logPath: string | null;
@@ -32,19 +31,18 @@ export const ShowDeploymentCompose = ({

 	const scrollToBottom = () => {
 		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			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,7 +74,6 @@ export const ShowDeploymentCompose = ({
 		};
 	}, [logPath, open]);

-
 	useEffect(() => {
 		const logs = parseLogs(data);
 		setFilteredLogs(logs);
@@ -84,11 +81,11 @@ export const ShowDeploymentCompose = ({

 	useEffect(() => {
 		scrollToBottom();
-	
+
 		if (autoScroll && scrollRef.current) {
-		  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
 		}
-	  }, [filteredLogs, autoScroll]);
+	}, [filteredLogs, autoScroll]);

 	return (
 		<Dialog
@@ -110,31 +107,27 @@ export const ShowDeploymentCompose = ({
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription>
-					See all the details of this deployment | <Badge variant="blank" className="text-xs">{filteredLogs.length} lines</Badge>
+						See all the details of this deployment |{" "}
+						<Badge variant="blank" className="text-xs">
+							{filteredLogs.length} lines
+						</Badge>
 					</DialogDescription>
 				</DialogHeader>

-				<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((log: LogLine, index: number) => (
-							<TerminalLine
-								key={index}
-								log={log}
-								noTimestamp
-							/>
-						)) : 
-						(
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
 						<div className="flex justify-center items-center h-full text-muted-foreground">
 							<Loader2 className="h-6 w-6 animate-spin" />
 						</div>
-						)
-					}
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>
--- a/apps/dokploy/components/dashboard/compose/general/deploy-compose.tsx
+++ b/apps/dokploy/components/dashboard/compose/general/deploy-compose.tsx
@@ -53,7 +53,7 @@ export const DeployCompose = ({ composeId }: Props) => {
 							})
 								.then(async () => {
 									router.push(
-										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`
+										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
 									);
 								})
 								.catch(() => {
--- a/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/docker/terminal/docker-terminal-modal.tsx
@@ -59,7 +59,7 @@ export const DockerTerminalModal = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent 
+			<DialogContent
 				className="max-h-screen  overflow-y-auto sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -1,35 +1,35 @@
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
 import {
-  AlertTriangle,
-  BookIcon,
-  ExternalLink,
-  ExternalLinkIcon,
-  FolderInput,
-  MoreHorizontalIcon,
-  TrashIcon,
+	AlertTriangle,
+	BookIcon,
+	ExternalLink,
+	ExternalLinkIcon,
+	FolderInput,
+	MoreHorizontalIcon,
+	TrashIcon,
 } from "lucide-react";
 import Link from "next/link";
 import { Fragment } from "react";
@@ -38,257 +38,257 @@ import { ProjectEnviroment } from "./project-enviroment";
 import { UpdateProject } from "./update";

 export const ShowProjects = () => {
-  const utils = api.useUtils();
-  const { data } = api.project.all.useQuery();
-  const { data: auth } = api.auth.get.useQuery();
-  const { data: user } = api.user.byAuthId.useQuery(
-    {
-      authId: auth?.id || "",
-    },
-    {
-      enabled: !!auth?.id && auth?.rol === "user",
-    }
-  );
-  const { mutateAsync } = api.project.remove.useMutation();
+	const utils = api.useUtils();
+	const { data } = api.project.all.useQuery();
+	const { data: auth } = api.auth.get.useQuery();
+	const { data: user } = api.user.byAuthId.useQuery(
+		{
+			authId: auth?.id || "",
+		},
+		{
+			enabled: !!auth?.id && auth?.rol === "user",
+		},
+	);
+	const { mutateAsync } = api.project.remove.useMutation();

-  return (
-    <>
-      {data?.length === 0 && (
-        <div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
-          <FolderInput className="size-10 md:size-28 text-muted-foreground" />
-          <span className="text-center font-medium text-muted-foreground">
-            No projects added yet. Click on Create project.
-          </span>
-        </div>
-      )}
-      <div className="mt-6  w-full  grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
-        {data?.map((project) => {
-          const emptyServices =
-            project?.mariadb.length === 0 &&
-            project?.mongo.length === 0 &&
-            project?.mysql.length === 0 &&
-            project?.postgres.length === 0 &&
-            project?.redis.length === 0 &&
-            project?.applications.length === 0 &&
-            project?.compose.length === 0;
+	return (
+		<>
+			{data?.length === 0 && (
+				<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
+					<FolderInput className="size-10 md:size-28 text-muted-foreground" />
+					<span className="text-center font-medium text-muted-foreground">
+						No projects added yet. Click on Create project.
+					</span>
+				</div>
+			)}
+			<div className="mt-6  w-full  grid sm:grid-cols-2 lg:grid-cols-3 flex-wrap gap-5 pb-10">
+				{data?.map((project) => {
+					const emptyServices =
+						project?.mariadb.length === 0 &&
+						project?.mongo.length === 0 &&
+						project?.mysql.length === 0 &&
+						project?.postgres.length === 0 &&
+						project?.redis.length === 0 &&
+						project?.applications.length === 0 &&
+						project?.compose.length === 0;

-          const totalServices =
-            project?.mariadb.length +
-            project?.mongo.length +
-            project?.mysql.length +
-            project?.postgres.length +
-            project?.redis.length +
-            project?.applications.length +
-            project?.compose.length;
+					const totalServices =
+						project?.mariadb.length +
+						project?.mongo.length +
+						project?.mysql.length +
+						project?.postgres.length +
+						project?.redis.length +
+						project?.applications.length +
+						project?.compose.length;

-          const flattedDomains = [
-            ...project.applications.flatMap((a) => a.domains),
-            ...project.compose.flatMap((a) => a.domains),
-          ];
+					const flattedDomains = [
+						...project.applications.flatMap((a) => a.domains),
+						...project.compose.flatMap((a) => a.domains),
+					];

-          const renderDomainsDropdown = (
-            item: typeof project.compose | typeof project.applications
-          ) =>
-            item[0] ? (
-              <DropdownMenuGroup>
-                <DropdownMenuLabel>
-                  {"applicationId" in item[0] ? "Applications" : "Compose"}
-                </DropdownMenuLabel>
-                {item.map((a) => (
-                  <Fragment
-                    key={"applicationId" in a ? a.applicationId : a.composeId}
-                  >
-                    <DropdownMenuSeparator />
-                    <DropdownMenuGroup>
-                      <DropdownMenuLabel className="font-normal capitalize text-xs ">
-                        {a.name}
-                      </DropdownMenuLabel>
-                      <DropdownMenuSeparator />
-                      {a.domains.map((domain) => (
-                        <DropdownMenuItem key={domain.domainId} asChild>
-                          <Link
-                            className="space-x-4 text-xs cursor-pointer justify-between"
-                            target="_blank"
-                            href={`${domain.https ? "https" : "http"}://${
-                              domain.host
-                            }${domain.path}`}
-                          >
-                            <span>{domain.host}</span>
-                            <ExternalLink className="size-4 shrink-0" />
-                          </Link>
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuGroup>
-                  </Fragment>
-                ))}
-              </DropdownMenuGroup>
-            ) : null;
+					const renderDomainsDropdown = (
+						item: typeof project.compose | typeof project.applications,
+					) =>
+						item[0] ? (
+							<DropdownMenuGroup>
+								<DropdownMenuLabel>
+									{"applicationId" in item[0] ? "Applications" : "Compose"}
+								</DropdownMenuLabel>
+								{item.map((a) => (
+									<Fragment
+										key={"applicationId" in a ? a.applicationId : a.composeId}
+									>
+										<DropdownMenuSeparator />
+										<DropdownMenuGroup>
+											<DropdownMenuLabel className="font-normal capitalize text-xs ">
+												{a.name}
+											</DropdownMenuLabel>
+											<DropdownMenuSeparator />
+											{a.domains.map((domain) => (
+												<DropdownMenuItem key={domain.domainId} asChild>
+													<Link
+														className="space-x-4 text-xs cursor-pointer justify-between"
+														target="_blank"
+														href={`${domain.https ? "https" : "http"}://${
+															domain.host
+														}${domain.path}`}
+													>
+														<span>{domain.host}</span>
+														<ExternalLink className="size-4 shrink-0" />
+													</Link>
+												</DropdownMenuItem>
+											))}
+										</DropdownMenuGroup>
+									</Fragment>
+								))}
+							</DropdownMenuGroup>
+						) : null;

-          return (
-            <div key={project.projectId} className="w-full lg:max-w-md">
-              <Link href={`/dashboard/project/${project.projectId}`}>
-                <Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
-                  {flattedDomains.length > 1 ? (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-                          size="sm"
-                          variant="default"
-                        >
-                          <ExternalLinkIcon className="size-3.5" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent
-                        className="w-[200px] space-y-2"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        {renderDomainsDropdown(project.applications)}
-                        {renderDomainsDropdown(project.compose)}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  ) : flattedDomains[0] ? (
-                    <Button
-                      className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-                      size="sm"
-                      variant="default"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Link
-                        href={`${
-                          flattedDomains[0].https ? "https" : "http"
-                        }://${flattedDomains[0].host}${flattedDomains[0].path}`}
-                        target="_blank"
-                      >
-                        <ExternalLinkIcon className="size-3.5" />
-                      </Link>
-                    </Button>
-                  ) : null}
+					return (
+						<div key={project.projectId} className="w-full lg:max-w-md">
+							<Link href={`/dashboard/project/${project.projectId}`}>
+								<Card className="group relative w-full  bg-transparent transition-colors hover:bg-card">
+									{flattedDomains.length > 1 ? (
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button
+													className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+													size="sm"
+													variant="default"
+												>
+													<ExternalLinkIcon className="size-3.5" />
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent
+												className="w-[200px] space-y-2"
+												onClick={(e) => e.stopPropagation()}
+											>
+												{renderDomainsDropdown(project.applications)}
+												{renderDomainsDropdown(project.compose)}
+											</DropdownMenuContent>
+										</DropdownMenu>
+									) : flattedDomains[0] ? (
+										<Button
+											className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+											size="sm"
+											variant="default"
+											onClick={(e) => e.stopPropagation()}
+										>
+											<Link
+												href={`${
+													flattedDomains[0].https ? "https" : "http"
+												}://${flattedDomains[0].host}${flattedDomains[0].path}`}
+												target="_blank"
+											>
+												<ExternalLinkIcon className="size-3.5" />
+											</Link>
+										</Button>
+									) : null}

-                  <CardHeader>
-                    <CardTitle className="flex items-center justify-between gap-2">
-                      <span className="flex flex-col gap-1.5">
-                        <div className="flex items-center gap-2">
-                          <BookIcon className="size-4 text-muted-foreground" />
-                          <span className="text-base font-medium leading-none">
-                            {project.name}
-                          </span>
-                        </div>
+									<CardHeader>
+										<CardTitle className="flex items-center justify-between gap-2">
+											<span className="flex flex-col gap-1.5">
+												<div className="flex items-center gap-2">
+													<BookIcon className="size-4 text-muted-foreground" />
+													<span className="text-base font-medium leading-none">
+														{project.name}
+													</span>
+												</div>

-                        <span className="text-sm font-medium text-muted-foreground">
-                          {project.description}
-                        </span>
-                      </span>
-                      <div className="flex self-start space-x-1">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="px-2"
-                            >
-                              <MoreHorizontalIcon className="size-5" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent className="w-[200px] space-y-2">
-                            <DropdownMenuLabel className="font-normal">
-                              Actions
-                            </DropdownMenuLabel>
-                            <div onClick={(e) => e.stopPropagation()}>
-                              <ProjectEnviroment
-                                projectId={project.projectId}
-                              />
-                            </div>
-                            <div onClick={(e) => e.stopPropagation()}>
-                              <UpdateProject projectId={project.projectId} />
-                            </div>
+												<span className="text-sm font-medium text-muted-foreground">
+													{project.description}
+												</span>
+											</span>
+											<div className="flex self-start space-x-1">
+												<DropdownMenu>
+													<DropdownMenuTrigger asChild>
+														<Button
+															variant="ghost"
+															size="icon"
+															className="px-2"
+														>
+															<MoreHorizontalIcon className="size-5" />
+														</Button>
+													</DropdownMenuTrigger>
+													<DropdownMenuContent className="w-[200px] space-y-2">
+														<DropdownMenuLabel className="font-normal">
+															Actions
+														</DropdownMenuLabel>
+														<div onClick={(e) => e.stopPropagation()}>
+															<ProjectEnviroment
+																projectId={project.projectId}
+															/>
+														</div>
+														<div onClick={(e) => e.stopPropagation()}>
+															<UpdateProject projectId={project.projectId} />
+														</div>

-                            <div onClick={(e) => e.stopPropagation()}>
-                              {(auth?.rol === "admin" ||
-                                user?.canDeleteProjects) && (
-                                <AlertDialog>
-                                  <AlertDialogTrigger className="w-full">
-                                    <DropdownMenuItem
-                                      className="w-full cursor-pointer  space-x-3"
-                                      onSelect={(e) => e.preventDefault()}
-                                    >
-                                      <TrashIcon className="size-4" />
-                                      <span>Delete</span>
-                                    </DropdownMenuItem>
-                                  </AlertDialogTrigger>
-                                  <AlertDialogContent>
-                                    <AlertDialogHeader>
-                                      <AlertDialogTitle>
-                                        Are you sure to delete this project?
-                                      </AlertDialogTitle>
-                                      {!emptyServices ? (
-                                        <div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
-                                          <AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
-                                          <span className="text-sm text-yellow-600 dark:text-yellow-400">
-                                            You have active services, please
-                                            delete them first
-                                          </span>
-                                        </div>
-                                      ) : (
-                                        <AlertDialogDescription>
-                                          This action cannot be undone
-                                        </AlertDialogDescription>
-                                      )}
-                                    </AlertDialogHeader>
-                                    <AlertDialogFooter>
-                                      <AlertDialogCancel>
-                                        Cancel
-                                      </AlertDialogCancel>
-                                      <AlertDialogAction
-                                        disabled={!emptyServices}
-                                        onClick={async () => {
-                                          await mutateAsync({
-                                            projectId: project.projectId,
-                                          })
-                                            .then(() => {
-                                              toast.success(
-                                                "Project delete succesfully"
-                                              );
-                                            })
-                                            .catch(() => {
-                                              toast.error(
-                                                "Error to delete this project"
-                                              );
-                                            })
-                                            .finally(() => {
-                                              utils.project.all.invalidate();
-                                            });
-                                        }}
-                                      >
-                                        Delete
-                                      </AlertDialogAction>
-                                    </AlertDialogFooter>
-                                  </AlertDialogContent>
-                                </AlertDialog>
-                              )}
-                            </div>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </div>
-                    </CardTitle>
-                  </CardHeader>
-                  <CardFooter className="pt-4">
-                    <div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
-                      <DateTooltip date={project.createdAt}>
-                        Created
-                      </DateTooltip>
-                      <span>
-                        {totalServices}{" "}
-                        {totalServices === 1 ? "service" : "services"}
-                      </span>
-                    </div>
-                  </CardFooter>
-                </Card>
-              </Link>
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
+														<div onClick={(e) => e.stopPropagation()}>
+															{(auth?.rol === "admin" ||
+																user?.canDeleteProjects) && (
+																<AlertDialog>
+																	<AlertDialogTrigger className="w-full">
+																		<DropdownMenuItem
+																			className="w-full cursor-pointer  space-x-3"
+																			onSelect={(e) => e.preventDefault()}
+																		>
+																			<TrashIcon className="size-4" />
+																			<span>Delete</span>
+																		</DropdownMenuItem>
+																	</AlertDialogTrigger>
+																	<AlertDialogContent>
+																		<AlertDialogHeader>
+																			<AlertDialogTitle>
+																				Are you sure to delete this project?
+																			</AlertDialogTitle>
+																			{!emptyServices ? (
+																				<div className="flex flex-row gap-4 rounded-lg bg-yellow-50 p-2 dark:bg-yellow-950">
+																					<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
+																					<span className="text-sm text-yellow-600 dark:text-yellow-400">
+																						You have active services, please
+																						delete them first
+																					</span>
+																				</div>
+																			) : (
+																				<AlertDialogDescription>
+																					This action cannot be undone
+																				</AlertDialogDescription>
+																			)}
+																		</AlertDialogHeader>
+																		<AlertDialogFooter>
+																			<AlertDialogCancel>
+																				Cancel
+																			</AlertDialogCancel>
+																			<AlertDialogAction
+																				disabled={!emptyServices}
+																				onClick={async () => {
+																					await mutateAsync({
+																						projectId: project.projectId,
+																					})
+																						.then(() => {
+																							toast.success(
+																								"Project delete succesfully",
+																							);
+																						})
+																						.catch(() => {
+																							toast.error(
+																								"Error to delete this project",
+																							);
+																						})
+																						.finally(() => {
+																							utils.project.all.invalidate();
+																						});
+																				}}
+																			>
+																				Delete
+																			</AlertDialogAction>
+																		</AlertDialogFooter>
+																	</AlertDialogContent>
+																</AlertDialog>
+															)}
+														</div>
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</div>
+										</CardTitle>
+									</CardHeader>
+									<CardFooter className="pt-4">
+										<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+											<DateTooltip date={project.createdAt}>
+												Created
+											</DateTooltip>
+											<span>
+												{totalServices}{" "}
+												{totalServices === 1 ? "service" : "services"}
+											</span>
+										</div>
+									</CardFooter>
+								</Card>
+							</Link>
+						</div>
+					);
+				})}
+			</div>
+		</>
+	);
 };
--- a/apps/dokploy/components/dashboard/search-command.tsx
+++ b/apps/dokploy/components/dashboard/search-command.tsx
@@ -1,189 +1,189 @@
 "use client";

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

 type Project = Awaited<ReturnType<typeof findProjectById>>;

 export const SearchCommand = () => {
-  const router = useRouter();
-  const [open, setOpen] = React.useState(false);
-  const [search, setSearch] = React.useState("");
+	const router = useRouter();
+	const [open, setOpen] = React.useState(false);
+	const [search, setSearch] = React.useState("");

-  const { data } = api.project.all.useQuery();
-  const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
+	const { data } = api.project.all.useQuery();
+	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();

-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((open) => !open);
-      }
-    };
+	React.useEffect(() => {
+		const down = (e: KeyboardEvent) => {
+			if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
+				e.preventDefault();
+				setOpen((open) => !open);
+			}
+		};

-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
-  }, []);
+		document.addEventListener("keydown", down);
+		return () => document.removeEventListener("keydown", down);
+	}, []);

-  return (
-    <div>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput
-          placeholder={"Search projects or settings"}
-          value={search}
-          onValueChange={setSearch}
-        />
-        <CommandList>
-          <CommandEmpty>
-            No projects added yet. Click on Create project.
-          </CommandEmpty>
-          <CommandGroup heading={"Projects"}>
-            <CommandList>
-              {data?.map((project) => (
-                <CommandItem
-                  key={project.projectId}
-                  onSelect={() => {
-                    router.push(`/dashboard/project/${project.projectId}`);
-                    setOpen(false);
-                  }}
-                >
-                  <BookIcon className="size-4 text-muted-foreground mr-2" />
-                  {project.name}
-                </CommandItem>
-              ))}
-            </CommandList>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading={"Services"}>
-            <CommandList>
-              {data?.map((project) => {
-                const applications: Services[] = extractServices(project);
-                return applications.map((application) => (
-                  <CommandItem
-                    key={application.id}
-                    onSelect={() => {
-                      router.push(
-                        `/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`
-                      );
-                      setOpen(false);
-                    }}
-                  >
-                    {application.type === "postgres" && (
-                      <PostgresqlIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "redis" && (
-                      <RedisIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "mariadb" && (
-                      <MariadbIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "mongo" && (
-                      <MongodbIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "mysql" && (
-                      <MysqlIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "application" && (
-                      <GlobeIcon className="h-6 w-6 mr-2" />
-                    )}
-                    {application.type === "compose" && (
-                      <CircuitBoard className="h-6 w-6 mr-2" />
-                    )}
-                    <span className="flex-grow">
-                      {project.name} / {application.name}{" "}
-                      <div style={{ display: "none" }}>{application.id}</div>
-                    </span>
-                    <div>
-                      <StatusTooltip status={application.status} />
-                    </div>
-                  </CommandItem>
-                ));
-              })}
-            </CommandList>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading={"Application"} hidden={true}>
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/projects");
-                setOpen(false);
-              }}
-            >
-              Projects
-            </CommandItem>
-            {!isCloud && (
-              <>
-                <CommandItem
-                  onSelect={() => {
-                    router.push("/dashboard/monitoring");
-                    setOpen(false);
-                  }}
-                >
-                  Monitoring
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    router.push("/dashboard/traefik");
-                    setOpen(false);
-                  }}
-                >
-                  Traefik
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    router.push("/dashboard/docker");
-                    setOpen(false);
-                  }}
-                >
-                  Docker
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    router.push("/dashboard/requests");
-                    setOpen(false);
-                  }}
-                >
-                  Requests
-                </CommandItem>
-              </>
-            )}
-            <CommandItem
-              onSelect={() => {
-                router.push("/dashboard/settings/server");
-                setOpen(false);
-              }}
-            >
-              Settings
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </div>
-  );
+	return (
+		<div>
+			<CommandDialog open={open} onOpenChange={setOpen}>
+				<CommandInput
+					placeholder={"Search projects or settings"}
+					value={search}
+					onValueChange={setSearch}
+				/>
+				<CommandList>
+					<CommandEmpty>
+						No projects added yet. Click on Create project.
+					</CommandEmpty>
+					<CommandGroup heading={"Projects"}>
+						<CommandList>
+							{data?.map((project) => (
+								<CommandItem
+									key={project.projectId}
+									onSelect={() => {
+										router.push(`/dashboard/project/${project.projectId}`);
+										setOpen(false);
+									}}
+								>
+									<BookIcon className="size-4 text-muted-foreground mr-2" />
+									{project.name}
+								</CommandItem>
+							))}
+						</CommandList>
+					</CommandGroup>
+					<CommandSeparator />
+					<CommandGroup heading={"Services"}>
+						<CommandList>
+							{data?.map((project) => {
+								const applications: Services[] = extractServices(project);
+								return applications.map((application) => (
+									<CommandItem
+										key={application.id}
+										onSelect={() => {
+											router.push(
+												`/dashboard/project/${project.projectId}/services/${application.type}/${application.id}`,
+											);
+											setOpen(false);
+										}}
+									>
+										{application.type === "postgres" && (
+											<PostgresqlIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "redis" && (
+											<RedisIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mariadb" && (
+											<MariadbIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mongo" && (
+											<MongodbIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "mysql" && (
+											<MysqlIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "application" && (
+											<GlobeIcon className="h-6 w-6 mr-2" />
+										)}
+										{application.type === "compose" && (
+											<CircuitBoard className="h-6 w-6 mr-2" />
+										)}
+										<span className="flex-grow">
+											{project.name} / {application.name}{" "}
+											<div style={{ display: "none" }}>{application.id}</div>
+										</span>
+										<div>
+											<StatusTooltip status={application.status} />
+										</div>
+									</CommandItem>
+								));
+							})}
+						</CommandList>
+					</CommandGroup>
+					<CommandSeparator />
+					<CommandGroup heading={"Application"} hidden={true}>
+						<CommandItem
+							onSelect={() => {
+								router.push("/dashboard/projects");
+								setOpen(false);
+							}}
+						>
+							Projects
+						</CommandItem>
+						{!isCloud && (
+							<>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/monitoring");
+										setOpen(false);
+									}}
+								>
+									Monitoring
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/traefik");
+										setOpen(false);
+									}}
+								>
+									Traefik
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/docker");
+										setOpen(false);
+									}}
+								>
+									Docker
+								</CommandItem>
+								<CommandItem
+									onSelect={() => {
+										router.push("/dashboard/requests");
+										setOpen(false);
+									}}
+								>
+									Requests
+								</CommandItem>
+							</>
+						)}
+						<CommandItem
+							onSelect={() => {
+								router.push("/dashboard/settings/server");
+								setOpen(false);
+							}}
+						>
+							Settings
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</CommandDialog>
+		</div>
+	);
 };
--- a/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/delete-notification.tsx
@@ -24,12 +24,12 @@ export const DeleteNotification = ({ notificationId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button 
-					variant="ghost" 
-					size="icon" 
+				<Button
+					variant="ghost"
+					size="icon"
 					className="h-9 w-9 group hover:bg-red-500/10"
 					isLoading={isLoading}
-					>
+				>
 					<Trash2 className="size-4 text-muted-foreground group-hover:text-red-500" />
 				</Button>
 			</AlertDialogTrigger>
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -40,58 +40,60 @@ export const ShowNotifications = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-4">
-						<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
-						  {data?.map((notification, index) => (
-							<div
-							  key={notification.notificationId}
-							  className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 bg-gray-200/50 border border-card"
-							>
-							  <div className="flex items-center gap-4">
-								{notification.notificationType === "slack" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<SlackIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "telegram" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
-									<TelegramIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "discord" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
-									<DiscordIcon className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								{notification.notificationType === "email" && (
-								  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
-									<Mail className="h-6 w-6 text-indigo-400" />
-								  </div>
-								)}
-								<div className="flex flex-col">
-								  <span className="text-sm font-medium dark:text-zinc-300 text-zinc-800">
-									{notification.name}
-								  </span>
-								  <span className="text-xs font-medium text-muted-foreground">
-								  	{notification.notificationType?.[0]?.toUpperCase() + notification.notificationType?.slice(1)} notification
-								  </span>
-								</div>
-							  </div>
-							  <div className="flex items-center gap-2">
-								<UpdateNotification
-								  notificationId={notification.notificationId}
-								/>
-								<DeleteNotification
-								  notificationId={notification.notificationId}
-								/>
-							  </div>
+							<div className="grid lg:grid-cols-1 xl:grid-cols-2 gap-4">
+								{data?.map((notification, index) => (
+									<div
+										key={notification.notificationId}
+										className="flex items-center justify-between rounded-xl p-4 transition-colors dark:bg-zinc-900/50 bg-gray-200/50 border border-card"
+									>
+										<div className="flex items-center gap-4">
+											{notification.notificationType === "slack" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<SlackIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "telegram" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10">
+													<TelegramIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "discord" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-500/10">
+													<DiscordIcon className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											{notification.notificationType === "email" && (
+												<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-500/10">
+													<Mail className="h-6 w-6 text-indigo-400" />
+												</div>
+											)}
+											<div className="flex flex-col">
+												<span className="text-sm font-medium dark:text-zinc-300 text-zinc-800">
+													{notification.name}
+												</span>
+												<span className="text-xs font-medium text-muted-foreground">
+													{notification.notificationType?.[0]?.toUpperCase() +
+														notification.notificationType?.slice(1)}{" "}
+													notification
+												</span>
+											</div>
+										</div>
+										<div className="flex items-center gap-2">
+											<UpdateNotification
+												notificationId={notification.notificationId}
+											/>
+											<DeleteNotification
+												notificationId={notification.notificationId}
+											/>
+										</div>
+									</div>
+								))}
+							</div>
+
+							<div className="flex flex-col gap-4 justify-end w-full items-end">
+								<AddNotification />
 							</div>
-						  ))}
 						</div>
-		  
-						<div className="flex flex-col gap-4 justify-end w-full items-end">
-						  <AddNotification />
-						</div>
-					  </div>
 					)}
 				</CardContent>
 			</Card>
--- a/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx
@@ -218,9 +218,11 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost"
-                        size="icon"
-                        className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80">
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-9 w-9 dark:hover:bg-zinc-900/80 hover:bg-gray-200/80"
+				>
 					<Pen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -26,7 +27,6 @@ import { toast } from "sonner";
 import { z } from "zod";
 import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
-import { AlertBlock } from "@/components/shared/alert-block";

 const profileSchema = z.object({
 	email: z.string(),
--- a/apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx
@@ -1,3 +1,5 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -18,13 +20,11 @@ import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { useRouter } from "next/router";

 const profileSchema = z.object({
 	password: z.string().min(1, {
--- a/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx
@@ -25,8 +25,8 @@ import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "next-i18next";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
-import { ShowModalLogs } from "../../web-server/show-modal-logs";
 import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
+import { ShowModalLogs } from "../../web-server/show-modal-logs";

 interface Props {
 	serverId?: string;
--- a/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/edit-script.tsx
@@ -108,7 +108,8 @@ export const EditScript = ({ serverId }: Props) => {
 					</DialogDescription>

 					<AlertBlock type="warning">
-						We recommend not modifying this script unless you know what you are doing.
+						We recommend not modifying this script unless you know what you are
+						doing.
 					</AlertBlock>
 				</DialogHeader>
 				<div className="grid gap-4">
--- a/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/setup-server.tsx
@@ -34,8 +34,8 @@ import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
 import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
-import { ValidateServer } from "./validate-server";
 import { SecurityAudit } from "./security-audit";
+import { ValidateServer } from "./validate-server";

 interface Props {
 	serverId: string;
--- a/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-servers.tsx
@@ -23,17 +23,17 @@ import { api } from "@/utils/api";
 import { format } from "date-fns";
 import { KeyIcon, MoreHorizontal, ServerIcon } from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { ShowServerActions } from "./actions/show-server-actions";
 import { AddServer } from "./add-server";
 import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
+import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { UpdateServer } from "./update-server";
-import { useRouter } from "next/router";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
-import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";

 export const ShowServers = () => {
 	const router = useRouter();
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx
@@ -1,12 +1,12 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Card, CardContent } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { ExternalLinkIcon, Loader2 } from "lucide-react";
 import copy from "copy-to-clipboard";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
 import { CopyIcon } from "lucide-react";
+import Link from "next/link";
 import { useEffect, useRef } from "react";
 import { toast } from "sonner";
-import { CodeEditor } from "@/components/shared/code-editor";
-import Link from "next/link";

 export const CreateSSHKey = () => {
 	const { data, refetch } = api.sshKey.all.useQuery();
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/setup.tsx
@@ -5,26 +5,26 @@ import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
 } from "@/components/ui/card";
-import { RocketIcon } from "lucide-react";
-import { toast } from "sonner";
-import { EditScript } from "../edit-script";
-import { api } from "@/utils/api";
-import { useState } from "react";
 import { Label } from "@/components/ui/label";
 import {
 	Select,
-	SelectTrigger,
-	SelectValue,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
 	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { RocketIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { EditScript } from "../edit-script";

 export const Setup = () => {
 	const { data: servers } = api.server.all.useQuery();
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/verify.tsx
@@ -1,27 +1,27 @@
 import { Button } from "@/components/ui/button";
 import {
 	Card,
+	CardContent,
+	CardDescription,
 	CardHeader,
 	CardTitle,
-	CardDescription,
-	CardContent,
 } from "@/components/ui/card";
-import { Loader2, PcCase, RefreshCw } from "lucide-react";
-import { api } from "@/utils/api";
-import { useState } from "react";
 import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { Loader2, PcCase, RefreshCw } from "lucide-react";
+import { useState } from "react";

+import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Select,
-	SelectTrigger,
-	SelectValue,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
 	SelectLabel,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
 import { StatusRow } from "../gpu-support";
-import { AlertBlock } from "@/components/shared/alert-block";

 export const Verify = () => {
 	const { data: servers } = api.server.all.useQuery();
--- a/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/welcome-stripe/welcome-suscription.tsx
@@ -1,3 +1,5 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -7,21 +9,19 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { defineStepper } from "@stepperize/react";
 import { BookIcon, Puzzle } from "lucide-react";
+import { Code2, Database, GitMerge, Globe, Plug, Users } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { defineStepper } from "@stepperize/react";
 import React from "react";
-import { Separator } from "@/components/ui/separator";
-import { AlertBlock } from "@/components/shared/alert-block";
+import ConfettiExplosion from "react-confetti-explosion";
 import { CreateServer } from "./create-server";
 import { CreateSSHKey } from "./create-ssh-key";
 import { Setup } from "./setup";
 import { Verify } from "./verify";
-import { Database, Globe, GitMerge, Users, Code2, Plug } from "lucide-react";
-import ConfettiExplosion from "react-confetti-explosion";
-import Link from "next/link";
-import { GithubIcon } from "@/components/icons/data-tools-icons";

 export const { useStepper, steps, Scoped } = defineStepper(
 	{
--- a/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/docker-terminal-modal.tsx
@@ -80,7 +80,7 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 	return (
 		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
 			<DialogTrigger asChild>{children}</DialogTrigger>
-			<DialogContent 
+			<DialogContent
 				className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl"
 				onEscapeKeyDown={(event) => event.preventDefault()}
 			>
--- a/apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx
+++ b/apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx
@@ -6,6 +6,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
 import {
 	Select,
 	SelectContent,
@@ -13,7 +14,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { useTranslation } from "next-i18next";
 import type React from "react";
--- a/apps/dokploy/pages/api/deploy/github.ts
+++ b/apps/dokploy/pages/api/deploy/github.ts
@@ -3,19 +3,19 @@ import { applications, compose, github } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
+import { generateRandomDomain } from "@/templates/utils";
 import {
-	createPreviewDeployment,
 	type Domain,
+	IS_CLOUD,
+	createPreviewDeployment,
 	findPreviewDeploymentByApplicationId,
 	findPreviewDeploymentsByPullRequestId,
-	IS_CLOUD,
 	removePreviewDeployment,
 } from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { extractCommitMessage, extractHash } from "./[refreshToken]";
-import { generateRandomDomain } from "@/templates/utils";

 export default async function handler(
 	req: NextApiRequest,
--- a/apps/dokploy/public/locales/it/common.json
+++ b/apps/dokploy/public/locales/it/common.json
@@ -1 +1 @@
-{}
+{}
--- a/apps/dokploy/public/locales/it/settings.json
+++ b/apps/dokploy/public/locales/it/settings.json
@@ -1,44 +1,44 @@
-{
-	"settings.common.save": "Salva",
-	"settings.server.domain.title": "Dominio del server",
-	"settings.server.domain.description": "Aggiungi un dominio alla tua applicazione server.",
-	"settings.server.domain.form.domain": "Dominio",
-	"settings.server.domain.form.letsEncryptEmail": "Email di Let's Encrypt",
-	"settings.server.domain.form.certificate.label": "Certificato",
-	"settings.server.domain.form.certificate.placeholder": "Seleziona un certificato",
-	"settings.server.domain.form.certificateOptions.none": "Nessuno",
-	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Predefinito)",
-
-	"settings.server.webServer.title": "Server Web",
-	"settings.server.webServer.description": "Ricarica o pulisci il server web.",
-	"settings.server.webServer.actions": "Azioni",
-	"settings.server.webServer.reload": "Ricarica",
-	"settings.server.webServer.watchLogs": "Guarda i log",
-	"settings.server.webServer.updateServerIp": "Aggiorna IP del server",
-	"settings.server.webServer.server.label": "Server",
-	"settings.server.webServer.traefik.label": "Traefik",
-	"settings.server.webServer.traefik.modifyEnv": "Modifica Env",
-	"settings.server.webServer.storage.label": "Spazio",
-	"settings.server.webServer.storage.cleanUnusedImages": "Pulisci immagini inutilizzate",
-	"settings.server.webServer.storage.cleanUnusedVolumes": "Pulisci volumi inutilizzati",
-	"settings.server.webServer.storage.cleanStoppedContainers": "Pulisci container fermati",
-	"settings.server.webServer.storage.cleanDockerBuilder": "Pulisci Docker Builder e sistema",
-	"settings.server.webServer.storage.cleanMonitoring": "Pulisci monitoraggio",
-	"settings.server.webServer.storage.cleanAll": "Pulisci tutto",
-
-	"settings.profile.title": "Account",
-	"settings.profile.description": "Modifica i dettagli del tuo profilo qui.",
-	"settings.profile.email": "Email",
-	"settings.profile.password": "Password",
-	"settings.profile.avatar": "Avatar",
-
-	"settings.appearance.title": "Aspetto",
-	"settings.appearance.description": "Personalizza il tema della tua dashboard.",
-	"settings.appearance.theme": "Tema",
-	"settings.appearance.themeDescription": "Seleziona un tema per la tua dashboard",
-	"settings.appearance.themes.light": "Chiaro",
-	"settings.appearance.themes.dark": "Scuro",
-	"settings.appearance.themes.system": "Sistema",
-	"settings.appearance.language": "Lingua",
-	"settings.appearance.languageDescription": "Seleziona una lingua per la tua dashboard"
-}
+{
+	"settings.common.save": "Salva",
+	"settings.server.domain.title": "Dominio del server",
+	"settings.server.domain.description": "Aggiungi un dominio alla tua applicazione server.",
+	"settings.server.domain.form.domain": "Dominio",
+	"settings.server.domain.form.letsEncryptEmail": "Email di Let's Encrypt",
+	"settings.server.domain.form.certificate.label": "Certificato",
+	"settings.server.domain.form.certificate.placeholder": "Seleziona un certificato",
+	"settings.server.domain.form.certificateOptions.none": "Nessuno",
+	"settings.server.domain.form.certificateOptions.letsencrypt": "Let's Encrypt (Predefinito)",
+
+	"settings.server.webServer.title": "Server Web",
+	"settings.server.webServer.description": "Ricarica o pulisci il server web.",
+	"settings.server.webServer.actions": "Azioni",
+	"settings.server.webServer.reload": "Ricarica",
+	"settings.server.webServer.watchLogs": "Guarda i log",
+	"settings.server.webServer.updateServerIp": "Aggiorna IP del server",
+	"settings.server.webServer.server.label": "Server",
+	"settings.server.webServer.traefik.label": "Traefik",
+	"settings.server.webServer.traefik.modifyEnv": "Modifica Env",
+	"settings.server.webServer.storage.label": "Spazio",
+	"settings.server.webServer.storage.cleanUnusedImages": "Pulisci immagini inutilizzate",
+	"settings.server.webServer.storage.cleanUnusedVolumes": "Pulisci volumi inutilizzati",
+	"settings.server.webServer.storage.cleanStoppedContainers": "Pulisci container fermati",
+	"settings.server.webServer.storage.cleanDockerBuilder": "Pulisci Docker Builder e sistema",
+	"settings.server.webServer.storage.cleanMonitoring": "Pulisci monitoraggio",
+	"settings.server.webServer.storage.cleanAll": "Pulisci tutto",
+
+	"settings.profile.title": "Account",
+	"settings.profile.description": "Modifica i dettagli del tuo profilo qui.",
+	"settings.profile.email": "Email",
+	"settings.profile.password": "Password",
+	"settings.profile.avatar": "Avatar",
+
+	"settings.appearance.title": "Aspetto",
+	"settings.appearance.description": "Personalizza il tema della tua dashboard.",
+	"settings.appearance.theme": "Tema",
+	"settings.appearance.themeDescription": "Seleziona un tema per la tua dashboard",
+	"settings.appearance.themes.light": "Chiaro",
+	"settings.appearance.themes.dark": "Scuro",
+	"settings.appearance.themes.system": "Sistema",
+	"settings.appearance.language": "Lingua",
+	"settings.appearance.languageDescription": "Seleziona una lingua per la tua dashboard"
+}
--- a/apps/dokploy/server/api/routers/compose.ts
+++ b/apps/dokploy/server/api/routers/compose.ts
@@ -3,6 +3,7 @@ import { db } from "@/server/db";
 import {
 	apiCreateCompose,
 	apiCreateComposeByTemplate,
+	apiDeleteCompose,
 	apiFetchServices,
 	apiFindCompose,
 	apiRandomizeCompose,
@@ -117,7 +118,7 @@ export const composeRouter = createTRPCRouter({
 			return updateCompose(input.composeId, input);
 		}),
 	delete: protectedProcedure
-		.input(apiFindCompose)
+		.input(apiDeleteCompose)
 		.mutation(async ({ input, ctx }) => {
 			if (ctx.user.rol === "user") {
 				await checkServiceAccess(ctx.user.authId, input.composeId, "delete");
@@ -138,7 +139,7 @@ export const composeRouter = createTRPCRouter({
 				.returning();

 			const cleanupOperations = [
-				async () => await removeCompose(composeResult),
+				async () => await removeCompose(composeResult, input.deleteVolumes),
 				async () => await removeDeploymentsByComposeId(composeResult),
 				async () => await removeComposeDirectory(composeResult.appName),
 			];
--- a/apps/dokploy/templates/onedev/index.ts
+++ b/apps/dokploy/templates/onedev/index.ts
@@ -1,22 +1,22 @@
 import {
-    type DomainSchema,
-    type Schema,
-    type Template,
-    generateRandomDomain,
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generateRandomDomain,
 } from "../utils";

 export function generate(schema: Schema): Template {
-    const randomDomain = generateRandomDomain(schema);
+	const randomDomain = generateRandomDomain(schema);

-    const domains: DomainSchema[] = [
-        {
-            host: randomDomain,
-            port: 6610,
-            serviceName: "onedev",
-        },
-    ];
+	const domains: DomainSchema[] = [
+		{
+			host: randomDomain,
+			port: 6610,
+			serviceName: "onedev",
+		},
+	];

-    return {
-        domains,
-    };
+	return {
+		domains,
+	};
 }
--- a/apps/dokploy/templates/unsend/index.ts
+++ b/apps/dokploy/templates/unsend/index.ts
@@ -1,44 +1,44 @@
 import {
-  generateHash,
-  generateRandomDomain,
-  generateBase64,
-  type Template,
-  type Schema,
-  type DomainSchema,
+	type DomainSchema,
+	type Schema,
+	type Template,
+	generateBase64,
+	generateHash,
+	generateRandomDomain,
 } from "../utils";

 export function generate(schema: Schema): Template {
-  const mainDomain = generateRandomDomain(schema);
-  const secretBase = generateBase64(64);
+	const mainDomain = generateRandomDomain(schema);
+	const secretBase = generateBase64(64);

-  const domains: DomainSchema[] = [
-    {
-      host: mainDomain,
-      port: 3000,
-      serviceName: "unsend",
-    },
-  ];
+	const domains: DomainSchema[] = [
+		{
+			host: mainDomain,
+			port: 3000,
+			serviceName: "unsend",
+		},
+	];

-  const envs = [
-    "REDIS_URL=redis://unsend-redis-prod:6379",
-    "POSTGRES_USER=postgres",
-    "POSTGRES_PASSWORD=postgres",
-    "POSTGRES_DB=unsend",
-    "DATABASE_URL=postgresql://postgres:postgres@unsend-db-prod:5432/unsend",
-    "NEXTAUTH_URL=http://localhost:3000",
-    `NEXTAUTH_SECRET=${secretBase}`,
-    "GITHUB_ID='Fill'",
-    "GITHUB_SECRET='Fill'",
-    "AWS_DEFAULT_REGION=us-east-1",
-    "AWS_SECRET_KEY='Fill'",
-    "AWS_ACCESS_KEY='Fill'",
-    "DOCKER_OUTPUT=1",
-    "API_RATE_LIMIT=1",
-    "DISCORD_WEBHOOK_URL=",
-  ];
+	const envs = [
+		"REDIS_URL=redis://unsend-redis-prod:6379",
+		"POSTGRES_USER=postgres",
+		"POSTGRES_PASSWORD=postgres",
+		"POSTGRES_DB=unsend",
+		"DATABASE_URL=postgresql://postgres:postgres@unsend-db-prod:5432/unsend",
+		"NEXTAUTH_URL=http://localhost:3000",
+		`NEXTAUTH_SECRET=${secretBase}`,
+		"GITHUB_ID='Fill'",
+		"GITHUB_SECRET='Fill'",
+		"AWS_DEFAULT_REGION=us-east-1",
+		"AWS_SECRET_KEY='Fill'",
+		"AWS_ACCESS_KEY='Fill'",
+		"DOCKER_OUTPUT=1",
+		"API_RATE_LIMIT=1",
+		"DISCORD_WEBHOOK_URL=",
+	];

-  return {
-    envs,
-    domains,
-  };
+	return {
+		envs,
+		domains,
+	};
 }
--- a/packages/server/src/db/schema/application.ts
+++ b/packages/server/src/db/schema/application.ts
@@ -17,6 +17,7 @@ import { github } from "./github";
 import { gitlab } from "./gitlab";
 import { mounts } from "./mount";
 import { ports } from "./port";
+import { previewDeployments } from "./preview-deployments";
 import { projects } from "./project";
 import { redirects } from "./redirects";
 import { registry } from "./registry";
@@ -25,7 +26,6 @@ import { server } from "./server";
 import { applicationStatus, certificateType } from "./shared";
 import { sshKeys } from "./ssh-key";
 import { generateAppName } from "./utils";
-import { previewDeployments } from "./preview-deployments";

 export const sourceType = pgEnum("sourceType", [
 	"docker",
--- a/packages/server/src/db/schema/compose.ts
+++ b/packages/server/src/db/schema/compose.ts
@@ -155,6 +155,11 @@ export const apiFindCompose = z.object({
 	composeId: z.string().min(1),
 });

+export const apiDeleteCompose = z.object({
+	composeId: z.string().min(1),
+	deleteVolumes: z.boolean(),
+});
+
 export const apiFetchServices = z.object({
 	composeId: z.string().min(1),
 	type: z.enum(["fetch", "cache"]).optional().default("cache"),
--- a/packages/server/src/db/schema/deployment.ts
+++ b/packages/server/src/db/schema/deployment.ts
@@ -11,8 +11,8 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 import { applications } from "./application";
 import { compose } from "./compose";
-import { server } from "./server";
 import { previewDeployments } from "./preview-deployments";
+import { server } from "./server";

 export const deploymentStatus = pgEnum("deploymentStatus", [
 	"running",
--- a/packages/server/src/db/schema/domain.ts
+++ b/packages/server/src/db/schema/domain.ts
@@ -14,8 +14,8 @@ import { z } from "zod";
 import { domain } from "../validations/domain";
 import { applications } from "./application";
 import { compose } from "./compose";
-import { certificateType } from "./shared";
 import { previewDeployments } from "./preview-deployments";
+import { certificateType } from "./shared";

 export const domainType = pgEnum("domainType", [
 	"compose",
--- a/packages/server/src/db/schema/index.ts
+++ b/packages/server/src/db/schema/index.ts
@@ -29,4 +29,4 @@ export * from "./github";
 export * from "./gitlab";
 export * from "./server";
 export * from "./utils";
-export * from "./preview-deployments";
+export * from "./preview-deployments";
--- a/packages/server/src/db/schema/preview-deployments.ts
+++ b/packages/server/src/db/schema/preview-deployments.ts
@@ -1,13 +1,13 @@
 import { relations } from "drizzle-orm";
 import { pgTable, text } from "drizzle-orm/pg-core";
-import { nanoid } from "nanoid";
-import { applications } from "./application";
-import { domains } from "./domain";
-import { deployments } from "./deployment";
 import { createInsertSchema } from "drizzle-zod";
+import { nanoid } from "nanoid";
 import { z } from "zod";
-import { generateAppName } from "./utils";
+import { applications } from "./application";
+import { deployments } from "./deployment";
+import { domains } from "./domain";
 import { applicationStatus } from "./shared";
+import { generateAppName } from "./utils";

 export const previewDeployments = pgTable("preview_deployments", {
 	previewDeploymentId: text("previewDeploymentId")
--- a/packages/server/src/services/compose.ts
+++ b/packages/server/src/services/compose.ts
@@ -206,7 +206,9 @@ export const deployCompose = async ({
 	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
-	const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`;
+	const buildLink = `${await getDokployUrl()}/dashboard/project/${
+		compose.projectId
+	}/services/compose/${compose.composeId}?tab=deployments`;
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
@@ -308,7 +310,9 @@ export const deployRemoteCompose = async ({
 	descriptionLog: string;
 }) => {
 	const compose = await findComposeById(composeId);
-	const buildLink = `${await getDokployUrl()}/dashboard/project/${compose.projectId}/services/compose/${compose.composeId}?tab=deployments`;
+	const buildLink = `${await getDokployUrl()}/dashboard/project/${
+		compose.projectId
+	}/services/compose/${compose.composeId}?tab=deployments`;
 	const deployment = await createDeploymentCompose({
 		composeId: composeId,
 		title: titleLog,
@@ -437,13 +441,17 @@ export const rebuildRemoteCompose = async ({
 	return true;
 };

-export const removeCompose = async (compose: Compose) => {
+export const removeCompose = async (
+	compose: Compose,
+	deleteVolumes: boolean,
+) => {
 	try {
 		const { COMPOSE_PATH } = paths(!!compose.serverId);
 		const projectPath = join(COMPOSE_PATH, compose.appName);

 		if (compose.composeType === "stack") {
 			const command = `cd ${projectPath} && docker stack rm ${compose.appName} && rm -rf ${projectPath}`;
+
 			if (compose.serverId) {
 				await execAsyncRemote(compose.serverId, command);
 			} else {
@@ -453,7 +461,13 @@ export const removeCompose = async (compose: Compose) => {
 				cwd: projectPath,
 			});
 		} else {
-			const command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`;
+			let command: string;
+			if (deleteVolumes) {
+				command = `cd ${projectPath} && docker compose -p ${compose.appName} down --volumes && rm -rf ${projectPath}`;
+			} else {
+				command = `cd ${projectPath} && docker compose -p ${compose.appName} down && rm -rf ${projectPath}`;
+			}
+
 			if (compose.serverId) {
 				await execAsyncRemote(compose.serverId, command);
 			} else {
@@ -477,7 +491,11 @@ export const startCompose = async (composeId: string) => {
 			if (compose.serverId) {
 				await execAsyncRemote(
 					compose.serverId,
-					`cd ${join(COMPOSE_PATH, compose.appName, "code")} && docker compose -p ${compose.appName} up -d`,
+					`cd ${join(
+						COMPOSE_PATH,
+						compose.appName,
+						"code",
+					)} && docker compose -p ${compose.appName} up -d`,
 				);
 			} else {
 				await execAsync(`docker compose -p ${compose.appName} up -d`, {
@@ -507,7 +525,9 @@ export const stopCompose = async (composeId: string) => {
 			if (compose.serverId) {
 				await execAsyncRemote(
 					compose.serverId,
-					`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${compose.appName} stop`,
+					`cd ${join(COMPOSE_PATH, compose.appName)} && docker compose -p ${
+						compose.appName
+					} stop`,
 				);
 			} else {
 				await execAsync(`docker compose -p ${compose.appName} stop`, {
--- a/packages/server/src/utils/backups/index.ts
+++ b/packages/server/src/utils/backups/index.ts
@@ -7,12 +7,12 @@ import {
 	cleanUpSystemPrune,
 	cleanUpUnusedImages,
 } from "../docker/utils";
+import { sendDatabaseBackupNotifications } from "../notifications/database-backup";
+import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
 import { runMariadbBackup } from "./mariadb";
 import { runMongoBackup } from "./mongo";
 import { runMySqlBackup } from "./mysql";
 import { runPostgresBackup } from "./postgres";
-import { sendDockerCleanupNotifications } from "../notifications/docker-cleanup";
-import { sendDatabaseBackupNotifications } from "../notifications/database-backup";

 export const initCronJobs = async () => {
 	console.log("Setting up cron jobs....");
--- a/packages/server/src/utils/builders/index.ts
+++ b/packages/server/src/utils/builders/index.ts
@@ -2,6 +2,7 @@ import { createWriteStream } from "node:fs";
 import { join } from "node:path";
 import type { InferResultType } from "@dokploy/server/types/with";
 import type { CreateServiceOptions } from "dockerode";
+import { nanoid } from "nanoid";
 import { uploadImage, uploadImageRemoteCommand } from "../cluster/upload";
 import {
 	calculateResources,
@@ -17,7 +18,6 @@ import { buildHeroku, getHerokuCommand } from "./heroku";
 import { buildNixpacks, getNixpacksCommand } from "./nixpacks";
 import { buildPaketo, getPaketoCommand } from "./paketo";
 import { buildStatic, getStaticCommand } from "./static";
-import { nanoid } from "nanoid";

 // NIXPACKS codeDirectory = where is the path of the code directory
 // HEROKU codeDirectory = where is the path of the code directory
--- a/packages/server/src/utils/docker/utils.ts
+++ b/packages/server/src/utils/docker/utils.ts
@@ -238,9 +238,11 @@ export const startServiceRemote = async (serverId: string, appName: string) => {
 export const removeService = async (
 	appName: string,
 	serverId?: string | null,
+	deleteVolumes = false,
 ) => {
 	try {
 		const command = `docker service rm ${appName}`;
+
 		if (serverId) {
 			await execAsyncRemote(serverId, command);
 		} else {