refactor: update

.circleci/config.yml

@@ -0,0 +1,119 @@
+version: 2.1
+
+jobs:
+  build-amd64:
+    machine:
+      image: ubuntu-2004:current
+    steps:
+      - checkout
+      - run:
+          name: Prepare .env file
+          command: |
+            cp apps/dokploy/.env.production.example .env.production
+            cp apps/dokploy/.env.production.example apps/dokploy/.env.production
+
+      - run:
+          name: Build and push AMD64 image
+          command: |
+            docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_TOKEN
+            if [ "${CIRCLE_BRANCH}" == "main" ]; then
+              TAG="latest"
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
+              TAG="canary"
+            else
+              TAG="feature"
+            fi
+            docker build --platform linux/amd64 -t dokploy/dokploy:${TAG}-amd64 .
+            docker push dokploy/dokploy:${TAG}-amd64
+
+  build-arm64:
+    machine:
+      image: ubuntu-2004:current
+      resource_class: arm.large
+    steps:
+      - checkout
+      - run:
+          name: Prepare .env file
+          command: |
+            cp apps/dokploy/.env.production.example .env.production
+            cp apps/dokploy/.env.production.example apps/dokploy/.env.production
+      - run:
+          name: Build and push ARM64 image
+          command: |
+            docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_TOKEN
+            if [ "${CIRCLE_BRANCH}" == "main" ]; then
+              TAG="latest"
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
+              TAG="canary"
+            else
+              TAG="feature"
+            fi
+            docker build --platform linux/arm64 -t dokploy/dokploy:${TAG}-arm64 .
+            docker push dokploy/dokploy:${TAG}-arm64
+
+  combine-manifests:
+    docker:
+      - image: cimg/node:18.18.0
+    steps:
+      - checkout
+      - setup_remote_docker
+      - run:
+          name: Create and push multi-arch manifest
+          command: |
+            docker login -u $DOCKERHUB_USERNAME -p $DOCKERHUB_TOKEN
+
+            if [ "${CIRCLE_BRANCH}" == "main" ]; then
+              VERSION=$(node -p "require('./apps/dokploy/package.json').version")
+              echo $VERSION
+              TAG="latest"
+
+              docker manifest create dokploy/dokploy:${TAG} \
+                dokploy/dokploy:${TAG}-amd64 \
+                dokploy/dokploy:${TAG}-arm64
+              docker manifest push dokploy/dokploy:${TAG}
+
+              docker manifest create dokploy/dokploy:${VERSION} \
+                dokploy/dokploy:${TAG}-amd64 \
+                dokploy/dokploy:${TAG}-arm64
+              docker manifest push dokploy/dokploy:${VERSION}
+            elif [ "${CIRCLE_BRANCH}" == "canary" ]; then
+              TAG="canary"
+              docker manifest create dokploy/dokploy:${TAG} \
+                dokploy/dokploy:${TAG}-amd64 \
+                dokploy/dokploy:${TAG}-arm64
+              docker manifest push dokploy/dokploy:${TAG}
+            else
+              TAG="feature"
+              docker manifest create dokploy/dokploy:${TAG} \
+                dokploy/dokploy:${TAG}-amd64 \
+                dokploy/dokploy:${TAG}-arm64
+              docker manifest push dokploy/dokploy:${TAG}
+            fi
+
+workflows:
+  build-all:
+    jobs:
+      - build-amd64:
+          filters:
+            branches:
+              only:
+                - main
+                - canary
+                - 804-services-deployed-via-dokploy-inaccessible-after-customizing-traefik-ports-via-environment-variables
+      - build-arm64:
+          filters:
+            branches:
+              only:
+                - main
+                - canary
+                - 804-services-deployed-via-dokploy-inaccessible-after-customizing-traefik-ports-via-environment-variables
+      - combine-manifests:
+          requires:
+            - build-amd64
+            - build-arm64
+          filters:
+            branches:
+              only:
+                - main
+                - canary
+                - 804-services-deployed-via-dokploy-inaccessible-after-customizing-traefik-ports-via-environment-variables

.github/workflows/create-pr.yml

@@ -1,83 +0,0 @@
-name: Auto PR to main when version changes
-
-on:
-  push:
-    branches:
-      - canary
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  create-pr:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Get version from package.json
-        id: package_version
-        run: echo "VERSION=$(jq -r .version ./apps/dokploy/package.json)" >> $GITHUB_ENV
-
-      - name: Get latest GitHub tag
-        id: latest_tag
-        run: |
-          LATEST_TAG=$(git ls-remote --tags origin | awk -F'/' '{print $3}' | sort -V | tail -n1)
-          echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_ENV
-          echo $LATEST_TAG
-      - name: Compare versions
-        id: compare_versions
-        run: |
-          if [ "${{ env.VERSION }}" != "${{ env.LATEST_TAG }}" ]; then
-            VERSION_CHANGED="true"
-          else
-            VERSION_CHANGED="false"
-          fi
-          echo "VERSION_CHANGED=$VERSION_CHANGED" >> $GITHUB_ENV
-          echo "Comparing versions:"
-          echo "Current version: ${{ env.VERSION }}"
-          echo "Latest tag: ${{ env.LATEST_TAG }}"
-          echo "Version changed: $VERSION_CHANGED"
-      - name: Check if a PR already exists
-        id: check_pr
-        run: |
-          PR_EXISTS=$(gh pr list --state open --base main --head canary --json number --jq '. | length')
-          echo "PR_EXISTS=$PR_EXISTS" >> $GITHUB_ENV
-        env:
-          GH_TOKEN: ${{ secrets.GH_PAT }}
-
-      - name: Create Pull Request
-        if: env.VERSION_CHANGED == 'true' && env.PR_EXISTS == '0'
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
-
-          git fetch origin main
-          git checkout canary
-          git push origin canary
-
-          gh pr create \
-            --title "🚀 Release ${{ env.VERSION }}" \
-            --body '
-            This PR promotes changes from `canary` to `main` for version ${{ env.VERSION }}.
-
-            ### 🔍 Changes Include:
-            - Version bump to ${{ env.VERSION }}
-            - All changes from canary branch
-
-            ### ✅ Pre-merge Checklist:
-            - [ ] All tests passing
-            - [ ] Documentation updated
-            - [ ] Docker images built and tested
-
-            > 🤖 This PR was automatically generated by [GitHub Actions](https://github.com/actions)' \
-            --base main \
-            --head canary \
-            --label "release" --label "automated pr" || true \
-            --reviewer siumauricio \
-            --assignee siumauricio
-        env:
-          GH_TOKEN: ${{ github.token }}

.github/workflows/dokploy.yml

@@ -1,161 +0,0 @@
-name: Dokploy Docker Build
-
-on:
-  push:
-    branches: [main, canary, feat/github-runners]
-
-env:
-  IMAGE_NAME: dokploy/dokploy
-
-jobs:
-  docker-amd:
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set tag and version
-        id: meta
-        run: |
-          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
-            TAG="latest"
-            VERSION=$(node -p "require('./apps/dokploy/package.json').version")
-          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
-            TAG="canary"
-          else
-            TAG="feature"
-          fi
-          echo "tags=${IMAGE_NAME}:${TAG}-amd64" >> $GITHUB_OUTPUT
-
-      - name: Prepare env file
-        run: |
-          cp apps/dokploy/.env.production.example .env.production
-          cp apps/dokploy/.env.production.example apps/dokploy/.env.production
-
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          platforms: linux/amd64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-  docker-arm:
-    runs-on: ubuntu-24.04-arm
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set tag and version
-        id: meta
-        run: |
-          VERSION=$(node -p "require('./apps/dokploy/package.json').version")
-          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
-            TAG="latest"
-            VERSION=$(node -p "require('./apps/dokploy/package.json').version")
-          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
-            TAG="canary"
-          else
-            TAG="feature"
-          fi
-          echo "tags=${IMAGE_NAME}:${TAG}-arm64" >> $GITHUB_OUTPUT
-
-      - name: Prepare env file
-        run: |
-          cp apps/dokploy/.env.production.example .env.production
-          cp apps/dokploy/.env.production.example apps/dokploy/.env.production
-
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          platforms: linux/arm64
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-
-  combine-manifests:
-    needs: [docker-amd, docker-arm]
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Create and push manifests
-        run: |
-          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
-            VERSION=$(node -p "require('./apps/dokploy/package.json').version")
-            TAG="latest"
-
-            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
-              ${IMAGE_NAME}:${TAG}-amd64 \
-              ${IMAGE_NAME}:${TAG}-arm64
-
-            docker buildx imagetools create -t ${IMAGE_NAME}:${VERSION} \
-              ${IMAGE_NAME}:${TAG}-amd64 \
-              ${IMAGE_NAME}:${TAG}-arm64
-
-          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
-            TAG="canary"
-            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
-              ${IMAGE_NAME}:${TAG}-amd64 \
-              ${IMAGE_NAME}:${TAG}-arm64
-
-          else
-            TAG="feature"
-            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
-              ${IMAGE_NAME}:${TAG}-amd64 \
-              ${IMAGE_NAME}:${TAG}-arm64
-          fi
-
-  generate-release:
-    needs: [combine-manifests]
-    if: github.ref == 'refs/heads/main'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Get version
-        id: get_version
-        run: |
-          VERSION=$(node -p "require('./apps/dokploy/package.json').version")
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
-
-      - name: Create Release
-        uses: softprops/action-gh-release@v2
-        with:
-          tag_name: ${{ steps.get_version.outputs.version }}
-          name: ${{ steps.get_version.outputs.version }}
-          generate_release_notes: true
-          draft: false
-          prerelease: false
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pull-request.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build
@@ -26,7 +26,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build
@@ -39,7 +39,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.9.0
+          node-version: 18.18.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build

.nvmrc

@@ -1 +1 @@
-20.9.0
+18.18.0

CONTRIBUTING.md

@@ -14,10 +14,12 @@ We have a few guidelines to follow when contributing to this project:
 
 ## Commit Convention
 
+
 Before you create a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
 
 ### Commit Message Format
 
+
 ```
 <type>[optional scope]: <description>
 
@@ -52,8 +54,6 @@ feat: add new feature
 
 Before you start, please make the clone based on the `canary` branch, since the `main` branch is the source of truth and should always reflect the latest stable release, also the PRs will be merged to the `canary` branch.
 
-We use Node v20.9.0
-
 ```bash
 git clone https://github.com/dokploy/dokploy.git
 cd dokploy
@@ -73,10 +73,9 @@ Run the command that will spin up all the required services and files.
 pnpm run dokploy:setup
 ```
 
-Run this script
-
+Run this script 
 ```bash
-pnpm run server:script
+pnpm run server:script 
 ```
 
 Now run the development server.
@@ -170,7 +169,6 @@ Let's take the example of `plausible` template.
 ```typescript
 // EXAMPLE
 import {
-  generateBase64,
   generateHash,
   generateRandomDomain,
   type Template,
@@ -202,8 +200,8 @@ export function generate(schema: Schema): Template {
 
   const mounts: Template["mounts"] = [
     {
-      filePath: "./clickhouse/clickhouse-config.xml",
-      content: "some content......",
+      mountPath: "./clickhouse/clickhouse-config.xml",
+      content: `some content......`,
     },
   ];
 
@@ -249,3 +247,4 @@ export function generate(schema: Schema): Template {
 ## Docs & Website
 
 To contribute to the Dokploy docs or website, please go to this [repository](https://github.com/Dokploy/website).
+

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:18-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
@@ -7,7 +7,7 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 
-RUN apt-get update && apt-get install -y python3 make g++ git python3-pip pkg-config libsecret-1-dev && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
@@ -29,7 +29,7 @@ WORKDIR /app
 # Set production
 ENV NODE_ENV=production
 
-RUN apt-get update && apt-get install -y curl unzip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip apache2-utils && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next

Dockerfile.cloud

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:18-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
@@ -7,7 +7,7 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 
-RUN apt-get update && apt-get install -y python3 make g++ git python3-pip pkg-config libsecret-1-dev && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/dokploy install --frozen-lockfile

Dockerfile.schedule

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:18-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
@@ -7,7 +7,7 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 
-RUN apt-get update && apt-get install -y python3 make g++ git python3-pip pkg-config libsecret-1-dev && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/schedules install --frozen-lockfile

Dockerfile.server

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:18-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
@@ -7,7 +7,7 @@ FROM base AS build
 COPY . /usr/src/app
 WORKDIR /usr/src/app
 
-RUN apt-get update && apt-get install -y python3 make g++ git python3-pip pkg-config libsecret-1-dev && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y python3 make g++ git && rm -rf /var/lib/apt/lists/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/api install --frozen-lockfile

README.md

@@ -71,9 +71,6 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
     <a href="https://mandarin3d.com/?ref=dokploy" target="_blank" style="display: inline-block;">
     <img src=".github/sponsors/mandarin.png" alt="Mandarin" height="50"/>
   </a>
-    <a href="https://lightnode.com/?ref=dokploy" target="_blank" style="display: inline-block;">
-    <img src=".github/sponsors/light-node.webp" alt="Lightnode" height="70"/>
-  </a>
 </div>
 
 ### Premium Supporters 🥇
@@ -92,7 +89,6 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 <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://itsdb-center.com?ref=dokploy "><img src=".github/sponsors/its.png" width="65px" alt="Itsdb-center"/></a>
 </div>
 
 ### Community Backers 🤝

apps/api/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"dev": "PORT=4000 tsx watch src/index.ts",
 		"build": "tsc --project tsconfig.json",
-		"start": "node dist/index.js",
+		"start": "node --experimental-specifier-resolution=node dist/index.js",
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {

apps/api/src/index.ts

@@ -4,9 +4,9 @@ import "dotenv/config";
 import { zValidator } from "@hono/zod-validator";
 import { Queue } from "@nerimity/mimiqueue";
 import { createClient } from "redis";
-import { logger } from "./logger.js";
-import { type DeployJob, deployJobSchema } from "./schema.js";
-import { deploy } from "./utils.js";
+import { logger } from "./logger";
+import { type DeployJob, deployJobSchema } from "./schema";
+import { deploy } from "./utils";
 
 const app = new Hono();
 const redisClient = createClient({

apps/dokploy/.nvmrc

@@ -1 +1 @@
-20.9.0
+18.18.0

apps/dokploy/__test__/deploy/github.test.ts

@@ -1,98 +0,0 @@
-import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
-import { describe, expect, it } from "vitest";
-
-describe("GitHub Webhook Skip CI", () => {
-	const mockGithubHeaders = {
-		"x-github-event": "push",
-	};
-
-	const createMockBody = (message: string) => ({
-		head_commit: {
-			message,
-		},
-	});
-
-	const skipKeywords = [
-		"[skip ci]",
-		"[ci skip]",
-		"[no ci]",
-		"[skip actions]",
-		"[actions skip]",
-	];
-
-	it("should detect skip keywords in commit message", () => {
-		for (const keyword of skipKeywords) {
-			const message = `feat: add new feature ${keyword}`;
-			const commitMessage = extractCommitMessage(
-				mockGithubHeaders,
-				createMockBody(message),
-			);
-			expect(commitMessage.includes(keyword)).toBe(true);
-		}
-	});
-
-	it("should not detect skip keywords in normal commit message", () => {
-		const message = "feat: add new feature";
-		const commitMessage = extractCommitMessage(
-			mockGithubHeaders,
-			createMockBody(message),
-		);
-		for (const keyword of skipKeywords) {
-			expect(commitMessage.includes(keyword)).toBe(false);
-		}
-	});
-
-	it("should handle different webhook sources", () => {
-		// GitHub
-		expect(
-			extractCommitMessage(
-				{ "x-github-event": "push" },
-				{ head_commit: { message: "[skip ci] test" } },
-			),
-		).toBe("[skip ci] test");
-
-		// GitLab
-		expect(
-			extractCommitMessage(
-				{ "x-gitlab-event": "push" },
-				{ commits: [{ message: "[skip ci] test" }] },
-			),
-		).toBe("[skip ci] test");
-
-		// Bitbucket
-		expect(
-			extractCommitMessage(
-				{ "x-event-key": "repo:push" },
-				{
-					push: {
-						changes: [{ new: { target: { message: "[skip ci] test" } } }],
-					},
-				},
-			),
-		).toBe("[skip ci] test");
-
-		// Gitea
-		expect(
-			extractCommitMessage(
-				{ "x-gitea-event": "push" },
-				{ commits: [{ message: "[skip ci] test" }] },
-			),
-		).toBe("[skip ci] test");
-	});
-
-	it("should handle missing commit message", () => {
-		expect(extractCommitMessage(mockGithubHeaders, {})).toBe("NEW COMMIT");
-		expect(extractCommitMessage({ "x-gitlab-event": "push" }, {})).toBe(
-			"NEW COMMIT",
-		);
-		expect(
-			extractCommitMessage(
-				{ "x-event-key": "repo:push" },
-				{ push: { changes: [] } },
-			),
-		).toBe("NEW COMMIT");
-		expect(extractCommitMessage({ "x-gitea-event": "push" }, {})).toBe(
-			"NEW COMMIT",
-		);
-	});
-});

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

@@ -14,9 +14,6 @@ import {
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: Admin = {
-	cleanupCacheApplications: false,
-	cleanupCacheOnCompose: false,
-	cleanupCacheOnPreviews: false,
 	createdAt: "",
 	authId: "",
 	adminId: "string",

apps/dokploy/__test__/vitest.config.ts

@@ -13,7 +13,6 @@ export default defineConfig({
 			NODE: "test",
 		},
 	},
-	plugins: [tsconfigPaths()],
 	resolve: {
 		alias: {
 			"@dokploy/server": path.resolve(

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

@@ -13,12 +13,10 @@ import { CardTitle } from "@/components/ui/card";
 import {
 	InputOTP,
 	InputOTPGroup,
-	InputOTPSeparator,
 	InputOTPSlot,
 } from "@/components/ui/input-otp";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { REGEXP_ONLY_DIGITS } from "input-otp";
 import { AlertTriangle } from "lucide-react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -95,25 +93,19 @@ export const Login2FA = ({ authId }: Props) => {
 					control={form.control}
 					name="pin"
 					render={({ field }) => (
-						<FormItem className="flex flex-col  max-sm:items-center">
+						<FormItem className="flex flex-col justify-center max-sm:items-center">
 							<FormLabel>Pin</FormLabel>
 							<FormControl>
-								<div className="flex">
-									<InputOTP
-										maxLength={6}
-										{...field}
-										pattern={REGEXP_ONLY_DIGITS}
-									>
-										<InputOTPGroup>
-											<InputOTPSlot index={0} className="border-border" />
-											<InputOTPSlot index={1} className="border-border" />
-											<InputOTPSlot index={2} className="border-border" />
-											<InputOTPSlot index={3} className="border-border" />
-											<InputOTPSlot index={4} className="border-border" />
-											<InputOTPSlot index={5} className="border-border" />
-										</InputOTPGroup>
-									</InputOTP>
-								</div>
+								<InputOTP maxLength={6} {...field}>
+									<InputOTPGroup>
+										<InputOTPSlot index={0} />
+										<InputOTPSlot index={1} />
+										<InputOTPSlot index={2} />
+										<InputOTPSlot index={3} />
+										<InputOTPSlot index={4} />
+										<InputOTPSlot index={5} />
+									</InputOTPGroup>
+								</InputOTP>
 							</FormControl>
 							<FormDescription>
 								Please enter the 6 digits code provided by your authenticator

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

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

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

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

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

@@ -71,7 +71,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 				});
 			})
 			.catch(() => {
-				toast.error("Error updating the command");
+				toast.error("Error to update the command");
 			});
 	};
 
@@ -81,8 +81,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Run Command</CardTitle>
 					<CardDescription>
-						Run a custom command in the container after the application
-						initialized
+						Run a custom command in the container
 					</CardDescription>
 				</div>
 			</CardHeader>

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

@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -45,29 +45,18 @@ type AddPort = z.infer<typeof AddPortSchema>;
 
 interface Props {
 	applicationId: string;
-	portId?: string;
 	children?: React.ReactNode;
 }
 
-export const HandlePorts = ({
+export const AddPort = ({
 	applicationId,
-	portId,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 
-	const { data } = api.port.one.useQuery(
-		{
-			portId: portId ?? "",
-		},
-		{
-			enabled: !!portId,
-		},
-	);
-	const { mutateAsync, isLoading, error, isError } = portId
-		? api.port.update.useMutation()
-		: api.port.create.useMutation();
+	const { mutateAsync, isLoading, error, isError } =
+		api.port.create.useMutation();
 
 	const form = useForm<AddPort>({
 		defaultValues: {
@@ -79,46 +68,32 @@ export const HandlePorts = ({
 
 	useEffect(() => {
 		form.reset({
-			publishedPort: data?.publishedPort ?? 0,
-			targetPort: data?.targetPort ?? 0,
-			protocol: data?.protocol ?? "tcp",
+			publishedPort: 0,
+			targetPort: 0,
 		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
 	const onSubmit = async (data: AddPort) => {
 		await mutateAsync({
 			applicationId,
 			...data,
-			portId: portId || "",
 		})
 			.then(async () => {
-				toast.success(portId ? "Port Updated" : "Port Created");
+				toast.success("Port Created");
 				await utils.application.one.invalidate({
 					applicationId,
 				});
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error(
-					portId ? "Error updating the port" : "Error creating the port",
-				);
+				toast.error("Error to create the port");
 			});
 	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				{portId ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="group hover:bg-blue-500/10 "
-					>
-						<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-					</Button>
-				) : (
-					<Button>{children}</Button>
-				)}
+				<Button>{children}</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
@@ -229,7 +204,7 @@ export const HandlePorts = ({
 							form="hook-form-add-port"
 							type="submit"
 						>
-							{portId ? "Update" : "Create"}
+							Create
 						</Button>
 					</DialogFooter>
 				</Form>

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

@@ -0,0 +1,63 @@
+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 { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	portId: string;
+}
+
+export const DeletePort = ({ portId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.port.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the port
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								portId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+
+									toast.success("Port delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the port");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,6 +1,4 @@
 import { AlertBlock } from "@/components/shared/alert-block";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -9,25 +7,23 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Rss, Trash2 } from "lucide-react";
+import { Rss } from "lucide-react";
 import React from "react";
-import { toast } from "sonner";
-import { HandlePorts } from "./handle-ports";
+import { AddPort } from "./add-port";
+import { DeletePort } from "./delete-port";
+import { UpdatePort } from "./update-port";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowPorts = ({ applicationId }: Props) => {
-	const { data, refetch } = api.application.one.useQuery(
+	const { data } = api.application.one.useQuery(
 		{
 			applicationId,
 		},
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deletePort, isLoading: isRemoving } =
-		api.port.delete.useMutation();
-
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
@@ -39,7 +35,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.ports.length > 0 && (
-					<HandlePorts applicationId={applicationId}>Add Port</HandlePorts>
+					<AddPort applicationId={applicationId}>Add Port</AddPort>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -49,7 +45,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No ports configured
 						</span>
-						<HandlePorts applicationId={applicationId}>Add Port</HandlePorts>
+						<AddPort applicationId={applicationId}>Add Port</AddPort>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
@@ -82,36 +78,8 @@ export const ShowPorts = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-4">
-											<HandlePorts
-												applicationId={applicationId}
-												portId={port.portId}
-											/>
-											<DialogAction
-												title="Delete Port"
-												description="Are you sure you want to delete this port?"
-												type="destructive"
-												onClick={async () => {
-													await deletePort({
-														portId: port.portId,
-													})
-														.then(() => {
-															refetch();
-															toast.success("Port deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting port");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10 "
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<UpdatePort portId={port.portId} />
+											<DeletePort portId={port.portId} />
 										</div>
 									</div>
 								</div>

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

@@ -0,0 +1,195 @@
+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, NumberInput } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const UpdatePortSchema = z.object({
+	publishedPort: z.number().int().min(1).max(65535),
+	targetPort: z.number().int().min(1).max(65535),
+	protocol: z.enum(["tcp", "udp"], {
+		required_error: "Protocol is required",
+		invalid_type_error: "Protocol must be a valid protocol",
+	}),
+});
+
+type UpdatePort = z.infer<typeof UpdatePortSchema>;
+
+interface Props {
+	portId: string;
+}
+
+export const UpdatePort = ({ portId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { data } = api.port.one.useQuery(
+		{
+			portId,
+		},
+		{
+			enabled: !!portId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.port.update.useMutation();
+
+	const form = useForm<UpdatePort>({
+		defaultValues: {},
+		resolver: zodResolver(UpdatePortSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				publishedPort: data.publishedPort,
+				targetPort: data.targetPort,
+				protocol: data.protocol,
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdatePort) => {
+		await mutateAsync({
+			portId,
+			publishedPort: data.publishedPort,
+			targetPort: data.targetPort,
+			protocol: data.protocol,
+		})
+			.then(async (response) => {
+				toast.success("Port Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to update the port");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<PenBoxIcon className="size-4 text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the port</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="publishedPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Published Port</FormLabel>
+										<FormControl>
+											<NumberInput placeholder="1-65535" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="targetPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Target Port</FormLabel>
+										<FormControl>
+											<NumberInput placeholder="1-65535" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="protocol"
+								render={({ field }) => {
+									return (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Protocol</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a protocol" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent defaultValue={"none"}>
+													<SelectItem value={"none"} disabled>
+														None
+													</SelectItem>
+													<SelectItem value={"tcp"}>TCP</SelectItem>
+													<SelectItem value={"udp"}>UDP</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-redirect"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -31,7 +31,7 @@ import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -77,32 +77,19 @@ const redirectPresets = [
 
 interface Props {
 	applicationId: string;
-	redirectId?: string;
 	children?: React.ReactNode;
 }
 
-export const HandleRedirect = ({
+export const AddRedirect = ({
 	applicationId,
-	redirectId,
 	children = <PlusIcon className="w-4 h-4" />,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [presetSelected, setPresetSelected] = useState("");
-
-	const { data, refetch } = api.redirects.one.useQuery(
-		{
-			redirectId: redirectId || "",
-		},
-		{
-			enabled: !!redirectId,
-		},
-	);
-
 	const utils = api.useUtils();
 
-	const { mutateAsync, isLoading, error, isError } = redirectId
-		? api.redirects.update.useMutation()
-		: api.redirects.create.useMutation();
+	const { mutateAsync, isLoading, error, isError } =
+		api.redirects.create.useMutation();
 
 	const form = useForm<AddRedirect>({
 		defaultValues: {
@@ -115,35 +102,29 @@ export const HandleRedirect = ({
 
 	useEffect(() => {
 		form.reset({
-			permanent: data?.permanent || false,
-			regex: data?.regex || "",
-			replacement: data?.replacement || "",
+			permanent: false,
+			regex: "",
+			replacement: "",
 		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
 	const onSubmit = async (data: AddRedirect) => {
 		await mutateAsync({
 			applicationId,
 			...data,
-			redirectId: redirectId || "",
 		})
 			.then(async () => {
-				toast.success(redirectId ? "Redirect Updated" : "Redirect Created");
+				toast.success("Redirect Created");
 				await utils.application.one.invalidate({
 					applicationId,
 				});
-				refetch();
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
 				onDialogToggle(false);
 			})
 			.catch(() => {
-				toast.error(
-					redirectId
-						? "Error updating the redirect"
-						: "Error creating the redirect",
-				);
+				toast.error("Error to create the redirect");
 			});
 	};
 
@@ -167,17 +148,7 @@ export const HandleRedirect = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={onDialogToggle}>
 			<DialogTrigger asChild>
-				{redirectId ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="group hover:bg-blue-500/10 "
-					>
-						<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-					</Button>
-				) : (
-					<Button>{children}</Button>
-				)}
+				<Button>{children}</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
@@ -272,7 +243,7 @@ export const HandleRedirect = ({
 							form="hook-form-add-redirect"
 							type="submit"
 						>
-							{redirectId ? "Update" : "Create"}
+							Create
 						</Button>
 					</DialogFooter>
 				</Form>

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

@@ -0,0 +1,66 @@
+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 { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	redirectId: string;
+}
+
+export const DeleteRedirect = ({ redirectId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.redirects.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						redirect
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								redirectId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: data?.applicationId,
+									});
+									toast.success("Redirect delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the redirect");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,5 +1,3 @@
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -8,28 +6,23 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Split, Trash2 } from "lucide-react";
+import { Split } from "lucide-react";
 import React from "react";
-import { toast } from "sonner";
-import { HandleRedirect } from "./handle-redirect";
-
+import { AddRedirect } from "./add-redirect";
+import { DeleteRedirect } from "./delete-redirect";
+import { UpdateRedirect } from "./update-redirect";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowRedirects = ({ applicationId }: Props) => {
-	const { data, refetch } = api.application.one.useQuery(
+	const { data } = api.application.one.useQuery(
 		{
 			applicationId,
 		},
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deleteRedirect, isLoading: isRemoving } =
-		api.redirects.delete.useMutation();
-
-	const utils = api.useUtils();
-
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
@@ -42,9 +35,7 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.redirects.length > 0 && (
-					<HandleRedirect applicationId={applicationId}>
-						Add Redirect
-					</HandleRedirect>
+					<AddRedirect applicationId={applicationId}>Add Redirect</AddRedirect>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -54,9 +45,9 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No redirects configured
 						</span>
-						<HandleRedirect applicationId={applicationId}>
+						<AddRedirect applicationId={applicationId}>
 							Add Redirect
-						</HandleRedirect>
+						</AddRedirect>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2">
@@ -85,40 +76,8 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-4">
-											<HandleRedirect
-												redirectId={redirect.redirectId}
-												applicationId={applicationId}
-											/>
-
-											<DialogAction
-												title="Delete Redirect"
-												description="Are you sure you want to delete this redirect?"
-												type="destructive"
-												onClick={async () => {
-													await deleteRedirect({
-														redirectId: redirect.redirectId,
-													})
-														.then(() => {
-															refetch();
-															utils.application.readTraefikConfig.invalidate({
-																applicationId,
-															});
-															toast.success("Redirect deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting redirect");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<UpdateRedirect redirectId={redirect.redirectId} />
+											<DeleteRedirect redirectId={redirect.redirectId} />
 										</div>
 									</div>
 								</div>

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

@@ -0,0 +1,182 @@
+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 } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+const UpdateRedirectSchema = z.object({
+	regex: z.string().min(1, "Regex required"),
+	permanent: z.boolean().default(false),
+	replacement: z.string().min(1, "Replacement required"),
+});
+
+type UpdateRedirect = z.infer<typeof UpdateRedirectSchema>;
+
+interface Props {
+	redirectId: string;
+}
+
+export const UpdateRedirect = ({ redirectId }: Props) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const { data } = api.redirects.one.useQuery(
+		{
+			redirectId,
+		},
+		{
+			enabled: !!redirectId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.redirects.update.useMutation();
+
+	const form = useForm<UpdateRedirect>({
+		defaultValues: {
+			permanent: false,
+			regex: "",
+			replacement: "",
+		},
+		resolver: zodResolver(UpdateRedirectSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				permanent: data.permanent || false,
+				regex: data.regex || "",
+				replacement: data.replacement || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateRedirect) => {
+		await mutateAsync({
+			redirectId,
+			permanent: data.permanent,
+			regex: data.regex,
+			replacement: data.replacement,
+		})
+			.then(async (response) => {
+				toast.success("Redirect Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to update the redirect");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<PenBoxIcon className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the redirect</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="regex"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Regex</FormLabel>
+										<FormControl>
+											<Input placeholder="^http://localhost/(.*)" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="replacement"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replacement</FormLabel>
+										<FormControl>
+											<Input placeholder="http://mydomain/$${1}" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="permanent"
+								render={({ field }) => (
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+										<div className="space-y-0.5">
+											<FormLabel>Permanent</FormLabel>
+											<FormDescription>
+												Set the permanent option to true to apply a permanent
+												redirection.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-redirect"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -20,7 +20,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -35,29 +35,17 @@ type AddSecurity = z.infer<typeof AddSecuritychema>;
 
 interface Props {
 	applicationId: string;
-	securityId?: string;
 	children?: React.ReactNode;
 }
 
-export const HandleSecurity = ({
+export const AddSecurity = ({
 	applicationId,
-	securityId,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
-	const { data } = api.security.one.useQuery(
-		{
-			securityId: securityId ?? "",
-		},
-		{
-			enabled: !!securityId,
-		},
-	);
-
-	const { mutateAsync, isLoading, error, isError } = securityId
-		? api.security.update.useMutation()
-		: api.security.create.useMutation();
+	const { mutateAsync, isLoading, error, isError } =
+		api.security.create.useMutation();
 
 	const form = useForm<AddSecurity>({
 		defaultValues: {
@@ -68,20 +56,16 @@ export const HandleSecurity = ({
 	});
 
 	useEffect(() => {
-		form.reset({
-			username: data?.username || "",
-			password: data?.password || "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
 
 	const onSubmit = async (data: AddSecurity) => {
 		await mutateAsync({
 			applicationId,
 			...data,
-			securityId: securityId || "",
 		})
 			.then(async () => {
-				toast.success(securityId ? "Security Updated" : "Security Created");
+				toast.success("Security Created");
 				await utils.application.one.invalidate({
 					applicationId,
 				});
@@ -91,34 +75,20 @@ export const HandleSecurity = ({
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error(
-					securityId
-						? "Error updating the security"
-						: "Error creating security",
-				);
+				toast.error("Error to create the security");
 			});
 	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				{securityId ? (
-					<Button
-						variant="ghost"
-						size="icon"
-						className="group hover:bg-blue-500/10 "
-					>
-						<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-					</Button>
-				) : (
-					<Button>{children}</Button>
-				)}
+				<Button>{children}</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
-						{securityId ? "Update" : "Add"} security to your application
+						Add security to your application
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
@@ -167,7 +137,7 @@ export const HandleSecurity = ({
 							form="hook-form-add-security"
 							type="submit"
 						>
-							{securityId ? "Update" : "Create"}
+							Create
 						</Button>
 					</DialogFooter>
 				</Form>

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

@@ -0,0 +1,66 @@
+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 { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	securityId: string;
+}
+
+export const DeleteSecurity = ({ securityId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isLoading } = api.security.delete.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						security
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								securityId,
+							})
+								.then((data) => {
+									utils.application.one.invalidate({
+										applicationId: data?.applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: data?.applicationId,
+									});
+									toast.success("Security delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the security");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,5 +1,3 @@
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -8,27 +6,23 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { LockKeyhole, Trash2 } from "lucide-react";
+import { LockKeyhole } from "lucide-react";
 import React from "react";
-import { toast } from "sonner";
-import { HandleSecurity } from "./handle-security";
-
+import { AddSecurity } from "./add-security";
+import { DeleteSecurity } from "./delete-security";
+import { UpdateSecurity } from "./update-security";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowSecurity = ({ applicationId }: Props) => {
-	const { data, refetch } = api.application.one.useQuery(
+	const { data } = api.application.one.useQuery(
 		{
 			applicationId,
 		},
 		{ enabled: !!applicationId },
 	);
 
-	const { mutateAsync: deleteSecurity, isLoading: isRemoving } =
-		api.security.delete.useMutation();
-
-	const utils = api.useUtils();
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
@@ -38,9 +32,7 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.security.length > 0 && (
-					<HandleSecurity applicationId={applicationId}>
-						Add Security
-					</HandleSecurity>
+					<AddSecurity applicationId={applicationId}>Add Security</AddSecurity>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -50,9 +42,9 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No security configured
 						</span>
-						<HandleSecurity applicationId={applicationId}>
+						<AddSecurity applicationId={applicationId}>
 							Add Security
-						</HandleSecurity>
+						</AddSecurity>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2">
@@ -75,39 +67,8 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-2">
-											<HandleSecurity
-												securityId={security.securityId}
-												applicationId={applicationId}
-											/>
-											<DialogAction
-												title="Delete Security"
-												description="Are you sure you want to delete this security?"
-												type="destructive"
-												onClick={async () => {
-													await deleteSecurity({
-														securityId: security.securityId,
-													})
-														.then(() => {
-															refetch();
-															utils.application.readTraefikConfig.invalidate({
-																applicationId,
-															});
-															toast.success("Security deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting security");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<UpdateSecurity securityId={security.securityId} />
+											<DeleteSecurity securityId={security.securityId} />
 										</div>
 									</div>
 								</div>

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

@@ -0,0 +1,155 @@
+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 { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const UpdateSecuritySchema = z.object({
+	username: z.string().min(1, "Username is required"),
+	password: z.string().min(1, "Password is required"),
+});
+
+type UpdateSecurity = z.infer<typeof UpdateSecuritySchema>;
+
+interface Props {
+	securityId: string;
+}
+
+export const UpdateSecurity = ({ securityId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const utils = api.useUtils();
+	const { data } = api.security.one.useQuery(
+		{
+			securityId,
+		},
+		{
+			enabled: !!securityId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.security.update.useMutation();
+
+	const form = useForm<UpdateSecurity>({
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+		resolver: zodResolver(UpdateSecuritySchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				username: data.username || "",
+				password: data.password || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateSecurity) => {
+		await mutateAsync({
+			securityId,
+			username: data.username,
+			password: data.password,
+		})
+			.then(async (response) => {
+				toast.success("Security Updated");
+				await utils.application.one.invalidate({
+					applicationId: response?.applicationId,
+				});
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to update the security");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<PenBoxIcon className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the security</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-security"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4 "
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="test1" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input placeholder="test" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-security"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,231 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+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 React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const addResourcesApplication = z.object({
+	memoryReservation: z.number().nullable().optional(),
+	cpuLimit: z.number().nullable().optional(),
+	memoryLimit: z.number().nullable().optional(),
+	cpuReservation: z.number().nullable().optional(),
+});
+interface Props {
+	applicationId: string;
+}
+
+type AddResourcesApplication = z.infer<typeof addResourcesApplication>;
+
+export const ShowApplicationResources = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+	const form = useForm<AddResourcesApplication>({
+		defaultValues: {},
+		resolver: zodResolver(addResourcesApplication),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				cpuLimit: data?.cpuLimit || undefined,
+				cpuReservation: data?.cpuReservation || undefined,
+				memoryLimit: data?.memoryLimit || undefined,
+				memoryReservation: data?.memoryReservation || undefined,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: AddResourcesApplication) => {
+		await mutateAsync({
+			applicationId,
+			cpuLimit: formData.cpuLimit || null,
+			cpuReservation: formData.cpuReservation || null,
+			memoryLimit: formData.memoryLimit || null,
+			memoryReservation: formData.memoryReservation || null,
+		})
+			.then(async () => {
+				toast.success("Resources Updated");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to Update the resources");
+			});
+	};
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Resources</CardTitle>
+				<CardDescription>
+					If you want to decrease or increase the resources to a specific.
+					application or database
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Please remember to click Redeploy after modify the resources to apply
+					the changes.
+				</AlertBlock>
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="grid w-full md:grid-cols-2 gap-4">
+							<FormField
+								control={form.control}
+								name="memoryReservation"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Memory Reservation</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="256 MB"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(null);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="memoryLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Memory Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1024 MB"}
+													{...field}
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value === "") {
+															field.onChange(null);
+														} else {
+															const number = Number.parseInt(value, 10);
+															if (!Number.isNaN(number)) {
+																field.onChange(number);
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+
+							<FormField
+								control={form.control}
+								name="cpuLimit"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Limit</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"2"}
+													{...field}
+													type="number"
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="cpuReservation"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Cpu Reservation</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"1"}
+													{...field}
+													type="number"
+													value={field.value?.toString() || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (
+															value === "" ||
+															/^[0-9]*\.?[0-9]*$/.test(value)
+														) {
+															const float = Number.parseFloat(value);
+															field.onChange(float);
+														}
+													}}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -1,288 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { InfoIcon } from "lucide-react";
-import React, { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const addResourcesSchema = z.object({
-	memoryReservation: z.string().optional(),
-	cpuLimit: z.string().optional(),
-	memoryLimit: z.string().optional(),
-	cpuReservation: z.string().optional(),
-});
-
-export type ServiceType =
-	| "postgres"
-	| "mongo"
-	| "redis"
-	| "mysql"
-	| "mariadb"
-	| "application";
-
-interface Props {
-	id: string;
-	type: ServiceType | "application";
-}
-
-type AddResources = z.infer<typeof addResourcesSchema>;
-export const ShowResources = ({ id, type }: Props) => {
-	const queryMap = {
-		postgres: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-	};
-	const { data, refetch } = queryMap[type]
-		? queryMap[type]()
-		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
-
-	const mutationMap = {
-		postgres: () => api.postgres.update.useMutation(),
-		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
-	};
-
-	const { mutateAsync, isLoading } = mutationMap[type]
-		? mutationMap[type]()
-		: api.mongo.update.useMutation();
-
-	const form = useForm<AddResources>({
-		defaultValues: {
-			cpuLimit: "",
-			cpuReservation: "",
-			memoryLimit: "",
-			memoryReservation: "",
-		},
-		resolver: zodResolver(addResourcesSchema),
-	});
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				cpuLimit: data?.cpuLimit || undefined,
-				cpuReservation: data?.cpuReservation || undefined,
-				memoryLimit: data?.memoryLimit || undefined,
-				memoryReservation: data?.memoryReservation || undefined,
-			});
-		}
-	}, [data, form, form.reset]);
-
-	const onSubmit = async (formData: AddResources) => {
-		await mutateAsync({
-			mongoId: id || "",
-			postgresId: id || "",
-			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			applicationId: id || "",
-			cpuLimit: formData.cpuLimit || null,
-			cpuReservation: formData.cpuReservation || null,
-			memoryLimit: formData.memoryLimit || null,
-			memoryReservation: formData.memoryReservation || null,
-		})
-			.then(async () => {
-				toast.success("Resources Updated");
-				await refetch();
-			})
-			.catch(() => {
-				toast.error("Error updating the resources");
-			});
-	};
-
-	return (
-		<Card className="bg-background">
-			<CardHeader>
-				<CardTitle className="text-xl">Resources</CardTitle>
-				<CardDescription>
-					If you want to decrease or increase the resources to a specific.
-					application or database
-				</CardDescription>
-			</CardHeader>
-			<CardContent className="flex flex-col gap-4">
-				<AlertBlock type="info">
-					Please remember to click Redeploy after modify the resources to apply
-					the changes.
-				</AlertBlock>
-				<Form {...form}>
-					<form
-						id="hook-form"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-8 "
-					>
-						<div className="grid w-full md:grid-cols-2 gap-4">
-							<FormField
-								control={form.control}
-								name="memoryReservation"
-								render={({ field }) => (
-									<FormItem>
-										<div className="flex items-center gap-2">
-											<FormLabel>Memory Reservation</FormLabel>
-											<TooltipProvider>
-												<Tooltip delayDuration={0}>
-													<TooltipTrigger>
-														<InfoIcon className="h-4 w-4 text-muted-foreground" />
-													</TooltipTrigger>
-													<TooltipContent>
-														<p>
-															Memory soft limit in bytes. Example: 256MB =
-															268435456 bytes
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
-										</div>
-										<FormControl>
-											<Input
-												placeholder="268435456 (256MB in bytes)"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<FormField
-								control={form.control}
-								name="memoryLimit"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>Memory Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																Memory hard limit in bytes. Example: 1GB =
-																1073741824 bytes
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-											<FormControl>
-												<Input
-													placeholder="1073741824 (1GB in bytes)"
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-
-							<FormField
-								control={form.control}
-								name="cpuLimit"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Limit</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU quota in units of 10^-9 CPUs. Example: 2
-																CPUs = 2000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-											<FormControl>
-												<Input
-													placeholder="2000000000 (2 CPUs)"
-													{...field}
-													value={field.value?.toString() || ""}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="cpuReservation"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<div className="flex items-center gap-2">
-												<FormLabel>CPU Reservation</FormLabel>
-												<TooltipProvider>
-													<Tooltip delayDuration={0}>
-														<TooltipTrigger>
-															<InfoIcon className="h-4 w-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent>
-															<p>
-																CPU shares (relative weight). Example: 1 CPU =
-																1000000000
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</div>
-											<FormControl>
-												<Input placeholder="1000000000 (1 CPU)" {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-						</div>
-						<div className="flex w-full justify-end">
-							<Button isLoading={isLoading} type="submit">
-								Save
-							</Button>
-						</div>
-					</form>
-				</Form>
-			</CardContent>
-		</Card>
-	);
-};

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

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

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

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

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

@@ -0,0 +1,61 @@
+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 { TrashIcon } from "lucide-react";
+import React from "react";
+import { toast } from "sonner";
+
+interface Props {
+	mountId: string;
+	refetch: () => void;
+}
+export const DeleteVolume = ({ mountId, refetch }: Props) => {
+	const { mutateAsync, isLoading } = api.mounts.remove.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the mount
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								mountId,
+							})
+								.then(() => {
+									refetch();
+									toast.success("Mount deleted succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the mount");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,6 +1,4 @@
 import { AlertBlock } from "@/components/shared/alert-block";
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -9,49 +7,40 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Package, Trash2 } from "lucide-react";
+import { Package } from "lucide-react";
 import React from "react";
-import { toast } from "sonner";
-import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
+import { DeleteVolume } from "./delete-volume";
 import { UpdateVolume } from "./update-volume";
 interface Props {
-	id: string;
-	type: ServiceType | "compose";
+	applicationId: string;
 }
 
-export const ShowVolumes = ({ id, type }: Props) => {
-	const queryMap = {
-		postgres: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-		compose: () =>
-			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
-	};
-	const { data, refetch } = queryMap[type]
-		? queryMap[type]()
-		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
-	const { mutateAsync: deleteVolume, isLoading: isRemoving } =
-		api.mounts.remove.useMutation();
+export const ShowVolumes = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
 				<div>
 					<CardTitle className="text-xl">Volumes</CardTitle>
 					<CardDescription>
-						If you want to persist data in this postgres database use the
-						following config to setup the volumes
+						If you want to persist data in this application use the following
+						config to setup the volumes
 					</CardDescription>
 				</div>
 
 				{data && data?.mounts.length > 0 && (
-					<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
+					<AddVolumes
+						serviceId={applicationId}
+						refetch={refetch}
+						serviceType="application"
+					>
 						Add Volume
 					</AddVolumes>
 				)}
@@ -63,13 +52,17 @@ export const ShowVolumes = ({ id, type }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No volumes/mounts configured
 						</span>
-						<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
+						<AddVolumes
+							serviceId={applicationId}
+							refetch={refetch}
+							serviceType="application"
+						>
 							Add Volume
 						</AddVolumes>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
-						<AlertBlock type="warning">
+						<AlertBlock type="info">
 							Please remember to click Redeploy after adding, editing, or
 							deleting a mount to apply the changes.
 						</AlertBlock>
@@ -80,8 +73,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 										key={mount.mountId}
 										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
 									>
-										{/* <Package className="size-8 self-center text-muted-foreground" /> */}
-										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Mount Type</span>
 												<span className="text-sm text-muted-foreground">
@@ -98,12 +90,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 											)}
 
 											{mount.type === "file" && (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">Content</span>
-													<span className="text-sm text-muted-foreground line-clamp-[10] whitespace-break-spaces">
-														{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>
+
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">File Path</span>
+														<span className="text-sm text-muted-foreground">
+															{mount.filePath}
+														</span>
+													</div>
+												</>
 											)}
 											{mount.type === "bind" && (
 												<div className="flex flex-col gap-1">
@@ -113,55 +114,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 													</span>
 												</div>
 											)}
-											{mount.type === "file" ? (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">File Path</span>
-													<span className="text-sm text-muted-foreground">
-														{mount.filePath}
-													</span>
-												</div>
-											) : (
-												<div className="flex flex-col gap-1">
-													<span className="font-medium">Mount Path</span>
-													<span className="text-sm text-muted-foreground">
-														{mount.mountPath}
-													</span>
-												</div>
-											)}
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
 										</div>
 										<div className="flex flex-row gap-1">
 											<UpdateVolume
 												mountId={mount.mountId}
 												type={mount.type}
 												refetch={refetch}
-												serviceType={type}
+												serviceType="application"
 											/>
-											<DialogAction
-												title="Delete Volume"
-												description="Are you sure you want to delete this volume?"
-												type="destructive"
-												onClick={async () => {
-													await deleteVolume({
-														mountId: mount.mountId,
-													})
-														.then(() => {
-															refetch();
-															toast.success("Volume deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting volume");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
 										</div>
 									</div>
 								</div>

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

@@ -21,7 +21,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, Pencil } from "lucide-react";
+import { Pencil } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -139,7 +139,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the Bind mount");
+					toast.error("Error to update the Bind mount");
 				});
 		} else if (data.type === "volume") {
 			await mutateAsync({
@@ -153,7 +153,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the Volume mount");
+					toast.error("Error to update the Volume mount");
 				});
 		} else if (data.type === "file") {
 			await mutateAsync({
@@ -168,7 +168,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error updating the File mount");
+					toast.error("Error to update the File mount");
 				});
 		}
 		refetch();
@@ -177,13 +177,8 @@ export const UpdateVolume = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-blue-500/10 "
-					isLoading={isLoading}
-				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">

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

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

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

@@ -0,0 +1,161 @@
+import { Badge } from "@/components/ui/badge";
+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 { Copy, 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>
+				<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>
+						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 className="flex items-center gap-2">
+											<span>
+												To confirm, type{" "}
+												<Badge
+													className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer"
+													variant="outline"
+													onClick={() => {
+														if (data?.name && data?.appName) {
+															navigator.clipboard.writeText(
+																`${data.name}/${data.appName}`,
+															);
+															toast.success("Copied to clipboard. Be careful!");
+														}
+													}}
+												>
+													{data?.name}/{data?.appName}&nbsp;
+													<Copy className="h-4 w-4 ml-1 text-muted-foreground" />
+												</Badge>{" "}
+												in the box below:
+											</span>
+										</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter application name to confirm"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</form>
+					</Form>
+				</div>
+				<DialogFooter>
+					<Button
+						variant="secondary"
+						onClick={() => {
+							setIsOpen(false);
+						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						isLoading={isLoading}
+						form="hook-form-delete-application"
+						type="submit"
+						variant="destructive"
+					>
+						Confirm
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -20,12 +20,6 @@ interface Props {
 
 export const CancelQueues = ({ applicationId }: Props) => {
 	const { mutateAsync, isLoading } = api.application.cleanQueues.useMutation();
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-
-	if (isCloud) {
-		return null;
-	}
-
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>

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

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

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

@@ -104,7 +104,9 @@ export const AddDomain = ({
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
-		error: domainId ? "Error updating the domain" : "Error creating the domain",
+		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"

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

@@ -0,0 +1,73 @@
+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 { TrashIcon } from "lucide-react";
+import React from "react";
+import { toast } from "sonner";
+
+interface Props {
+	domainId: string;
+}
+export const DeleteDomain = ({ domainId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.delete.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						domain
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								domainId,
+							})
+								.then((data) => {
+									if (data?.applicationId) {
+										utils.domain.byApplicationId.invalidate({
+											applicationId: data?.applicationId,
+										});
+										utils.application.readTraefikConfig.invalidate({
+											applicationId: data?.applicationId,
+										});
+									} else if (data?.composeId) {
+										utils.domain.byComposeId.invalidate({
+											composeId: data?.composeId,
+										});
+									}
+
+									toast.success("Domain delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete Domain");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,4 +1,3 @@
-import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,17 +8,17 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react";
 import Link from "next/link";
-import { toast } from "sonner";
 import { AddDomain } from "./add-domain";
+import { DeleteDomain } from "./delete-domain";
 
 interface Props {
 	applicationId: string;
 }
 
 export const ShowDomains = ({ applicationId }: Props) => {
-	const { data, refetch } = api.domain.byApplicationId.useQuery(
+	const { data } = api.domain.byApplicationId.useQuery(
 		{
 			applicationId,
 		},
@@ -27,10 +26,6 @@ export const ShowDomains = ({ applicationId }: Props) => {
 			enabled: !!applicationId,
 		},
 	);
-
-	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
-		api.domain.delete.useMutation();
-
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -102,32 +97,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
 													<PenBoxIcon className="size-4 text-muted-foreground" />
 												</Button>
 											</AddDomain>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<DeleteDomain domainId={item.domainId} />
 										</div>
 									</div>
 								);

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

@@ -51,17 +51,17 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error adding environment");
+				toast.error("Error to add environment");
 			});
 	};
 
 	return (
-		<Card className="bg-background px-6 pb-6">
-			<Form {...form}>
-				<form
-					onSubmit={form.handleSubmit(onSubmit)}
-					className="flex w-full flex-col gap-4"
-				>
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex w-full flex-col gap-5 "
+			>
+				<Card className="bg-background p-6">
 					<Secrets
 						name="env"
 						title="Environment Settings"
@@ -89,13 +89,15 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							placeholder="NPM_TOKEN=xyz"
 						/>
 					)}
-					<div className="flex flex-row justify-end">
-						<Button isLoading={isLoading} className="w-fit" type="submit">
-							Save
-						</Button>
-					</div>
-				</form>
-			</Form>
-		</Card>
+					<CardContent>
+						<div className="flex flex-row justify-end">
+							<Button isLoading={isLoading} className="w-fit" type="submit">
+								Save
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</form>
+		</Form>
 	);
 };

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

@@ -0,0 +1,74 @@
+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 { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const DeployApplication = ({ applicationId }: Props) => {
+	const router = useRouter();
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync: deploy } = api.application.deploy.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.applicationStatus === "running"}>
+					Deploy
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await deploy({
+								applicationId,
+							})
+								.then(async () => {
+									toast.success("Application deployed succesfully");
+									await refetch();
+									router.push(
+										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+									);
+								})
+
+								.catch(() => {
+									toast.error("Error to deploy Application");
+								});
+
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+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 { RefreshCcw } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+	appName: string;
+}
+
+export const ResetApplication = ({ applicationId, appName }: Props) => {
+	const { refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync: reload, isLoading } =
+		api.application.reload.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Reload
+					<RefreshCcw className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will reload the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await reload({
+								applicationId,
+								appName,
+							})
+								.then(() => {
+									toast.success("Service Reloaded");
+								})
+								.catch(() => {
+									toast.error("Error to reload the service");
+								});
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -1,21 +1,23 @@
 import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
 import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
-import { useRouter } from "next/router";
+import { Terminal } from "lucide-react";
 import React from "react";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { RedbuildApplication } from "../rebuild-application";
+import { StartApplication } from "../start-application";
+import { StopApplication } from "../stop-application";
+import { DeployApplication } from "./deploy-application";
+import { ResetApplication } from "./reset-application";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowGeneralApplication = ({ applicationId }: Props) => {
-	const router = useRouter();
 	const { data, refetch } = api.application.one.useQuery(
 		{
 			applicationId,
@@ -23,18 +25,6 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 		{ enabled: !!applicationId },
 	);
 	const { mutateAsync: update } = api.application.update.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
-		api.application.start.useMutation();
-	const { mutateAsync: stop, isLoading: isStopping } =
-		api.application.stop.useMutation();
-
-	const { mutateAsync: deploy, isLoading: isDeploying } =
-		api.application.deploy.useMutation();
-
-	const { mutateAsync: reload, isLoading: isReloading } =
-		api.application.reload.useMutation();
-
-	const { mutateAsync: redeploy } = api.application.redeploy.useMutation();
 
 	return (
 		<>
@@ -43,127 +33,17 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<DialogAction
-						title="Deploy Application"
-						description="Are you sure you want to deploy this application?"
-						type="default"
-						onClick={async () => {
-							await deploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application deployed successfully");
-									refetch();
-									router.push(
-										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-									);
-								})
-								.catch(() => {
-									toast.error("Error deploying application");
-								});
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Reload Application"
-						description="Are you sure you want to reload this application?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								applicationId: applicationId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Application reloaded successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error reloading application");
-								});
-						}}
-					>
-						<Button variant="secondary" isLoading={isReloading}>
-							Reload
-							<RefreshCcw className="size-4" />
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Rebuild Application"
-						description="Are you sure you want to rebuild this application?"
-						type="default"
-						onClick={async () => {
-							await redeploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application rebuilt successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error rebuilding application");
-								});
-						}}
-					>
-						<Button
-							variant="secondary"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Rebuild
-							<Hammer className="size-4" />
-						</Button>
-					</DialogAction>
+					<DeployApplication applicationId={applicationId} />
+					<ResetApplication
+						applicationId={applicationId}
+						appName={data?.appName || ""}
+					/>
 
+					<RedbuildApplication applicationId={applicationId} />
 					{data?.applicationStatus === "idle" ? (
-						<DialogAction
-							title="Start Application"
-							description="Are you sure you want to start this application?"
-							type="default"
-							onClick={async () => {
-								await start({
-									applicationId: applicationId,
-								})
-									.then(() => {
-										toast.success("Application started successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error starting application");
-									});
-							}}
-						>
-							<Button variant="secondary" isLoading={isStarting}>
-								Start
-								<CheckCircle2 className="size-4" />
-							</Button>
-						</DialogAction>
+						<StartApplication applicationId={applicationId} />
 					) : (
-						<DialogAction
-							title="Stop Application"
-							description="Are you sure you want to stop this application?"
-							onClick={async () => {
-								await stop({
-									applicationId: applicationId,
-								})
-									.then(() => {
-										toast.success("Application stopped successfully");
-										refetch();
-									})
-									.catch(() => {
-										toast.error("Error stopping application");
-									});
-							}}
-						>
-							<Button variant="destructive" isLoading={isStopping}>
-								Stop
-								<Ban className="size-4" />
-							</Button>
-						</DialogAction>
+						<StopApplication applicationId={applicationId} />
 					)}
 					<DockerTerminalModal
 						appName={data?.appName || ""}
@@ -189,7 +69,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										await refetch();
 									})
 									.catch(() => {
-										toast.error("Error updating Auto Deploy");
+										toast.error("Error to update Auto Deploy");
 									});
 							}}
 							className="flex flex-row gap-2 items-center"

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

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

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

@@ -104,7 +104,9 @@ export const AddPreviewDomain = ({
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
-		error: domainId ? "Error updating the domain" : "Error creating the domain",
+		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"

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

@@ -291,6 +291,16 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 														"PORT=3000",
 													].join("\n")}
 												/>
+												{/* <CodeEditor
+													lineWrapping
+													language="properties"
+													wrapperClassName="h-[25rem] font-mono"
+													placeholder={`NODE_ENV=production
+PORT=3000
+
+                                                    `}
+													{...field}
+												/> */}
 											</FormControl>
 											<FormMessage />
 										</FormItem>

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

@@ -0,0 +1,76 @@
+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 { Hammer } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const RedbuildApplication = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync } = api.application.redeploy.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button
+					variant="secondary"
+					isLoading={data?.applicationStatus === "running"}
+				>
+					Rebuild
+					<Hammer className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to rebuild the application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						Is required to deploy at least 1 time in order to reuse the same
+						code
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							toast.success("Redeploying Application....");
+							await mutateAsync({
+								applicationId,
+							})
+								.then(async () => {
+									await utils.application.one.invalidate({
+										applicationId,
+									});
+								})
+								.catch(() => {
+									toast.error("Error to rebuild the application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,65 @@
+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 {
+	applicationId: string;
+}
+
+export const StartApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.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 application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will start the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(async () => {
+									await utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Application started succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to start the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,65 @@
+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 {
+	applicationId: string;
+}
+
+export const StopApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.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 application?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will stop the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(async () => {
+									await utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Application stopped succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to stop the Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { AlertTriangle, SquarePen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -76,14 +76,14 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 			description: formData.description || "",
 		})
 			.then(() => {
-				toast.success("Application updated successfully");
+				toast.success("Application updated succesfully");
 				utils.application.one.invalidate({
 					applicationId: applicationId,
 				});
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Application");
+				toast.error("Error to update the application");
 			})
 			.finally(() => {});
 	};
@@ -91,12 +91,8 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-blue-500/10 "
-				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				<Button variant="ghost">
+					<SquarePen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">

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

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

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

@@ -0,0 +1,142 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Package } from "lucide-react";
+import React from "react";
+import { AddVolumes } from "../../application/advanced/volumes/add-volumes";
+import { DeleteVolume } from "../../application/advanced/volumes/delete-volume";
+import { UpdateVolume } from "../../application/advanced/volumes/update-volume";
+interface Props {
+	composeId: string;
+}
+
+export const ShowVolumesCompose = ({ composeId }: Props) => {
+	const { data, refetch } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Volumes</CardTitle>
+					<CardDescription>
+						If you want to persist data in this compose use the following config
+						to setup the volumes
+					</CardDescription>
+				</div>
+
+				{data && data?.mounts.length > 0 && (
+					<AddVolumes
+						serviceId={composeId}
+						refetch={refetch}
+						serviceType="compose"
+					>
+						Add Volume
+					</AddVolumes>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.mounts.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Package className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No volumes/mounts configured
+						</span>
+						<AddVolumes
+							serviceId={composeId}
+							refetch={refetch}
+							serviceType="compose"
+						>
+							Add Volume
+						</AddVolumes>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2 gap-4">
+						<AlertBlock type="info">
+							Please remember to click Redeploy after adding, editing, or
+							deleting a mount to apply the changes.
+						</AlertBlock>
+
+						<div className="flex flex-col gap-6">
+							{data?.mounts.map((mount) => (
+								<div key={mount.mountId}>
+									<div
+										key={mount.mountId}
+										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
+									>
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Type</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.type.toUpperCase()}
+												</span>
+											</div>
+											{mount.type === "volume" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Volume Name</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.volumeName}
+													</span>
+												</div>
+											)}
+
+											{mount.type === "file" && (
+												<>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">Content</span>
+														<span className="text-sm text-muted-foreground w-40 truncate">
+															{mount.content}
+														</span>
+													</div>
+													<div className="flex flex-col gap-1">
+														<span className="font-medium">File Path</span>
+														<span className="text-sm text-muted-foreground">
+															{mount.filePath}
+														</span>
+													</div>
+												</>
+											)}
+											{mount.type === "bind" && (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Host Path</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.hostPath}
+													</span>
+												</div>
+											)}
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Mount Path</span>
+												<span className="text-sm text-muted-foreground">
+													{mount.mountPath}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-1">
+											<UpdateVolume
+												mountId={mount.mountId}
+												type={mount.type}
+												refetch={refetch}
+												serviceType="compose"
+											/>
+											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -13,6 +13,7 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -21,7 +22,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Copy, Trash2 } from "lucide-react";
+import { Copy } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -81,13 +82,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-red-500/10 "
-					isLoading={isLoading}
-				>
-					<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+				<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">

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

@@ -20,11 +20,6 @@ interface Props {
 
 export const CancelQueuesCompose = ({ composeId }: Props) => {
 	const { mutateAsync, isLoading } = api.compose.cleanQueues.useMutation();
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-
-	if (isCloud) {
-		return null;
-	}
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>

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

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

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

@@ -126,7 +126,9 @@ export const AddDomainCompose = ({
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
-		error: domainId ? "Error updating the domain" : "Error creating the domain",
+		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"

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

@@ -1,4 +1,3 @@
-import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,9 +8,9 @@ import {
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react";
 import Link from "next/link";
-import { toast } from "sonner";
+import { DeleteDomain } from "../../application/domains/delete-domain";
 import { AddDomainCompose } from "./add-domain";
 
 interface Props {
@@ -19,7 +18,7 @@ interface Props {
 }
 
 export const ShowDomainsCompose = ({ composeId }: Props) => {
-	const { data, refetch } = api.domain.byComposeId.useQuery(
+	const { data } = api.domain.byComposeId.useQuery(
 		{
 			composeId,
 		},
@@ -28,9 +27,6 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 		},
 	);
 
-	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
-		api.domain.delete.useMutation();
-
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -101,32 +97,7 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 													<PenBoxIcon className="size-4 text-muted-foreground" />
 												</Button>
 											</AddDomainCompose>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
-												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+											<DeleteDomain domainId={item.domainId} />
 										</div>
 									</div>
 								);

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

@@ -0,0 +1,167 @@
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@/components/ui/form";
+import { Toggle } from "@/components/ui/toggle";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const addEnvironmentSchema = z.object({
+	environment: z.string(),
+});
+
+type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
+
+interface Props {
+	composeId: string;
+}
+
+export const ShowEnvironmentCompose = ({ composeId }: Props) => {
+	const [isEnvVisible, setIsEnvVisible] = useState(true);
+	const { mutateAsync, isLoading } = api.compose.update.useMutation();
+
+	const { data, refetch } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{
+			enabled: !!composeId,
+		},
+	);
+	const form = useForm<EnvironmentSchema>({
+		defaultValues: {
+			environment: "",
+		},
+		resolver: zodResolver(addEnvironmentSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				environment: data.env || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: EnvironmentSchema) => {
+		mutateAsync({
+			env: data.environment,
+			composeId,
+		})
+			.then(async () => {
+				toast.success("Environments Added");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to add environment");
+			});
+	};
+
+	useEffect(() => {
+		if (isEnvVisible) {
+			if (data?.env) {
+				const maskedLines = data.env
+					.split("\n")
+					.map((line) => "*".repeat(line.length))
+					.join("\n");
+				form.reset({
+					environment: maskedLines,
+				});
+			} else {
+				form.reset({
+					environment: "",
+				});
+			}
+		} else {
+			form.reset({
+				environment: data?.env || "",
+			});
+		}
+	}, [form.reset, data, form, isEnvVisible]);
+
+	return (
+		<div className="flex w-full flex-col gap-5 ">
+			<Card className="bg-background">
+				<CardHeader className="flex flex-row w-full items-center justify-between">
+					<div>
+						<CardTitle className="text-xl">Environment Settings</CardTitle>
+						<CardDescription>
+							You can add environment variables to your resource.
+						</CardDescription>
+					</div>
+
+					<Toggle
+						aria-label="Toggle bold"
+						pressed={isEnvVisible}
+						onPressedChange={setIsEnvVisible}
+					>
+						{isEnvVisible ? (
+							<EyeOffIcon className="h-4 w-4 text-muted-foreground" />
+						) : (
+							<EyeIcon className="h-4 w-4 text-muted-foreground" />
+						)}
+					</Toggle>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form
+							id="hook-form"
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="w-full space-y-4"
+						>
+							<FormField
+								control={form.control}
+								name="environment"
+								render={({ field }) => (
+									<FormItem className="w-full">
+										<FormControl>
+											<CodeEditor
+												language="properties"
+												disabled={isEnvVisible}
+												placeholder={`NODE_ENV=production
+PORT=3000
+`}
+												className="h-96 font-mono"
+												{...field}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<div className="flex flex-row justify-end">
+								<Button
+									disabled={isEnvVisible}
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+								>
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -1,17 +1,28 @@
-import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, Terminal } from "lucide-react";
-import { useRouter } from "next/router";
+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";
 
 interface Props {
 	composeId: string;
 }
 export const ComposeActions = ({ composeId }: Props) => {
-	const router = useRouter();
 	const { data, refetch } = api.compose.one.useQuery(
 		{
 			composeId,
@@ -19,109 +30,33 @@ export const ComposeActions = ({ composeId }: Props) => {
 		{ enabled: !!composeId },
 	);
 	const { mutateAsync: update } = api.compose.update.useMutation();
-	const { mutateAsync: deploy } = api.compose.deploy.useMutation();
-	const { mutateAsync: redeploy } = api.compose.redeploy.useMutation();
-	const { mutateAsync: start, isLoading: isStarting } =
-		api.compose.start.useMutation();
-	const { mutateAsync: stop, isLoading: isStopping } =
-		api.compose.stop.useMutation();
+
+	const extractDomains = (env: string) => {
+		const lines = env.split("\n");
+		const hostLines = lines.filter((line) => {
+			const [key, value] = line.split("=");
+			return key?.trim().endsWith("_HOST");
+		});
+
+		const hosts = hostLines.map((line) => {
+			const [key, value] = line.split("=");
+			return value ? value.trim() : "";
+		});
+
+		return hosts;
+	};
+
+	const domains = extractDomains(data?.env || "");
+
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<DialogAction
-				title="Deploy Compose"
-				description="Are you sure you want to deploy this compose?"
-				type="default"
-				onClick={async () => {
-					await deploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose deployed successfully");
-							refetch();
-							router.push(
-								`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
-							);
-						})
-						.catch(() => {
-							toast.error("Error deploying compose");
-						});
-				}}
-			>
-				<Button variant="default" isLoading={data?.composeStatus === "running"}>
-					Deploy
-				</Button>
-			</DialogAction>
-			<DialogAction
-				title="Rebuild Compose"
-				description="Are you sure you want to rebuild this compose?"
-				type="default"
-				onClick={async () => {
-					await redeploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose rebuilt successfully");
-							refetch();
-						})
-						.catch(() => {
-							toast.error("Error rebuilding compose");
-						});
-				}}
-			>
-				<Button
-					variant="secondary"
-					isLoading={data?.composeStatus === "running"}
-				>
-					Rebuild
-					<Hammer className="size-4" />
-				</Button>
-			</DialogAction>
+			<DeployCompose composeId={composeId} />
+			<RedbuildCompose composeId={composeId} />
 			{data?.composeType === "docker-compose" &&
 			data?.composeStatus === "idle" ? (
-				<DialogAction
-					title="Start Compose"
-					description="Are you sure you want to start this compose?"
-					type="default"
-					onClick={async () => {
-						await start({
-							composeId: composeId,
-						})
-							.then(() => {
-								toast.success("Compose started successfully");
-								refetch();
-							})
-							.catch(() => {
-								toast.error("Error starting compose");
-							});
-					}}
-				>
-					<Button variant="secondary" isLoading={isStarting}>
-						Start
-						<CheckCircle2 className="size-4" />
-					</Button>
-				</DialogAction>
+				<StartCompose composeId={composeId} />
 			) : (
-				<DialogAction
-					title="Stop Compose"
-					description="Are you sure you want to stop this compose?"
-					onClick={async () => {
-						await stop({
-							composeId: composeId,
-						})
-							.then(() => {
-								toast.success("Compose stopped successfully");
-								refetch();
-							})
-							.catch(() => {
-								toast.error("Error stopping compose");
-							});
-					}}
-				>
-					<Button variant="destructive" isLoading={isStopping}>
-						Stop
-						<Ban className="size-4" />
-					</Button>
-				</DialogAction>
+				<StopCompose composeId={composeId} />
 			)}
 
 			<DockerTerminalModal
@@ -148,12 +83,47 @@ export const ComposeActions = ({ composeId }: Props) => {
 								await refetch();
 							})
 							.catch(() => {
-								toast.error("Error updating Auto Deploy");
+								toast.error("Error to update Auto Deploy");
 							});
 					}}
 					className="flex flex-row gap-2 items-center"
 				/>
 			</div>
+			{domains.length > 0 && (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline">
+							Domains
+							<Globe className="text-xs size-4 text-muted-foreground" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent className="w-56">
+						<DropdownMenuLabel>Domains detected</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							{domains.map((host, index) => {
+								const url =
+									host.startsWith("http://") || host.startsWith("https://")
+										? host
+										: `http://${host}`;
+
+								return (
+									<DropdownMenuItem
+										key={`domain-${index}`}
+										className="cursor-pointer"
+										asChild
+									>
+										<Link href={url} target="_blank">
+											{host}
+											<ExternalLink className="ml-2 text-xs text-muted-foreground" />
+										</Link>
+									</DropdownMenuItem>
+								);
+							})}
+						</DropdownMenuGroup>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
 		</div>
 	);
 };

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

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

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

@@ -0,0 +1,72 @@
+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 { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+
+export const DeployCompose = ({ composeId }: Props) => {
+	const router = useRouter();
+	const { data, refetch } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+
+	const { mutateAsync: deploy } = api.compose.deploy.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.composeStatus === "running"}>Deploy</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the compose
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							toast.success("Deploying Compose....");
+
+							await refetch();
+							await deploy({
+								composeId,
+							})
+								.then(async () => {
+									router.push(
+										`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+									);
+								})
+								.catch(() => {
+									toast.error("Error to deploy Compose");
+								});
+
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,75 @@
+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 { Hammer } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+
+export const RedbuildCompose = ({ composeId }: Props) => {
+	const { data } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+	const { mutateAsync } = api.compose.redeploy.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button
+					variant="secondary"
+					isLoading={data?.composeStatus === "running"}
+				>
+					Rebuild
+					<Hammer className="size-4" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to rebuild the compose?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						Is required to deploy at least 1 time in order to reuse the same
+						code
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							toast.success("Redeploying Compose....");
+							await mutateAsync({
+								composeId,
+							})
+								.then(async () => {
+									await utils.compose.one.invalidate({
+										composeId,
+									});
+								})
+								.catch(() => {
+									toast.error("Error to rebuild the compose");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

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

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

@@ -0,0 +1,69 @@
+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 { data } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+	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 sure to stop the compose?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will stop the compose services
+					</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/compose/logs/show-stack.tsx

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

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

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

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,65 @@
+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/compose/update-compose.tsx

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon } from "lucide-react";
+import { SquarePen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -76,14 +76,14 @@ export const UpdateCompose = ({ composeId }: Props) => {
 			description: formData.description || "",
 		})
 			.then(() => {
-				toast.success("Compose updated successfully");
+				toast.success("Compose updated succesfully");
 				utils.compose.one.invalidate({
 					composeId: composeId,
 				});
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Compose");
+				toast.error("Error to update the Compose");
 			})
 			.finally(() => {});
 	};
@@ -91,12 +91,8 @@ export const UpdateCompose = ({ composeId }: Props) => {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-blue-500/10 "
-				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				<Button variant="ghost">
+					<SquarePen className="size-4 text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">

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

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

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

@@ -0,0 +1,62 @@
+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 { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	backupId: string;
+	refetch: () => void;
+}
+
+export const DeleteBackup = ({ backupId, refetch }: Props) => {
+	const { mutateAsync, isLoading } = api.backup.remove.useMutation();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						backup
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								backupId,
+							})
+								.then(() => {
+									refetch();
+
+									toast.success("Backup delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the backup");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -109,19 +109,15 @@ export const UpdateBackup = ({ backupId, refetch }: Props) => {
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error updating the Backup");
+				toast.error("Error to update the backup");
 			});
 	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-blue-500/10 "
-				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+				<Button variant="ghost">
+					<PenBoxIcon className="size-4  text-muted-foreground" />
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">

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

@@ -12,7 +12,6 @@ import { type LogLine, getLogType, parseLogs } from "./utils";
 interface Props {
 	containerId: string;
 	serverId?: string | null;
-	runType: "swarm" | "native";
 }
 
 export const priorities = [
@@ -38,11 +37,7 @@ export const priorities = [
 	},
 ];
 
-export const DockerLogsId: React.FC<Props> = ({
-	containerId,
-	serverId,
-	runType,
-}) => {
+export const DockerLogsId: React.FC<Props> = ({ containerId, serverId }) => {
 	const { data } = api.docker.getConfig.useQuery(
 		{
 			containerId,
@@ -109,7 +104,6 @@ export const DockerLogsId: React.FC<Props> = ({
 			tail: lines.toString(),
 			since,
 			search,
-			runType,
 		});
 
 		if (serverId) {
@@ -226,7 +220,7 @@ export const DockerLogsId: React.FC<Props> = ({
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="rounded-lg">
+			<div className="rounded-lg overflow-hidden">
 				<div className="space-y-4">
 					<div className="flex flex-wrap justify-between items-start sm:items-center gap-4">
 						<div className="flex flex-wrap gap-4">

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

@@ -46,11 +46,7 @@ export const ShowDockerModalLogs = ({
 					<DialogDescription>View the logs for {containerId}</DialogDescription>
 				</DialogHeader>
 				<div className="flex flex-col gap-4 pt-2.5">
-					<DockerLogsId
-						containerId={containerId || ""}
-						serverId={serverId}
-						runType="native"
-					/>
+					<DockerLogsId containerId={containerId || ""} serverId={serverId} />
 				</div>
 			</DialogContent>
 		</Dialog>

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

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

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

@@ -43,7 +43,7 @@ const LOG_STYLES: Record<LogType, LogStyle> = {
 
 export function parseLogs(logString: string): LogLine[] {
 	// Regex to match the log line format
-	// Example of return :
+	// Exemple of return :
 	// 1 2024-12-10T10:00:00.000Z The server is running on port 8080
 	// Should return :
 	// { timestamp: new Date("2024-12-10T10:00:00.000Z"),

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

@@ -9,18 +9,10 @@ import {
 	getSortedRowModel,
 	useReactTable,
 } from "@tanstack/react-table";
-import { ChevronDown, Container } from "lucide-react";
+import { ChevronDown } from "lucide-react";
 import * as React from "react";
 
-import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -79,164 +71,139 @@ export const ShowContainers = ({ serverId }: Props) => {
 	});
 
 	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
-				<div className="rounded-xl bg-background shadow-md ">
-					<CardHeader className="">
-						<CardTitle className="text-xl flex flex-row gap-2">
-							<Container className="size-6 text-muted-foreground self-center" />
-							Docker Containers
-						</CardTitle>
-						<CardDescription>
-							See all the containers of your dokploy server
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-2 py-8 border-t">
-						<div className="gap-4 pb-20 w-full">
-							<div className="flex flex-col gap-4  w-full overflow-auto">
-								<div className="flex items-center gap-2 max-sm:flex-wrap">
-									<Input
-										placeholder="Filter by name..."
-										value={
-											(table.getColumn("name")?.getFilterValue() as string) ??
-											""
-										}
-										onChange={(event) =>
-											table
-												.getColumn("name")
-												?.setFilterValue(event.target.value)
-										}
-										className="md:max-w-sm"
-									/>
-									<DropdownMenu>
-										<DropdownMenuTrigger asChild>
-											<Button
-												variant="outline"
-												className="sm:ml-auto max-sm:w-full"
-											>
-												Columns <ChevronDown className="ml-2 h-4 w-4" />
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end">
-											{table
-												.getAllColumns()
-												.filter((column) => column.getCanHide())
-												.map((column) => {
-													return (
-														<DropdownMenuCheckboxItem
-															key={column.id}
-															className="capitalize"
-															checked={column.getIsVisible()}
-															onCheckedChange={(value) =>
-																column.toggleVisibility(!!value)
-															}
-														>
-															{column.id}
-														</DropdownMenuCheckboxItem>
-													);
-												})}
-										</DropdownMenuContent>
-									</DropdownMenu>
-								</div>
-								<div className="rounded-md border">
-									{isLoading ? (
-										<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												Loading...
-											</span>
-										</div>
-									) : data?.length === 0 ? (
-										<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												No results.
-											</span>
-										</div>
-									) : (
-										<Table>
-											<TableHeader>
-												{table.getHeaderGroups().map((headerGroup) => (
-													<TableRow key={headerGroup.id}>
-														{headerGroup.headers.map((header) => {
-															return (
-																<TableHead key={header.id}>
-																	{header.isPlaceholder
-																		? null
-																		: flexRender(
-																				header.column.columnDef.header,
-																				header.getContext(),
-																			)}
-																</TableHead>
-															);
-														})}
-													</TableRow>
-												))}
-											</TableHeader>
-											<TableBody>
-												{table?.getRowModel()?.rows?.length ? (
-													table.getRowModel().rows.map((row) => (
-														<TableRow
-															key={row.id}
-															data-state={row.getIsSelected() && "selected"}
-														>
-															{row.getVisibleCells().map((cell) => (
-																<TableCell key={cell.id}>
-																	{flexRender(
-																		cell.column.columnDef.cell,
-																		cell.getContext(),
-																	)}
-																</TableCell>
-															))}
-														</TableRow>
-													))
-												) : (
-													<TableRow>
-														<TableCell
-															colSpan={columns.length}
-															className="h-24 text-center"
-														>
-															{isLoading ? (
-																<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-																	<span className="text-muted-foreground text-lg font-medium">
-																		Loading...
-																	</span>
-																</div>
-															) : (
-																<>No results.</>
-															)}
-														</TableCell>
-													</TableRow>
-												)}
-											</TableBody>
-										</Table>
-									)}
-								</div>
-								{data && data?.length > 0 && (
-									<div className="flex items-center justify-end space-x-2 py-4">
-										<div className="space-x-2 flex flex-wrap">
-											<Button
-												variant="outline"
-												size="sm"
-												onClick={() => table.previousPage()}
-												disabled={!table.getCanPreviousPage()}
-											>
-												Previous
-											</Button>
-											<Button
-												variant="outline"
-												size="sm"
-												onClick={() => table.nextPage()}
-												disabled={!table.getCanNextPage()}
-											>
-												Next
-											</Button>
-										</div>
-									</div>
-								)}
-							</div>
-						</div>
-					</CardContent>
+		<div className="mt-6 grid gap-4 pb-20 w-full">
+			<div className="flex flex-col gap-4  w-full overflow-auto">
+				<div className="flex items-center gap-2 max-sm:flex-wrap">
+					<Input
+						placeholder="Filter by name..."
+						value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+						onChange={(event) =>
+							table.getColumn("name")?.setFilterValue(event.target.value)
+						}
+						className="md:max-w-sm"
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="sm:ml-auto max-sm:w-full">
+								Columns <ChevronDown className="ml-2 h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{table
+								.getAllColumns()
+								.filter((column) => column.getCanHide())
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
 				</div>
-			</Card>
+				<div className="rounded-md border">
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
+									</TableRow>
+								))}
+							</TableHeader>
+							<TableBody>
+								{table?.getRowModel()?.rows?.length ? (
+									table.getRowModel().rows.map((row) => (
+										<TableRow
+											key={row.id}
+											data-state={row.getIsSelected() && "selected"}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<TableCell key={cell.id}>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</TableCell>
+											))}
+										</TableRow>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											{isLoading ? (
+												<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<span className="text-muted-foreground text-lg font-medium">
+														Loading...
+													</span>
+												</div>
+											) : (
+												<>No results.</>
+											)}
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					)}
+				</div>
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
 		</div>
 	);
 };

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

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

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

@@ -1,15 +1,8 @@
 import { AlertBlock } from "@/components/shared/alert-block";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
 import { Tree } from "@/components/ui/file-tree";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { FileIcon, Folder, Link, Loader2, Workflow } from "lucide-react";
+import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
 import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 
@@ -34,77 +27,53 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 	);
 
 	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
-				<div className="rounded-xl bg-background shadow-md ">
-					<CardHeader className="">
-						<CardTitle className="text-xl flex flex-row gap-2">
-							<FileIcon className="size-6 text-muted-foreground self-center" />
-							Traefik File System
-						</CardTitle>
-						<CardDescription>
-							Manage all the files and directories in {"'/etc/dokploy/traefik'"}
-							.
-						</CardDescription>
-
-						<AlertBlock type="warning">
-							Adding invalid configuration to existing files, can break your
-							Traefik instance, preventing access to your applications.
-						</AlertBlock>
-					</CardHeader>
-					<CardContent className="space-y-2 py-8 border-t">
-						<div>
-							<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
-								{isError && (
-									<AlertBlock type="error" className="w-full">
-										{error?.message}
-									</AlertBlock>
-								)}
-								{isLoading && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											Loading...
-										</span>
-										<Loader2 className="animate-spin size-8 text-muted-foreground" />
-									</div>
-								)}
-								{directories?.length === 0 && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											No directories or files detected in{" "}
-											{"'/etc/dokploy/traefik'"}
-										</span>
-										<Folder className="size-8 text-muted-foreground" />
-									</div>
-								)}
-								{directories && directories?.length > 0 && (
-									<>
-										<Tree
-											data={directories}
-											className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
-											onSelectChange={(item) => setFile(item?.id || null)}
-											folderIcon={Folder}
-											itemIcon={Workflow}
-										/>
-										<div className="w-full">
-											{file ? (
-												<ShowTraefikFile path={file} serverId={serverId} />
-											) : (
-												<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
-													<span className="text-muted-foreground text-lg font-medium">
-														No file selected
-													</span>
-													<FileIcon className="size-8 text-muted-foreground" />
-												</div>
-											)}
-										</div>
-									</>
-								)}
-							</div>
+		<div className={cn("mt-6 md:grid gap-4")}>
+			<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
+				{isError && (
+					<AlertBlock type="error" className="w-full">
+						{error?.message}
+					</AlertBlock>
+				)}
+				{isLoading && (
+					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+						<span className="text-muted-foreground text-lg font-medium">
+							Loading...
+						</span>
+						<Loader2 className="animate-spin size-8 text-muted-foreground" />
+					</div>
+				)}
+				{directories?.length === 0 && (
+					<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+						<span className="text-muted-foreground text-lg font-medium">
+							No directories or files detected in {"'/etc/dokploy/traefik'"}
+						</span>
+						<Folder className="size-8 text-muted-foreground" />
+					</div>
+				)}
+				{directories && directories?.length > 0 && (
+					<>
+						<Tree
+							data={directories}
+							className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
+							onSelectChange={(item) => setFile(item?.id || null)}
+							folderIcon={Folder}
+							itemIcon={Workflow}
+						/>
+						<div className="w-full">
+							{file ? (
+								<ShowTraefikFile path={file} serverId={serverId} />
+							) : (
+								<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
+									<span className="text-muted-foreground text-lg font-medium">
+										No file selected
+									</span>
+									<FileIcon className="size-8 text-muted-foreground" />
+								</div>
+							)}
 						</div>
-					</CardContent>
-				</div>
-			</Card>
+					</>
+				)}
+			</div>
 		</div>
 	);
 };