feat(setup): implement Docker permissions setup and configuration for user access

fix(ui): scroll gutters stable

.github/workflows/pull-request.yml

@@ -4,9 +4,15 @@ on:
   pull_request:
     branches: [main, canary]
 
+permissions:
+  contents: read
+
 jobs:
-  lint-and-typecheck:
+  pr-check:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        job: [build, test, typecheck]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -15,32 +21,5 @@ jobs:
           node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm typecheck
-
-  build-and-test:
-    needs: lint-and-typecheck
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.16.0
-          cache: "pnpm"
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm build
-
-  parallel-tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.16.0
-          cache: "pnpm"
-      - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
-      - run: pnpm test
+      - run: pnpm server:build
+      - run: pnpm ${{ matrix.job }}

apps/api/package.json

@@ -9,6 +9,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"inngest": "3.40.1",
 		"@dokploy/server": "workspace:*",
 		"@hono/node-server": "^1.14.3",
 		"@hono/zod-validator": "0.3.0",

apps/api/src/index.ts

@@ -2,21 +2,79 @@ import { serve } from "@hono/node-server";
 import { Hono } from "hono";
 import "dotenv/config";
 import { zValidator } from "@hono/zod-validator";
-import { Queue } from "@nerimity/mimiqueue";
-import { createClient } from "redis";
+import { Inngest } from "inngest";
+import { serve as serveInngest } from "inngest/hono";
 import { logger } from "./logger.js";
 import { type DeployJob, deployJobSchema } from "./schema.js";
 import { deploy } from "./utils.js";
 
 const app = new Hono();
-const redisClient = createClient({
-	url: process.env.REDIS_URL,
+
+// Initialize Inngest client
+export const inngest = new Inngest({
+	id: "dokploy-deployments",
+	name: "Dokploy Deployment Service",
 });
 
+export const deploymentFunction = inngest.createFunction(
+	{
+		id: "deploy-application",
+		name: "Deploy Application",
+		concurrency: [
+			{
+				key: "event.data.serverId",
+				limit: 1,
+			},
+		],
+		retries: 0,
+	},
+	{ event: "deployment/requested" },
+
+	async ({ event, step }) => {
+		const jobData = event.data as DeployJob;
+
+		return await step.run("execute-deployment", async () => {
+			logger.info("Deploying started");
+
+			try {
+				const result = await deploy(jobData);
+				logger.info("Deployment finished", result);
+
+				// Send success event
+				await inngest.send({
+					name: "deployment/completed",
+					data: {
+						...jobData,
+						result,
+						status: "success",
+					},
+				});
+
+				return result;
+			} catch (error) {
+				logger.error("Deployment failed", { jobData, error });
+
+				// Send failure event
+				await inngest.send({
+					name: "deployment/failed",
+					data: {
+						...jobData,
+						error: error instanceof Error ? error.message : String(error),
+						status: "failed",
+					},
+				});
+
+				throw error;
+			}
+		});
+	},
+);
+
 app.use(async (c, next) => {
-	if (c.req.path === "/health") {
+	if (c.req.path === "/health" || c.req.path === "/api/inngest") {
 		return next();
 	}
+
 	const authHeader = c.req.header("X-API-Key");
 
 	if (process.env.API_KEY !== authHeader) {
@@ -26,36 +84,55 @@ app.use(async (c, next) => {
 	return next();
 });
 
-app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
+app.post("/deploy", zValidator("json", deployJobSchema), async (c) => {
 	const data = c.req.valid("json");
-	queue.add(data, { groupName: data.serverId });
-	return c.json(
-		{
-			message: "Deployment Added",
-		},
-		200,
-	);
+	logger.info("Received deployment request", data);
+
+	try {
+		// Send event to Inngest instead of adding to Redis queue
+		await inngest.send({
+			name: "deployment/requested",
+			data,
+		});
+
+		logger.info("Deployment event sent to Inngest", {
+			serverId: data.serverId,
+		});
+
+		return c.json(
+			{
+				message: "Deployment Added to Inngest Queue",
+				serverId: data.serverId,
+			},
+			200,
+		);
+	} catch (error) {
+		console.log("error", error);
+		logger.error("Failed to send deployment event", error);
+		return c.json(
+			{
+				message: "Failed to queue deployment",
+				error: error instanceof Error ? error.message : String(error),
+			},
+			500,
+		);
+	}
 });
 
 app.get("/health", async (c) => {
 	return c.json({ status: "ok" });
 });
 
-const queue = new Queue({
-	name: "deployments",
-	process: async (job: DeployJob) => {
-		logger.info("Deploying job", job);
-		return await deploy(job);
-	},
-	redisClient,
-});
-
-(async () => {
-	await redisClient.connect();
-	await redisClient.flushAll();
-	logger.info("Redis Cleaned");
-})();
+// Serve Inngest functions endpoint
+app.on(
+	["GET", "POST", "PUT"],
+	"/api/inngest",
+	serveInngest({
+		client: inngest,
+		functions: [deploymentFunction],
+	}),
+);
 
 const port = Number.parseInt(process.env.PORT || "3000");
-logger.info("Starting Deployments Server ✅", port);
+logger.info("Starting Deployments Server with Inngest ✅", port);
 serve({ fetch: app.fetch, port });

apps/api/src/utils.ts

@@ -64,7 +64,7 @@ export const deploy = async (job: DeployJob) => {
 				}
 			}
 		}
-	} catch (_) {
+	} catch (e) {
 		if (job.applicationType === "application") {
 			await updateApplicationStatus(job.applicationId, "error");
 		} else if (job.applicationType === "compose") {
@@ -76,6 +76,8 @@ export const deploy = async (job: DeployJob) => {
 				previewStatus: "error",
 			});
 		}
+
+		throw e;
 	}
 
 	return true;

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

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -16,11 +21,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+
 interface Props {
 	applicationId: string;
 }

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Code2, Globe2, HardDrive } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -27,12 +33,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Code2, Globe2, HardDrive } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const ImportSchema = z.object({
 	base64: z.string(),

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

@@ -1,3 +1,5 @@
+import { Rss, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
@@ -9,9 +11,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Rss, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandlePorts } from "./handle-ports";
+
 interface Props {
 	applicationId: string;
 }

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -30,12 +36,6 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const AddRedirectchema = z.object({
 	regex: z.string().min(1, "Regex required"),

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

@@ -1,3 +1,5 @@
+import { Split, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,8 +10,6 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Split, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandleRedirect } from "./handle-redirect";
 
 interface Props {

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,12 +25,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const AddSecuritychema = z.object({
 	username: z.string().min(1, "Username is required"),

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

@@ -1,4 +1,7 @@
+import { LockKeyhole, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -7,12 +10,9 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { LockKeyhole, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { HandleSecurity } from "./handle-security";
 
 interface Props {

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { InfoIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,12 +29,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { InfoIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const addResourcesSchema = z.object({
 	memoryReservation: z.string().optional(),

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

@@ -1,3 +1,4 @@
+import { File, Loader2 } from "lucide-react";
 import { CodeEditor } from "@/components/shared/code-editor";
 import {
 	Card,
@@ -7,8 +8,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { File, Loader2 } from "lucide-react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
+
 interface Props {
 	applicationId: string;
 }

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import jsyaml from "js-yaml";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -19,12 +25,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import jsyaml from "js-yaml";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const UpdateTraefikConfigSchema = z.object({
 	traefikConfig: z.string(),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -22,13 +29,7 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+
 interface Props {
 	serviceId: string;
 	serviceType:

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -20,12 +26,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const mountSchema = z.object({
 	mountPath: z.string().min(1, "Mount path required"),

apps/dokploy/components/dashboard/application/deployments/cancel-queues.tsx

@@ -1,3 +1,5 @@
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -11,8 +13,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
-import { Paintbrush } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	id: string;

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

@@ -1,3 +1,5 @@
+import { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -10,8 +12,6 @@ import {
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	id: string;

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

@@ -1,3 +1,5 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
@@ -7,8 +9,6 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
-import { Loader2 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { TerminalLine } from "../../docker/logs/terminal-line";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

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

@@ -1,8 +1,7 @@
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-
 import type { RouterOutputs } from "@/utils/api";
-import { useState } from "react";
 import { ShowDeployment } from "../deployments/show-deployment";
 import { ShowDeployments } from "./show-deployments";
 

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

@@ -1,3 +1,6 @@
+import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -10,10 +13,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { type RouterOutputs, api } from "@/utils/api";
-import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { api, type RouterOutputs } from "@/utils/api";
 import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";

apps/dokploy/components/dashboard/application/domains/dns-helper-modal.tsx

@@ -1,3 +1,5 @@
+import { Copy, HelpCircle, Server } from "lucide-react";
+import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,8 +10,6 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { Copy, HelpCircle, Server } from "lucide-react";
-import { toast } from "sonner";
 
 interface Props {
 	domain: {

apps/dokploy/components/dashboard/application/domains/show-domains.tsx

@@ -1,3 +1,18 @@
+import {
+	CheckCircle2,
+	ExternalLink,
+	GlobeIcon,
+	InfoIcon,
+	Loader2,
+	PenBoxIcon,
+	RefreshCw,
+	Server,
+	Trash2,
+	XCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,21 +30,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	CheckCircle2,
-	ExternalLink,
-	GlobeIcon,
-	InfoIcon,
-	Loader2,
-	PenBoxIcon,
-	RefreshCw,
-	Server,
-	Trash2,
-	XCircle,
-} from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { DnsHelperModal } from "./dns-helper-modal";
 import { AddDomain } from "./handle-domain";
 

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { type CSSProperties, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -16,12 +22,6 @@ import {
 } from "@/components/ui/form";
 import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
-import { type CSSProperties, useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { ServiceType } from "../advanced/show-resources";
 
 const addEnvironmentSchema = z.object({

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

@@ -1,13 +1,13 @@
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Form } from "@/components/ui/form";
-import { Secrets } from "@/components/ui/secrets";
-import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { Secrets } from "@/components/ui/secrets";
+import { api } from "@/utils/api";
 
 const addEnvironmentSchema = z.object({
 	env: z.string(),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const BitbucketProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -9,11 +14,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const DockerProviderSchema = z.object({
 	dockerImage: z.string().min(1, {

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

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TrashIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Dropzone } from "@/components/ui/dropzone";
 import {
@@ -11,11 +16,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { type UploadFile, uploadFileSchema } from "@/utils/schema";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { TrashIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
 
 interface Props {
 	applicationId: string;

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

@@ -1,3 +1,13 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { GitIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -25,17 +35,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { GitIcon } from "@/components/icons/data-tools-icons";
-import { Badge } from "@/components/ui/badge";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 interface GiteaRepository {
 	name: string;

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -39,13 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GithubProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useMemo } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitlabProviderSchema = z.object({
 	buildPath: z.string().min(1, "Path is required").default("/"),

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

@@ -1,3 +1,7 @@
+import { GitBranch, Loader2, UploadCloud } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
 import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
 import { SaveGiteaProvider } from "@/components/dashboard/application/general/generic/save-gitea-provider";
@@ -5,18 +9,14 @@ import { SaveGithubProvider } from "@/components/dashboard/application/general/g
 import {
 	BitbucketIcon,
 	DockerIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, Loader2, UploadCloud } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";
 import { SaveDragNDrop } from "./save-drag-n-drop";
 import { SaveGitlabProvider } from "./save-gitlab-provider";

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

@@ -1,8 +1,9 @@
+import { AlertCircle, GitBranch, Unlink } from "lucide-react";
 import {
 	BitbucketIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -10,7 +11,6 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import type { RouterOutputs } from "@/utils/api";
-import { AlertCircle, GitBranch, Unlink } from "lucide-react";
 
 interface Props {
 	service:

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

@@ -1,3 +1,14 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+	Ban,
+	CheckCircle2,
+	Hammer,
+	RefreshCcw,
+	Rocket,
+	Terminal,
+} from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
 import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
 import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -11,18 +22,8 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import {
-	Ban,
-	CheckCircle2,
-	Hammer,
-	RefreshCcw,
-	Rocket,
-	Terminal,
-} from "lucide-react";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
 interface Props {
 	applicationId: string;
 }

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import {
 	Card,
@@ -18,9 +21,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Dices } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import type z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -33,15 +39,8 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
 import { domain } from "@/server/db/validations/domain";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Dices } from "lucide-react";
-import type z from "zod";
+import { api } from "@/utils/api";
 
 type Domain = z.infer<typeof domain>;
 

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

@@ -1,3 +1,13 @@
+import {
+	ExternalLink,
+	FileText,
+	GitPullRequest,
+	Loader2,
+	PenSquare,
+	RocketIcon,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -13,16 +23,6 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import {
-	ExternalLink,
-	FileText,
-	GitPullRequest,
-	Loader2,
-	PenSquare,
-	RocketIcon,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { AddPreviewDomain } from "./add-preview-domain";

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Settings2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -28,12 +34,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Settings2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const schema = z
 	.object({

apps/dokploy/components/dashboard/application/rollbacks/show-rollback-settings.tsx

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -18,11 +23,6 @@ import {
 } from "@/components/ui/form";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const formSchema = z.object({
 	rollbackActive: z.boolean(),

apps/dokploy/components/dashboard/application/schedules/handle-schedules.tsx

@@ -1,3 +1,15 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -35,18 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusCircle,
-	RefreshCw,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { CacheType } from "../domains/handle-domain";
 
 export const commonCronExpressions = [

apps/dokploy/components/dashboard/application/schedules/show-schedules.tsx

@@ -1,3 +1,12 @@
+import {
+	ClipboardList,
+	Clock,
+	Loader2,
+	Play,
+	Terminal,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,15 +24,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	Clock,
-	Loader2,
-	Play,
-	Terminal,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { HandleSchedules } from "./handle-schedules";
 

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateApplicationSchema = z.object({
 	name: z.string().min(1, {

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -1,3 +1,15 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,18 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusCircle,
-	RefreshCw,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { CacheType } from "../domains/handle-domain";
 import { commonCronExpressions } from "../schedules/handle-schedules";
 

apps/dokploy/components/dashboard/application/volume-backups/restore-volume-backups.tsx

@@ -1,3 +1,11 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
@@ -35,14 +43,6 @@ import {
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { debounce } from "lodash";
-import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { formatBytes } from "../../database/backups/restore-backup";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

apps/dokploy/components/dashboard/application/volume-backups/show-volume-backups.tsx

@@ -1,3 +1,11 @@
+import {
+	ClipboardList,
+	DatabaseBackup,
+	Loader2,
+	Play,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -15,14 +23,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	DatabaseBackup,
-	Loader2,
-	Play,
-	Trash2,
-} from "lucide-react";
-import { toast } from "sonner";
 import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { HandleVolumeBackups } from "./handle-volume-backups";
 import { RestoreVolumeBackups } from "./restore-volume-backups";

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

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -18,11 +23,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
+
 interface Props {
 	composeId: string;
 }

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

@@ -0,0 +1,241 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@/components/ui/form";
+
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+
+interface Props {
+	composeId: string;
+}
+
+// Schema for Isolated Deployment
+const isolatedSchema = z.object({
+	isolatedDeployment: z.boolean().optional(),
+});
+
+type IsolatedSchema = z.infer<typeof isolatedSchema>;
+
+export const IsolatedDeploymentTab = ({ composeId }: Props) => {
+	const utils = api.useUtils();
+	const [compose, setCompose] = useState<string>("");
+	const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(false);
+	const { mutateAsync, error, isError } =
+		api.compose.isolatedDeployment.useMutation();
+
+	const [isOpenPreview, setIsOpenPreview] = useState<boolean>(false);
+
+	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
+
+	const { data, refetch } = api.compose.one.useQuery(
+		{ composeId },
+		{ enabled: !!composeId },
+	);
+
+	const form = useForm<IsolatedSchema>({
+		defaultValues: {
+			isolatedDeployment: false,
+		},
+		resolver: zodResolver(isolatedSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				isolatedDeployment: data?.isolatedDeployment || false,
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+	const onSubmit = async (formData: IsolatedSchema) => {
+		await updateCompose({
+			composeId,
+			isolatedDeployment: formData?.isolatedDeployment || false,
+		})
+			.then(async (_data) => {
+				await refetch();
+				toast.success("Compose updated");
+			})
+			.catch(() => {
+				toast.error("Error updating the compose");
+			});
+	};
+
+	const generatePreview = async () => {
+		setIsOpenPreview(true);
+		setIsPreviewLoading(true);
+		try {
+			await mutateAsync({
+				composeId,
+				suffix: data?.appName || "",
+			}).then(async (data) => {
+				await utils.project.all.invalidate();
+				setCompose(data);
+			});
+		} catch {
+			toast.error("Error generating preview");
+			setIsOpenPreview(false);
+		} finally {
+			setIsPreviewLoading(false);
+		}
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
+				<CardDescription>
+					Configure isolated deployment to the compose file.
+					<div className="text-sm text-muted-foreground flex flex-col gap-2">
+						<span>
+							This feature creates an isolated environment for your deployment
+							by adding unique prefixes to all resources. It establishes a
+							dedicated network based on your compose file's name, ensuring your
+							services run in isolation. This prevents conflicts when running
+							multiple instances of the same template or services with identical
+							names.
+						</span>
+						<div className="space-y-4">
+							<div>
+								<h4 className="font-medium mb-2">
+									Resources that will be isolated:
+								</h4>
+								<ul className="list-disc list-inside">
+									<li>Docker networks</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="space-y-4">
+					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							id="isolated-deployment-form"
+							className="grid w-full gap-4"
+						>
+							{isError && (
+								<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
+									<AlertTriangle className="text-red-600 dark:text-red-400" />
+									<span className="text-sm text-red-600 dark:text-red-400">
+										{error?.message}
+									</span>
+								</div>
+							)}
+
+							<div className="flex flex-col lg:flex-col gap-4 w-full">
+								<div>
+									<FormField
+										control={form.control}
+										name="isolatedDeployment"
+										render={({ field }) => (
+											<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												<div className="space-y-0.5">
+													<FormLabel>
+														Enable Isolated Deployment ({data?.appName})
+													</FormLabel>
+													<FormDescription>
+														Enable isolated deployment to the compose file.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								</div>
+
+								<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
+									<Button
+										form="isolated-deployment-form"
+										type="submit"
+										className="lg:w-fit"
+										isLoading={form.formState.isSubmitting}
+									>
+										Save
+									</Button>
+								</div>
+							</div>
+
+							<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
+								<Button
+									onClick={generatePreview}
+									isLoading={isPreviewLoading}
+									variant="secondary"
+									className="lg:w-fit"
+								>
+									Preview Compose
+								</Button>
+								<Dialog open={isOpenPreview} onOpenChange={setIsOpenPreview}>
+									<DialogContent className="sm:max-w-6xl max-h-[80vh]">
+										<DialogHeader>
+											<DialogTitle>Isolated Deployment Preview</DialogTitle>
+											<DialogDescription>
+												Preview of the compose file with isolated deployment
+												configuration
+											</DialogDescription>
+										</DialogHeader>
+										<div className="flex flex-col gap-4 overflow-auto">
+											{isPreviewLoading ? (
+												<div className="flex flex-col items-center justify-center py-12 gap-4">
+													<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
+													<p className="text-muted-foreground">
+														Generating compose preview...
+													</p>
+												</div>
+											) : (
+												<pre>
+													<CodeEditor
+														value={compose || ""}
+														language="yaml"
+														readOnly
+														height="60vh"
+													/>
+												</pre>
+											)}
+										</div>
+									</DialogContent>
+								</Dialog>
+							</div>
+						</form>
+					</Form>
+				</div>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -1,3 +1,13 @@
+import type { ServiceType } from "@dokploy/server/db/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { Copy, Trash2 } from "lucide-react";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -20,15 +30,6 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import type { ServiceType } from "@dokploy/server/db/schema";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { Copy, Trash2 } from "lucide-react";
-import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const deleteComposeSchema = z.object({
 	projectName: z.string().min(1, {
@@ -114,6 +115,12 @@ export const DeleteService = ({ id, type }: Props) => {
 		}
 	};
 
+	const isDisabled =
+		(data &&
+			"applicationStatus" in data &&
+			data?.applicationStatus === "running") ||
+		(data && "composeStatus" in data && data?.composeStatus === "running");
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -202,6 +209,12 @@ export const DeleteService = ({ id, type }: Props) => {
 						</form>
 					</Form>
 				</div>
+				{isDisabled && (
+					<AlertBlock type="warning" className="w-full mt-5">
+						Cannot delete the service while it is running. Please wait for the
+						build to finish and then try again.
+					</AlertBlock>
+				)}
 				<DialogFooter>
 					<Button
 						variant="secondary"
@@ -211,8 +224,10 @@ export const DeleteService = ({ id, type }: Props) => {
 					>
 						Cancel
 					</Button>
+
 					<Button
 						isLoading={isLoading}
+						disabled={isDisabled}
 						form="hook-form-delete-compose"
 						type="submit"
 						variant="destructive"

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

@@ -1,3 +1,7 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
@@ -8,10 +12,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 
 interface Props {

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

@@ -1,3 +1,8 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -8,13 +13,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
-import { ShowUtilities } from "./show-utilities";
 
 interface Props {
 	composeId: string;
@@ -142,9 +141,7 @@ services:
 					</form>
 				</Form>
 				<div className="flex justify-between flex-col lg:flex-row gap-2">
-					<div className="w-full flex flex-col lg:flex-row gap-4 items-end">
-						<ShowUtilities composeId={composeId} />
-					</div>
+					<div className="w-full flex flex-col lg:flex-row gap-4 items-end" />
 					<Button
 						type="submit"
 						form="hook-form-save-compose-file"

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const BitbucketProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,11 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GitIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -27,14 +35,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GiteaIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -41,13 +48,6 @@ import {
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import type { Repository } from "@/utils/gitea-utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GiteaProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -39,13 +46,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GithubProviderSchema = z.object({
 	composePath: z.string().min(1),

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

@@ -1,3 +1,10 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
@@ -40,13 +47,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const GitlabProviderSchema = z.object({
 	composePath: z.string().min(1),

apps/dokploy/components/dashboard/compose/general/generic/show.tsx

@@ -1,18 +1,18 @@
+import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
 import {
 	BitbucketIcon,
-	GitIcon,
 	GiteaIcon,
 	GithubIcon,
+	GitIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";

apps/dokploy/components/dashboard/compose/general/isolated-deployment.tsx

@@ -1,188 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
-import { Button } from "@/components/ui/button";
-import {
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-} from "@/components/ui/form";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-interface Props {
-	composeId: string;
-}
-
-const schema = z.object({
-	isolatedDeployment: z.boolean().optional(),
-});
-
-type Schema = z.infer<typeof schema>;
-
-export const IsolatedDeployment = ({ composeId }: Props) => {
-	const utils = api.useUtils();
-	const [compose, setCompose] = useState<string>("");
-	const { mutateAsync, error, isError } =
-		api.compose.isolatedDeployment.useMutation();
-
-	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
-
-	const { data, refetch } = api.compose.one.useQuery(
-		{ composeId },
-		{ enabled: !!composeId },
-	);
-
-	console.log(data);
-
-	const form = useForm<Schema>({
-		defaultValues: {
-			isolatedDeployment: false,
-		},
-		resolver: zodResolver(schema),
-	});
-
-	useEffect(() => {
-		randomizeCompose();
-		if (data) {
-			form.reset({
-				isolatedDeployment: data?.isolatedDeployment || false,
-			});
-		}
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
-
-	const onSubmit = async (formData: Schema) => {
-		await updateCompose({
-			composeId,
-			isolatedDeployment: formData?.isolatedDeployment || false,
-		})
-			.then(async (_data) => {
-				await randomizeCompose();
-				await refetch();
-				toast.success("Compose updated");
-			})
-			.catch(() => {
-				toast.error("Error updating the compose");
-			});
-	};
-
-	const randomizeCompose = async () => {
-		await mutateAsync({
-			composeId,
-			suffix: data?.appName || "",
-		}).then(async (data) => {
-			await utils.project.all.invalidate();
-			setCompose(data);
-		});
-	};
-
-	return (
-		<>
-			<DialogHeader>
-				<DialogTitle>Isolate Deployment</DialogTitle>
-				<DialogDescription>
-					Use this option to isolate the deployment of this compose file.
-				</DialogDescription>
-			</DialogHeader>
-			<div className="text-sm text-muted-foreground flex flex-col gap-2">
-				<span>
-					This feature creates an isolated environment for your deployment by
-					adding unique prefixes to all resources. It establishes a dedicated
-					network based on your compose file's name, ensuring your services run
-					in isolation. This prevents conflicts when running multiple instances
-					of the same template or services with identical names.
-				</span>
-				<div className="space-y-4">
-					<div>
-						<h4 className="font-medium mb-2">
-							Resources that will be isolated:
-						</h4>
-						<ul className="list-disc list-inside">
-							<li>Docker volumes</li>
-							<li>Docker networks</li>
-						</ul>
-					</div>
-				</div>
-			</div>
-			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					id="hook-form-add-project"
-					className="grid w-full gap-4"
-				>
-					{isError && (
-						<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
-							<AlertTriangle className="text-red-600 dark:text-red-400" />
-							<span className="text-sm text-red-600 dark:text-red-400">
-								{error?.message}
-							</span>
-						</div>
-					)}
-
-					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
-						<div>
-							<FormField
-								control={form.control}
-								name="isolatedDeployment"
-								render={({ field }) => (
-									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-										<div className="space-y-0.5">
-											<FormLabel>
-												Enable Isolated Deployment ({data?.appName})
-											</FormLabel>
-											<FormDescription>
-												Enable isolated deployment to the compose file.
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Switch
-												checked={field.value}
-												onCheckedChange={field.onChange}
-											/>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-						</div>
-
-						<div className="flex flex-col lg:flex-row  gap-4 w-full items-end justify-end">
-							<Button
-								form="hook-form-add-project"
-								type="submit"
-								className="lg:w-fit"
-							>
-								Save
-							</Button>
-						</div>
-					</div>
-					<div className="flex flex-col gap-4">
-						<Label>Preview</Label>
-						<pre>
-							<CodeEditor
-								value={compose || ""}
-								language="yaml"
-								readOnly
-								height="50rem"
-							/>
-						</pre>
-					</div>
-				</form>
-			</Form>
-		</>
-	);
-};

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -18,12 +24,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 interface Props {
 	composeId: string;

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

@@ -62,7 +62,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<AlertBlock type="info">
+				<AlertBlock type="info" className="mb-4">
 					Preview your docker-compose file with added domains. Note: At least
 					one domain must be specified for this conversion to take effect.
 				</AlertBlock>

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

@@ -1,46 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useState } from "react";
-import { IsolatedDeployment } from "./isolated-deployment";
-import { RandomizeCompose } from "./randomize-compose";
-
-interface Props {
-	composeId: string;
-}
-
-export const ShowUtilities = ({ composeId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="ghost">Show Utilities</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl">
-				<DialogHeader>
-					<DialogTitle>Utilities </DialogTitle>
-					<DialogDescription>Modify the application data</DialogDescription>
-				</DialogHeader>
-				<Tabs defaultValue="isolated">
-					<TabsList className="grid w-full grid-cols-2">
-						<TabsTrigger value="isolated">Isolated Deployment</TabsTrigger>
-						<TabsTrigger value="randomize">Randomize Compose</TabsTrigger>
-					</TabsList>
-					<TabsContent value="randomize" className="pt-5">
-						<RandomizeCompose composeId={composeId} />
-					</TabsContent>
-					<TabsContent value="isolated" className="pt-5">
-						<IsolatedDeployment composeId={composeId} />
-					</TabsContent>
-				</Tabs>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -9,6 +9,7 @@ import {
 import { api } from "@/utils/api";
 import { ComposeActions } from "./actions";
 import { ShowProviderFormCompose } from "./generic/show";
+
 interface Props {
 	composeId: string;
 }

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -19,9 +22,6 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -18,9 +21,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateComposeSchema = z.object({
 	name: z.string().min(1, {

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

@@ -1,3 +1,17 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	CheckIcon,
+	ChevronsUpDown,
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusIcon,
+	RefreshCw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -48,19 +62,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-	DatabaseZap,
-	Info,
-	PenBoxIcon,
-	PlusIcon,
-	RefreshCw,
-} from "lucide-react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { commonCronExpressions } from "../../application/schedules/handle-schedules";
 
 type CacheType = "cache" | "fetch";

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

@@ -1,3 +1,18 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import {
+	CheckIcon,
+	ChevronsUpDown,
+	Copy,
+	DatabaseZap,
+	RefreshCw,
+	RotateCcw,
+} from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -47,21 +62,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import copy from "copy-to-clipboard";
-import { debounce } from "lodash";
-import {
-	CheckIcon,
-	ChevronsUpDown,
-	Copy,
-	DatabaseZap,
-	RefreshCw,
-	RotateCcw,
-} from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 

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

@@ -1,3 +1,13 @@
+import {
+	ClipboardList,
+	Database,
+	DatabaseBackup,
+	Play,
+	Trash2,
+} from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "sonner";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -22,16 +32,6 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import {
-	ClipboardList,
-	Database,
-	DatabaseBackup,
-	Play,
-	Trash2,
-} from "lucide-react";
-import Link from "next/link";
-import { useState } from "react";
-import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { ShowDeploymentsModal } from "../../application/deployments/show-deployments-modal";
 import { HandleBackup } from "./handle-backup";

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

@@ -1,3 +1,7 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { debounce } from "lodash";
+import { CheckIcon, Hash } from "lucide-react";
+import React, { useCallback, useRef } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -7,10 +11,6 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { Command as CommandPrimitive } from "cmdk";
-import { debounce } from "lodash";
-import { CheckIcon, Hash } from "lucide-react";
-import React, { useCallback, useRef } from "react";
 
 const lineCountOptions = [
 	{ label: "100 lines", value: 100 },

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

@@ -1,3 +1,5 @@
+import dynamic from "next/dynamic";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,
@@ -7,8 +9,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import dynamic from "next/dynamic";
-import type React from "react";
 export const DockerLogsId = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,5 @@
+import dynamic from "next/dynamic";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,
@@ -7,8 +9,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import dynamic from "next/dynamic";
-import type React from "react";
 export const DockerLogsId = dynamic(
 	() =>
 		import("@/components/dashboard/docker/logs/docker-logs-id").then(

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

@@ -1,3 +1,4 @@
+import { CheckIcon } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -14,7 +15,6 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
-import { CheckIcon } from "lucide-react";
 
 export type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
 

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

@@ -1,3 +1,5 @@
+import { CheckIcon } from "lucide-react";
+import type React from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,8 +15,6 @@ import {
 } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
-import { CheckIcon } from "lucide-react";
-import type React from "react";
 
 interface StatusLogsFilterProps {
 	value?: string[];

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

@@ -1,3 +1,5 @@
+import { FancyAnsi } from "fancy-ansi";
+import { escapeRegExp } from "lodash";
 import { Badge } from "@/components/ui/badge";
 import {
 	Tooltip,
@@ -7,9 +9,7 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { FancyAnsi } from "fancy-ansi";
-import { escapeRegExp } from "lodash";
-import { type LogLine, getLogType } from "./utils";
+import { getLogType, type LogLine } from "./utils";
 
 interface LogLineProps {
 	log: LogLine;

apps/dokploy/components/dashboard/docker/show/colums.tsx

@@ -1,6 +1,6 @@
 import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
-
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -8,8 +8,6 @@ import {
 	DropdownMenuLabel,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-
-import { Badge } from "@/components/ui/badge";
 import { ShowContainerConfig } from "../config/show-container-config";
 import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
 import { DockerTerminalModal } from "../terminal/docker-terminal-modal";

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -1,3 +1,16 @@
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table";
+import { ChevronDown, Container } from "lucide-react";
+import * as React from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -21,20 +34,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import { type RouterOutputs, api } from "@/utils/api";
-import {
-	type ColumnFiltersState,
-	type SortingState,
-	type VisibilityState,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable,
-} from "@tanstack/react-table";
-import { ChevronDown, Container } from "lucide-react";
-import * as React from "react";
+import { api, type RouterOutputs } from "@/utils/api";
 import { columns } from "./colums";
 export type Container = NonNullable<
 	RouterOutputs["docker"]["getContainers"]

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

@@ -1,3 +1,5 @@
+import dynamic from "next/dynamic";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -9,8 +11,6 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import dynamic from "next/dynamic";
-import { useState } from "react";
 
 const Terminal = dynamic(
 	() => import("./docker-terminal").then((e) => e.DockerTerminal),

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

@@ -2,9 +2,9 @@ import { Terminal } from "@xterm/xterm";
 import React, { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AttachAddon } from "@xterm/addon-attach";
 import { useTheme } from "next-themes";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface Props {
 	id: string;

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

@@ -1,7 +1,12 @@
-import { Button } from "@/components/ui/button";
-
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Form,
 	FormControl,
@@ -12,12 +17,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { validateAndFormatYAML } from "../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerMiddlewareConfigSchema = z.object({

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

@@ -1,3 +1,5 @@
+import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
+import React from "react";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
 	Card,
@@ -8,8 +10,6 @@ import {
 } from "@/components/ui/card";
 import { Tree } from "@/components/ui/file-tree";
 import { api } from "@/utils/api";
-import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
-import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 
 interface Props {

apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx

@@ -1,5 +1,24 @@
 "use client";
 
+import copy from "copy-to-clipboard";
+import { format } from "date-fns";
+import {
+	Building2,
+	Calendar,
+	CheckIcon,
+	ChevronsUpDown,
+	Copy,
+	CreditCard,
+	Fingerprint,
+	Key,
+	Server,
+	Settings2,
+	Shield,
+	UserIcon,
+	XIcon,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { Logo } from "@/components/shared/logo";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
@@ -26,25 +45,6 @@ import {
 import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import copy from "copy-to-clipboard";
-import { format } from "date-fns";
-import {
-	Building2,
-	Calendar,
-	CheckIcon,
-	ChevronsUpDown,
-	Copy,
-	CreditCard,
-	Fingerprint,
-	Key,
-	Server,
-	Settings2,
-	Shield,
-	UserIcon,
-	XIcon,
-} from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 
 type User = typeof authClient.$Infer.Session.user;
 

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
@@ -19,12 +25,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {

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

@@ -1,3 +1,7 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
@@ -9,10 +13,6 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateMariadbSchema = z.object({
 	name: z.string().min(1, {

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
 import { Button } from "@/components/ui/button";
@@ -19,12 +25,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const DockerProviderSchema = z.object({
 	externalPort: z.preprocess((a) => {

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

@@ -1,3 +1,7 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Button } from "@/components/ui/button";
@@ -9,12 +13,9 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
 interface Props {
 	mongoId: string;
 }

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

@@ -1,3 +1,9 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,12 +26,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 
 const updateMongoSchema = z.object({
 	name: z.string().min(1, {

apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx

@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
 import { convertMemoryToBytes } from "./show-free-container-monitoring";
+
 interface Props {
 	acummulativeData: DockerStatsJSON["memory"];
 	memoryLimitGB: number;

apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx

@@ -9,6 +9,7 @@ import {
 	YAxis,
 } from "recharts";
 import type { DockerStatsJSON } from "./show-free-container-monitoring";
+
 interface Props {
 	acummulativeData: DockerStatsJSON["network"];
 }

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

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -18,9 +21,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import { ContainerFreeMonitoring } from "./show-free-container-monitoring";
 
 interface Props {

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

@@ -1,7 +1,7 @@
+import { useEffect, useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
 import { DockerBlockChart } from "./docker-block-chart";
 import { DockerCpuChart } from "./docker-cpu-chart";
 import { DockerDiskChart } from "./docker-disk-chart";

apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface ContainerMetric {
 	timestamp: string;

apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface ContainerMetric {
 	timestamp: string;

apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface ContainerMetric {
 	timestamp: string;

apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface ContainerMetric {
 	timestamp: string;

apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx

@@ -1,3 +1,6 @@
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { badgeStateColor } from "@/components/dashboard/application/logs/show";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -19,9 +22,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import { ContainerPaidMonitoring } from "./show-paid-container-monitoring";
 
 interface Props {

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

@@ -1,3 +1,5 @@
+import { Cpu, HardDrive, Loader2, MemoryStick, Network } from "lucide-react";
+import { useEffect, useState } from "react";
 import { Card } from "@/components/ui/card";
 import {
 	Select,
@@ -7,8 +9,6 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Cpu, HardDrive, Loader2, MemoryStick, Network } from "lucide-react";
-import { useEffect, useState } from "react";
 import { ContainerBlockChart } from "./container-block-chart";
 import { ContainerCPUChart } from "./container-cpu-chart";
 import { ContainerMemoryChart } from "./container-memory-chart";

apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface CPUChartProps {
 	data: any[];

apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -11,7 +12,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface MemoryChartProps {
 	data: any[];

apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx

@@ -1,3 +1,4 @@
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import {
 	Card,
 	CardContent,
@@ -13,7 +14,6 @@ import {
 	ChartTooltip,
 } from "@/components/ui/chart";
 import { formatTimestamp } from "@/lib/utils";
-import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 interface NetworkChartProps {
 	data: any[];