feat(preview-deployment): enhance external deployment support

- Add support for external preview deployments with optional GitHub comment handling
- Modify deployment services to conditionally update GitHub issue comments
- Update queue types and deployment worker to handle external deployment flag
- Refactor preview deployment creation to support external deployments
- Improve preview deployment router with more flexible deployment creation logic

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report
-labels: ["bug"]
+labels: ["needs-triage🔍"]
 body:
   - type: markdown
     attributes:
@@ -62,6 +62,7 @@ body:
         - "Docker"
         - "Remote server"
         - "Local Development"
+        - "Cloud Version"
     validations:
       required: true
   - type: dropdown

.github/workflows/dokploy.yml

@@ -2,7 +2,7 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary, "feat/monitoring"]
+    branches: [main, canary, "feat/better-auth-2"]
 
 env:
   IMAGE_NAME: dokploy/dokploy

CONTRIBUTING.md

@@ -138,11 +138,18 @@ curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && ./install.sh
 ```
 
+```bash
+# Install Railpack
+curl -sSL https://railpack.com/install.sh | sh
+```
+
 ```bash
 # Install Buildpacks
 curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
 ```
 
+
+
 ## Pull Request
 
 - The `main` branch is the source of truth and should always reflect the latest stable release.

Dockerfile

@@ -55,6 +55,10 @@ RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && ./install.sh \
     && pnpm install -g tsx
 
+# Install Railpack
+ARG RAILPACK_VERSION=0.0.37
+RUN curl -sSL https://railpack.com/install.sh | bash
+
 # Install buildpacks
 COPY --from=buildpacksio/pack:0.35.0 /usr/local/bin/pack /usr/local/bin/pack
 

README.md

@@ -74,6 +74,8 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
     <a href="https://lightnode.com/?ref=dokploy" target="_blank" style="display: inline-block;">
     <img src=".github/sponsors/light-node.webp" alt="Lightnode" height="70"/>
   </a>
+
+  
 </div>
 
 ### Premium Supporters 🥇
@@ -93,8 +95,11 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 <a href="https://cloudblast.io/?ref=dokploy "><img src="https://cloudblast.io/img/logo-icon.193cf13e.svg" width="250px" alt="Cloudblast.io"/></a>
 <a href="https://startupfa.me/?ref=dokploy "><img src=".github/sponsors/startupfame.png" width="65px" alt="Startupfame"/></a>
 <a href="https://itsdb-center.com?ref=dokploy "><img src=".github/sponsors/its.png" width="65px" alt="Itsdb-center"/></a>
+<a href="https://openalternative.co/?ref=dokploy "><img src=".github/sponsors/openalternative.png" width="65px" alt="Openalternative"/></a>
+<a href="https://synexa.ai/?ref=dokploy"><img src=".github/sponsors/synexa.png" width="65px" alt="Synexa"/></a>
 </div>
 
+
 ### Community Backers 🤝
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">

apps/api/src/index.ts

@@ -28,7 +28,7 @@ app.use(async (c, next) => {
 
 app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
 	const data = c.req.valid("json");
-	const res = queue.add(data, { groupName: data.serverId });
+	queue.add(data, { groupName: data.serverId });
 	return c.json(
 		{
 			message: "Deployment Added",

apps/api/src/utils.ts

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

apps/dokploy/__test__/compose/config/config.test.ts

@@ -1,5 +1,5 @@
 import { generateRandomHash } from "@dokploy/server";
-import { addSuffixToAllConfigs, addSuffixToConfigsRoot } from "@dokploy/server";
+import { addSuffixToAllConfigs } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";

apps/dokploy/__test__/compose/network/network-root.test.ts

@@ -293,29 +293,6 @@ networks:
   dokploy-network:
 `;
 
-const expectedComposeFile7 = `
-version: "3.8"
-
-services:
-  web:
-    image: nginx:latest
-    networks:
-      - dokploy-network
-
-networks:
-  dokploy-network:
-    driver: bridge
-    driver_opts:
-      com.docker.network.driver.mtu: 1200
-
-  backend:
-    driver: bridge
-    attachable: true
-
-  external_network:
-    external: true
-    name: dokploy-network
-`;
 test("It shoudn't add suffix to dokploy-network", () => {
 	const composeData = load(composeFile7) as ComposeSpecification;
 

apps/dokploy/__test__/compose/secrets/secret-root.test.ts

@@ -1,7 +1,7 @@
 import { generateRandomHash } from "@dokploy/server";
 import { addSuffixToSecretsRoot } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
-import { dump, load } from "js-yaml";
+import { load } from "js-yaml";
 import { expect, test } from "vitest";
 
 test("Generate random hash with 8 characters", () => {

apps/dokploy/__test__/compose/volume/volume.test.ts

@@ -1,8 +1,4 @@
-import { generateRandomHash } from "@dokploy/server";
-import {
-	addSuffixToAllVolumes,
-	addSuffixToVolumesInServices,
-} from "@dokploy/server";
+import { addSuffixToAllVolumes } from "@dokploy/server";
 import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";

apps/dokploy/__test__/drop/drop.test.test.ts

@@ -45,7 +45,7 @@ const baseApp: ApplicationNested = {
 	previewWildcard: "",
 	project: {
 		env: "",
-		adminId: "",
+		organizationId: "",
 		name: "",
 		description: "",
 		createdAt: "",

apps/dokploy/__test__/traefik/server/update-server-config.test.ts

@@ -5,7 +5,7 @@ vi.mock("node:fs", () => ({
 	default: fs,
 }));
 
-import type { Admin, FileConfig } from "@dokploy/server";
+import type { FileConfig, User } from "@dokploy/server";
 import {
 	createDefaultServerTraefikConfig,
 	loadOrCreateConfig,
@@ -13,7 +13,7 @@ import {
 } from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
-const baseAdmin: Admin = {
+const baseAdmin: User = {
 	enablePaidFeatures: false,
 	metricsConfig: {
 		containers: {
@@ -40,19 +40,30 @@ const baseAdmin: Admin = {
 	cleanupCacheApplications: false,
 	cleanupCacheOnCompose: false,
 	cleanupCacheOnPreviews: false,
-	createdAt: "",
-	authId: "",
-	adminId: "string",
+	createdAt: new Date(),
 	serverIp: null,
 	certificateType: "none",
 	host: null,
 	letsEncryptEmail: null,
 	sshPrivateKey: null,
 	enableDockerCleanup: false,
-	enableLogRotation: false,
+	logCleanupCron: null,
 	serversQuantity: 0,
 	stripeCustomerId: "",
 	stripeSubscriptionId: "",
+	banExpires: new Date(),
+	banned: true,
+	banReason: "",
+	email: "",
+	expirationDate: "",
+	id: "",
+	isRegistered: false,
+	name: "",
+	createdAt2: new Date().toISOString(),
+	emailVerified: false,
+	image: "",
+	updatedAt: new Date(),
+	twoFactorEnabled: false,
 };
 
 beforeEach(() => {
@@ -103,8 +114,6 @@ test("Should not touch config without host", () => {
 });
 
 test("Should remove websecure if https rollback to http", () => {
-	const originalConfig: FileConfig = loadOrCreateConfig("dokploy");
-
 	updateServerTraefik(
 		{ ...baseAdmin, certificateType: "letsencrypt" },
 		"example.com",

apps/dokploy/__test__/traefik/traefik.test.ts

@@ -26,7 +26,7 @@ const baseApp: ApplicationNested = {
 	previewWildcard: "",
 	project: {
 		env: "",
-		adminId: "",
+		organizationId: "",
 		name: "",
 		description: "",
 		createdAt: "",

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

@@ -1,132 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-
-import { CardTitle } from "@/components/ui/card";
-import {
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSeparator,
-	InputOTPSlot,
-} from "@/components/ui/input-otp";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { REGEXP_ONLY_DIGITS } from "input-otp";
-import { AlertTriangle } from "lucide-react";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const Login2FASchema = z.object({
-	pin: z.string().min(6, {
-		message: "Pin is required",
-	}),
-});
-
-type Login2FA = z.infer<typeof Login2FASchema>;
-
-interface Props {
-	authId: string;
-}
-
-export const Login2FA = ({ authId }: Props) => {
-	const { push } = useRouter();
-
-	const { mutateAsync, isLoading, isError, error } =
-		api.auth.verifyLogin2FA.useMutation();
-
-	const form = useForm<Login2FA>({
-		defaultValues: {
-			pin: "",
-		},
-		resolver: zodResolver(Login2FASchema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			pin: "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
-
-	const onSubmit = async (data: Login2FA) => {
-		await mutateAsync({
-			pin: data.pin,
-			id: authId,
-		})
-			.then(() => {
-				toast.success("Signin successfully", {
-					duration: 2000,
-				});
-
-				push("/dashboard/projects");
-			})
-			.catch(() => {
-				toast.error("Signin failed", {
-					duration: 2000,
-				});
-			});
-	};
-	return (
-		<Form {...form}>
-			<form
-				onSubmit={form.handleSubmit(onSubmit)}
-				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>
-				)}
-				<CardTitle className="text-xl font-bold">2FA Login</CardTitle>
-
-				<FormField
-					control={form.control}
-					name="pin"
-					render={({ field }) => (
-						<FormItem className="flex flex-col  max-sm:items-center">
-							<FormLabel>Pin</FormLabel>
-							<FormControl>
-								<div className="flex">
-									<InputOTP
-										maxLength={6}
-										{...field}
-										pattern={REGEXP_ONLY_DIGITS}
-									>
-										<InputOTPGroup>
-											<InputOTPSlot index={0} className="border-border" />
-											<InputOTPSlot index={1} className="border-border" />
-											<InputOTPSlot index={2} className="border-border" />
-											<InputOTPSlot index={3} className="border-border" />
-											<InputOTPSlot index={4} className="border-border" />
-											<InputOTPSlot index={5} className="border-border" />
-										</InputOTPGroup>
-									</InputOTP>
-								</div>
-							</FormControl>
-							<FormDescription>
-								Please enter the 6 digits code provided by your authenticator
-								app.
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button isLoading={isLoading} type="submit">
-					Submit 2FA
-				</Button>
-			</form>
-		</Form>
-	);
-};

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

@@ -130,7 +130,7 @@ const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
 			}
 			try {
 				return JSON.parse(str);
-			} catch (e) {
+			} catch (_e) {
 				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
 				return z.NEVER;
 			}

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

@@ -29,7 +29,6 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Server } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -17,7 +17,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Rss, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandlePorts } from "./handle-ports";
 interface Props {

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

@@ -9,7 +9,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Split, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandleRedirect } from "./handle-redirect";
 

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

@@ -9,7 +9,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { LockKeyhole, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandleSecurity } from "./handle-security";
 

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

@@ -25,7 +25,7 @@ import {
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InfoIcon } from "lucide-react";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { File, Loader2 } from "lucide-react";
-import React from "react";
 import { UpdateTraefikConfig } from "./update-traefik-config";
 interface Props {
 	applicationId: string;

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

@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Package, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";

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

@@ -21,7 +21,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, Pencil } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -77,7 +77,7 @@ export const UpdateVolume = ({
 	serviceType,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
+	const _utils = api.useUtils();
 	const { data } = api.mounts.one.useQuery(
 		{
 			mountId,

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -25,6 +26,7 @@ enum BuildType {
 	paketo_buildpacks = "paketo_buildpacks",
 	nixpacks = "nixpacks",
 	static = "static",
+	railpack = "railpack",
 }
 
 const mySchema = z.discriminatedUnion("buildType", [
@@ -53,6 +55,9 @@ const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
 		buildType: z.literal("static"),
 	}),
+	z.object({
+		buildType: z.literal("railpack"),
+	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
@@ -173,6 +178,15 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 														Dockerfile
 													</FormLabel>
 												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="railpack" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Railpack{" "}
+														<Badge className="ml-1 text-xs px-1">New</Badge>
+													</FormLabel>
+												</FormItem>
 												<FormItem className="flex items-center space-x-3 space-y-0">
 													<FormControl>
 														<RadioGroupItem value="nixpacks" />

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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 
 interface Props {

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

@@ -73,15 +73,14 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col gap-4">
-						{deployments?.map((deployment) => (
+						{deployments?.map((deployment, index) => (
 							<div
 								key={deployment.deploymentId}
 								className="flex items-center justify-between rounded-lg border p-4 gap-2"
 							>
 								<div className="flex flex-col">
 									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-										{deployment.status}
-
+										{index + 1}. {deployment.status}
 										<StatusTooltip
 											status={deployment?.status}
 											className="size-2.5"

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

@@ -18,7 +18,7 @@ import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
-import React, { type CSSProperties, useEffect, useState } from "react";
+import { type CSSProperties, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import { Secrets } from "@/components/ui/secrets";
 import { api } from "@/utils/api";

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

@@ -84,7 +84,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 		data: repositories,
 		isLoading: isLoadingRepositories,
 		error,
-		isError,
 	} = api.bitbucket.getBitbucketRepositories.useQuery(
 		{
 			bitbucketId,

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

@@ -11,7 +11,7 @@ import {
 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, LockIcon, UploadCloud } from "lucide-react";
+import { GitBranch, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";

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

@@ -7,7 +7,6 @@ import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
-import React from "react";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 interface Props {
@@ -28,8 +27,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 	const { mutateAsync: stop, isLoading: isStopping } =
 		api.application.stop.useMutation();
 
-	const { mutateAsync: deploy, isLoading: isDeploying } =
-		api.application.deploy.useMutation();
+	const { mutateAsync: deploy } = api.application.deploy.useMutation();
 
 	const { mutateAsync: reload, isLoading: isReloading } =
 		api.application.reload.useMutation();

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

@@ -5,7 +5,6 @@ import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,

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

@@ -22,7 +22,6 @@ import {
 	RocketIcon,
 	Trash2,
 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { AddPreviewDomain } from "./add-preview-domain";

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

@@ -279,7 +279,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 								<FormField
 									control={form.control}
 									name="env"
-									render={({ field }) => (
+									render={() => (
 										<FormItem>
 											<FormControl>
 												<Secrets

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -19,7 +19,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -60,7 +60,7 @@ export const DeleteService = ({ id, type }: Props) => {
 		compose: () =>
 			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
 	};
-	const { data, refetch } = queryMap[type]
+	const { data } = queryMap[type]
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 

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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 
 interface Props {

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

@@ -118,7 +118,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 														await deleteDomain({
 															domainId: item.domainId,
 														})
-															.then((data) => {
+															.then((_data) => {
 																refetch();
 																toast.success("Domain deleted successfully");
 															})

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

@@ -14,7 +14,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
-import { RandomizeCompose } from "./randomize-compose";
+import { ShowUtilities } from "./show-utilities";
 
 interface Props {
 	composeId: string;
@@ -35,8 +35,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 		{ enabled: !!composeId },
 	);
 
-	const { mutateAsync, isLoading, error, isError } =
-		api.compose.update.useMutation();
+	const { mutateAsync, isLoading } = api.compose.update.useMutation();
 
 	const form = useForm<AddComposeFile>({
 		defaultValues: {
@@ -76,7 +75,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 					composeId,
 				});
 			})
-			.catch((e) => {
+			.catch((_e) => {
 				toast.error("Error updating the Compose config");
 			});
 	};
@@ -125,7 +124,7 @@ services:
 				</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">
-						<RandomizeCompose composeId={composeId} />
+						<ShowUtilities composeId={composeId} />
 					</div>
 					<Button
 						type="submit"

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

@@ -84,7 +84,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 		data: repositories,
 		isLoading: isLoadingRepositories,
 		error,
-		isError,
 	} = api.bitbucket.getBitbucketRepositories.useQuery(
 		{
 			bitbucketId,

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

@@ -7,7 +7,7 @@ import {
 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, LockIcon } from "lucide-react";
+import { CodeIcon, GitBranch } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ComposeFileEditor } from "../compose-file-editor";

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

@@ -0,0 +1,191 @@
+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) => {
+				randomizeCompose();
+				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);
+				toast.success("Compose Isolated");
+			})
+			.catch(() => {
+				toast.error("Error isolating the compose");
+			});
+	};
+
+	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 Randomize ({data?.appName})</FormLabel>
+											<FormDescription>
+												Enable randomize 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,14 +1,10 @@
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
-import { CardTitle } from "@/components/ui/card";
 import {
-	Dialog,
-	DialogContent,
 	DialogDescription,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "@/components/ui/dialog";
 import {
 	Form,
@@ -20,15 +16,10 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSlot,
-} from "@/components/ui/input-otp";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Dices } from "lucide-react";
+import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -48,7 +39,7 @@ type Schema = z.infer<typeof schema>;
 export const RandomizeCompose = ({ composeId }: Props) => {
 	const utils = api.useUtils();
 	const [compose, setCompose] = useState<string>("");
-	const [isOpen, setIsOpen] = useState(false);
+	const [_isOpen, _setIsOpen] = useState(false);
 	const { mutateAsync, error, isError } =
 		api.compose.randomizeCompose.useMutation();
 
@@ -70,6 +61,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	const suffix = form.watch("suffix");
 
 	useEffect(() => {
+		randomizeCompose();
 		if (data) {
 			form.reset({
 				suffix: data?.suffix || "",
@@ -84,7 +76,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 			suffix: formData?.suffix || "",
 			randomize: formData?.randomize || false,
 		})
-			.then(async (data) => {
+			.then(async (_data) => {
 				randomizeCompose();
 				refetch();
 				toast.success("Compose updated");
@@ -110,126 +102,117 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	};
 
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild onClick={() => randomizeCompose()}>
-				<Button className="max-lg:w-full" variant="outline">
-					<Dices className="h-4 w-4" />
-					Randomize Compose
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
-				<DialogHeader>
-					<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
-					<DialogDescription>
-						Use this in case you want to deploy the same compose file and you
-						have conflicts with some property like volumes, networks, etc.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="text-sm text-muted-foreground flex flex-col gap-2">
-					<span>
-						This will randomize the compose file and will add a suffix to the
-						property to avoid conflicts
-					</span>
-					<ul className="list-disc list-inside">
-						<li>volumes</li>
-						<li>networks</li>
-						<li>services</li>
-						<li>configs</li>
-						<li>secrets</li>
-					</ul>
-					<AlertBlock type="info">
-						When you activate this option, we will include a env
-						`COMPOSE_PREFIX` variable to the compose file so you can use it in
-						your compose file.
-					</AlertBlock>
-				</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="suffix"
-									render={({ field }) => (
-										<FormItem className="flex flex-col justify-center max-sm:items-center w-full">
-											<FormLabel>Suffix</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="Enter a suffix (Optional, example: prod)"
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="randomize"
-									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>Apply Randomize</FormLabel>
-												<FormDescription>
-													Apply randomize 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>
-								<Button
-									type="button"
-									variant="secondary"
-									onClick={async () => {
-										await randomizeCompose();
-									}}
-									className="lg:w-fit"
-								>
-									Random
-								</Button>
-							</div>
+		<div className="w-full">
+			<DialogHeader>
+				<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
+				<DialogDescription>
+					Use this in case you want to deploy the same compose file and you have
+					conflicts with some property like volumes, networks, etc.
+				</DialogDescription>
+			</DialogHeader>
+			<div className="text-sm text-muted-foreground flex flex-col gap-2">
+				<span>
+					This will randomize the compose file and will add a suffix to the
+					property to avoid conflicts
+				</span>
+				<ul className="list-disc list-inside">
+					<li>volumes</li>
+					<li>networks</li>
+					<li>services</li>
+					<li>configs</li>
+					<li>secrets</li>
+				</ul>
+				<AlertBlock type="info">
+					When you activate this option, we will include a env `COMPOSE_PREFIX`
+					variable to the compose file so you can use it in your compose file.
+				</AlertBlock>
+			</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>
-						<pre>
-							<CodeEditor
-								value={compose || ""}
-								language="yaml"
-								readOnly
-								height="50rem"
+					)}
+
+					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
+						<div>
+							<FormField
+								control={form.control}
+								name="suffix"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center max-sm:items-center w-full mt-4">
+										<FormLabel>Suffix</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter a suffix (Optional, example: prod)"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</pre>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
+							<FormField
+								control={form.control}
+								name="randomize"
+								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>Apply Randomize</FormLabel>
+											<FormDescription>
+												Apply randomize 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>
+							<Button
+								type="button"
+								variant="secondary"
+								onClick={async () => {
+									await randomizeCompose();
+								}}
+								className="lg:w-fit"
+							>
+								Random
+							</Button>
+						</div>
+					</div>
+					<pre>
+						<CodeEditor
+							value={compose || ""}
+							language="yaml"
+							readOnly
+							height="50rem"
+						/>
+					</pre>
+				</form>
+			</Form>
+		</div>
 	);
 };

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

@@ -40,7 +40,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				.then(() => {
 					refetch();
 				})
-				.catch((err) => {});
+				.catch((_err) => {});
 		}
 	}, [isOpen]);
 

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

@@ -0,0 +1,46 @@
+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="max-h-screen overflow-y-auto 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

@@ -7,7 +7,6 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import React from "react";
 import { ComposeActions } from "./actions";
 import { ShowProviderFormCompose } from "./generic/show";
 interface Props {

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

@@ -18,7 +18,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader, Loader2 } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(

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

@@ -16,7 +16,6 @@ import {
 import { api } from "@/utils/api";
 import { DatabaseBackup, Play, Trash2 } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";

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

@@ -35,7 +35,7 @@ import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, PenBoxIcon, Pencil } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

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

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

@@ -9,7 +9,6 @@ import {
 import { cn } from "@/lib/utils";
 import { FancyAnsi } from "fancy-ansi";
 import { escapeRegExp } from "lodash";
-import React from "react";
 import { type LogLine, getLogType } from "./utils";
 
 interface LogLineProps {
@@ -48,23 +47,12 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 		}
 
 		const htmlContent = fancyAnsi.toHtml(text);
+		const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+
 		const modifiedContent = htmlContent.replace(
-			/<span([^>]*)>([^<]*)<\/span>/g,
-			(match, attrs, content) => {
-				const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
-				if (!content.match(searchRegex)) return match;
-
-				const segments = content.split(searchRegex);
-				const wrappedSegments = segments
-					.map((segment: string) =>
-						segment.toLowerCase() === term.toLowerCase()
-							? `<span${attrs} class="bg-yellow-200/50 dark:bg-yellow-900/50">${segment}</span>`
-							: segment,
-					)
-					.join("");
-
-				return `<span${attrs}>${wrappedSegments}</span>`;
-			},
+			searchRegex,
+			(match) =>
+				`<span class="bg-orange-200/80 dark:bg-orange-900/80 font-bold">${match}</span>`,
 		);
 
 		return (

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

@@ -1,6 +1,5 @@
 import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
-import * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import {

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

@@ -1,18 +1,3 @@
-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 { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -37,6 +22,19 @@ import {
 	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 { columns } from "./colums";
 export type Container = NonNullable<
 	RouterOutputs["docker"]["getContainers"]

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

@@ -7,9 +7,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Tree } from "@/components/ui/file-tree";
-import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { FileIcon, Folder, Link, Loader2, Workflow } from "lucide-react";
+import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
 import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "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/general/show-internal-mariadb-credentials.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	mariadbId: string;

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "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/mongo/general/show-internal-mongo-credentials.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	mongoId: string;

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

@@ -1,6 +1,7 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-	Card,
 	CardContent,
 	CardDescription,
 	CardHeader,
@@ -96,7 +97,10 @@ export const ComposeFreeMonitoring = ({
 										key={container.containerId}
 										value={container.name}
 									>
-										{container.name} ({container.containerId}) {container.state}
+										{container.name} ({container.containerId}){" "}
+										<Badge variant={badgeStateColor(container.state)}>
+											{container.state}
+										</Badge>
 									</SelectItem>
 								))}
 								<SelectLabel>Containers ({data?.length})</SelectLabel>

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

@@ -1,13 +1,7 @@
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { api } from "@/utils/api";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { DockerBlockChart } from "./docker-block-chart";
 import { DockerCpuChart } from "./docker-cpu-chart";
 import { DockerDiskChart } from "./docker-disk-chart";
@@ -206,7 +200,7 @@ export const ContainerFreeMonitoring = ({
 	}, [appName]);
 
 	return (
-		<div className="rounded-xl bg-background shadow-md flex flex-col gap-4">
+		<div className="rounded-xl bg-background flex flex-col gap-4">
 			<header className="flex items-center justify-between">
 				<div className="space-y-1">
 					<h1 className="text-2xl font-semibold tracking-tight">Monitoring</h1>

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

@@ -29,14 +29,6 @@ interface Props {
 	data: ContainerMetric[];
 }
 
-interface FormattedMetric {
-	timestamp: string;
-	read: number;
-	write: number;
-	readUnit: string;
-	writeUnit: string;
-}
-
 const chartConfig = {
 	read: {
 		label: "Read",

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

@@ -1,3 +1,5 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -102,7 +104,9 @@ export const ComposePaidMonitoring = ({
 											value={container.name}
 										>
 											{container.name} ({container.containerId}){" "}
-											{container.state}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 									<SelectLabel>Containers ({data?.length})</SelectLabel>

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

@@ -79,7 +79,7 @@ export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
 		data,
 		isLoading,
 		error: queryError,
-	} = api.admin.getContainerMetrics.useQuery(
+	} = api.user.getContainerMetrics.useQuery(
 		{
 			url: baseUrl,
 			token,

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

@@ -7,7 +7,6 @@ import {
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { Clock, Cpu, HardDrive, Loader2, MemoryStick } from "lucide-react";
-import type React from "react";
 import { useEffect, useState } from "react";
 import { CPUChart } from "./cpu-chart";
 import { DiskChart } from "./disk-chart";
@@ -73,7 +72,7 @@ export const ShowPaidMonitoring = ({
 		data,
 		isLoading,
 		error: queryError,
-	} = api.admin.getServerMetrics.useQuery(
+	} = api.server.getServerMetrics.useQuery(
 		{
 			url: BASE_URL,
 			token,

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "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/mysql/general/show-internal-mysql-credentials.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	mysqlId: string;

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -0,0 +1,182 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const organizationSchema = z.object({
+	name: z.string().min(1, {
+		message: "Organization name is required",
+	}),
+	logo: z.string().optional(),
+});
+
+type OrganizationFormValues = z.infer<typeof organizationSchema>;
+
+interface Props {
+	organizationId?: string;
+	children?: React.ReactNode;
+}
+
+export function AddOrganization({ organizationId }: Props) {
+	const [open, setOpen] = useState(false);
+	const utils = api.useUtils();
+	const { data: organization } = api.organization.one.useQuery(
+		{
+			organizationId: organizationId ?? "",
+		},
+		{
+			enabled: !!organizationId,
+		},
+	);
+	const { mutateAsync, isLoading } = organizationId
+		? api.organization.update.useMutation()
+		: api.organization.create.useMutation();
+
+	const form = useForm<OrganizationFormValues>({
+		resolver: zodResolver(organizationSchema),
+		defaultValues: {
+			name: "",
+			logo: "",
+		},
+	});
+
+	useEffect(() => {
+		if (organization) {
+			form.reset({
+				name: organization.name,
+				logo: organization.logo || "",
+			});
+		}
+	}, [organization, form]);
+
+	const onSubmit = async (values: OrganizationFormValues) => {
+		await mutateAsync({
+			name: values.name,
+			logo: values.logo,
+			organizationId: organizationId ?? "",
+		})
+			.then(() => {
+				form.reset();
+				toast.success(
+					`Organization ${organizationId ? "updated" : "created"} successfully`,
+				);
+				utils.organization.all.invalidate();
+				setOpen(false);
+			})
+			.catch((error) => {
+				console.error(error);
+				toast.error(
+					`Failed to ${organizationId ? "update" : "create"} organization`,
+				);
+			});
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				{organizationId ? (
+					<DropdownMenuItem
+						className="group cursor-pointer hover:bg-blue-500/10"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+					</DropdownMenuItem>
+				) : (
+					<DropdownMenuItem
+						className="gap-2 p-2"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+							<Plus className="size-4" />
+						</div>
+						<div className="font-medium text-muted-foreground">
+							Add organization
+						</div>
+					</DropdownMenuItem>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>
+						{organizationId ? "Update organization" : "Add organization"}
+					</DialogTitle>
+					<DialogDescription>
+						{organizationId
+							? "Update the organization name and logo"
+							: "Create a new organization to manage your projects."}
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid gap-4 py-4"
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem className="tems-center gap-4">
+									<FormLabel className="text-right">Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="Organization name"
+											{...field}
+											className="col-span-3"
+										/>
+									</FormControl>
+									<FormMessage className="" />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="logo"
+							render={({ field }) => (
+								<FormItem className=" gap-4">
+									<FormLabel className="text-right">Logo URL</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="https://example.com/logo.png"
+											{...field}
+											value={field.value || ""}
+											className="col-span-3"
+										/>
+									</FormControl>
+									<FormMessage className="col-span-3 col-start-2" />
+								</FormItem>
+							)}
+						/>
+						<DialogFooter className="mt-4">
+							<Button type="submit" isLoading={isLoading}>
+								{organizationId ? "Update organization" : "Create organization"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}

apps/dokploy/components/dashboard/postgres/advanced/show-custom-command.tsx

@@ -11,7 +11,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -53,7 +53,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 		mongo: () => api.mongo.update.useMutation(),
 	};
 
-	const { mutateAsync, isLoading } = mutationMap[type]
+	const { mutateAsync } = mutationMap[type]
 		? mutationMap[type]()
 		: api.mongo.update.useMutation();
 

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "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/postgres/general/show-internal-postgres-credentials.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	postgresId: string;

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

apps/dokploy/components/dashboard/project/add-ai-assistant.tsx

@@ -0,0 +1,10 @@
+import { TemplateGenerator } from "@/components/dashboard/project/ai/template-generator";
+
+interface Props {
+	projectId: string;
+	projectName?: string;
+}
+
+export const AddAiAssistant = ({ projectId }: Props) => {
+	return <TemplateGenerator projectId={projectId} />;
+};

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

@@ -103,7 +103,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 					projectId,
 				});
 			})
-			.catch((e) => {
+			.catch((_e) => {
 				toast.error("Error creating the service");
 			});
 	};

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

@@ -18,7 +18,6 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
-	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -49,7 +48,6 @@ import { z } from "zod";
 
 type DbType = typeof mySchema._type.type;
 
-// TODO: Change to a real docker images
 const dockerImageDefaultPlaceholder: Record<DbType, string> = {
 	mongo: "mongo:6",
 	mariadb: "mariadb:11",

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

@@ -57,7 +57,6 @@ import {
 	BookText,
 	CheckIcon,
 	ChevronsUpDown,
-	Code,
 	Github,
 	Globe,
 	HelpCircle,
@@ -384,9 +383,8 @@ export const AddTemplate = ({ projectId }: Props) => {
 																		side="top"
 																	>
 																		<span>
-																			If ot server is selected, the application
-																			will be deployed on the server where the
-																			user is logged in.
+																			If no server is selected, the application will be
+																			deployed on the server where the user is logged in.
 																		</span>
 																	</TooltipContent>
 																</Tooltip>
@@ -435,14 +433,14 @@ export const AddTemplate = ({ projectId }: Props) => {
 																});
 																toast.promise(promise, {
 																	loading: "Setting up...",
-																	success: (data) => {
+																	success: (_data) => {
 																		utils.project.one.invalidate({
 																			projectId,
 																		});
 																		setOpen(false);
 																		return `${template.name} template created successfully`;
 																	},
-																	error: (err) => {
+																	error: (_err) => {
 																		return `An error ocurred deploying ${template.name} template`;
 																	},
 																});

apps/dokploy/components/dashboard/project/ai/step-one.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { useState } from "react";
+
+const examples = [
+	"Make a personal blog",
+	"Add a photo studio portfolio",
+	"Create a personal ad blocker",
+	"Build a social media dashboard",
+	"Sendgrid service opensource analogue",
+];
+
+export const StepOne = ({ nextStep, setTemplateInfo, templateInfo }: any) => {
+	// Get servers from the API
+	const { data: servers } = api.server.withSSHKey.useQuery();
+
+	const handleExampleClick = (example: string) => {
+		setTemplateInfo({ ...templateInfo, userInput: example });
+	};
+	return (
+		<div className="flex flex-col h-full gap-4">
+			<div className="">
+				<div className="space-y-4 ">
+					<h2 className="text-lg font-semibold">Step 1: Describe Your Needs</h2>
+					<div className="space-y-2">
+						<Label htmlFor="user-needs">Describe your template needs</Label>
+						<Textarea
+							id="user-needs"
+							placeholder="Describe the type of template you need, its purpose, and any specific features you'd like to include."
+							value={templateInfo?.userInput}
+							onChange={(e) =>
+								setTemplateInfo({ ...templateInfo, userInput: e.target.value })
+							}
+							className="min-h-[100px]"
+						/>
+					</div>
+
+					<div className="space-y-2">
+						<Label htmlFor="server-deploy">
+							Select the server where you want to deploy (optional)
+						</Label>
+						<Select
+							value={templateInfo.server?.serverId}
+							onValueChange={(value) => {
+								const server = servers?.find((s) => s.serverId === value);
+								if (server) {
+									setTemplateInfo({
+										...templateInfo,
+										server: server,
+									});
+								}
+							}}
+						>
+							<SelectTrigger className="w-full">
+								<SelectValue placeholder="Select a server" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									{servers?.map((server) => (
+										<SelectItem key={server.serverId} value={server.serverId}>
+											{server.name}
+										</SelectItem>
+									))}
+									<SelectLabel>Servers ({servers?.length})</SelectLabel>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div className="space-y-2">
+						<Label>Examples:</Label>
+						<div className="flex flex-wrap gap-2">
+							{examples.map((example, index) => (
+								<Button
+									key={index}
+									variant="outline"
+									size="sm"
+									onClick={() => handleExampleClick(example)}
+								>
+									{example}
+								</Button>
+							))}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/project/ai/step-three.tsx

@@ -0,0 +1,109 @@
+import { CodeEditor } from "@/components/shared/code-editor";
+import ReactMarkdown from "react-markdown";
+import type { StepProps } from "./step-two";
+
+export const StepThree = ({ templateInfo }: StepProps) => {
+	return (
+		<div className="flex flex-col h-full">
+			<div className="flex-grow">
+				<div className="space-y-6">
+					<h2 className="text-lg font-semibold">Step 3: Review and Finalize</h2>
+					<div className="space-y-4">
+						<div>
+							<h3 className="text-sm font-semibold">Name</h3>
+							<p className="text-sm text-muted-foreground">
+								{templateInfo?.details?.name}
+							</p>
+						</div>
+						<div>
+							<h3 className="text-sm font-semibold">Description</h3>
+							<ReactMarkdown className="text-sm text-muted-foreground">
+								{templateInfo?.details?.description}
+							</ReactMarkdown>
+						</div>
+						<div>
+							<h3 className="text-md font-semibold">Server</h3>
+							<p className="text-sm text-muted-foreground">
+								{templateInfo?.server?.name || "Dokploy Server"}
+							</p>
+						</div>
+						<div className="space-y-2">
+							<h3 className="text-sm font-semibold">Docker Compose</h3>
+							<CodeEditor
+								lineWrapping
+								value={templateInfo?.details?.dockerCompose}
+								disabled
+								className="font-mono"
+							/>
+						</div>
+						<div>
+							<h3 className="text-sm font-semibold">Environment Variables</h3>
+							<ul className="list-disc pl-5">
+								{templateInfo?.details?.envVariables.map(
+									(
+										env: {
+											name: string;
+											value: string;
+										},
+										index: number,
+									) => (
+										<li key={index}>
+											<strong className="text-sm font-semibold">
+												{env.name}
+											</strong>
+											:
+											<span className="text-sm ml-2 text-muted-foreground">
+												{env.value}
+											</span>
+										</li>
+									),
+								)}
+							</ul>
+						</div>
+						<div>
+							<h3 className="text-sm font-semibold">Domains</h3>
+							<ul className="list-disc pl-5">
+								{templateInfo?.details?.domains.map(
+									(
+										domain: {
+											host: string;
+											port: number;
+											serviceName: string;
+										},
+										index: number,
+									) => (
+										<li key={index}>
+											<strong className="text-sm font-semibold">
+												{domain.host}
+											</strong>
+											:
+											<span className="text-sm ml-2 text-muted-foreground">
+												{domain.port} - {domain.serviceName}
+											</span>
+										</li>
+									),
+								)}
+							</ul>
+						</div>
+						<div>
+							<h3 className="text-sm font-semibold">Configuration Files</h3>
+							<ul className="list-disc pl-5">
+								{templateInfo?.details?.configFiles.map((file, index) => (
+									<li key={index}>
+										<strong className="text-sm font-semibold">
+											{file.filePath}
+										</strong>
+										:
+										<span className="text-sm ml-2 text-muted-foreground">
+											{file.content}
+										</span>
+									</li>
+								))}
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/project/ai/step-two.tsx

@@ -0,0 +1,530 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { api } from "@/utils/api";
+import { Bot, Eye, EyeOff, PlusCircle, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { toast } from "sonner";
+import type { TemplateInfo } from "./template-generator";
+
+export interface StepProps {
+	stepper?: any;
+	templateInfo: TemplateInfo;
+	setTemplateInfo: React.Dispatch<React.SetStateAction<TemplateInfo>>;
+}
+
+export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
+	const suggestions = templateInfo.suggestions || [];
+	const selectedVariant = templateInfo.details;
+	const [showValues, setShowValues] = useState<Record<string, boolean>>({});
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.ai.suggest.useMutation();
+
+	useEffect(() => {
+		if (suggestions?.length > 0) {
+			return;
+		}
+		mutateAsync({
+			aiId: templateInfo.aiId,
+			serverId: templateInfo.server?.serverId || "",
+			input: templateInfo.userInput,
+		})
+			.then((data) => {
+				setTemplateInfo({
+					...templateInfo,
+					suggestions: data,
+				});
+			})
+			.catch((error) => {
+				toast.error("Error generating suggestions", {
+					description: error.message,
+				});
+			});
+	}, [templateInfo.userInput]);
+
+	const toggleShowValue = (name: string) => {
+		setShowValues((prev) => ({ ...prev, [name]: !prev[name] }));
+	};
+
+	const handleEnvVariableChange = (
+		index: number,
+		field: "name" | "value",
+		value: string,
+	) => {
+		if (!selectedVariant) return;
+
+		const updatedEnvVariables = [...selectedVariant.envVariables];
+		// @ts-ignore
+		updatedEnvVariables[index] = {
+			...updatedEnvVariables[index],
+			[field]: value,
+		};
+
+		setTemplateInfo({
+			...templateInfo,
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					envVariables: updatedEnvVariables,
+				},
+			}),
+		});
+	};
+
+	const removeEnvVariable = (index: number) => {
+		if (!selectedVariant) return;
+
+		const updatedEnvVariables = selectedVariant.envVariables.filter(
+			(_, i) => i !== index,
+		);
+
+		setTemplateInfo({
+			...templateInfo,
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					envVariables: updatedEnvVariables,
+				},
+			}),
+		});
+	};
+
+	const handleDomainChange = (
+		index: number,
+		field: "host" | "port" | "serviceName",
+		value: string | number,
+	) => {
+		if (!selectedVariant) return;
+
+		const updatedDomains = [...selectedVariant.domains];
+		// @ts-ignore
+		updatedDomains[index] = {
+			...updatedDomains[index],
+			[field]: value,
+		};
+
+		setTemplateInfo({
+			...templateInfo,
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					domains: updatedDomains,
+				},
+			}),
+		});
+	};
+
+	const removeDomain = (index: number) => {
+		if (!selectedVariant) return;
+
+		const updatedDomains = selectedVariant.domains.filter(
+			(_, i) => i !== index,
+		);
+
+		setTemplateInfo({
+			...templateInfo,
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					domains: updatedDomains,
+				},
+			}),
+		});
+	};
+
+	const addEnvVariable = () => {
+		if (!selectedVariant) return;
+
+		setTemplateInfo({
+			...templateInfo,
+
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					envVariables: [
+						...selectedVariant.envVariables,
+						{ name: "", value: "" },
+					],
+				},
+			}),
+		});
+	};
+
+	const addDomain = () => {
+		if (!selectedVariant) return;
+
+		setTemplateInfo({
+			...templateInfo,
+			...(templateInfo.details && {
+				details: {
+					...templateInfo.details,
+					domains: [
+						...selectedVariant.domains,
+						{ host: "", port: 80, serviceName: "" },
+					],
+				},
+			}),
+		});
+	};
+	if (isError) {
+		return (
+			<div className="flex flex-col items-center justify-center h-full space-y-4">
+				<Bot className="w-16 h-16 text-primary animate-pulse" />
+				<h2 className="text-2xl font-semibold animate-pulse">Error</h2>
+				<AlertBlock type="error">
+					{error?.message || "Error generating suggestions"}
+				</AlertBlock>
+			</div>
+		);
+	}
+	if (isLoading) {
+		return (
+			<div className="flex flex-col items-center justify-center h-full space-y-4">
+				<Bot className="w-16 h-16 text-primary animate-pulse" />
+				<h2 className="text-2xl font-semibold animate-pulse">
+					AI is processing your request
+				</h2>
+				<p className="text-muted-foreground">
+					Generating template suggestions based on your input...
+				</p>
+				<pre>{templateInfo.userInput}</pre>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col h-full gap-6">
+			<div className="flex-grow overflow-auto pb-8">
+				<div className="space-y-6">
+					<h2 className="text-lg font-semibold">Step 2: Choose a Variant</h2>
+					{!selectedVariant && (
+						<div className="space-y-4">
+							<div>Based on your input, we suggest the following variants:</div>
+							<RadioGroup
+								// value={selectedVariant?.}
+								onValueChange={(value) => {
+									const element = suggestions?.find((s) => s?.id === value);
+									setTemplateInfo({
+										...templateInfo,
+										details: element,
+									});
+								}}
+								className="space-y-4"
+							>
+								{suggestions?.map((suggestion) => (
+									<div
+										key={suggestion?.id}
+										className="flex items-start space-x-3"
+									>
+										<RadioGroupItem
+											value={suggestion?.id || ""}
+											id={suggestion?.id}
+											className="mt-1"
+										/>
+										<div>
+											<Label htmlFor={suggestion?.id} className="font-medium">
+												{suggestion?.name}
+											</Label>
+											<p className="text-sm text-muted-foreground">
+												{suggestion?.shortDescription}
+											</p>
+										</div>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+					{selectedVariant && (
+						<>
+							<div className="mb-6">
+								<h3 className="text-xl font-bold">{selectedVariant?.name}</h3>
+								<p className="text-muted-foreground mt-2">
+									{selectedVariant?.shortDescription}
+								</p>
+							</div>
+							<ScrollArea>
+								<Accordion type="single" collapsible className="w-full">
+									<AccordionItem value="description">
+										<AccordionTrigger>Description</AccordionTrigger>
+										<AccordionContent>
+											<ScrollArea className=" w-full rounded-md border p-4">
+												<ReactMarkdown className="text-muted-foreground text-sm">
+													{selectedVariant?.description}
+												</ReactMarkdown>
+											</ScrollArea>
+										</AccordionContent>
+									</AccordionItem>
+									<AccordionItem value="docker-compose">
+										<AccordionTrigger>Docker Compose</AccordionTrigger>
+										<AccordionContent>
+											<CodeEditor
+												value={selectedVariant?.dockerCompose}
+												className="font-mono"
+												onChange={(value) => {
+													setTemplateInfo({
+														...templateInfo,
+														...(templateInfo?.details && {
+															details: {
+																...templateInfo.details,
+																dockerCompose: value,
+															},
+														}),
+													});
+												}}
+											/>
+										</AccordionContent>
+									</AccordionItem>
+									<AccordionItem value="env-variables">
+										<AccordionTrigger>Environment Variables</AccordionTrigger>
+										<AccordionContent>
+											<ScrollArea className=" w-full rounded-md border">
+												<div className="p-4 space-y-4">
+													{selectedVariant?.envVariables.map((env, index) => (
+														<div
+															key={index}
+															className="flex items-center space-x-2"
+														>
+															<Input
+																value={env.name}
+																onChange={(e) =>
+																	handleEnvVariableChange(
+																		index,
+																		"name",
+																		e.target.value,
+																	)
+																}
+																placeholder="Variable Name"
+																className="flex-1"
+															/>
+															<div className="flex-1 relative">
+																<Input
+																	type={
+																		showValues[env.name] ? "text" : "password"
+																	}
+																	value={env.value}
+																	onChange={(e) =>
+																		handleEnvVariableChange(
+																			index,
+																			"value",
+																			e.target.value,
+																		)
+																	}
+																	placeholder="Variable Value"
+																/>
+																<Button
+																	type="button"
+																	variant="ghost"
+																	size="icon"
+																	className="absolute right-2 top-1/2 transform -translate-y-1/2"
+																	onClick={() => toggleShowValue(env.name)}
+																>
+																	{showValues[env.name] ? (
+																		<EyeOff className="h-4 w-4" />
+																	) : (
+																		<Eye className="h-4 w-4" />
+																	)}
+																</Button>
+															</div>
+															<Button
+																type="button"
+																variant="ghost"
+																size="icon"
+																onClick={() => removeEnvVariable(index)}
+															>
+																<Trash2 className="h-4 w-4" />
+															</Button>
+														</div>
+													))}
+													<Button
+														type="button"
+														variant="outline"
+														size="sm"
+														className="mt-2"
+														onClick={addEnvVariable}
+													>
+														<PlusCircle className="h-4 w-4 mr-2" />
+														Add Variable
+													</Button>
+												</div>
+											</ScrollArea>
+										</AccordionContent>
+									</AccordionItem>
+									<AccordionItem value="domains">
+										<AccordionTrigger>Domains</AccordionTrigger>
+										<AccordionContent>
+											<ScrollArea className=" w-full rounded-md border">
+												<div className="p-4 space-y-4">
+													{selectedVariant?.domains.map((domain, index) => (
+														<div
+															key={index}
+															className="flex items-center space-x-2"
+														>
+															<Input
+																value={domain.host}
+																onChange={(e) =>
+																	handleDomainChange(
+																		index,
+																		"host",
+																		e.target.value,
+																	)
+																}
+																placeholder="Domain Host"
+																className="flex-1"
+															/>
+															<Input
+																type="number"
+																value={domain.port}
+																onChange={(e) =>
+																	handleDomainChange(
+																		index,
+																		"port",
+																		Number.parseInt(e.target.value),
+																	)
+																}
+																placeholder="Port"
+																className="w-24"
+															/>
+															<Input
+																value={domain.serviceName}
+																onChange={(e) =>
+																	handleDomainChange(
+																		index,
+																		"serviceName",
+																		e.target.value,
+																	)
+																}
+																placeholder="Service Name"
+																className="flex-1"
+															/>
+															<Button
+																type="button"
+																variant="ghost"
+																size="icon"
+																onClick={() => removeDomain(index)}
+															>
+																<Trash2 className="h-4 w-4" />
+															</Button>
+														</div>
+													))}
+													<Button
+														type="button"
+														variant="outline"
+														size="sm"
+														className="mt-2"
+														onClick={addDomain}
+													>
+														<PlusCircle className="h-4 w-4 mr-2" />
+														Add Domain
+													</Button>
+												</div>
+											</ScrollArea>
+										</AccordionContent>
+									</AccordionItem>
+									<AccordionItem value="mounts">
+										<AccordionTrigger>Configuration Files</AccordionTrigger>
+										<AccordionContent>
+											<ScrollArea className="w-full rounded-md border">
+												<div className="p-4 space-y-4">
+													{selectedVariant?.configFiles?.length > 0 ? (
+														<>
+															<div className="text-sm text-muted-foreground mb-4">
+																This template requires the following
+																configuration files to be mounted:
+															</div>
+															{selectedVariant.configFiles.map(
+																(config, index) => (
+																	<div
+																		key={index}
+																		className="space-y-2 border rounded-lg p-4"
+																	>
+																		<div className="flex items-center justify-between">
+																			<div className="space-y-1">
+																				<Label className="text-primary">
+																					{config.filePath}
+																				</Label>
+																				<p className="text-xs text-muted-foreground">
+																					Will be mounted as: ../files
+																					{config.filePath}
+																				</p>
+																			</div>
+																		</div>
+																		<CodeEditor
+																			value={config.content}
+																			className="font-mono"
+																			onChange={(value) => {
+																				if (!selectedVariant?.configFiles)
+																					return;
+																				const updatedConfigFiles = [
+																					...selectedVariant.configFiles,
+																				];
+																				updatedConfigFiles[index] = {
+																					filePath: config.filePath,
+																					content: value,
+																				};
+																				setTemplateInfo({
+																					...templateInfo,
+																					...(templateInfo.details && {
+																						details: {
+																							...templateInfo.details,
+																							configFiles: updatedConfigFiles,
+																						},
+																					}),
+																				});
+																			}}
+																		/>
+																	</div>
+																),
+															)}
+														</>
+													) : (
+														<div className="text-center text-muted-foreground py-8">
+															<p>
+																This template doesn't require any configuration
+																files.
+															</p>
+															<p className="text-sm mt-2">
+																All necessary configurations are handled through
+																environment variables.
+															</p>
+														</div>
+													)}
+												</div>
+											</ScrollArea>
+										</AccordionContent>
+									</AccordionItem>
+								</Accordion>
+							</ScrollArea>
+						</>
+					)}
+				</div>
+			</div>
+			<div className="">
+				<div className="flex justify-between">
+					{selectedVariant && (
+						<Button
+							onClick={() => {
+								const { details, ...rest } = templateInfo;
+								setTemplateInfo(rest);
+							}}
+							variant="outline"
+						>
+							Change Variant
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/project/ai/template-generator.tsx

@@ -0,0 +1,338 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { api } from "@/utils/api";
+import { defineStepper } from "@stepperize/react";
+import { Bot } from "lucide-react";
+import Link from "next/link";
+import React, { useState } from "react";
+import { toast } from "sonner";
+import { StepOne } from "./step-one";
+import { StepThree } from "./step-three";
+import { StepTwo } from "./step-two";
+
+interface EnvVariable {
+	name: string;
+	value: string;
+}
+
+interface Domain {
+	host: string;
+	port: number;
+	serviceName: string;
+}
+
+interface Details {
+	name: string;
+	id: string;
+	description: string;
+	dockerCompose: string;
+	envVariables: EnvVariable[];
+	shortDescription: string;
+	domains: Domain[];
+	configFiles: Mount[];
+}
+
+interface Mount {
+	filePath: string;
+	content: string;
+}
+
+export interface TemplateInfo {
+	userInput: string;
+	details?: Details | null;
+	suggestions?: Details[];
+	server?: {
+		serverId: string;
+		name: string;
+	};
+	aiId: string;
+}
+
+const defaultTemplateInfo: TemplateInfo = {
+	aiId: "",
+	userInput: "",
+	server: undefined,
+	details: null,
+	suggestions: [],
+};
+
+export const { useStepper, steps, Scoped } = defineStepper(
+	{
+		id: "needs",
+		title: "Describe your needs",
+	},
+	{
+		id: "variant",
+		title: "Choose a Variant",
+	},
+	{
+		id: "review",
+		title: "Review and Finalize",
+	},
+);
+
+interface Props {
+	projectId: string;
+	projectName?: string;
+}
+
+export const TemplateGenerator = ({ projectId }: Props) => {
+	const [open, setOpen] = useState(false);
+	const stepper = useStepper();
+	const { data: aiSettings } = api.ai.getAll.useQuery();
+	const { mutateAsync } = api.ai.deploy.useMutation();
+	const [templateInfo, setTemplateInfo] =
+		useState<TemplateInfo>(defaultTemplateInfo);
+	const utils = api.useUtils();
+
+	const haveAtleasOneProviderEnabled = aiSettings?.some(
+		(ai) => ai.isEnabled === true,
+	);
+
+	const isDisabled = () => {
+		if (stepper.current.id === "needs") {
+			return !templateInfo.aiId || !templateInfo.userInput;
+		}
+
+		if (stepper.current.id === "variant") {
+			return !templateInfo?.details?.id;
+		}
+
+		return false;
+	};
+
+	const onSubmit = async () => {
+		await mutateAsync({
+			projectId,
+			id: templateInfo.details?.id || "",
+			name: templateInfo?.details?.name || "",
+			description: templateInfo?.details?.shortDescription || "",
+			dockerCompose: templateInfo?.details?.dockerCompose || "",
+			envVariables: (templateInfo?.details?.envVariables || [])
+				.map((env: any) => `${env.name}=${env.value}`)
+				.join("\n"),
+			domains: templateInfo?.details?.domains || [],
+			...(templateInfo.server?.serverId && {
+				serverId: templateInfo.server?.serverId || "",
+			}),
+			configFiles: templateInfo?.details?.configFiles || [],
+		})
+			.then(async () => {
+				toast.success("Compose Created");
+				setOpen(false);
+				await utils.project.one.invalidate({
+					projectId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error creating the compose");
+			});
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild className="w-full">
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<Bot className="size-4 text-muted-foreground" />
+					<span>AI Assistant</span>
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-4xl w-full  flex flex-col">
+				<DialogHeader>
+					<DialogTitle>AI Assistant</DialogTitle>
+					<DialogDescription>
+						Create a custom template based on your needs
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4">
+					<div className="flex justify-between">
+						<h2 className="text-lg font-semibold">Steps</h2>
+						<div className="flex items-center gap-2">
+							<span className="text-sm text-muted-foreground">
+								Step {stepper.current.index + 1} of {steps.length}
+							</span>
+							<div />
+						</div>
+					</div>
+					<Scoped>
+						<nav aria-label="Checkout Steps" className="group my-4">
+							<ol
+								className="flex items-center justify-between gap-2"
+								aria-orientation="horizontal"
+							>
+								{stepper.all.map((step, index, array) => (
+									<React.Fragment key={step.id}>
+										<li className="flex items-center gap-4 flex-shrink-0">
+											<Button
+												type="button"
+												role="tab"
+												variant={
+													index <= stepper.current.index ? "secondary" : "ghost"
+												}
+												aria-current={
+													stepper.current.id === step.id ? "step" : undefined
+												}
+												aria-posinset={index + 1}
+												aria-setsize={steps.length}
+												aria-selected={stepper.current.id === step.id}
+												className="flex size-10 items-center justify-center rounded-full border-2 border-border"
+											>
+												{index + 1}
+											</Button>
+											<span className="text-sm font-medium">{step.title}</span>
+										</li>
+										{index < array.length - 1 && (
+											<Separator
+												className={`flex-1 ${
+													index < stepper.current.index
+														? "bg-primary"
+														: "bg-muted"
+												}`}
+											/>
+										)}
+									</React.Fragment>
+								))}
+							</ol>
+						</nav>
+						{stepper.switch({
+							needs: () => (
+								<>
+									{!haveAtleasOneProviderEnabled && (
+										<AlertBlock type="warning">
+											<div className="flex flex-col w-full">
+												<span>AI features are not enabled</span>
+												<span>
+													To use AI-powered template generation, please{" "}
+													<Link
+														href="/dashboard/settings/ai"
+														className="font-medium underline underline-offset-4"
+													>
+														enable AI in your settings
+													</Link>
+													.
+												</span>
+											</div>
+										</AlertBlock>
+									)}
+
+									{haveAtleasOneProviderEnabled &&
+										aiSettings &&
+										aiSettings?.length > 0 && (
+											<div className="space-y-4">
+												<div className="flex flex-col gap-2">
+													<label
+														htmlFor="user-needs"
+														className="text-sm font-medium"
+													>
+														Select AI Provider
+													</label>
+													<Select
+														value={templateInfo.aiId}
+														onValueChange={(value) =>
+															setTemplateInfo((prev) => ({
+																...prev,
+																aiId: value,
+															}))
+														}
+													>
+														<SelectTrigger>
+															<SelectValue placeholder="Select an AI provider" />
+														</SelectTrigger>
+														<SelectContent>
+															{aiSettings.map((ai) => (
+																<SelectItem key={ai.aiId} value={ai.aiId}>
+																	{ai.name} ({ai.model})
+																</SelectItem>
+															))}
+														</SelectContent>
+													</Select>
+												</div>
+												{templateInfo.aiId && (
+													<StepOne
+														setTemplateInfo={setTemplateInfo}
+														templateInfo={templateInfo}
+													/>
+												)}
+											</div>
+										)}
+								</>
+							),
+							variant: () => (
+								<StepTwo
+									templateInfo={templateInfo}
+									setTemplateInfo={setTemplateInfo}
+								/>
+							),
+							review: () => (
+								<StepThree
+									templateInfo={templateInfo}
+									setTemplateInfo={setTemplateInfo}
+								/>
+							),
+						})}
+					</Scoped>
+				</div>
+				<DialogFooter>
+					<div className="flex items-center justify-between w-full">
+						<div className="flex items-center gap-2 w-full justify-end">
+							<Button
+								onClick={stepper.prev}
+								disabled={stepper.isFirst}
+								variant="secondary"
+							>
+								Back
+							</Button>
+							<Button
+								disabled={isDisabled()}
+								onClick={async () => {
+									if (stepper.current.id === "needs") {
+										setTemplateInfo((prev) => ({
+											...prev,
+											suggestions: [],
+											details: null,
+										}));
+									}
+
+									if (stepper.isLast) {
+										await onSubmit();
+										return;
+									}
+									stepper.next();
+									// if (stepper.isLast) {
+									// 	// setIsOpen(false);
+									// 	// push("/dashboard/projects");
+									// } else {
+									// 	stepper.next();
+									// }
+								}}
+							>
+								{stepper.isLast ? "Create" : "Next"}
+							</Button>
+						</div>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/projects/handle-project.tsx

@@ -97,6 +97,18 @@ export const HandleProject = ({ projectId }: Props) => {
 				);
 			});
 	};
+	// useEffect(() => {
+	// 	const getUsers = async () => {
+	// 		const users = await authClient.admin.listUsers({
+	// 			query: {
+	// 				limit: 100,
+	// 			},
+	// 		});
+	// 		console.log(users);
+	// 	};
+
+	// 	getUsers();
+	// });
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>

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

@@ -1,5 +1,6 @@
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -50,15 +51,7 @@ import { ProjectEnvironment } from "./project-environment";
 export const ShowProjects = () => {
 	const utils = api.useUtils();
 	const { data, isLoading } = api.project.all.useQuery();
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 	const [searchQuery, setSearchQuery] = useState("");
 
@@ -90,7 +83,7 @@ export const ShowProjects = () => {
 								</CardDescription>
 							</CardHeader>
 
-							{(auth?.rol === "admin" || user?.canCreateProjects) && (
+							{(auth?.role === "owner" || auth?.canCreateProjects) && (
 								<div className="">
 									<HandleProject />
 								</div>
@@ -176,8 +169,11 @@ export const ShowProjects = () => {
 																					<div key={app.applicationId}>
 																						<DropdownMenuSeparator />
 																						<DropdownMenuGroup>
-																							<DropdownMenuLabel className="font-normal capitalize text-xs">
+																							<DropdownMenuLabel className="font-normal capitalize text-xs flex items-center justify-between">
 																								{app.name}
+																								<StatusTooltip
+																									status={app.applicationStatus}
+																								/>
 																							</DropdownMenuLabel>
 																							<DropdownMenuSeparator />
 																							{app.domains.map((domain) => (
@@ -209,8 +205,11 @@ export const ShowProjects = () => {
 																					<div key={comp.composeId}>
 																						<DropdownMenuSeparator />
 																						<DropdownMenuGroup>
-																							<DropdownMenuLabel className="font-normal capitalize text-xs">
+																							<DropdownMenuLabel className="font-normal capitalize text-xs flex items-center justify-between">
 																								{comp.name}
+																								<StatusTooltip
+																									status={comp.composeStatus}
+																								/>
 																							</DropdownMenuLabel>
 																							<DropdownMenuSeparator />
 																							{comp.domains.map((domain) => (
@@ -286,8 +285,8 @@ export const ShowProjects = () => {
 																				<div
 																					onClick={(e) => e.stopPropagation()}
 																				>
-																					{(auth?.rol === "admin" ||
-																						user?.canDeleteProjects) && (
+																					{(auth?.role === "owner" ||
+																						auth?.canDeleteProjects) && (
 																						<AlertDialog>
 																							<AlertDialogTrigger className="w-full">
 																								<DropdownMenuItem

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -79,7 +79,7 @@ export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
 
 	useEffect(() => {
 		const buildConnectionUrl = () => {
-			const hostname = window.location.hostname;
+			const _hostname = window.location.hostname;
 			const port = form.watch("externalPort") || data?.externalPort;
 
 			return `redis://default:${data?.databasePassword}@${getIp}:${port}`;

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "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/redis/general/show-internal-redis-credentials.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	redisId: string;

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

apps/dokploy/components/dashboard/requests/columns.tsx

@@ -3,7 +3,6 @@ import { Button } from "@/components/ui/button";
 import type { ColumnDef } from "@tanstack/react-table";
 import { format } from "date-fns";
 import { ArrowUpDown } from "lucide-react";
-import * as React from "react";
 import type { LogEntry } from "./show-requests";
 
 export const getStatusColor = (status: number) => {
@@ -25,7 +24,7 @@ export const getStatusColor = (status: number) => {
 export const columns: ColumnDef<LogEntry>[] = [
 	{
 		accessorKey: "level",
-		header: ({ column }) => {
+		header: () => {
 			return <Button variant="ghost">Level</Button>;
 		},
 		cell: ({ row }) => {

apps/dokploy/components/dashboard/requests/request-distribution-chart.tsx

@@ -1,10 +1,10 @@
+import { api } from "@/utils/api";
 import {
 	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 	ChartTooltipContent,
 } from "@/components/ui/chart";
-import { api } from "@/utils/api";
 import {
 	Area,
 	AreaChart,
@@ -14,6 +14,13 @@ import {
 	YAxis,
 } from "recharts";
 
+export interface RequestDistributionChartProps {
+	dateRange?: {
+		from: Date | undefined;
+		to: Date | undefined;
+	};
+}
+
 const chartConfig = {
 	views: {
 		label: "Page Views",
@@ -24,10 +31,22 @@ const chartConfig = {
 	},
 } satisfies ChartConfig;
 
-export const RequestDistributionChart = () => {
-	const { data: stats } = api.settings.readStats.useQuery(undefined, {
-		refetchInterval: 1333,
-	});
+export const RequestDistributionChart = ({
+	dateRange,
+}: RequestDistributionChartProps) => {
+	const { data: stats } = api.settings.readStats.useQuery(
+		{
+			dateRange: dateRange
+				? {
+						start: dateRange.from?.toISOString(),
+						end: dateRange.to?.toISOString(),
+					}
+				: undefined,
+		},
+		{
+			refetchInterval: 1333,
+		},
+	);
 
 	return (
 		<ResponsiveContainer width="100%" height={200}>

apps/dokploy/components/dashboard/requests/requests-table.tsx

@@ -79,7 +79,15 @@ export const priorities = [
 		icon: Server,
 	},
 ];
-export const RequestsTable = () => {
+
+export interface RequestsTableProps {
+	dateRange?: {
+		from: Date | undefined;
+		to: Date | undefined;
+	};
+}
+
+export const RequestsTable = ({ dateRange }: RequestsTableProps) => {
 	const [statusFilter, setStatusFilter] = useState<string[]>([]);
 	const [search, setSearch] = useState("");
 	const [selectedRow, setSelectedRow] = useState<LogEntry>();
@@ -92,12 +100,18 @@ export const RequestsTable = () => {
 		pageSize: 10,
 	});
 
-	const { data: statsLogs, isLoading } = api.settings.readStatsLogs.useQuery(
+	const { data: statsLogs } = api.settings.readStatsLogs.useQuery(
 		{
 			sort: sorting[0],
 			page: pagination,
 			search,
 			status: statusFilter,
+			dateRange: dateRange
+				? {
+						start: dateRange.from?.toISOString(),
+						end: dateRange.to?.toISOString(),
+					}
+				: undefined,
 		},
 		{
 			refetchInterval: 1333,
@@ -300,7 +314,7 @@ export const RequestsTable = () => {
 			</div>
 			<Sheet
 				open={!!selectedRow}
-				onOpenChange={(open) => setSelectedRow(undefined)}
+				onOpenChange={(_open) => setSelectedRow(undefined)}
 			>
 				<SheetContent className="sm:max-w-[740px]  flex flex-col">
 					<SheetHeader>

apps/dokploy/components/dashboard/requests/show-requests.tsx

@@ -1,6 +1,7 @@
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
 	Card,
 	CardContent,
@@ -8,10 +9,29 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { type RouterOutputs, api } from "@/utils/api";
-import { ArrowDownUp } from "lucide-react";
+import { format } from "date-fns";
+import {
+	ArrowDownUp,
+	AlertCircle,
+	InfoIcon,
+	Calendar as CalendarIcon,
+} from "lucide-react";
 import Link from "next/link";
-import * as React from "react";
+import { useState, useEffect } from "react";
 import { toast } from "sonner";
 import { RequestDistributionChart } from "./request-distribution-chart";
 import { RequestsTable } from "./requests-table";
@@ -21,17 +41,30 @@ export type LogEntry = NonNullable<
 >[0];
 
 export const ShowRequests = () => {
-	const { data: isLogRotateActive, refetch: refetchLogRotate } =
-		api.settings.getLogRotateStatus.useQuery();
-
-	const { mutateAsync: toggleLogRotate } =
-		api.settings.toggleLogRotate.useMutation();
-
 	const { data: isActive, refetch } =
 		api.settings.haveActivateRequests.useQuery();
 	const { mutateAsync: toggleRequests } =
 		api.settings.toggleRequests.useMutation();
 
+	const { data: logCleanupStatus } =
+		api.settings.getLogCleanupStatus.useQuery();
+	const { mutateAsync: updateLogCleanup } =
+		api.settings.updateLogCleanup.useMutation();
+	const [cronExpression, setCronExpression] = useState<string | null>(null);
+	const [dateRange, setDateRange] = useState<{
+		from: Date | undefined;
+		to: Date | undefined;
+	}>({
+		from: undefined,
+		to: undefined,
+	});
+
+	useEffect(() => {
+		if (logCleanupStatus) {
+			setCronExpression(logCleanupStatus.cronExpression || "0 0 * * *");
+		}
+	}, [logCleanupStatus]);
+
 	return (
 		<>
 			<div className="w-full">
@@ -58,7 +91,60 @@ export const ShowRequests = () => {
 							</AlertBlock>
 						</CardHeader>
 						<CardContent className="space-y-2 py-8 border-t">
-							<div className="flex w-full gap-4 justify-end">
+							<div className="flex w-full gap-4 justify-end items-center">
+								<div className="flex-1 flex items-center gap-4">
+									<div className="flex items-center gap-2">
+										<Label htmlFor="cron" className="min-w-32">
+											Log Cleanup Schedule
+										</Label>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<InfoIcon className="size-4 text-muted-foreground" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p className="max-w-80">
+														At the scheduled time, the cleanup job will keep
+														only the last 1000 entries in the access log file
+														and signal Traefik to reopen its log files. The
+														default schedule is daily at midnight (0 0 * * *).
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex-1 flex gap-4">
+										<Input
+											id="cron"
+											placeholder="0 0 * * *"
+											value={cronExpression || ""}
+											onChange={(e) => setCronExpression(e.target.value)}
+											className="max-w-60"
+											required
+										/>
+										<Button
+											variant="outline"
+											onClick={async () => {
+												if (!cronExpression?.trim()) {
+													toast.error("Please enter a valid cron expression");
+													return;
+												}
+												try {
+													await updateLogCleanup({
+														cronExpression: cronExpression,
+													});
+													toast.success("Log cleanup schedule updated");
+												} catch (error) {
+													toast.error(
+														`Failed to update log cleanup schedule: ${error instanceof Error ? error.message : "Unknown error"}`,
+													);
+												}
+											}}
+										>
+											Update Schedule
+										</Button>
+									</div>
+								</div>
 								<DialogAction
 									title={isActive ? "Deactivate Requests" : "Activate Requests"}
 									description="You will also need to restart Traefik to apply the changes"
@@ -78,53 +164,81 @@ export const ShowRequests = () => {
 								>
 									<Button>{isActive ? "Deactivate" : "Activate"}</Button>
 								</DialogAction>
-
-								<DialogAction
-									title={
-										isLogRotateActive
-											? "Activate Log Rotate"
-											: "Deactivate Log Rotate"
-									}
-									description={
-										isLogRotateActive
-											? "This will make the logs rotate on interval 1 day and maximum size of 100 MB and maximum 6 logs"
-											: "The log rotation will be disabled"
-									}
-									onClick={() => {
-										toggleLogRotate({
-											enable: !isLogRotateActive,
-										})
-											.then(() => {
-												toast.success(
-													`Log rotate ${isLogRotateActive ? "activated" : "deactivated"}`,
-												);
-												refetchLogRotate();
-											})
-											.catch((err) => {
-												toast.error(err.message);
-											});
-									}}
-								>
-									<Button variant="secondary">
-										{isLogRotateActive
-											? "Activate Log Rotate"
-											: "Deactivate Log Rotate"}
-									</Button>
-								</DialogAction>
 							</div>
 
-							<div>
-								{isActive ? (
-									<RequestDistributionChart />
-								) : (
-									<div className="flex items-center justify-center min-h-[25vh]">
-										<span className="text-muted-foreground py-6">
-											You need to activate requests
-										</span>
+							{isActive ? (
+								<>
+									<div className="flex justify-end mb-4 gap-2">
+										{(dateRange.from || dateRange.to) && (
+											<Button
+												variant="outline"
+												onClick={() =>
+													setDateRange({ from: undefined, to: undefined })
+												}
+												className="px-3"
+											>
+												Clear dates
+											</Button>
+										)}
+										<Popover>
+											<PopoverTrigger asChild>
+												<Button
+													variant="outline"
+													className="w-[300px] justify-start text-left font-normal"
+												>
+													<CalendarIcon className="mr-2 h-4 w-4" />
+													{dateRange.from ? (
+														dateRange.to ? (
+															<>
+																{format(dateRange.from, "LLL dd, y")} -{" "}
+																{format(dateRange.to, "LLL dd, y")}
+															</>
+														) : (
+															format(dateRange.from, "LLL dd, y")
+														)
+													) : (
+														<span>Pick a date range</span>
+													)}
+												</Button>
+											</PopoverTrigger>
+											<PopoverContent className="w-auto p-0" align="end">
+												<Calendar
+													initialFocus
+													mode="range"
+													defaultMonth={dateRange.from}
+													selected={{
+														from: dateRange.from,
+														to: dateRange.to,
+													}}
+													onSelect={(range) => {
+														setDateRange({
+															from: range?.from,
+															to: range?.to,
+														});
+													}}
+													numberOfMonths={2}
+												/>
+											</PopoverContent>
+										</Popover>
 									</div>
-								)}
-								{isActive && <RequestsTable />}
-							</div>
+									<RequestDistributionChart dateRange={dateRange} />
+									<RequestsTable dateRange={dateRange} />
+								</>
+							) : (
+								<div className="flex flex-col items-center justify-center py-12 gap-4 text-muted-foreground">
+									<AlertCircle className="size-12 text-muted-foreground/50" />
+									<div className="text-center space-y-2">
+										<h3 className="text-lg font-medium">
+											Requests are not activated
+										</h3>
+										<p className="text-sm max-w-md">
+											Activate requests to see incoming traffic statistics and
+											monitor your application's usage. After activation, you'll
+											need to reload Traefik for the changes to take effect.
+										</p>
+									</div>
+								</div>
+							)}
 						</CardContent>
 					</div>
 				</Card>