Merge pull request #720 from Dokploy/canary

v0.12.0

.circleci/config.yml

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

.config/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm commitlint --edit $1

.config/.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === "production" || process.env.CI === "true") {
+	process.exit(0);
+}
+const husky = (await import("husky")).default;
+console.log(husky());

.config/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report
-labels: ["bug"]
+labels: ['bug']
 body:
   - type: markdown
     attributes:
@@ -11,27 +11,18 @@ body:
   - type: textarea
     attributes:
       label: To Reproduce
-      description: |
-        A detailed, step-by-step description of how to reproduce the issue is required. 
-        Please ensure your report includes clear instructions using numbered lists. 
-
-        If possible, provide a link to a repository or project where the issue can be reproduced.
+      description: A step-by-step description of how to reproduce the issue, or a link to the reproducible repository.
       placeholder: |
         1. Create a application
         2. Click X
         3. Y will happen
-
-        Make sure to:
-        - Use numbered lists to outline steps clearly.
-        - Include all relevant commands and configurations.
-        - Provide a link to a reproducible repository if applicable.
     validations:
       required: true
   - type: textarea
     attributes:
       label: Current vs. Expected behavior
       description: A clear and concise description of what the bug is, and what you expected to happen.
-      placeholder: "Following the steps from the previous section, I expected A to happen, but I observed B instead"
+      placeholder: 'Following the steps from the previous section, I expected A to happen, but I observed B instead'
     validations:
       required: true
   - type: textarea
@@ -54,23 +45,12 @@ body:
       label: Which area(s) are affected? (Select all that apply)
       multiple: true
       options:
-        - "Installation"
-        - "Application"
-        - "Databases"
-        - "Docker Compose"
-        - "Traefik"
-        - "Docker"
-        - "Remote server"
-        - "Local Development"
-    validations:
-      required: true
-  - type: dropdown
-    attributes:
-      label: Are you deploying the applications where Dokploy is installed or on a remote server?
-      options:
-        - "Same server where Dokploy is installed"
-        - "Remote server"
-        - "Both"
+        - 'Installation'
+        - 'Application'
+        - 'Databases'
+        - 'Docker Compose'
+        - 'Traefik'
+        - 'Docker'
     validations:
       required: true
   - type: textarea
@@ -79,16 +59,4 @@ body:
       description: |
         Any extra information that might help us investigate.
       placeholder: |
-        I tested on a DigitalOcean VPS with Ubuntu 20.04 and Docker version 20.10.12.
-
-  - type: dropdown
-    attributes:
-      label: Will you send a PR to fix it?
-      description: Let us know if you are planning to submit a pull request to address this issue.
-
-      options:
-        - "Yes"
-        - "No"
-        - "Maybe, need help"
-    validations:
-      required: true
+        I tested on a DigitalOcean VPS with Ubuntu 20.04 and Docker version 20.10.12.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,6 +1,6 @@
 name: Feature Request
 description: Suggest a new feature or improvement to the project
-labels: ["enhancement"]
+labels: ['enhancement']
 body:
   - type: textarea
     attributes:
@@ -30,15 +30,4 @@ body:
       label: Additional context
       description: Add any other context or screenshots about the feature request here.
     validations:
-      required: false
-
-  - type: dropdown
-    attributes:
-      label: Will you send a PR to implement it?
-      description: Let us know if you are planning to submit a pull request to implement this feature.
-      options:
-        - "Yes"
-        - "No"
-        - "Maybe, need help"
-    validations:
-      required: true
+      required: false

.github/workflows/pull-request.yml

@@ -4,6 +4,9 @@ on:
   pull_request:
     branches: [main, canary]
 
+env:
+  HUSKY: 0
+
 jobs:
   lint-and-typecheck:
     runs-on: ubuntu-latest
@@ -15,7 +18,8 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
+      - run: pnpm run server:build  
+      - run: pnpm biome ci
       - run: pnpm typecheck
 
   build-and-test:
@@ -42,5 +46,5 @@ jobs:
           node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build
+      - run: pnpm run server:build  
       - run: pnpm test

.husky/commit-msg

@@ -0,0 +1 @@
+npx commitlint --edit "$1"

.husky/install.mjs

@@ -0,0 +1,6 @@
+// Skip Husky install in production and CI
+if (process.env.NODE_ENV === "production" || process.env.CI === "true") {
+	process.exit(0);
+}
+const husky = (await import("husky")).default;
+console.log(husky());

.husky/pre-commit

@@ -0,0 +1,2 @@
+pnpm run check
+git add .

CONTRIBUTING.md

@@ -241,7 +241,7 @@ export function generate(schema: Schema): Template {
 
 - Use the same name of the folder as the id of the template.
 - The logo should be in the public folder.
-- If you want to show a domain in the UI, please add the `_HOST` suffix at the end of the variable name.
+- If you want to show a domain in the UI, please add the prefix \_HOST at the end of the variable name.
 - Test first on a vps or a server to make sure the template works.
 
 ## Docs & Website

Dockerfile

@@ -35,6 +35,7 @@ RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var
 COPY --from=build /prod/dokploy/.next ./.next
 COPY --from=build /prod/dokploy/dist ./dist
 COPY --from=build /prod/dokploy/next.config.mjs ./next.config.mjs
+COPY --from=build /prod/dokploy/next-i18next.config.cjs ./next-i18next.config.cjs
 COPY --from=build /prod/dokploy/public ./public
 COPY --from=build /prod/dokploy/package.json ./package.json
 COPY --from=build /prod/dokploy/drizzle ./drizzle

Dockerfile.cloud

@@ -44,6 +44,7 @@ RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var
 COPY --from=build /prod/dokploy/.next ./.next
 COPY --from=build /prod/dokploy/dist ./dist
 COPY --from=build /prod/dokploy/next.config.mjs ./next.config.mjs
+COPY --from=build /prod/dokploy/next-i18next.config.cjs ./next-i18next.config.cjs
 COPY --from=build /prod/dokploy/public ./public
 COPY --from=build /prod/dokploy/package.json ./package.json
 COPY --from=build /prod/dokploy/drizzle ./drizzle

LICENSE.MD

@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and limitations
 
 ## Additional Terms for Specific Features
 
-The following additional terms apply to the multi-node support, Docker Compose file, Preview Deployments and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
+The following additional terms apply to the multi-node support, Docker Compose file and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
 
-- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support, Preview Deployments and Multi Server, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support, Docker Compose file support, Preview Deployments and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support, Preview Deployments and Multi Server features must be distributed freely and cannot be sold or offered as a service.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support and Multi Server, will always be free to use in the self-hosted version.
+- **Restriction on Resale**: The multi-node support, Docker Compose file support and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
+- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support and Multi Server features must be distributed freely and cannot be sold or offered as a service.
 
 For further inquiries or permissions, please contact us directly.

README.md

@@ -87,8 +87,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">
 <a href="https://lightspeed.run/?ref=dokploy"><img src="https://github.com/lightspeedrun.png" width="60px" alt="Lightspeed.run"/></a>
-<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://cloudblast.io/?ref=dokploy "><img src="https://cloudblast.io/img/logo-icon.193cf13e.svg" width="250px" alt="Lightspeed.run"/></a>
 </div>
 
 ### Community Backers 🤝
@@ -117,7 +116,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ## Video Tutorial
 
 <a href="https://youtu.be/mznYKPvhcfw">
-  <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400" style="border-radius:20px;"/>
+  <img src="https://dokploy.com/banner.webp" alt="Watch the video" width="400" style="border-radius:20px;"/>
 </a>
 
 <!-- ## Supported OS

apps/api/src/schema.ts

@@ -19,16 +19,6 @@ export const deployJobSchema = z.discriminatedUnion("applicationType", [
 		applicationType: z.literal("compose"),
 		serverId: z.string().min(1),
 	}),
-	z.object({
-		applicationId: z.string(),
-		previewDeploymentId: z.string(),
-		titleLog: z.string(),
-		descriptionLog: z.string(),
-		server: z.boolean().optional(),
-		type: z.enum(["deploy"]),
-		applicationType: z.literal("application-preview"),
-		serverId: z.string().min(1),
-	}),
 ]);
 
 export type DeployJob = z.infer<typeof deployJobSchema>;

apps/api/src/utils.ts

@@ -1,12 +1,10 @@
 import {
 	deployRemoteApplication,
 	deployRemoteCompose,
-	deployRemotePreviewApplication,
 	rebuildRemoteApplication,
 	rebuildRemoteCompose,
 	updateApplicationStatus,
 	updateCompose,
-	updatePreviewDeployment,
 } from "@dokploy/server";
 import type { DeployJob } from "./schema";
 
@@ -49,20 +47,6 @@ export const deploy = async (job: DeployJob) => {
 					});
 				}
 			}
-		} else if (job.applicationType === "application-preview") {
-			await updatePreviewDeployment(job.previewDeploymentId, {
-				previewStatus: "running",
-			});
-			if (job.server) {
-				if (job.type === "deploy") {
-					await deployRemotePreviewApplication({
-						applicationId: job.applicationId,
-						titleLog: job.titleLog,
-						descriptionLog: job.descriptionLog,
-						previewDeploymentId: job.previewDeploymentId,
-					});
-				}
-			}
 		}
 	} catch (error) {
 		if (job.applicationType === "application") {
@@ -71,10 +55,6 @@ export const deploy = async (job: DeployJob) => {
 			await updateCompose(job.composeId, {
 				composeStatus: "error",
 			});
-		} else if (job.applicationType === "application-preview") {
-			await updatePreviewDeployment(job.previewDeploymentId, {
-				previewStatus: "error",
-			});
 		}
 	}
 

apps/dokploy/LICENSE.MD

@@ -17,10 +17,10 @@ See the License for the specific language governing permissions and limitations
 
 ## Additional Terms for Specific Features
 
-The following additional terms apply to the multi-node support, Docker Compose file, Preview Deployments and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
+The following additional terms apply to the multi-node support, Docker Compose file and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
 
-- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support, Preview Deployments and Multi Server, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support, Docker Compose file support, Preview Deployments and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support, Preview Deployments and Multi Server features must be distributed freely and cannot be sold or offered as a service.
+- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support and Multi Server, will always be free to use in the self-hosted version.
+- **Restriction on Resale**: The multi-node support, Docker Compose file support and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
+- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support and Multi Server features must be distributed freely and cannot be sold or offered as a service.
 
 For further inquiries or permissions, please contact us directly.

apps/dokploy/__test__/compose/domain/labels.test.ts

@@ -17,7 +17,6 @@ describe("createDomainLabels", () => {
 		domainId: "",
 		path: "/",
 		createdAt: "",
-		previewDeploymentId: "",
 	};
 
 	it("should create basic labels for web entrypoint", async () => {

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

@@ -26,23 +26,12 @@ if (typeof window === "undefined") {
 
 const baseApp: ApplicationNested = {
 	applicationId: "",
-	herokuVersion: "",
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
 	serverId: "",
-	registryUrl: "",
 	branch: null,
 	dockerBuildStage: "",
-	isPreviewDeploymentsActive: false,
-	previewBuildArgs: null,
-	previewCertificateType: "none",
-	previewEnv: null,
-	previewHttps: false,
-	previewPath: "/",
-	previewPort: 3000,
-	previewLimit: 0,
-	previewWildcard: "",
 	project: {
 		env: "",
 		adminId: "",

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

@@ -6,24 +6,13 @@ import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
 	applicationId: "",
-	herokuVersion: "",
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",
-	registryUrl: "",
 	buildArgs: null,
-	isPreviewDeploymentsActive: false,
-	previewBuildArgs: null,
-	previewCertificateType: "none",
-	previewEnv: null,
-	previewHttps: false,
-	previewPath: "/",
-	previewPort: 3000,
-	previewLimit: 0,
-	previewWildcard: "",
 	project: {
 		env: "",
 		adminId: "",
@@ -105,7 +94,6 @@ const baseDomain: Domain = {
 	composeId: "",
 	domainType: "application",
 	uniqueConfigKey: 1,
-	previewDeploymentId: "",
 };
 
 const baseRedirect: Redirect = {

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

@@ -1,4 +1,3 @@
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -19,6 +18,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -150,7 +150,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
@@ -303,12 +303,9 @@ export const AddVolumes = ({
 													<FormLabel>Content</FormLabel>
 													<FormControl>
 														<FormControl>
-															<CodeEditor
-																language="properties"
-																placeholder={`NODE_ENV=production
-PORT=3000
-`}
-																className="h-96 font-mono"
+															<Textarea
+																placeholder="Any content"
+																className="h-64"
 																{...field}
 															/>
 														</FormControl>

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

@@ -1,8 +1,8 @@
 import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
+	DialogClose,
 	DialogContent,
 	DialogDescription,
 	DialogFooter,
@@ -19,6 +19,7 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Pencil } from "lucide-react";
@@ -118,7 +119,7 @@ export const UpdateVolume = ({
 			} else if (typeForm === "file") {
 				form.reset({
 					content: data.content || "",
-					mountPath: serviceType === "compose" ? "/" : data.mountPath,
+					mountPath: "/",
 					filePath: data.filePath || "",
 					type: "file",
 				});
@@ -181,7 +182,7 @@ export const UpdateVolume = ({
 					<Pencil className="size-4  text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>
@@ -246,12 +247,9 @@ export const UpdateVolume = ({
 												<FormLabel>Content</FormLabel>
 												<FormControl>
 													<FormControl>
-														<CodeEditor
-															language="properties"
-															placeholder={`NODE_ENV=production
-PORT=3000
-`}
-															className="h-96 font-mono"
+														<Textarea
+															placeholder="Any content"
+															className="h-64"
 															{...field}
 														/>
 													</FormControl>

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

@@ -41,7 +41,6 @@ const mySchema = z.discriminatedUnion("buildType", [
 	}),
 	z.object({
 		buildType: z.literal("heroku_buildpacks"),
-		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
 		buildType: z.literal("paketo_buildpacks"),
@@ -91,13 +90,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 						dockerBuildStage: data.dockerBuildStage || "",
 					}),
 				});
-			} else if (data.buildType === "heroku_buildpacks") {
-				form.reset({
-					buildType: data.buildType,
-					...(data.buildType && {
-						herokuVersion: data.herokuVersion || "",
-					}),
-				});
 			} else {
 				form.reset({
 					buildType: data.buildType,
@@ -118,8 +110,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 				data.buildType === "dockerfile" ? data.dockerContextPath : null,
 			dockerBuildStage:
 				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
-			herokuVersion:
-				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -210,28 +200,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								);
 							}}
 						/>
-						{buildType === "heroku_buildpacks" && (
-							<FormField
-								control={form.control}
-								name="herokuVersion"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Heroku Version (Optional)</FormLabel>
-											<FormControl>
-												<Input
-													placeholder={"Heroku Version (Default: 24)"}
-													{...field}
-													value={field.value ?? ""}
-												/>
-											</FormControl>
-
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-						)}
 						{buildType === "dockerfile" && (
 							<>
 								<FormField

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

@@ -1,143 +1,63 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteApplicationSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Application name is required",
-	}),
-});
-
-type DeleteApplication = z.infer<typeof deleteApplicationSchema>;
 
 interface Props {
 	applicationId: string;
 }
 
 export const DeleteApplication = ({ applicationId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.application.delete.useMutation();
-	const { data } = api.application.one.useQuery(
-		{ applicationId },
-		{ enabled: !!applicationId },
-	);
 	const { push } = useRouter();
-	const form = useForm<DeleteApplication>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteApplicationSchema),
-	});
-
-	const onSubmit = async (formData: DeleteApplication) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({
-				applicationId,
-			})
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Application deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the application");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Project name does not match",
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						application. If you are sure please enter the application name to
-						delete this application.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-application"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter application name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+
+									toast.success("Application delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete Application");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-application"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -28,7 +28,6 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 			refetchInterval: 1000,
 		},
 	);
-
 	const [url, setUrl] = React.useState("");
 	useEffect(() => {
 		setUrl(document.location.origin);

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

@@ -61,7 +61,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				onSubmit={form.handleSubmit(onSubmit)}
 				className="flex w-full flex-col gap-5 "
 			>
-				<Card className="bg-background p-6">
+				<Card className="bg-background">
 					<Secrets
 						name="env"
 						title="Environment Settings"

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

@@ -202,6 +202,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -280,6 +281,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -21,7 +21,6 @@ const DockerProviderSchema = z.object({
 	}),
 	username: z.string().optional(),
 	password: z.string().optional(),
-	registryURL: z.string().optional(),
 });
 
 type DockerProvider = z.infer<typeof DockerProviderSchema>;
@@ -34,12 +33,12 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 	const { data, refetch } = api.application.one.useQuery({ applicationId });
 
 	const { mutateAsync } = api.application.saveDockerProvider.useMutation();
+
 	const form = useForm<DockerProvider>({
 		defaultValues: {
 			dockerImage: "",
 			password: "",
 			username: "",
-			registryURL: "",
 		},
 		resolver: zodResolver(DockerProviderSchema),
 	});
@@ -50,7 +49,6 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 				dockerImage: data.dockerImage || "",
 				password: data.password || "",
 				username: data.username || "",
-				registryURL: data.registryUrl || "",
 			});
 		}
 	}, [form.reset, data, form]);
@@ -61,7 +59,6 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 			password: values.password || null,
 			applicationId,
 			username: values.username || null,
-			registryUrl: values.registryURL || null,
 		})
 			.then(async () => {
 				toast.success("Docker Provider Saved");
@@ -79,7 +76,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 				className="flex flex-col gap-4"
 			>
 				<div className="grid md:grid-cols-2 gap-4 ">
-					<div className="space-y-4">
+					<div className="md:col-span-2 space-y-4">
 						<FormField
 							control={form.control}
 							name="dockerImage"
@@ -94,19 +91,6 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 							)}
 						/>
 					</div>
-					<FormField
-						control={form.control}
-						name="registryURL"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Registry URL</FormLabel>
-								<FormControl>
-									<Input placeholder="Registry URL" {...field} />
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
 					<div className="space-y-4">
 						<FormField
 							control={form.control}

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

@@ -193,6 +193,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -271,6 +272,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -209,6 +209,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -296,6 +297,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -2,9 +2,9 @@ import { ShowBuildChooseForm } from "@/components/dashboard/application/build/sh
 import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Switch } from "@/components/ui/switch";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
-import { Terminal } from "lucide-react";
+import { CheckCircle2, Terminal } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -39,6 +39,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 						appName={data?.appName || ""}
 					/>
 
+					<Toggle
+						aria-label="Toggle italic"
+						pressed={data?.autoDeploy || false}
+						onPressedChange={async (enabled) => {
+							await update({
+								applicationId,
+								autoDeploy: enabled,
+							})
+								.then(async () => {
+									toast.success("Auto Deploy Updated");
+									await refetch();
+								})
+								.catch(() => {
+									toast.error("Error to update Auto Deploy");
+								});
+						}}
+						className="flex flex-row gap-2 items-center"
+					>
+						Autodeploy
+						{data?.autoDeploy && <CheckCircle2 className="size-4" />}
+					</Toggle>
 					<RedbuildApplication applicationId={applicationId} />
 					{data?.applicationStatus === "idle" ? (
 						<StartApplication applicationId={applicationId} />
@@ -54,27 +75,6 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
-					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<span className="text-sm font-medium">Autodeploy</span>
-						<Switch
-							aria-label="Toggle italic"
-							checked={data?.autoDeploy || false}
-							onCheckedChange={async (enabled) => {
-								await update({
-									applicationId,
-									autoDeploy: enabled,
-								})
-									.then(async () => {
-										toast.success("Auto Deploy Updated");
-										await refetch();
-									})
-									.catch(() => {
-										toast.error("Error to update Auto Deploy");
-									});
-							}}
-							className="flex flex-row gap-2 items-center"
-						/>
-					</div>
 				</CardContent>
 			</Card>
 			<ShowProviderForm applicationId={applicationId} />

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

@@ -1,304 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, NumberInput } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { domain } from "@/server/db/validations/domain";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Dices } from "lucide-react";
-import type z from "zod";
-
-type Domain = z.infer<typeof domain>;
-
-interface Props {
-	previewDeploymentId: string;
-	domainId?: string;
-	children: React.ReactNode;
-}
-
-export const AddPreviewDomain = ({
-	previewDeploymentId,
-	domainId = "",
-	children,
-}: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
-	const { data, refetch } = api.domain.one.useQuery(
-		{
-			domainId,
-		},
-		{
-			enabled: !!domainId,
-		},
-	);
-
-	const { data: previewDeployment } = api.previewDeployment.one.useQuery(
-		{
-			previewDeploymentId,
-		},
-		{
-			enabled: !!previewDeploymentId,
-		},
-	);
-
-	const { mutateAsync, isError, error, isLoading } = domainId
-		? api.domain.update.useMutation()
-		: api.domain.create.useMutation();
-
-	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
-		api.domain.generateDomain.useMutation();
-
-	const form = useForm<Domain>({
-		resolver: zodResolver(domain),
-	});
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				...data,
-				/* Convert null to undefined */
-				path: data?.path || undefined,
-				port: data?.port || undefined,
-			});
-		}
-
-		if (!domainId) {
-			form.reset({});
-		}
-	}, [form, form.reset, data, isLoading]);
-
-	const dictionary = {
-		success: domainId ? "Domain Updated" : "Domain Created",
-		error: domainId
-			? "Error to update the domain"
-			: "Error to create the domain",
-		submit: domainId ? "Update" : "Create",
-		dialogDescription: domainId
-			? "In this section you can edit a domain"
-			: "In this section you can add domains",
-	};
-
-	const onSubmit = async (data: Domain) => {
-		await mutateAsync({
-			domainId,
-			previewDeploymentId,
-			...data,
-		})
-			.then(async () => {
-				toast.success(dictionary.success);
-				await utils.previewDeployment.all.invalidate({
-					applicationId: previewDeployment?.applicationId,
-				});
-
-				if (domainId) {
-					refetch();
-				}
-				setIsOpen(false);
-			})
-			.catch(() => {
-				toast.error(dictionary.error);
-			});
-	};
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger className="" asChild>
-				{children}
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
-				<DialogHeader>
-					<DialogTitle>Domain</DialogTitle>
-					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>
-				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-8 "
-					>
-						<div className="flex flex-col gap-4">
-							<div className="flex flex-col gap-2">
-								<FormField
-									control={form.control}
-									name="host"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Host</FormLabel>
-											<div className="flex gap-2">
-												<FormControl>
-													<Input placeholder="api.dokploy.com" {...field} />
-												</FormControl>
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<Button
-																variant="secondary"
-																type="button"
-																isLoading={isLoadingGenerate}
-																onClick={() => {
-																	generateDomain({
-																		appName: previewDeployment?.appName || "",
-																		serverId:
-																			previewDeployment?.application
-																				?.serverId || "",
-																	})
-																		.then((domain) => {
-																			field.onChange(domain);
-																		})
-																		.catch((err) => {
-																			toast.error(err.message);
-																		});
-																}}
-															>
-																<Dices className="size-4 text-muted-foreground" />
-															</Button>
-														</TooltipTrigger>
-														<TooltipContent
-															side="left"
-															sideOffset={5}
-															className="max-w-[10rem]"
-														>
-															<p>Generate traefik.me domain</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="path"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Path</FormLabel>
-												<FormControl>
-													<Input placeholder={"/"} {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="port"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Container Port</FormLabel>
-												<FormControl>
-													<NumberInput placeholder={"3000"} {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="https"
-									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
-											<div className="space-y-0.5">
-												<FormLabel>HTTPS</FormLabel>
-												<FormDescription>
-													Automatically provision SSL Certificate.
-												</FormDescription>
-												<FormMessage />
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
-									)}
-								/>
-
-								{form.getValues().https && (
-									<FormField
-										control={form.control}
-										name="certificateType"
-										render={({ field }) => (
-											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
-												<Select
-													onValueChange={field.onChange}
-													defaultValue={field.value || ""}
-												>
-													<FormControl>
-														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
-														</SelectTrigger>
-													</FormControl>
-
-													<SelectContent>
-														<SelectItem value="none">None</SelectItem>
-														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
-														</SelectItem>
-													</SelectContent>
-												</Select>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
-							</div>
-						</div>
-					</form>
-
-					<DialogFooter>
-						<Button isLoading={isLoading} form="hook-form" type="submit">
-							{dictionary.submit}
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,87 +0,0 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-
-import type { RouterOutputs } from "@/utils/api";
-import { useState } from "react";
-import { ShowDeployment } from "../deployments/show-deployment";
-
-interface Props {
-	deployments: RouterOutputs["deployment"]["all"];
-	serverId?: string;
-}
-
-export const ShowPreviewBuilds = ({ deployments, serverId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
-	const [isOpen, setIsOpen] = useState(false);
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button variant="outline">View Builds</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
-				<DialogHeader>
-					<DialogTitle>Preview Builds</DialogTitle>
-					<DialogDescription>
-						See all the preview builds for this application on this Pull Request
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					{deployments?.map((deployment) => (
-						<div
-							key={deployment.deploymentId}
-							className="flex items-center justify-between rounded-lg border p-4 gap-2"
-						>
-							<div className="flex flex-col">
-								<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-									{deployment.status}
-
-									<StatusTooltip
-										status={deployment?.status}
-										className="size-2.5"
-									/>
-								</span>
-								<span className="text-sm text-muted-foreground">
-									{deployment.title}
-								</span>
-								{deployment.description && (
-									<span className="break-all text-sm text-muted-foreground">
-										{deployment.description}
-									</span>
-								)}
-							</div>
-							<div className="flex flex-col items-end gap-2">
-								<div className="text-sm capitalize text-muted-foreground">
-									<DateTooltip date={deployment.createdAt} />
-								</div>
-
-								<Button
-									onClick={() => {
-										setActiveLog(deployment.logPath);
-									}}
-								>
-									View
-								</Button>
-							</div>
-						</div>
-					))}
-				</div>
-			</DialogContent>
-			<ShowDeployment
-				serverId={serverId || ""}
-				open={activeLog !== null}
-				onClose={() => setActiveLog(null)}
-				logPath={activeLog}
-			/>
-		</Dialog>
-	);
-};

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

@@ -1,212 +0,0 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { Pencil, RocketIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { ShowDeployment } from "../deployments/show-deployment";
-import Link from "next/link";
-import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { AddPreviewDomain } from "./add-preview-domain";
-import { GithubIcon } from "@/components/icons/data-tools-icons";
-import { ShowPreviewSettings } from "./show-preview-settings";
-import { ShowPreviewBuilds } from "./show-preview-builds";
-
-interface Props {
-	applicationId: string;
-}
-
-export const ShowPreviewDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
-	const { data } = api.application.one.useQuery({ applicationId });
-
-	const { mutateAsync: deletePreviewDeployment, isLoading } =
-		api.previewDeployment.delete.useMutation();
-	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
-		api.previewDeployment.all.useQuery(
-			{ applicationId },
-			{
-				enabled: !!applicationId,
-			},
-		);
-	// const [url, setUrl] = React.useState("");
-	// useEffect(() => {
-	// 	setUrl(document.location.origin);
-	// }, []);
-
-	return (
-		<Card className="bg-background">
-			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-				<div className="flex flex-col gap-2">
-					<CardTitle className="text-xl">Preview Deployments</CardTitle>
-					<CardDescription>See all the preview deployments</CardDescription>
-				</div>
-				{data?.isPreviewDeploymentsActive && (
-					<ShowPreviewSettings applicationId={applicationId} />
-				)}
-			</CardHeader>
-			<CardContent className="flex flex-col gap-4">
-				{data?.isPreviewDeploymentsActive ? (
-					<>
-						<div className="flex flex-col gap-2 text-sm">
-							<span>
-								Preview deployments are a way to test your application before it
-								is deployed to production. It will create a new deployment for
-								each pull request you create.
-							</span>
-						</div>
-						{data?.previewDeployments?.length === 0 ? (
-							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
-								<RocketIcon className="size-8 text-muted-foreground" />
-								<span className="text-base text-muted-foreground">
-									No preview deployments found
-								</span>
-							</div>
-						) : (
-							<div className="flex flex-col gap-4">
-								{previewDeployments?.map((previewDeployment) => {
-									const { deployments, domain } = previewDeployment;
-
-									return (
-										<div
-											key={previewDeployment?.previewDeploymentId}
-											className="flex flex-col  justify-between rounded-lg border p-4 gap-2"
-										>
-											<div className="flex justify-between gap-2 max-sm:flex-wrap">
-												<div className="flex flex-col gap-2">
-													{deployments?.length === 0 ? (
-														<div>
-															<span className="text-sm text-muted-foreground">
-																No deployments found
-															</span>
-														</div>
-													) : (
-														<div className="flex items-center gap-2">
-															<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-																{previewDeployment?.pullRequestTitle}
-															</span>
-															<StatusTooltip
-																status={previewDeployment.previewStatus}
-																className="size-2.5"
-															/>
-														</div>
-													)}
-													<div className="flex flex-col gap-1">
-														{previewDeployment?.pullRequestTitle && (
-															<div className="flex items-center gap-2">
-																<span className="break-all text-sm text-muted-foreground w-fit">
-																	Title: {previewDeployment?.pullRequestTitle}
-																</span>
-															</div>
-														)}
-
-														{previewDeployment?.pullRequestURL && (
-															<div className="flex items-center gap-2">
-																<GithubIcon />
-																<Link
-																	target="_blank"
-																	href={previewDeployment?.pullRequestURL}
-																	className="break-all text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-																>
-																	Pull Request URL
-																</Link>
-															</div>
-														)}
-													</div>
-													<div className="flex flex-col ">
-														<span>Domain </span>
-														<div className="flex flex-row items-center gap-4">
-															<Link
-																target="_blank"
-																href={`http://${domain?.host}`}
-																className="text-sm text-muted-foreground w-fit hover:underline hover:text-foreground"
-															>
-																{domain?.host}
-															</Link>
-															<AddPreviewDomain
-																previewDeploymentId={
-																	previewDeployment.previewDeploymentId
-																}
-																domainId={domain?.domainId}
-															>
-																<Button variant="outline" size="sm">
-																	<Pencil className="size-4 text-muted-foreground" />
-																</Button>
-															</AddPreviewDomain>
-														</div>
-													</div>
-												</div>
-
-												<div className="flex flex-col sm:items-end gap-2 max-sm:w-full">
-													{previewDeployment?.createdAt && (
-														<div className="text-sm capitalize text-muted-foreground">
-															<DateTooltip
-																date={previewDeployment?.createdAt}
-															/>
-														</div>
-													)}
-													<ShowPreviewBuilds
-														deployments={previewDeployment?.deployments || []}
-														serverId={data?.serverId || ""}
-													/>
-
-													<ShowModalLogs
-														appName={previewDeployment.appName}
-														serverId={data?.serverId || ""}
-													>
-														<Button variant="outline">View Logs</Button>
-													</ShowModalLogs>
-
-													<DialogAction
-														title="Delete Preview"
-														description="Are you sure you want to delete this preview?"
-														onClick={() => {
-															deletePreviewDeployment({
-																previewDeploymentId:
-																	previewDeployment.previewDeploymentId,
-															})
-																.then(() => {
-																	refetchPreviewDeployments();
-																	toast.success("Preview deployment deleted");
-																})
-																.catch((error) => {
-																	toast.error(error.message);
-																});
-														}}
-													>
-														<Button variant="destructive" isLoading={isLoading}>
-															Delete Preview
-														</Button>
-													</DialogAction>
-												</div>
-											</div>
-										</div>
-									);
-								})}
-							</div>
-						)}
-					</>
-				) : (
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
-						<RocketIcon className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
-							Preview deployments are disabled for this application, please
-							enable it
-						</span>
-						<ShowPreviewSettings applicationId={applicationId} />
-					</div>
-				)}
-			</CardContent>
-		</Card>
-	);
-};

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

@@ -1,351 +0,0 @@
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, NumberInput } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Secrets } from "@/components/ui/secrets";
-import { toast } from "sonner";
-import { Switch } from "@/components/ui/switch";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-
-const schema = z.object({
-	env: z.string(),
-	buildArgs: z.string(),
-	wildcardDomain: z.string(),
-	port: z.number(),
-	previewLimit: z.number(),
-	previewHttps: z.boolean(),
-	previewPath: z.string(),
-	previewCertificateType: z.enum(["letsencrypt", "none"]),
-});
-
-type Schema = z.infer<typeof schema>;
-
-interface Props {
-	applicationId: string;
-}
-
-export const ShowPreviewSettings = ({ applicationId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [isEnabled, setIsEnabled] = useState(false);
-	const { mutateAsync: updateApplication, isLoading } =
-		api.application.update.useMutation();
-
-	const { data, refetch } = api.application.one.useQuery({ applicationId });
-
-	const form = useForm<Schema>({
-		defaultValues: {
-			env: "",
-			wildcardDomain: "*.traefik.me",
-			port: 3000,
-			previewLimit: 3,
-			previewHttps: false,
-			previewPath: "/",
-			previewCertificateType: "none",
-		},
-		resolver: zodResolver(schema),
-	});
-
-	const previewHttps = form.watch("previewHttps");
-
-	useEffect(() => {
-		setIsEnabled(data?.isPreviewDeploymentsActive || false);
-	}, [data?.isPreviewDeploymentsActive]);
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				env: data.previewEnv || "",
-				buildArgs: data.previewBuildArgs || "",
-				wildcardDomain: data.previewWildcard || "*.traefik.me",
-				port: data.previewPort || 3000,
-				previewLimit: data.previewLimit || 3,
-				previewHttps: data.previewHttps || false,
-				previewPath: data.previewPath || "/",
-				previewCertificateType: data.previewCertificateType || "none",
-			});
-		}
-	}, [data]);
-
-	const onSubmit = async (formData: Schema) => {
-		updateApplication({
-			previewEnv: formData.env,
-			previewBuildArgs: formData.buildArgs,
-			previewWildcard: formData.wildcardDomain,
-			previewPort: formData.port,
-			applicationId,
-			previewLimit: formData.previewLimit,
-			previewHttps: formData.previewHttps,
-			previewPath: formData.previewPath,
-			previewCertificateType: formData.previewCertificateType,
-		})
-			.then(() => {
-				toast.success("Preview Deployments settings updated");
-			})
-			.catch((error) => {
-				toast.error(error.message);
-			});
-	};
-	return (
-		<div>
-			<Dialog open={isOpen} onOpenChange={setIsOpen}>
-				<DialogTrigger asChild>
-					<Button variant="outline">View Settings</Button>
-				</DialogTrigger>
-				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
-					<DialogHeader>
-						<DialogTitle>Preview Deployment Settings</DialogTitle>
-						<DialogDescription>
-							Adjust the settings for preview deployments of this application,
-							including environment variables, build options, and deployment
-							rules.
-						</DialogDescription>
-					</DialogHeader>
-					<div className="grid gap-4">
-						<Form {...form}>
-							<form
-								onSubmit={form.handleSubmit(onSubmit)}
-								id="hook-form-delete-application"
-								className="grid w-full gap-4"
-							>
-								<div className="grid gap-4 lg:grid-cols-2">
-									<FormField
-										control={form.control}
-										name="wildcardDomain"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Wildcard Domain</FormLabel>
-												<FormControl>
-													<Input placeholder="*.traefik.me" {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="previewPath"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Preview Path</FormLabel>
-												<FormControl>
-													<Input placeholder="/" {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="port"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Port</FormLabel>
-												<FormControl>
-													<NumberInput placeholder="3000" {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="previewLimit"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Preview Limit</FormLabel>
-												{/* <FormDescription>
-													Set the limit of preview deployments that can be
-													created for this app.
-												</FormDescription> */}
-												<FormControl>
-													<NumberInput placeholder="3000" {...field} />
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-									<FormField
-										control={form.control}
-										name="previewHttps"
-										render={({ field }) => (
-											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
-												<div className="space-y-0.5">
-													<FormLabel>HTTPS</FormLabel>
-													<FormDescription>
-														Automatically provision SSL Certificate.
-													</FormDescription>
-													<FormMessage />
-												</div>
-												<FormControl>
-													<Switch
-														checked={field.value}
-														onCheckedChange={field.onChange}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-									{previewHttps && (
-										<FormField
-											control={form.control}
-											name="previewCertificateType"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Certificate</FormLabel>
-													<Select
-														onValueChange={field.onChange}
-														defaultValue={field.value || ""}
-													>
-														<FormControl>
-															<SelectTrigger>
-																<SelectValue placeholder="Select a certificate" />
-															</SelectTrigger>
-														</FormControl>
-
-														<SelectContent>
-															<SelectItem value="none">None</SelectItem>
-															<SelectItem value={"letsencrypt"}>
-																Letsencrypt (Default)
-															</SelectItem>
-														</SelectContent>
-													</Select>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									)}
-								</div>
-								<div className="grid gap-4 lg:grid-cols-2">
-									<div className="flex flex-row items-center justify-between rounded-lg border p-4 col-span-2">
-										<div className="space-y-0.5">
-											<FormLabel className="text-base">
-												Enable preview deployments
-											</FormLabel>
-											<FormDescription>
-												Enable or disable preview deployments for this
-												application.
-											</FormDescription>
-										</div>
-										<Switch
-											checked={isEnabled}
-											onCheckedChange={(checked) => {
-												updateApplication({
-													isPreviewDeploymentsActive: checked,
-													applicationId,
-												})
-													.then(() => {
-														refetch();
-														toast.success("Preview deployments enabled");
-													})
-													.catch((error) => {
-														toast.error(error.message);
-													});
-											}}
-										/>
-									</div>
-								</div>
-
-								<FormField
-									control={form.control}
-									name="env"
-									render={({ field }) => (
-										<FormItem>
-											<FormControl>
-												<Secrets
-													name="env"
-													title="Environment Settings"
-													description="You can add environment variables to your resource."
-													placeholder={[
-														"NODE_ENV=production",
-														"PORT=3000",
-													].join("\n")}
-												/>
-												{/* <CodeEditor
-													lineWrapping
-													language="properties"
-													wrapperClassName="h-[25rem] font-mono"
-													placeholder={`NODE_ENV=production
-PORT=3000
-
-                                                    `}
-													{...field}
-												/> */}
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								{data?.buildType === "dockerfile" && (
-									<Secrets
-										name="buildArgs"
-										title="Build-time Variables"
-										description={
-											<span>
-												Available only at build-time. See documentation&nbsp;
-												<a
-													className="text-primary"
-													href="https://docs.docker.com/build/guide/build-args/"
-													target="_blank"
-													rel="noopener noreferrer"
-												>
-													here
-												</a>
-												.
-											</span>
-										}
-										placeholder="NPM_TOKEN=xyz"
-									/>
-								)}
-							</form>
-						</Form>
-					</div>
-					<DialogFooter>
-						<Button
-							variant="secondary"
-							onClick={() => {
-								setIsOpen(false);
-							}}
-						>
-							Cancel
-						</Button>
-						<Button
-							isLoading={isLoading}
-							form="hook-form-delete-application"
-							type="submit"
-						>
-							Save
-						</Button>
-					</DialogFooter>
-				</DialogContent>
-			</Dialog>
-			{/* */}
-		</div>
-	);
-};

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

@@ -1,141 +1,63 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteComposeSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Compose name is required",
-	}),
-});
-
-type DeleteCompose = z.infer<typeof deleteComposeSchema>;
 
 interface Props {
 	composeId: string;
 }
 
 export const DeleteCompose = ({ composeId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.compose.delete.useMutation();
-	const { data } = api.compose.one.useQuery(
-		{ composeId },
-		{ enabled: !!composeId },
-	);
 	const { push } = useRouter();
-	const form = useForm<DeleteCompose>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteComposeSchema),
-	});
-
-	const onSubmit = async (formData: DeleteCompose) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ composeId })
-				.then((result) => {
-					push(`/dashboard/project/${result?.projectId}`);
-					toast.success("Compose deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the compose");
-				});
-		} else {
-			form.setError("projectName", {
-				message: `Project name must match "${expectedName}"`,
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
 					<TrashIcon className="size-4 text-muted-foreground" />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						compose. If you are sure please enter the compose name to delete
-						this compose.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-compose"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>{" "}
-										<FormControl>
-											<Input
-												placeholder="Enter compose name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						compose and all its services.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								composeId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+
+									toast.success("Compose delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the compose");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-compose"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -8,13 +8,12 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Switch } from "@/components/ui/switch";
+import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { CheckCircle2, ExternalLink, Globe, Terminal } from "lucide-react";
 import Link from "next/link";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
-import { StartCompose } from "../start-compose";
 import { DeployCompose } from "./deploy-compose";
 import { RedbuildCompose } from "./rebuild-compose";
 import { StopCompose } from "./stop-compose";
@@ -51,11 +50,28 @@ export const ComposeActions = ({ composeId }: Props) => {
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
 			<DeployCompose composeId={composeId} />
+			<Toggle
+				aria-label="Toggle italic"
+				pressed={data?.autoDeploy || false}
+				onPressedChange={async (enabled) => {
+					await update({
+						composeId,
+						autoDeploy: enabled,
+					})
+						.then(async () => {
+							toast.success("Auto Deploy Updated");
+							await refetch();
+						})
+						.catch(() => {
+							toast.error("Error to update Auto Deploy");
+						});
+				}}
+				className="flex flex-row gap-2 items-center"
+			>
+				Autodeploy {data?.autoDeploy && <CheckCircle2 className="size-4" />}
+			</Toggle>
 			<RedbuildCompose composeId={composeId} />
-			{data?.composeType === "docker-compose" &&
-			data?.composeStatus === "idle" ? (
-				<StartCompose composeId={composeId} />
-			) : (
+			{data?.composeType === "docker-compose" && (
 				<StopCompose composeId={composeId} />
 			)}
 
@@ -68,27 +84,6 @@ export const ComposeActions = ({ composeId }: Props) => {
 					Open Terminal
 				</Button>
 			</DockerTerminalModal>
-			<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-				<span className="text-sm font-medium">Autodeploy</span>
-				<Switch
-					aria-label="Toggle italic"
-					checked={data?.autoDeploy || false}
-					onCheckedChange={async (enabled) => {
-						await update({
-							composeId,
-							autoDeploy: enabled,
-						})
-							.then(async () => {
-								toast.success("Auto Deploy Updated");
-								await refetch();
-							})
-							.catch(() => {
-								toast.error("Error to update Auto Deploy");
-							});
-					}}
-					className="flex flex-row gap-2 items-center"
-				/>
-			</div>
 			{domains.length > 0 && (
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>

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

@@ -204,6 +204,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -282,6 +283,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -195,6 +195,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -273,6 +274,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -211,6 +211,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -298,6 +299,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
+													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

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

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

@@ -1,65 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { CheckCircle2 } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	composeId: string;
-}
-
-export const StartCompose = ({ composeId }: Props) => {
-	const { mutateAsync, isLoading } = api.compose.start.useMutation();
-	const utils = api.useUtils();
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
-				<Button variant="secondary" isLoading={isLoading}>
-					Start
-					<CheckCircle2 className="size-4" />
-				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						Are you sure to start the compose?
-					</AlertDialogTitle>
-					<AlertDialogDescription>
-						This will start the compose
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								composeId,
-							})
-								.then(async () => {
-									await utils.compose.one.invalidate({
-										composeId,
-									});
-									toast.success("Compose started succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to start the Compose");
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

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

@@ -1,65 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { Ban } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	composeId: string;
-}
-
-export const StopCompose = ({ composeId }: Props) => {
-	const { mutateAsync, isLoading } = api.compose.stop.useMutation();
-	const utils = api.useUtils();
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
-				<Button variant="destructive" isLoading={isLoading}>
-					Stop
-					<Ban className="size-4" />
-				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						Are you absolutely sure to stop the compose?
-					</AlertDialogTitle>
-					<AlertDialogDescription>
-						This will stop the compose
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								composeId,
-							})
-								.then(async () => {
-									await utils.compose.one.invalidate({
-										composeId,
-									});
-									toast.success("Compose stopped succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to stop the Compose");
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

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

@@ -160,6 +160,7 @@ export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
 												<FormControl>
 													<Button
 														variant="outline"
+														role="combobox"
 														className={cn(
 															"w-full justify-between !bg-input",
 															!field.value && "text-muted-foreground",

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

@@ -144,6 +144,7 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 												<FormControl>
 													<Button
 														variant="outline"
+														role="combobox"
 														className={cn(
 															"w-full justify-between !bg-input",
 															!field.value && "text-muted-foreground",

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

@@ -1,16 +1,13 @@
-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 dynamic from "next/dynamic";
-import { useState } from "react";
 
 const Terminal = dynamic(
 	() => import("./docker-terminal").then((e) => e.DockerTerminal),
@@ -30,27 +27,8 @@ export const DockerTerminalModal = ({
 	containerId,
 	serverId,
 }: Props) => {
-	const [mainDialogOpen, setMainDialogOpen] = useState(false);
-	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
-
-	const handleMainDialogOpenChange = (open: boolean) => {
-		if (!open) {
-			setConfirmDialogOpen(true);
-		} else {
-			setMainDialogOpen(true);
-		}
-	};
-
-	const handleConfirm = () => {
-		setConfirmDialogOpen(false);
-		setMainDialogOpen(false);
-	};
-
-	const handleCancel = () => {
-		setConfirmDialogOpen(false);
-	};
 	return (
-		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
+		<Dialog>
 			<DialogTrigger asChild>
 				<DropdownMenuItem
 					className="w-full cursor-pointer space-x-3"
@@ -72,24 +50,6 @@ export const DockerTerminalModal = ({
 					containerId={containerId}
 					serverId={serverId || ""}
 				/>
-				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
-					<DialogContent>
-						<DialogHeader>
-							<DialogTitle>
-								Are you sure you want to close the terminal?
-							</DialogTitle>
-							<DialogDescription>
-								By clicking the confirm button, the terminal will be closed.
-							</DialogDescription>
-						</DialogHeader>
-						<DialogFooter>
-							<Button variant="outline" onClick={handleCancel}>
-								Cancel
-							</Button>
-							<Button onClick={handleConfirm}>Confirm</Button>
-						</DialogFooter>
-					</DialogContent>
-				</Dialog>
 			</DialogContent>
 		</Dialog>
 	);

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

@@ -1,140 +1,62 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteMariadbSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Database name is required",
-	}),
-});
-
-type DeleteMariadb = z.infer<typeof deleteMariadbSchema>;
 
 interface Props {
 	mariadbId: string;
 }
+
 export const DeleteMariadb = ({ mariadbId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mariadb.remove.useMutation();
-	const { data } = api.mariadb.one.useQuery(
-		{ mariadbId },
-		{ enabled: !!mariadbId },
-	);
 	const { push } = useRouter();
-	const form = useForm<DeleteMariadb>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteMariadbSchema),
-	});
-
-	const onSubmit = async (formData: DeleteMariadb) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ mariadbId })
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Database deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the database");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Database name does not match",
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4 text-muted-foreground" />
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database. If you are sure please enter the database name to delete
-						this database.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-mariadb"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter database name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mariadbId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+									toast.success("Database delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the database");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-mariadb"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -1,139 +1,62 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteMongoSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Database name is required",
-	}),
-});
-
-type DeleteMongo = z.infer<typeof deleteMongoSchema>;
 
 interface Props {
 	mongoId: string;
 }
 
-// commen
-
 export const DeleteMongo = ({ mongoId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mongo.remove.useMutation();
-	const { data } = api.mongo.one.useQuery({ mongoId }, { enabled: !!mongoId });
 	const { push } = useRouter();
-	const form = useForm<DeleteMongo>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteMongoSchema),
-	});
-
-	const onSubmit = async (formData: DeleteMongo) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ mongoId })
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Database deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the database");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Database name does not match",
-			});
-		}
-	};
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4 text-muted-foreground" />
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database. If you are sure please enter the database name to delete
-						this database.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-mongo"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter database name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mongoId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+									toast.success("Database delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the database");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-mongo"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -1,138 +1,62 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteMysqlSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Database name is required",
-	}),
-});
-
-type DeleteMysql = z.infer<typeof deleteMysqlSchema>;
 
 interface Props {
 	mysqlId: string;
 }
 
 export const DeleteMysql = ({ mysqlId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.mysql.remove.useMutation();
-	const { data } = api.mysql.one.useQuery({ mysqlId }, { enabled: !!mysqlId });
 	const { push } = useRouter();
-	const form = useForm<DeleteMysql>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteMysqlSchema),
-	});
-
-	const onSubmit = async (formData: DeleteMysql) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ mysqlId })
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Database deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the database");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Database name does not match",
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4 text-muted-foreground" />
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database. If you are sure please enter the database name to delete
-						this database.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-mysql"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter database name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mysqlId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+									toast.success("Database delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the database");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-mysql"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -86,12 +86,14 @@ export const ShowVolumes = ({ mysqlId }: Props) => {
 											)}
 
 											{mount.type === "file" && (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">Content</span>
-													<span className="text-sm text-muted-foreground">
-														{mount.content}
-													</span>
-												</div>
+												<>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Content</span>
+														<span className="text-sm text-muted-foreground">
+															{mount.content}
+														</span>
+													</div>
+												</>
 											)}
 											{mount.type === "bind" && (
 												<div className="flex flex-col gap-1">

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

@@ -1,141 +1,62 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deletePostgresSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Database name is required",
-	}),
-});
-
-type DeletePostgres = z.infer<typeof deletePostgresSchema>;
 
 interface Props {
 	postgresId: string;
 }
 
 export const DeletePostgres = ({ postgresId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.postgres.remove.useMutation();
-	const { data } = api.postgres.one.useQuery(
-		{ postgresId },
-		{ enabled: !!postgresId },
-	);
 	const { push } = useRouter();
-	const form = useForm<DeletePostgres>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deletePostgresSchema),
-	});
-
-	const onSubmit = async (formData: DeletePostgres) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ postgresId })
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Database deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the database");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Database name does not match",
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4 text-muted-foreground" />
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database. If you are sure please enter the database name to delete
-						this database.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-postgres"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter database name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								postgresId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+									toast.success("Database delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the database");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-postgres"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -127,6 +127,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 							<PopoverTrigger asChild>
 								<Button
 									variant="outline"
+									role="combobox"
 									className={cn(
 										"md:max-w-[15rem] w-full justify-between !bg-input",
 									)}

apps/dokploy/components/dashboard/projects/add-env.tsx

@@ -19,9 +19,11 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FileIcon } from "lucide-react";
+import { AlertTriangle, FileIcon, SquarePen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -35,10 +37,9 @@ type UpdateProject = z.infer<typeof updateProjectSchema>;
 
 interface Props {
 	projectId: string;
-	children?: React.ReactNode;
 }
 
-export const ProjectEnviroment = ({ projectId, children }: Props) => {
+export const AddEnv = ({ projectId }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { mutateAsync, error, isError, isLoading } =
@@ -52,6 +53,7 @@ export const ProjectEnviroment = ({ projectId, children }: Props) => {
 		},
 	);
 
+	console.log(data);
 	const form = useForm<UpdateProject>({
 		defaultValues: {
 			env: data?.env ?? "",
@@ -84,29 +86,34 @@ export const ProjectEnviroment = ({ projectId, children }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				{children ?? (
-					<DropdownMenuItem
-						className="w-full cursor-pointer space-x-3"
-						onSelect={(e) => e.preventDefault()}
-					>
-						<FileIcon className="size-4" />
-						<span>Project Enviroment</span>
-					</DropdownMenuItem>
-				)}
+				<DropdownMenuItem
+					className="w-full cursor-pointer space-x-3"
+					onSelect={(e) => e.preventDefault()}
+				>
+					<FileIcon className="size-4" />
+					<span>Add Env</span>
+				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-6xl">
 				<DialogHeader>
-					<DialogTitle>Project Enviroment</DialogTitle>
-					<DialogDescription>
-						Update the env Environment variables that are accessible to all
-						services of this project. Use this syntax to reference project-level
-						variables in your service environments:
-					</DialogDescription>
+					<DialogTitle>Modify Shared Env</DialogTitle>
+					<DialogDescription>Update the env variables</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 				<AlertBlock type="info">
-					Use this syntax to reference project-level variables in your service
-					environments: <code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
+					To use a shared env, in one of your services, you need to use like
+					this: Let's say you have a shared env ENVIROMENT="development" and you
+					want to use it in your service, you need to use like this:
+					<ul>
+						<li>
+							<code>ENVIRONMENT=${"{{project.ENVIRONMENT}}"}</code>
+						</li>
+						<li>
+							<code>DATABASE_URL=${"{{project.DATABASE_URL}}"}</code>
+						</li>
+					</ul>{" "}
+					This allows the service to inherit and use the shared variables from
+					the project level, ensuring consistency across services.
 				</AlertBlock>
 				<div className="grid gap-4">
 					<div className="grid items-center gap-4">

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

@@ -25,6 +25,7 @@ import { api } from "@/utils/api";
 import {
 	AlertTriangle,
 	BookIcon,
+	CircuitBoard,
 	ExternalLink,
 	ExternalLinkIcon,
 	FolderInput,
@@ -34,7 +35,7 @@ import {
 import Link from "next/link";
 import { Fragment } from "react";
 import { toast } from "sonner";
-import { ProjectEnviroment } from "./project-enviroment";
+import { AddEnv } from "./add-env";
 import { UpdateProject } from "./update";
 
 export const ShowProjects = () => {
@@ -191,9 +192,7 @@ export const ShowProjects = () => {
 															Actions
 														</DropdownMenuLabel>
 														<div onClick={(e) => e.stopPropagation()}>
-															<ProjectEnviroment
-																projectId={project.projectId}
-															/>
+															<AddEnv projectId={project.projectId} />
 														</div>
 														<div onClick={(e) => e.stopPropagation()}>
 															<UpdateProject projectId={project.projectId} />

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

@@ -1,138 +1,62 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { z } from "zod";
-
-const deleteRedisSchema = z.object({
-	projectName: z.string().min(1, {
-		message: "Database name is required",
-	}),
-});
-
-type DeleteRedis = z.infer<typeof deleteRedisSchema>;
 
 interface Props {
 	redisId: string;
 }
 
 export const DeleteRedis = ({ redisId }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
 	const { mutateAsync, isLoading } = api.redis.remove.useMutation();
-	const { data } = api.redis.one.useQuery({ redisId }, { enabled: !!redisId });
 	const { push } = useRouter();
-	const form = useForm<DeleteRedis>({
-		defaultValues: {
-			projectName: "",
-		},
-		resolver: zodResolver(deleteRedisSchema),
-	});
-
-	const onSubmit = async (formData: DeleteRedis) => {
-		const expectedName = `${data?.name}/${data?.appName}`;
-		if (formData.projectName === expectedName) {
-			await mutateAsync({ redisId })
-				.then((data) => {
-					push(`/dashboard/project/${data?.projectId}`);
-					toast.success("Database deleted successfully");
-					setIsOpen(false);
-				})
-				.catch(() => {
-					toast.error("Error deleting the database");
-				});
-		} else {
-			form.setError("projectName", {
-				message: "Database name does not match",
-			});
-		}
-	};
-
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
 				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4 text-muted-foreground" />
+					<TrashIcon className="size-4  text-muted-foreground " />
 				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Are you absolutely sure?</DialogTitle>
-					<DialogDescription>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
 						This action cannot be undone. This will permanently delete the
-						database. If you are sure please enter the database name to delete
-						this database.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="grid gap-4">
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="hook-form-delete-redis"
-							className="grid w-full gap-4"
-						>
-							<FormField
-								control={form.control}
-								name="projectName"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>
-											To confirm, type "{data?.name}/{data?.appName}" in the box
-											below
-										</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Enter database name to confirm"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						</form>
-					</Form>
-				</div>
-				<DialogFooter>
-					<Button
-						variant="secondary"
-						onClick={() => {
-							setIsOpen(false);
+						database
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								redisId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+									toast.success("Database delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the database");
+								});
 						}}
-					>
-						Cancel
-					</Button>
-					<Button
-						isLoading={isLoading}
-						form="hook-form-delete-redis"
-						type="submit"
-						variant="destructive"
 					>
 						Confirm
-					</Button>
-				</DialogFooter>
-			</DialogContent>
-		</Dialog>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
 	);
 };

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

@@ -49,11 +49,8 @@ export const columns: ColumnDef<LogEntry>[] = [
 			const log = row.original;
 			return (
 				<div className=" flex flex-col gap-2">
-					<div className="flex items-center flex-row gap-3 ">
+					<div className="flex flex-row gap-3 ">
 						{log.RequestMethod}{" "}
-						<div className="inline-flex items-center gap-2 bg-muted p-1 rounded">
-							<span>{log.RequestAddr}</span>
-						</div>
 						{log.RequestPath.length > 100
 							? `${log.RequestPath.slice(0, 82)}...`
 							: log.RequestPath}

apps/dokploy/components/dashboard/settings/appearance-form.tsx

@@ -27,7 +27,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Languages } from "@/lib/languages";
 import useLocale from "@/utils/hooks/use-locale";
 import { useTranslation } from "next-i18next";
 import { useTheme } from "next-themes";
@@ -38,7 +37,7 @@ const appearanceFormSchema = z.object({
 	theme: z.enum(["light", "dark", "system"], {
 		required_error: "Please select a theme.",
 	}),
-	language: z.nativeEnum(Languages, {
+	language: z.enum(["en", "pl", "zh-Hans"], {
 		required_error: "Please select a language.",
 	}),
 });
@@ -48,7 +47,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
 	theme: "system",
-	language: Languages.English,
+	language: "en",
 };
 
 export function AppearanceForm() {
@@ -173,15 +172,15 @@ export function AppearanceForm() {
 												<SelectValue placeholder="No preset selected" />
 											</SelectTrigger>
 											<SelectContent>
-												{Object.keys(Languages).map((preset) => {
-													const value =
-														Languages[preset as keyof typeof Languages];
-													return (
-														<SelectItem key={value} value={value}>
-															{preset}
-														</SelectItem>
-													);
-												})}
+												{[
+													{ label: "English", value: "en" },
+													{ label: "Polski", value: "pl" },
+													{ label: "简体中文", value: "zh-Hans" },
+												].map((preset) => (
+													<SelectItem key={preset.label} value={preset.value}>
+														{preset.label}
+													</SelectItem>
+												))}
 											</SelectContent>
 										</Select>
 									</FormItem>

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -89,14 +89,18 @@ export const ShowBilling = () => {
 					<div className="pb-5">
 						<Progress value={safePercentage} className="max-w-lg" />
 					</div>
-					{admin && admin.serversQuantity! <= servers?.length! && (
-						<div className="flex flex-row gap-4 p-2 bg-yellow-50 dark:bg-yellow-950 rounded-lg items-center">
-							<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
-							<span className="text-sm text-yellow-600 dark:text-yellow-400">
-								You have reached the maximum number of servers you can create,
-								please upgrade your plan to add more servers.
-							</span>
-						</div>
+					{admin && (
+						<>
+							{admin.serversQuantity! <= servers?.length! && (
+								<div className="flex flex-row gap-4 p-2 bg-yellow-50 dark:bg-yellow-950 rounded-lg items-center">
+									<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
+									<span className="text-sm text-yellow-600 dark:text-yellow-400">
+										You have reached the maximum number of servers you can
+										create, please upgrade your plan to add more servers.
+									</span>
+								</div>
+							)}
+						</>
 					)}
 				</div>
 			)}
@@ -184,6 +188,7 @@ export const ShowBilling = () => {
 									</p>
 
 									<ul
+										role="list"
 										className={clsx(
 											" mt-4 flex flex-col gap-y-2 text-sm",
 											featured ? "text-white" : "text-slate-200",

apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx

@@ -28,7 +28,11 @@ export const ShowRegistry = () => {
 					</div>
 
 					<div className="flex flex-row gap-2">
-						{data && data?.length > 0 && <AddRegistry />}
+						{data && data?.length > 0 && (
+							<>
+								<AddRegistry />
+							</>
+						)}
 					</div>
 				</CardHeader>
 				<CardContent className="space-y-2 pt-4 h-full">

apps/dokploy/components/dashboard/settings/destination/add-destination.tsx

@@ -34,11 +34,9 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { S3_PROVIDERS } from "./constants";
 
 const addDestination = z.object({
 	name: z.string().min(1, "Name is required"),
-	provider: z.string().optional(),
 	accessKeyId: z.string(),
 	secretAccessKey: z.string(),
 	bucket: z.string(),
@@ -60,7 +58,6 @@ export const AddDestination = () => {
 		api.destination.testConnection.useMutation();
 	const form = useForm<AddDestination>({
 		defaultValues: {
-			provider: "",
 			accessKeyId: "",
 			bucket: "",
 			name: "",
@@ -76,7 +73,6 @@ export const AddDestination = () => {
 
 	const onSubmit = async (data: AddDestination) => {
 		await mutateAsync({
-			provider: data.provider || "",
 			accessKey: data.accessKeyId,
 			bucket: data.bucket,
 			endpoint: data.endpoint,
@@ -127,40 +123,6 @@ export const AddDestination = () => {
 								);
 							}}
 						/>
-						<FormField
-							control={form.control}
-							name="provider"
-							render={({ field }) => {
-								return (
-									<FormItem>
-										<FormLabel>Provider</FormLabel>
-										<FormControl>
-											<Select
-												onValueChange={field.onChange}
-												defaultValue={field.value}
-											>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select a S3 Provider" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													{S3_PROVIDERS.map((s3Provider) => (
-														<SelectItem
-															key={s3Provider.key}
-															value={s3Provider.key}
-														>
-															{s3Provider.name}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								);
-							}}
-						/>
 
 						<FormField
 							control={form.control}
@@ -293,7 +255,6 @@ export const AddDestination = () => {
 									isLoading={isLoading}
 									onClick={async () => {
 										await testConnection({
-											provider: form.getValues("provider") || "",
 											accessKey: form.getValues("accessKeyId"),
 											bucket: form.getValues("bucket"),
 											endpoint: form.getValues("endpoint"),
@@ -322,7 +283,6 @@ export const AddDestination = () => {
 								variant="secondary"
 								onClick={async () => {
 									await testConnection({
-										provider: form.getValues("provider") || "",
 										accessKey: form.getValues("accessKeyId"),
 										bucket: form.getValues("bucket"),
 										endpoint: form.getValues("endpoint"),

apps/dokploy/components/dashboard/settings/destination/constants.ts

@@ -1,133 +0,0 @@
-export const S3_PROVIDERS: Array<{
-	key: string;
-	name: string;
-}> = [
-	{
-		key: "AWS",
-		name: "Amazon Web Services (AWS) S3",
-	},
-	{
-		key: "Alibaba",
-		name: "Alibaba Cloud Object Storage System (OSS) formerly Aliyun",
-	},
-	{
-		key: "ArvanCloud",
-		name: "Arvan Cloud Object Storage (AOS)",
-	},
-	{
-		key: "Ceph",
-		name: "Ceph Object Storage",
-	},
-	{
-		key: "ChinaMobile",
-		name: "China Mobile Ecloud Elastic Object Storage (EOS)",
-	},
-	{
-		key: "Cloudflare",
-		name: "Cloudflare R2 Storage",
-	},
-	{
-		key: "DigitalOcean",
-		name: "DigitalOcean Spaces",
-	},
-	{
-		key: "Dreamhost",
-		name: "Dreamhost DreamObjects",
-	},
-	{
-		key: "GCS",
-		name: "Google Cloud Storage",
-	},
-	{
-		key: "HuaweiOBS",
-		name: "Huawei Object Storage Service",
-	},
-	{
-		key: "IBMCOS",
-		name: "IBM COS S3",
-	},
-	{
-		key: "IDrive",
-		name: "IDrive e2",
-	},
-	{
-		key: "IONOS",
-		name: "IONOS Cloud",
-	},
-	{
-		key: "LyveCloud",
-		name: "Seagate Lyve Cloud",
-	},
-	{
-		key: "Leviia",
-		name: "Leviia Object Storage",
-	},
-	{
-		key: "Liara",
-		name: "Liara Object Storage",
-	},
-	{
-		key: "Linode",
-		name: "Linode Object Storage",
-	},
-	{
-		key: "Magalu",
-		name: "Magalu Object Storage",
-	},
-	{
-		key: "Minio",
-		name: "Minio Object Storage",
-	},
-	{
-		key: "Netease",
-		name: "Netease Object Storage (NOS)",
-	},
-	{
-		key: "Petabox",
-		name: "Petabox Object Storage",
-	},
-	{
-		key: "RackCorp",
-		name: "RackCorp Object Storage",
-	},
-	{
-		key: "Rclone",
-		name: "Rclone S3 Server",
-	},
-	{
-		key: "Scaleway",
-		name: "Scaleway Object Storage",
-	},
-	{
-		key: "SeaweedFS",
-		name: "SeaweedFS S3",
-	},
-	{
-		key: "StackPath",
-		name: "StackPath Object Storage",
-	},
-	{
-		key: "Storj",
-		name: "Storj (S3 Compatible Gateway)",
-	},
-	{
-		key: "Synology",
-		name: "Synology C2 Object Storage",
-	},
-	{
-		key: "TencentCOS",
-		name: "Tencent Cloud Object Storage (COS)",
-	},
-	{
-		key: "Wasabi",
-		name: "Wasabi Object Storage",
-	},
-	{
-		key: "Qiniu",
-		name: "Qiniu Object Storage (Kodo)",
-	},
-	{
-		key: "Other",
-		name: "Any other S3 compatible provider",
-	},
-];

apps/dokploy/components/dashboard/settings/destination/update-destination.tsx

@@ -35,11 +35,9 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { S3_PROVIDERS } from "./constants";
 
 const updateDestination = z.object({
 	name: z.string().min(1, "Name is required"),
-	provider: z.string().optional(),
 	accessKeyId: z.string(),
 	secretAccessKey: z.string(),
 	bucket: z.string(),
@@ -72,7 +70,6 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 		api.destination.testConnection.useMutation();
 	const form = useForm<UpdateDestination>({
 		defaultValues: {
-			provider: "",
 			accessKeyId: "",
 			bucket: "",
 			name: "",
@@ -155,40 +152,6 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 										);
 									}}
 								/>
-								<FormField
-									control={form.control}
-									name="provider"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Provider</FormLabel>
-												<FormControl>
-													<Select
-														onValueChange={field.onChange}
-														defaultValue={field.value}
-													>
-														<FormControl>
-															<SelectTrigger>
-																<SelectValue placeholder="Select a S3 Provider" />
-															</SelectTrigger>
-														</FormControl>
-														<SelectContent>
-															{S3_PROVIDERS.map((s3Provider) => (
-																<SelectItem
-																	key={s3Provider.key}
-																	value={s3Provider.key}
-																>
-																	{s3Provider.name}
-																</SelectItem>
-															))}
-														</SelectContent>
-													</Select>
-												</FormControl>
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
 
 								<FormField
 									control={form.control}
@@ -322,7 +285,6 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 									variant={"secondary"}
 									onClick={async () => {
 										await testConnection({
-											provider: form.getValues("provider") || "",
 											accessKey: form.getValues("accessKeyId"),
 											bucket: form.getValues("bucket"),
 											endpoint: form.getValues("endpoint"),
@@ -349,7 +311,6 @@ export const UpdateDestination = ({ destinationId }: Props) => {
 								variant="secondary"
 								onClick={async () => {
 									await testConnection({
-										provider: form.getValues("provider") || "",
 										accessKey: form.getValues("accessKeyId"),
 										bucket: form.getValues("bucket"),
 										endpoint: form.getValues("endpoint"),

apps/dokploy/components/dashboard/settings/notifications/add-notification.tsx

@@ -397,23 +397,25 @@ export const AddNotification = () => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 
 								{type === "email" && (
@@ -667,7 +669,7 @@ export const AddNotification = () => {
 												<div className="space-y-0.5">
 													<FormLabel>Dokploy Restart</FormLabel>
 													<FormDescription>
-														Trigger the action when dokploy is restarted.
+														Trigger the action when a dokploy is restarted.
 													</FormDescription>
 												</div>
 												<FormControl>

apps/dokploy/components/dashboard/settings/notifications/update-notification.tsx

@@ -356,23 +356,25 @@ export const UpdateNotification = ({ notificationId }: Props) => {
 								)}
 
 								{type === "discord" && (
-									<FormField
-										control={form.control}
-										name="webhookUrl"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Webhook URL</FormLabel>
-												<FormControl>
-													<Input
-														placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-														{...field}
-													/>
-												</FormControl>
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://discord.com/api/webhooks/123456789/ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+															{...field}
+														/>
+													</FormControl>
 
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
 								)}
 								{type === "email" && (
 									<>

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -16,11 +16,10 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { generateSHA256Hash } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useTranslation } from "next-i18next";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -54,14 +53,6 @@ export const ProfileForm = () => {
 	const { data, refetch } = api.auth.get.useQuery();
 	const { mutateAsync, isLoading } = api.auth.update.useMutation();
 	const { t } = useTranslation("settings");
-	const [gravatarHash, setGravatarHash] = useState<string | null>(null);
-
-	const availableAvatars = useMemo(() => {
-		if (gravatarHash === null) return randomImages;
-		return randomImages.concat([
-			`https://www.gravatar.com/avatar/${gravatarHash}`,
-		]);
-	}, [gravatarHash]);
 
 	const form = useForm<Profile>({
 		defaultValues: {
@@ -79,12 +70,6 @@ export const ProfileForm = () => {
 				password: "",
 				image: data?.image || "",
 			});
-
-			if (data.email) {
-				generateSHA256Hash(data.email).then((hash) => {
-					setGravatarHash(hash);
-				});
-			}
 		}
 		form.reset();
 	}, [form, form.reset, data]);
@@ -169,7 +154,7 @@ export const ProfileForm = () => {
 												value={field.value}
 												className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 											>
-												{availableAvatars.map((image) => (
+												{randomImages.map((image) => (
 													<FormItem key={image}>
 														<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">
 															<FormControl>

apps/dokploy/components/dashboard/settings/servers/setup-server.tsx

@@ -33,7 +33,6 @@ import { useState } from "react";
 import { toast } from "sonner";
 import { ShowDeployment } from "../../application/deployments/show-deployment";
 import { GPUSupport } from "./gpu-support";
-import { ValidateServer } from "./validate-server";
 
 interface Props {
 	serverId: string;
@@ -91,10 +90,9 @@ export const SetupServer = ({ serverId }: Props) => {
 				) : (
 					<div id="hook-form-add-gitlab" className="grid w-full gap-1">
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-4 w-[600px]">
+							<TabsList className="grid grid-cols-3 w-[400px]">
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
-								<TabsTrigger value="validate">Validate</TabsTrigger>
 								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
@@ -205,7 +203,7 @@ export const SetupServer = ({ serverId }: Props) => {
 									<div className="flex flex-col gap-4">
 										<Card className="bg-background">
 											<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-												<div className="flex flex-row gap-2 justify-between w-full max-sm:flex-col">
+												<div className="flex flex-row gap-2 justify-between w-full items-end max-sm:flex-col">
 													<div className="flex flex-col gap-1">
 														<CardTitle className="text-xl">
 															Deployments
@@ -295,14 +293,6 @@ export const SetupServer = ({ serverId }: Props) => {
 									</div>
 								</CardContent>
 							</TabsContent>
-							<TabsContent
-								value="validate"
-								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
-							>
-								<div className="flex flex-col gap-2 text-sm text-muted-foreground pt-3">
-									<ValidateServer serverId={serverId} />
-								</div>
-							</TabsContent>
 							<TabsContent
 								value="gpu-setup"
 								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"

apps/dokploy/components/dashboard/settings/servers/show-servers.tsx

@@ -98,7 +98,7 @@ export const ShowServers = () => {
 					)
 				)}
 				{data && data?.length > 0 && (
-					<div className="flex flex-col gap-6 overflow-auto">
+					<div className="flex flex-col gap-6">
 						<Table>
 							<TableCaption>See all servers</TableCaption>
 							<TableHeader>
@@ -228,17 +228,21 @@ export const ShowServers = () => {
 															</DropdownMenuItem>
 														</DialogAction>
 
-														{isActive && server.sshKeyId && (
+														{isActive && (
 															<>
-																<DropdownMenuSeparator />
-																<DropdownMenuLabel>Extra</DropdownMenuLabel>
+																{server.sshKeyId && (
+																	<>
+																		<DropdownMenuSeparator />
+																		<DropdownMenuLabel>Extra</DropdownMenuLabel>
 
-																<ShowTraefikFileSystemModal
-																	serverId={server.serverId}
-																/>
-																<ShowDockerContainersModal
-																	serverId={server.serverId}
-																/>
+																		<ShowTraefikFileSystemModal
+																			serverId={server.serverId}
+																		/>
+																		<ShowDockerContainersModal
+																			serverId={server.serverId}
+																		/>
+																	</>
+																)}
 															</>
 														)}
 													</DropdownMenuContent>

apps/dokploy/components/dashboard/settings/servers/validate-server.tsx

@@ -1,136 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { Loader2, PcCase, RefreshCw } from "lucide-react";
-import { StatusRow } from "./gpu-support";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
-
-interface Props {
-	serverId: string;
-}
-
-export const ValidateServer = ({ serverId }: Props) => {
-	const [isRefreshing, setIsRefreshing] = useState(false);
-	const { data, refetch, error, isLoading, isError } =
-		api.server.validate.useQuery(
-			{ serverId },
-			{
-				enabled: !!serverId,
-			},
-		);
-	const utils = api.useUtils();
-	return (
-		<CardContent className="p-0">
-			<div className="flex flex-col gap-4">
-				<Card className="bg-background">
-					<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-						<div className="flex flex-row gap-2 justify-between w-full  max-sm:flex-col">
-							<div className="flex flex-col gap-1">
-								<div className="flex items-center gap-2">
-									<PcCase className="size-5" />
-									<CardTitle className="text-xl">Setup Validation</CardTitle>
-								</div>
-								<CardDescription>
-									Check if your server is ready for deployment
-								</CardDescription>
-							</div>
-							<Button
-								isLoading={isRefreshing}
-								onClick={async () => {
-									setIsRefreshing(true);
-									await refetch();
-									setIsRefreshing(false);
-								}}
-							>
-								<RefreshCw className="size-4" />
-								Refresh
-							</Button>
-						</div>
-						<div className="flex items-center gap-2 w-full">
-							{isError && (
-								<AlertBlock type="error" className="w-full">
-									{error.message}
-								</AlertBlock>
-							)}
-						</div>
-					</CardHeader>
-
-					<CardContent className="flex flex-col gap-4">
-						{isLoading ? (
-							<div className="flex items-center justify-center text-muted-foreground py-4">
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								<span>Checking Server Configuration</span>
-							</div>
-						) : (
-							<div className="grid w-full gap-4">
-								<div className="border rounded-lg p-4">
-									<h3 className="text-lg font-semibold mb-1">Status</h3>
-									<p className="text-sm text-muted-foreground mb-4">
-										Shows the server configuration status
-									</p>
-									<div className="grid gap-2.5">
-										<StatusRow
-											label="Docker Installed"
-											isEnabled={data?.docker?.enabled}
-											description={
-												data?.docker?.enabled
-													? `Installed: ${data?.docker?.version}`
-													: undefined
-											}
-										/>
-										<StatusRow
-											label="RClone Installed"
-											isEnabled={data?.rclone?.enabled}
-											description={
-												data?.rclone?.enabled
-													? `Installed: ${data?.rclone?.version}`
-													: undefined
-											}
-										/>
-										<StatusRow
-											label="Nixpacks Installed"
-											isEnabled={data?.nixpacks?.enabled}
-											description={
-												data?.nixpacks?.enabled
-													? `Installed: ${data?.nixpacks?.version}`
-													: undefined
-											}
-										/>
-										<StatusRow
-											label="Buildpacks Installed"
-											isEnabled={data?.buildpacks?.enabled}
-											description={
-												data?.buildpacks?.enabled
-													? `Installed: ${data?.buildpacks?.version}`
-													: undefined
-											}
-										/>
-										<StatusRow
-											label="Dokploy Network Installed"
-											isEnabled={data?.isDokployNetworkInstalled}
-										/>
-										<StatusRow
-											label="Swarm Installed"
-											isEnabled={data?.isSwarmInstalled}
-										/>
-										<StatusRow
-											label="Main Directory Created"
-											isEnabled={data?.isMainDirectoryInstalled}
-										/>
-									</div>
-								</div>
-							</div>
-						)}
-					</CardContent>
-				</Card>
-			</div>
-		</CardContent>
-	);
-};

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

@@ -1,9 +1,7 @@
-import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,
@@ -51,34 +49,14 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 		},
 	);
 	const [containerId, setContainerId] = useState<string | undefined>();
-	const [mainDialogOpen, setMainDialogOpen] = useState(false);
-	const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
-
-	const handleMainDialogOpenChange = (open: boolean) => {
-		if (!open) {
-			setConfirmDialogOpen(true);
-		} else {
-			setMainDialogOpen(true);
-		}
-	};
-
-	const handleConfirm = () => {
-		setConfirmDialogOpen(false);
-		setMainDialogOpen(false);
-	};
-
-	const handleCancel = () => {
-		setConfirmDialogOpen(false);
-	};
 
 	useEffect(() => {
 		if (data && data?.length > 0) {
 			setContainerId(data[0]?.containerId);
 		}
 	}, [data]);
-
 	return (
-		<Dialog open={mainDialogOpen} onOpenChange={handleMainDialogOpenChange}>
+		<Dialog>
 			<DialogTrigger asChild>{children}</DialogTrigger>
 			<DialogContent className="max-h-[85vh]    overflow-y-auto sm:max-w-7xl">
 				<DialogHeader>
@@ -118,24 +96,6 @@ export const DockerTerminalModal = ({ children, appName, serverId }: Props) => {
 					id="terminal"
 					containerId={containerId || "select-a-container"}
 				/>
-				<Dialog open={confirmDialogOpen} onOpenChange={setConfirmDialogOpen}>
-					<DialogContent>
-						<DialogHeader>
-							<DialogTitle>
-								Are you sure you want to close the terminal?
-							</DialogTitle>
-							<DialogDescription>
-								By clicking the confirm button, the terminal will be closed.
-							</DialogDescription>
-						</DialogHeader>
-						<DialogFooter>
-							<Button variant="outline" onClick={handleCancel}>
-								Cancel
-							</Button>
-							<Button onClick={handleConfirm}>Confirm</Button>
-						</DialogFooter>
-					</DialogContent>
-				</Dialog>
 			</DialogContent>
 		</Dialog>
 	);

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

@@ -48,8 +48,8 @@ export const UpdateServer = () => {
 						<li>Some bug that is blocking to use some features</li>
 					</ul>
 					<AlertBlock type="info">
-						We recommend checking the latest version for any breaking changes
-						before updating. Go to{" "}
+						Please we recommend to see the latest version to see if there are
+						any breaking changes before updating. Go to{" "}
 						<Link
 							href="https://github.com/Dokploy/dokploy/releases"
 							target="_blank"

apps/dokploy/components/icons/data-tools-icons.tsx

@@ -231,8 +231,8 @@ export const BitbucketIcon = ({ className }: Props) => {
 					y2="10.814"
 					gradientUnits="userSpaceOnUse"
 				>
-					<stop offset=".18" stopColor="#0052CC" />
-					<stop offset="1" stopColor="#2684FF" />
+					<stop offset=".18" stop-color="#0052CC" />
+					<stop offset="1" stop-color="#2684FF" />
 				</linearGradient>
 			</defs>
 		</svg>

apps/dokploy/components/shared/status-tooltip.tsx

@@ -31,7 +31,7 @@ export const StatusTooltip = ({ status, className }: Props) => {
 					)}
 					{status === "done" && (
 						<div
-							className={cn("size-3.5 rounded-full bg-green-500", className)}
+							className={cn("size-3.5 rounded-full bg-primary", className)}
 						/>
 					)}
 					{status === "running" && (

apps/dokploy/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
 				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/70",
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:
 					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 				secondary:

apps/dokploy/components/ui/input-otp.tsx

@@ -61,7 +61,7 @@ const InputOTPSeparator = React.forwardRef<
 	React.ElementRef<"div">,
 	React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-	<div ref={ref} {...props}>
+	<div ref={ref} role="separator" {...props}>
 		<Dot />
 	</div>
 ));

apps/dokploy/components/ui/secrets.tsx

@@ -29,7 +29,7 @@ export const Secrets = (props: Props) => {
 
 	return (
 		<>
-			<CardHeader className="flex flex-row w-full items-center justify-between px-0">
+			<CardHeader className="flex flex-row w-full items-center justify-between">
 				<div>
 					<CardTitle className="text-xl">{props.title}</CardTitle>
 					<CardDescription>{props.description}</CardDescription>
@@ -47,7 +47,7 @@ export const Secrets = (props: Props) => {
 					)}
 				</Toggle>
 			</CardHeader>
-			<CardContent className="w-full space-y-4 p-0">
+			<CardContent className="w-full space-y-4">
 				<FormField
 					control={form.control}
 					name={props.name}

apps/dokploy/components/ui/switch.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as React from "react";
 
@@ -11,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
 			className,
 		)}
 		{...props}
@@ -19,7 +17,7 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
 			)}
 		/>
 	</SwitchPrimitives.Root>

apps/dokploy/drizzle/0045_smiling_blur.sql

@@ -1 +0,0 @@
-ALTER TABLE "destination" ADD COLUMN "provider" text;

apps/dokploy/drizzle/0046_purple_sleeper.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ADD COLUMN "registryUrl" text;

apps/dokploy/drizzle/0047_tidy_revanche.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ADD COLUMN "herokuVersion" text;

apps/dokploy/drizzle/0048_flat_expediter.sql

@@ -1 +0,0 @@
-ALTER TABLE "application" ALTER COLUMN "herokuVersion" SET DEFAULT '24';

apps/dokploy/drizzle/0049_dark_leopardon.sql

@@ -1,53 +0,0 @@
-ALTER TYPE "domainType" ADD VALUE 'preview';--> statement-breakpoint
-CREATE TABLE IF NOT EXISTS "preview_deployments" (
-	"previewDeploymentId" text PRIMARY KEY NOT NULL,
-	"branch" text NOT NULL,
-	"pullRequestId" text NOT NULL,
-	"pullRequestNumber" text NOT NULL,
-	"pullRequestURL" text NOT NULL,
-	"pullRequestTitle" text NOT NULL,
-	"pullRequestCommentId" text NOT NULL,
-	"previewStatus" "applicationStatus" DEFAULT 'idle' NOT NULL,
-	"appName" text NOT NULL,
-	"applicationId" text NOT NULL,
-	"domainId" text,
-	"createdAt" text NOT NULL,
-	"expiresAt" text,
-	CONSTRAINT "preview_deployments_appName_unique" UNIQUE("appName")
-);
---> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewEnv" text;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewBuildArgs" text;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewWildcard" text;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewPort" integer DEFAULT 3000;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewHttps" boolean DEFAULT false NOT NULL;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewPath" text DEFAULT '/';--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "certificateType" "certificateType" DEFAULT 'none' NOT NULL;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "previewLimit" integer DEFAULT 3;--> statement-breakpoint
-ALTER TABLE "application" ADD COLUMN "isPreviewDeploymentsActive" boolean DEFAULT false;--> statement-breakpoint
-ALTER TABLE "domain" ADD COLUMN "previewDeploymentId" text;--> statement-breakpoint
-ALTER TABLE "deployment" ADD COLUMN "isPreviewDeployment" boolean DEFAULT false;--> statement-breakpoint
-ALTER TABLE "deployment" ADD COLUMN "previewDeploymentId" text;--> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "preview_deployments" ADD CONSTRAINT "preview_deployments_applicationId_application_applicationId_fk" FOREIGN KEY ("applicationId") REFERENCES "public"."application"("applicationId") ON DELETE cascade ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "preview_deployments" ADD CONSTRAINT "preview_deployments_domainId_domain_domainId_fk" FOREIGN KEY ("domainId") REFERENCES "public"."domain"("domainId") ON DELETE cascade ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "domain" ADD CONSTRAINT "domain_previewDeploymentId_preview_deployments_previewDeploymentId_fk" FOREIGN KEY ("previewDeploymentId") REFERENCES "public"."preview_deployments"("previewDeploymentId") ON DELETE cascade ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "deployment" ADD CONSTRAINT "deployment_previewDeploymentId_preview_deployments_previewDeploymentId_fk" FOREIGN KEY ("previewDeploymentId") REFERENCES "public"."preview_deployments"("previewDeploymentId") ON DELETE cascade ON UPDATE no action;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;

apps/dokploy/drizzle/meta/_journal.json

@@ -316,41 +316,6 @@
       "when": 1731875539532,
       "tag": "0044_sour_true_believers",
       "breakpoints": true
-    },
-    {
-      "idx": 45,
-      "version": "6",
-      "when": 1732644181718,
-      "tag": "0045_smiling_blur",
-      "breakpoints": true
-    },
-    {
-      "idx": 46,
-      "version": "6",
-      "when": 1732851191048,
-      "tag": "0046_purple_sleeper",
-      "breakpoints": true
-    },
-    {
-      "idx": 47,
-      "version": "6",
-      "when": 1733599090582,
-      "tag": "0047_tidy_revanche",
-      "breakpoints": true
-    },
-    {
-      "idx": 48,
-      "version": "6",
-      "when": 1733599163710,
-      "tag": "0048_flat_expediter",
-      "breakpoints": true
-    },
-    {
-      "idx": 49,
-      "version": "6",
-      "when": 1733628762978,
-      "tag": "0049_dark_leopardon",
-      "breakpoints": true
     }
   ]
 }

apps/dokploy/lib/languages.ts

@@ -1,16 +0,0 @@
-export enum Languages {
-	English = "en",
-	Polish = "pl",
-	Russian = "ru",
-	French = "fr",
-	German = "de",
-	ChineseTraditional = "zh-Hant",
-	ChineseSimplified = "zh-Hans",
-	Turkish = "tr",
-	Kazakh = "kz",
-	Persian = "fa",
-	Korean = "ko",
-	Portuguese = "pt-br",
-}
-
-export type Language = keyof typeof Languages;

apps/dokploy/lib/utils.ts

@@ -4,11 +4,3 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
-
-export async function generateSHA256Hash(text: string) {
-	const encoder = new TextEncoder();
-	const data = encoder.encode(text);
-	const hashBuffer = await crypto.subtle.digest("SHA-256", data);
-	const hashArray = Array.from(new Uint8Array(hashBuffer));
-	return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
-}

apps/dokploy/next-i18next.config.cjs

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

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.14.0",
+	"version": "v0.12.0",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -11,8 +11,7 @@
 		"build-next": "next build",
 		"setup": "tsx -r dotenv/config setup.ts && sleep 5 && pnpm run migration:run",
 		"reset-password": "node -r dotenv/config dist/reset-password.mjs",
-		"dev": "tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json ",
-		"dev-turbopack": "TURBOPACK=1 tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json",
+		"dev": "TURBOPACK=1 tsx -r dotenv/config ./server/server.ts  --project tsconfig.server.json ",
 		"studio": "drizzle-kit studio --config ./server/db/drizzle.config.ts",
 		"migration:generate": "drizzle-kit generate --config ./server/db/drizzle.config.ts",
 		"migration:run": "tsx -r dotenv/config migration.ts",

apps/dokploy/pages/_app.tsx

@@ -1,7 +1,6 @@
 import "@/styles/globals.css";
 
 import { Toaster } from "@/components/ui/sonner";
-import { Languages } from "@/lib/languages";
 import { api } from "@/utils/api";
 import type { NextPage } from "next";
 import { appWithTranslation } from "next-i18next";
@@ -33,10 +32,10 @@ const MyApp = ({
 	return (
 		<>
 			<style jsx global>{`
-                :root {
-                    --font-inter: ${inter.style.fontFamily};
-                }
-            `}</style>
+        :root {
+          --font-inter: ${inter.style.fontFamily};
+        }
+      `}</style>
 			<Head>
 				<title>Dokploy</title>
 			</Head>
@@ -72,7 +71,7 @@ export default api.withTRPC(
 		{
 			i18n: {
 				defaultLocale: "en",
-				locales: Object.values(Languages),
+				locales: ["en", "pl", "zh-Hans"],
 				localeDetection: false,
 			},
 			fallbackLng: "en",

apps/dokploy/pages/api/deploy/github.ts

@@ -3,19 +3,11 @@ import { applications, compose, github } from "@/server/db/schema";
 import type { DeploymentJob } from "@/server/queues/queue-types";
 import { myQueue } from "@/server/queues/queueSetup";
 import { deploy } from "@/server/utils/deploy";
-import {
-	createPreviewDeployment,
-	type Domain,
-	findPreviewDeploymentByApplicationId,
-	findPreviewDeploymentsByPullRequestId,
-	IS_CLOUD,
-	removePreviewDeployment,
-} from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server";
 import { Webhooks } from "@octokit/webhooks";
 import { and, eq } from "drizzle-orm";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { extractCommitMessage, extractHash } from "./[refreshToken]";
-import { generateRandomDomain } from "@/templates/utils";
 
 export default async function handler(
 	req: NextApiRequest,
@@ -61,183 +53,34 @@ export default async function handler(
 		return;
 	}
 
-	if (
-		req.headers["x-github-event"] !== "push" &&
-		req.headers["x-github-event"] !== "pull_request"
-	) {
-		res
-			.status(400)
-			.json({ message: "We only accept push events or pull_request events" });
+	if (req.headers["x-github-event"] !== "push") {
+		res.status(400).json({ message: "We only accept push events" });
 		return;
 	}
 
-	if (req.headers["x-github-event"] === "push") {
-		try {
-			const branchName = githubBody?.ref?.replace("refs/heads/", "");
-			const repository = githubBody?.repository?.name;
-			const deploymentTitle = extractCommitMessage(req.headers, req.body);
-			const deploymentHash = extractHash(req.headers, req.body);
-			const owner = githubBody?.repository?.owner?.name;
-
-			const apps = await db.query.applications.findMany({
-				where: and(
-					eq(applications.sourceType, "github"),
-					eq(applications.autoDeploy, true),
-					eq(applications.branch, branchName),
-					eq(applications.repository, repository),
-					eq(applications.owner, owner),
-				),
-			});
-
-			for (const app of apps) {
-				const jobData: DeploymentJob = {
-					applicationId: app.applicationId as string,
-					titleLog: deploymentTitle,
-					descriptionLog: `Hash: ${deploymentHash}`,
-					type: "deploy",
-					applicationType: "application",
-					server: !!app.serverId,
-				};
-
-				if (IS_CLOUD && app.serverId) {
-					jobData.serverId = app.serverId;
-					await deploy(jobData);
-					return true;
-				}
-				await myQueue.add(
-					"deployments",
-					{ ...jobData },
-					{
-						removeOnComplete: true,
-						removeOnFail: true,
-					},
-				);
-			}
-
-			const composeApps = await db.query.compose.findMany({
-				where: and(
-					eq(compose.sourceType, "github"),
-					eq(compose.autoDeploy, true),
-					eq(compose.branch, branchName),
-					eq(compose.repository, repository),
-					eq(compose.owner, owner),
-				),
-			});
-
-			for (const composeApp of composeApps) {
-				const jobData: DeploymentJob = {
-					composeId: composeApp.composeId as string,
-					titleLog: deploymentTitle,
-					type: "deploy",
-					applicationType: "compose",
-					descriptionLog: `Hash: ${deploymentHash}`,
-					server: !!composeApp.serverId,
-				};
-
-				if (IS_CLOUD && composeApp.serverId) {
-					jobData.serverId = composeApp.serverId;
-					await deploy(jobData);
-					return true;
-				}
-
-				await myQueue.add(
-					"deployments",
-					{ ...jobData },
-					{
-						removeOnComplete: true,
-						removeOnFail: true,
-					},
-				);
-			}
-
-			const totalApps = apps.length + composeApps.length;
-			const emptyApps = totalApps === 0;
-
-			if (emptyApps) {
-				res.status(200).json({ message: "No apps to deploy" });
-				return;
-			}
-			res.status(200).json({ message: `Deployed ${totalApps} apps` });
-		} catch (error) {
-			res.status(400).json({ message: "Error To Deploy Application", error });
-		}
-	} else if (req.headers["x-github-event"] === "pull_request") {
-		const prId = githubBody?.pull_request?.id;
-
-		if (githubBody?.action === "closed") {
-			const previewDeploymentResult =
-				await findPreviewDeploymentsByPullRequestId(prId);
-
-			if (previewDeploymentResult.length > 0) {
-				for (const previewDeployment of previewDeploymentResult) {
-					try {
-						await removePreviewDeployment(
-							previewDeployment.previewDeploymentId,
-						);
-					} catch (error) {
-						console.log(error);
-					}
-				}
-			}
-			res.status(200).json({ message: "Preview Deployment Closed" });
-			return;
-		}
-		// opened or synchronize or reopened
+	try {
+		const branchName = githubBody?.ref?.replace("refs/heads/", "");
 		const repository = githubBody?.repository?.name;
-		const deploymentHash = githubBody?.pull_request?.head?.sha;
-		const branch = githubBody?.pull_request?.base?.ref;
-		const owner = githubBody?.repository?.owner?.login;
+		const deploymentTitle = extractCommitMessage(req.headers, req.body);
+		const deploymentHash = extractHash(req.headers, req.body);
 
 		const apps = await db.query.applications.findMany({
 			where: and(
 				eq(applications.sourceType, "github"),
+				eq(applications.autoDeploy, true),
+				eq(applications.branch, branchName),
 				eq(applications.repository, repository),
-				eq(applications.branch, branch),
-				eq(applications.isPreviewDeploymentsActive, true),
-				eq(applications.owner, owner),
 			),
-			with: {
-				previewDeployments: true,
-			},
 		});
 
-		const prBranch = githubBody?.pull_request?.head?.ref;
-
-		const prNumber = githubBody?.pull_request?.number;
-		const prTitle = githubBody?.pull_request?.title;
-		const prURL = githubBody?.pull_request?.html_url;
-
 		for (const app of apps) {
-			const previewLimit = app?.previewLimit || 0;
-			if (app?.previewDeployments?.length > previewLimit) {
-				continue;
-			}
-			const previewDeploymentResult =
-				await findPreviewDeploymentByApplicationId(app.applicationId, prId);
-
-			let previewDeploymentId =
-				previewDeploymentResult?.previewDeploymentId || "";
-
-			if (!previewDeploymentResult) {
-				const previewDeployment = await createPreviewDeployment({
-					applicationId: app.applicationId as string,
-					branch: prBranch,
-					pullRequestId: prId,
-					pullRequestNumber: prNumber,
-					pullRequestTitle: prTitle,
-					pullRequestURL: prURL,
-				});
-				previewDeploymentId = previewDeployment.previewDeploymentId;
-			}
-
 			const jobData: DeploymentJob = {
 				applicationId: app.applicationId as string,
-				titleLog: "Preview Deployment",
+				titleLog: deploymentTitle,
 				descriptionLog: `Hash: ${deploymentHash}`,
 				type: "deploy",
-				applicationType: "application-preview",
+				applicationType: "application",
 				server: !!app.serverId,
-				previewDeploymentId,
 			};
 
 			if (IS_CLOUD && app.serverId) {
@@ -254,8 +97,50 @@ export default async function handler(
 				},
 			);
 		}
-		return res.status(200).json({ message: "Apps Deployed" });
-	}
 
-	return res.status(400).json({ message: "No Actions matched" });
+		const composeApps = await db.query.compose.findMany({
+			where: and(
+				eq(compose.sourceType, "github"),
+				eq(compose.autoDeploy, true),
+				eq(compose.branch, branchName),
+				eq(compose.repository, repository),
+			),
+		});
+
+		for (const composeApp of composeApps) {
+			const jobData: DeploymentJob = {
+				composeId: composeApp.composeId as string,
+				titleLog: deploymentTitle,
+				type: "deploy",
+				applicationType: "compose",
+				descriptionLog: `Hash: ${deploymentHash}`,
+			};
+
+			if (IS_CLOUD && composeApp.serverId) {
+				jobData.serverId = composeApp.serverId;
+				await deploy(jobData);
+				return true;
+			}
+
+			await myQueue.add(
+				"deployments",
+				{ ...jobData },
+				{
+					removeOnComplete: true,
+					removeOnFail: true,
+				},
+			);
+		}
+
+		const totalApps = apps.length + composeApps.length;
+		const emptyApps = totalApps === 0;
+
+		if (emptyApps) {
+			res.status(200).json({ message: "No apps to deploy" });
+			return;
+		}
+		res.status(200).json({ message: `Deployed ${totalApps} apps` });
+	} catch (error) {
+		res.status(400).json({ message: "Error To Deploy Application", error });
+	}
 }

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

@@ -2,7 +2,6 @@ import { AddApplication } from "@/components/dashboard/project/add-application";
 import { AddCompose } from "@/components/dashboard/project/add-compose";
 import { AddDatabase } from "@/components/dashboard/project/add-database";
 import { AddTemplate } from "@/components/dashboard/project/add-template";
-import { ProjectEnviroment } from "@/components/dashboard/projects/project-enviroment";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -199,35 +198,27 @@ const Project = (
 					</div>
 
 					{(auth?.rol === "admin" || user?.canCreateServices) && (
-						<div className="flex flex-row gap-4 flex-wrap">
-							<ProjectEnviroment projectId={projectId}>
-								<Button variant="outline">Project Enviroment</Button>
-							</ProjectEnviroment>
-							<DropdownMenu>
-								<DropdownMenuTrigger asChild>
-									<Button>
-										<PlusIcon className="h-4 w-4" />
-										Create Service
-									</Button>
-								</DropdownMenuTrigger>
-								<DropdownMenuContent
-									className="w-[200px] space-y-2"
-									align="end"
-								>
-									<DropdownMenuLabel className="text-sm font-normal ">
-										Actions
-									</DropdownMenuLabel>
-									<DropdownMenuSeparator />
-									<AddApplication
-										projectId={projectId}
-										projectName={data?.name}
-									/>
-									<AddDatabase projectId={projectId} projectName={data?.name} />
-									<AddCompose projectId={projectId} projectName={data?.name} />
-									<AddTemplate projectId={projectId} />
-								</DropdownMenuContent>
-							</DropdownMenu>
-						</div>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button>
+									<PlusIcon className="h-4 w-4" />
+									Create Service
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent className="w-[200px] space-y-2" align="end">
+								<DropdownMenuLabel className="text-sm font-normal ">
+									Actions
+								</DropdownMenuLabel>
+								<DropdownMenuSeparator />
+								<AddApplication
+									projectId={projectId}
+									projectName={data?.name}
+								/>
+								<AddDatabase projectId={projectId} projectName={data?.name} />
+								<AddCompose projectId={projectId} projectName={data?.name} />
+								<AddTemplate projectId={projectId} />
+							</DropdownMenuContent>
+						</DropdownMenu>
 					)}
 				</header>
 			</div>

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

@@ -12,7 +12,6 @@ import { ShowDomains } from "@/components/dashboard/application/domains/show-dom
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show";
 import { ShowGeneralApplication } from "@/components/dashboard/application/general/show";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
-import { ShowPreviewDeployments } from "@/components/dashboard/application/preview-deployments/show-preview-deployments";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
 import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
 import { ProjectLayout } from "@/components/layouts/project-layout";
@@ -52,8 +51,7 @@ type TabState =
 	| "advanced"
 	| "deployments"
 	| "domains"
-	| "monitoring"
-	| "preview-deployments";
+	| "monitoring";
 
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
@@ -193,8 +191,8 @@ const Service = (
 					<div className="flex flex-row items-center justify-between  w-full gap-4">
 						<TabsList
 							className={cn(
-								"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
-								data?.serverId ? "md:grid-cols-7" : "md:grid-cols-8",
+								"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
+								data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7",
 							)}
 						>
 							<TabsTrigger value="general">General</TabsTrigger>
@@ -204,9 +202,6 @@ const Service = (
 							)}
 							<TabsTrigger value="logs">Logs</TabsTrigger>
 							<TabsTrigger value="deployments">Deployments</TabsTrigger>
-							<TabsTrigger value="preview-deployments">
-								Preview Deployments
-							</TabsTrigger>
 							<TabsTrigger value="domains">Domains</TabsTrigger>
 							<TabsTrigger value="advanced">Advanced</TabsTrigger>
 						</TabsList>
@@ -249,11 +244,6 @@ const Service = (
 							<ShowDeployments applicationId={applicationId} />
 						</div>
 					</TabsContent>
-					<TabsContent value="preview-deployments" className="w-full">
-						<div className="flex flex-col gap-4 pt-2.5">
-							<ShowPreviewDeployments applicationId={applicationId} />
-						</div>
-					</TabsContent>
 					<TabsContent value="domains" className="w-full">
 						<div className="flex flex-col gap-4 pt-2.5">
 							<ShowDomains applicationId={applicationId} />

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

@@ -5,7 +5,6 @@ import { ShowDeploymentsCompose } from "@/components/dashboard/compose/deploymen
 import { ShowDomainsCompose } from "@/components/dashboard/compose/domains/show-domains";
 import { ShowEnvironmentCompose } from "@/components/dashboard/compose/enviroment/show";
 import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
-import { ImportTemplate } from "@/components/dashboard/compose/import-template";
 import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
 import { ShowMonitoringCompose } from "@/components/dashboard/compose/monitoring/show";
 import { UpdateCompose } from "@/components/dashboard/compose/update-compose";
@@ -207,7 +206,6 @@ const Service = (
 							<TabsTrigger value="advanced">Advanced</TabsTrigger>
 						</TabsList>
 						<div className="flex flex-row gap-2">
-							<ImportTemplate composeId={composeId} />
 							<UpdateCompose composeId={composeId} />
 
 							{(auth?.rol === "admin" || user?.canDeleteServices) && (

apps/dokploy/pages/dashboard/projects.tsx

@@ -1,29 +1,18 @@
 import { ShowProjects } from "@/components/dashboard/projects/show";
+import { ShowWelcomeDokploy } from "@/components/dashboard/settings/billing/show-welcome-dokploy";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
-import { api } from "@/utils/api";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import dynamic from "next/dynamic";
 import type React from "react";
 import type { ReactElement } from "react";
 import superjson from "superjson";
 
-const ShowWelcomeDokploy = dynamic(
-	() =>
-		import("@/components/dashboard/settings/billing/show-welcome-dokploy").then(
-			(mod) => mod.ShowWelcomeDokploy,
-		),
-	{ ssr: false },
-);
-
 const Dashboard = () => {
-	const { data: isCloud } = api.settings.isCloud.useQuery();
 	return (
 		<>
-			{isCloud && <ShowWelcomeDokploy />}
-
+			<ShowWelcomeDokploy />
 			<ShowProjects />
 		</>
 	);

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

@@ -8,6 +8,7 @@ import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
 import React, { type ReactElement } from "react";
 import superjson from "superjson";
+import nextI18NextConfig from "../../../next-i18next.config.cjs";
 
 const Page = () => {
 	return (