feat(applications): add support for Docker build secrets

- Implement build secrets functionality for Dockerfile builds
- Add new `buildSecrets` field to application schema
- Update UI and backend to handle build-time secrets
- Modify Docker build process to support secret injection during build

.circleci/config.yml

@@ -1,106 +0,0 @@
-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"
-            else
-              TAG="canary"
-            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"
-            else
-              TAG="canary"
-            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}
-            else
-              TAG="canary"
-              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
-      - build-arm64:
-          filters:
-            branches:
-              only:
-                - main
-                - canary
-      - combine-manifests:
-          requires:
-            - build-amd64
-            - build-arm64
-          filters:
-            branches:
-              only:
-                - main
-                - canary

.config/.husky/commit-msg

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

.config/.husky/install.mjs

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

.config/.husky/pre-commit

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

.github/ISSUE_TEMPLATE/bug_report.yml

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

.github/ISSUE_TEMPLATE/feature-request.yml

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

.github/workflows/create-pr.yml

@@ -0,0 +1,83 @@
+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/deploy.yml

@@ -2,7 +2,7 @@ name: Build Docker images
 
 on:
   push:
-    branches: ["canary", "main"]
+    branches: ["canary", "main", "feat/monitoring"]
 
 jobs:
   build-and-push-cloud-image:
@@ -17,7 +17,7 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      
+
       - name: Build and push Docker image
         uses: docker/build-push-action@v4
         with:
@@ -53,8 +53,7 @@ jobs:
           push: true
           tags: |
             siumauricio/schedule:${{ github.ref_name == 'main' && 'latest' || 'canary' }}
-          platforms: linux/amd64     
+          platforms: linux/amd64
-
 
   build-and-push-server-image:
     runs-on: ubuntu-latest
@@ -77,4 +76,4 @@ jobs:
           push: true
           tags: |
             siumauricio/server:${{ github.ref_name == 'main' && 'latest' || 'canary' }}
-          platforms: linux/amd64  
+          platforms: linux/amd64

.github/workflows/dokploy.yml

@@ -0,0 +1,161 @@
+name: Dokploy Docker Build
+
+on:
+  push:
+    branches: [main, canary, "feat/better-auth-2"]
+
+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/monitoring.yml

@@ -0,0 +1,118 @@
+name: Dokploy Monitoring Build
+
+on:
+  push:
+    branches: [main, canary]
+
+env:
+  IMAGE_NAME: dokploy/monitoring
+
+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
+        id: meta
+        run: |
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            TAG="latest"
+          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
+            TAG="canary"
+          else
+            TAG="feature"
+          fi
+          echo "tags=${IMAGE_NAME}:${TAG}-amd64" >> $GITHUB_OUTPUT
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile.monitoring
+          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
+        id: meta
+        run: |
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            TAG="latest"
+          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
+            TAG="canary"
+          else
+            TAG="feature"
+          fi
+          echo "tags=${IMAGE_NAME}:${TAG}-arm64" >> $GITHUB_OUTPUT
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile.monitoring
+          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
+            TAG="latest"
+
+            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
+              ${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

.github/workflows/pull-request.yml

@@ -4,9 +4,6 @@ on:
   pull_request:
     branches: [main, canary]
 
-env:
-  HUSKY: 0
-
 jobs:
   lint-and-typecheck:
     runs-on: ubuntu-latest
@@ -15,11 +12,10 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.18.0
+          node-version: 20.9.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build  
+      - run: pnpm run server:build
-      - run: pnpm biome ci
       - run: pnpm typecheck
 
   build-and-test:
@@ -30,7 +26,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.18.0
+          node-version: 20.9.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
       - run: pnpm run server:build
@@ -43,8 +39,8 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.18.0
+          node-version: 20.9.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run server:build  
+      - run: pnpm run server:build
       - run: pnpm test

.gitignore

@@ -34,9 +34,11 @@ yarn-debug.log*
 yarn-error.log*
 
 # Editor
-.vscode
 .idea
 
 # Misc
 .DS_Store
 *.pem
+
+
+.db

.husky/commit-msg

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

.husky/install.mjs

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

.husky/pre-commit

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

.nvmrc

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

CONTRIBUTING.md

@@ -52,6 +52,8 @@ 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
@@ -71,9 +73,10 @@ 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.
@@ -135,11 +138,18 @@ curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && ./install.sh
 ```
 
+```bash
+# Install Railpack
+curl -sSL https://railpack.com/install.sh | sh
+```
+
 ```bash
 # Install Buildpacks
 curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
 ```
 
+
+
 ## Pull Request
 
 - The `main` branch is the source of truth and should always reflect the latest stable release.
@@ -167,6 +177,7 @@ Let's take the example of `plausible` template.
 ```typescript
 // EXAMPLE
 import {
+  generateBase64,
   generateHash,
   generateRandomDomain,
   type Template,
@@ -198,8 +209,8 @@ export function generate(schema: Schema): Template {
 
   const mounts: Template["mounts"] = [
     {
-      mountPath: "./clickhouse/clickhouse-config.xml",
+      filePath: "./clickhouse/clickhouse-config.xml",
-      content: `some content......`,
+      content: "some content......",
     },
   ];
 
@@ -235,14 +246,13 @@ export function generate(schema: Schema): Template {
 
 5. Add the logo or image of the template to `public/templates/plausible.svg`
 
-### Recomendations
+### Recommendations
 
 - Use the same name of the folder as the id of the template.
 - The logo should be in the public folder.
-- If you want to show a domain in the UI, please add the prefix \_HOST at the end of the variable name.
+- If you want to show a domain in the UI, please add the `_HOST` suffix at the end of the variable name.
 - Test first on a vps or a server to make sure the template works.
 
 ## 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:18-slim AS base
+FROM node:20.9-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 && rm -rf /var/lib/apt/lists/*
+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/*
 
 # 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 && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next
@@ -48,11 +48,17 @@ RUN curl -fsSL https://get.docker.com -o get-docker.sh && sh get-docker.sh && rm
 
 # Install Nixpacks and tsx
 # | VERBOSE=1 VERSION=1.21.0 bash
+
+ARG NIXPACKS_VERSION=1.29.1
 RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && chmod +x install.sh \
     && ./install.sh \
     && pnpm install -g tsx
 
+# Install Railpack
+ARG RAILPACK_VERSION=0.0.37
+RUN curl -sSL https://railpack.com/install.sh | bash
+
 # Install buildpacks
 COPY --from=buildpacksio/pack:0.35.0 /usr/local/bin/pack /usr/local/bin/pack
 

Dockerfile.cloud

@@ -1,4 +1,4 @@
-FROM node:18-slim AS base
+FROM node:20.9-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 && rm -rf /var/lib/apt/lists/*
+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/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/dokploy install --frozen-lockfile

Dockerfile.monitoring

@@ -0,0 +1,41 @@
+# Build stage
+FROM golang:1.21-alpine3.19 AS builder
+
+# Instalar dependencias necesarias
+RUN apk add --no-cache gcc musl-dev sqlite-dev
+
+# Establecer el directorio de trabajo
+WORKDIR /app
+
+# Copiar todo el código fuente primero
+COPY . .
+
+# Movernos al directorio de la aplicación golang
+WORKDIR /app/apps/monitoring
+
+# Descargar dependencias
+RUN go mod download
+
+# Compilar la aplicación
+RUN CGO_ENABLED=1 GOOS=linux go build -o main main.go
+
+# Etapa final
+FROM alpine:3.19
+
+# Instalar SQLite y otras dependencias necesarias
+RUN apk add --no-cache sqlite-libs docker-cli
+
+WORKDIR /app
+
+# Copiar el binario compilado y el archivo monitor.go
+COPY --from=builder /app/apps/monitoring/main ./main
+COPY --from=builder /app/apps/monitoring/main.go ./monitor.go
+
+# COPY --from=builder /app/apps/golang/.env ./.env
+
+# Exponer el puerto
+ENV PORT=3001
+EXPOSE 3001
+
+# Ejecutar la aplicación
+CMD ["./main"]

Dockerfile.schedule

@@ -1,4 +1,4 @@
-FROM node:18-slim AS base
+FROM node:20.9-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 && rm -rf /var/lib/apt/lists/*
+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/*
 
 # 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:18-slim AS base
+FROM node:20.9-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 && rm -rf /var/lib/apt/lists/*
+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/*
 
 # Install dependencies
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm --filter=@dokploy/server --filter=./apps/api install --frozen-lockfile

LICENSE.MD

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

README.md

@@ -39,6 +39,8 @@ Dokploy includes multiple features to make your life easier.
 
 To get started, run the following command on a VPS:
 
+Want to skip the installation process? [Try the Dokploy Cloud](https://app.dokploy.com).
+
 ```bash
 curl -sSL https://dokploy.com/install.sh | sh
 ```
@@ -60,12 +62,20 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ### Hero Sponsors 🎖
 
 <div style="display: flex; align-items: center; gap: 20px;">
-  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" style="display: inline-block;">
+  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" style="display: inline-block; margin-right: 10px;">
     <img src=".github/sponsors/hostinger.jpg" alt="Hostinger" height="50"/>
   </a>
-  <a href="https://www.lxaer.com/?ref=dokploy" target="_blank" style="display: inline-block;">
+  <a href="https://www.lxaer.com/?ref=dokploy" target="_blank" style="display: inline-block; margin-right: 10px;">
     <img src=".github/sponsors/lxaer.png" alt="LX Aer" height="50"/>
   </a>
+    <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 🥇
@@ -82,9 +92,14 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">
 <a href="https://lightspeed.run/?ref=dokploy"><img src="https://github.com/lightspeedrun.png" width="60px" alt="Lightspeed.run"/></a>
-<a href="https://cloudblast.io/?ref=dokploy "><img src="https://cloudblast.io/img/logo-icon.193cf13e.svg" width="250px" alt="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>
+<a href="https://openalternative.co/?ref=dokploy "><img src=".github/sponsors/openalternative.png" width="65px" alt="Openalternative"/></a>
+<a href="https://synexa.ai/?ref=dokploy"><img src=".github/sponsors/synexa.png" width="65px" alt="Synexa"/></a>
 </div>
 
+
 ### Community Backers 🤝
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">
@@ -111,7 +126,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ## Video Tutorial
 
 <a href="https://youtu.be/mznYKPvhcfw">
-  <img src="https://dokploy.com/banner.webp" alt="Watch the video" width="400" style="border-radius:20px;"/>
+  <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400" style="border-radius:20px;"/>
 </a>
 
 <!-- ## Supported OS

apps/api/package.json

@@ -5,7 +5,7 @@
 	"scripts": {
 		"dev": "PORT=4000 tsx watch src/index.ts",
 		"build": "tsc --project tsconfig.json",
-		"start": "node --experimental-specifier-resolution=node dist/index.js",
+		"start": "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";
+import { logger } from "./logger.js";
-import { type DeployJob, deployJobSchema } from "./schema";
+import { type DeployJob, deployJobSchema } from "./schema.js";
-import { deploy } from "./utils";
+import { deploy } from "./utils.js";
 
 const app = new Hono();
 const redisClient = createClient({
@@ -28,7 +28,7 @@ app.use(async (c, next) => {
 
 app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
 	const data = c.req.valid("json");
-	const res = queue.add(data, { groupName: data.serverId });
+	queue.add(data, { groupName: data.serverId });
 	return c.json(
 		{
 			message: "Deployment Added",

apps/api/src/schema.ts

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

apps/api/src/utils.ts

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

apps/dokploy/.nvmrc

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

apps/dokploy/LICENSE.MD

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

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

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

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

@@ -17,6 +17,7 @@ describe("createDomainLabels", () => {
 		domainId: "",
 		path: "/",
 		createdAt: "",
+		previewDeploymentId: "",
 	};
 
 	it("should create basic labels for web entrypoint", async () => {
@@ -39,6 +40,24 @@ describe("createDomainLabels", () => {
 		]);
 	});
 
+	it("should add the path prefix if is different than / empty", async () => {
+		const labels = await createDomainLabels(
+			appName,
+			{
+				...baseDomain,
+				path: "/hello",
+			},
+			"websecure",
+		);
+
+		expect(labels).toEqual([
+			"traefik.http.routers.test-app-1-websecure.rule=Host(`example.com`) && PathPrefix(`/hello`)",
+			"traefik.http.routers.test-app-1-websecure.entrypoints=websecure",
+			"traefik.http.services.test-app-1-websecure.loadbalancer.server.port=8080",
+			"traefik.http.routers.test-app-1-websecure.service=test-app-1-websecure",
+		]);
+	});
+
 	it("should add redirect middleware for https on web entrypoint", async () => {
 		const httpsBaseDomain = { ...baseDomain, https: true };
 		const labels = await createDomainLabels(appName, httpsBaseDomain, "web");

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

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

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

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

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

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

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

@@ -0,0 +1,98 @@
+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__/drop/drop.test.test.ts

@@ -26,12 +26,31 @@ if (typeof window === "undefined") {
 
 const baseApp: ApplicationNested = {
 	applicationId: "",
+	herokuVersion: "",
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
 	serverId: "",
+	registryUrl: "",
 	branch: null,
 	dockerBuildStage: "",
+	isPreviewDeploymentsActive: false,
+	previewBuildArgs: null,
+	previewCertificateType: "none",
+	previewEnv: null,
+	previewHttps: false,
+	previewPath: "/",
+	previewPort: 3000,
+	previewLimit: 0,
+	previewWildcard: "",
+	project: {
+		env: "",
+		organizationId: "",
+		name: "",
+		description: "",
+		createdAt: "",
+		projectId: "",
+	},
 	buildArgs: null,
 	buildPath: "/",
 	gitlabPathNamespace: "",

apps/dokploy/__test__/env/shared.test.ts

@@ -0,0 +1,179 @@
+import { prepareEnvironmentVariables } from "@dokploy/server/index";
+import { describe, expect, it } from "vitest";
+
+const projectEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db
+PORT=3000
+`;
+const serviceEnv = `
+ENVIRONMENT=\${{project.ENVIRONMENT}}
+DATABASE_URL=\${{project.DATABASE_URL}}
+SERVICE_PORT=4000
+`;
+
+describe("prepareEnvironmentVariables", () => {
+	it("resolves project variables correctly", () => {
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+			"SERVICE_PORT=4000",
+		]);
+	});
+
+	it("handles undefined project variables", () => {
+		const incompleteProjectEnv = `
+		NODE_ENV=production
+		`;
+
+		const invalidServiceEnv = `
+		UNDEFINED_VAR=\${{project.UNDEFINED_VAR}}
+		`;
+
+		expect(
+			() =>
+				prepareEnvironmentVariables(invalidServiceEnv, incompleteProjectEnv), // Cambiado el orden
+		).toThrow("Invalid project environment variable: project.UNDEFINED_VAR");
+	});
+	it("allows service-specific variables to override project variables", () => {
+		const serviceSpecificEnv = `
+		ENVIRONMENT=production
+		DATABASE_URL=\${{project.DATABASE_URL}}
+		`;
+
+		const resolved = prepareEnvironmentVariables(
+			serviceSpecificEnv,
+			projectEnv,
+		);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=production", // Overrides project variable
+			"DATABASE_URL=postgres://postgres:postgres@localhost:5432/project_db",
+		]);
+	});
+
+	it("resolves complex references for dynamic endpoints", () => {
+		const projectEnv = `
+BASE_URL=https://api.example.com
+API_VERSION=v1
+PORT=8000
+`;
+		const serviceEnv = `
+API_ENDPOINT=\${{project.BASE_URL}}/\${{project.API_VERSION}}/endpoint
+SERVICE_PORT=9000
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"API_ENDPOINT=https://api.example.com/v1/endpoint",
+			"SERVICE_PORT=9000",
+		]);
+	});
+
+	it("handles missing project variables gracefully", () => {
+		const projectEnv = `
+PORT=8080
+`;
+		const serviceEnv = `
+MISSING_VAR=\${{project.MISSING_KEY}}
+SERVICE_PORT=3000
+`;
+
+		expect(() => prepareEnvironmentVariables(serviceEnv, projectEnv)).toThrow(
+			"Invalid project environment variable: project.MISSING_KEY",
+		);
+	});
+
+	it("overrides project variables with service-specific values", () => {
+		const projectEnv = `
+ENVIRONMENT=staging
+DATABASE_URL=postgres://project:project@localhost:5432/project_db
+`;
+		const serviceEnv = `
+ENVIRONMENT=\${{project.ENVIRONMENT}}
+DATABASE_URL=postgres://service:service@localhost:5432/service_db
+SERVICE_NAME=my-service
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"ENVIRONMENT=staging",
+			"DATABASE_URL=postgres://service:service@localhost:5432/service_db",
+			"SERVICE_NAME=my-service",
+		]);
+	});
+
+	it("handles project variables with normal and unusual characters", () => {
+		const projectEnv = `
+ENVIRONMENT=PRODUCTION
+`;
+
+		// Needs to be in quotes
+		const serviceEnv = `
+NODE_ENV=\${{project.ENVIRONMENT}}
+SPECIAL_VAR="$^@$^@#$^@!#$@#$-\${{project.ENVIRONMENT}}"
+`;
+
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=PRODUCTION",
+			"SPECIAL_VAR=$^@$^@#$^@!#$@#$-PRODUCTION",
+		]);
+	});
+
+	it("handles complex cases with multiple references, special characters, and spaces", () => {
+		const projectEnv = `
+ENVIRONMENT=STAGING
+APP_NAME=MyApp
+`;
+
+		const serviceEnv = `
+NODE_ENV=\${{project.ENVIRONMENT}}
+COMPLEX_VAR="Prefix-$#^!@-\${{project.ENVIRONMENT}}--\${{project.APP_NAME}} Suffix "
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=STAGING",
+			"COMPLEX_VAR=Prefix-$#^!@-STAGING--MyApp Suffix ",
+		]);
+	});
+
+	it("handles references enclosed in single quotes", () => {
+		const projectEnv = `
+	ENVIRONMENT=STAGING
+	APP_NAME=MyApp
+	`;
+
+		const serviceEnv = `
+	NODE_ENV='\${{project.ENVIRONMENT}}'
+	COMPLEX_VAR='Prefix-$#^!@-\${{project.ENVIRONMENT}}--\${{project.APP_NAME}} Suffix'
+	`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV=STAGING",
+			"COMPLEX_VAR=Prefix-$#^!@-STAGING--MyApp Suffix",
+		]);
+	});
+
+	it("handles double and single quotes combined", () => {
+		const projectEnv = `
+ENVIRONMENT=PRODUCTION
+APP_NAME=MyApp
+`;
+		const serviceEnv = `
+NODE_ENV="'\${{project.ENVIRONMENT}}'"
+COMPLEX_VAR="'Prefix \"DoubleQuoted\" and \${{project.APP_NAME}}'"
+`;
+		const resolved = prepareEnvironmentVariables(serviceEnv, projectEnv);
+
+		expect(resolved).toEqual([
+			"NODE_ENV='PRODUCTION'",
+			"COMPLEX_VAR='Prefix \"DoubleQuoted\" and MyApp'",
+		]);
+	});
+});

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

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

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

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

apps/dokploy/__test__/vitest.config.ts

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

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

@@ -1,124 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-
-import { CardTitle } from "@/components/ui/card";
-import {
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSlot,
-} from "@/components/ui/input-otp";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle } from "lucide-react";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const Login2FASchema = z.object({
-	pin: z.string().min(6, {
-		message: "Pin is required",
-	}),
-});
-
-type Login2FA = z.infer<typeof Login2FASchema>;
-
-interface Props {
-	authId: string;
-}
-
-export const Login2FA = ({ authId }: Props) => {
-	const { push } = useRouter();
-
-	const { mutateAsync, isLoading, isError, error } =
-		api.auth.verifyLogin2FA.useMutation();
-
-	const form = useForm<Login2FA>({
-		defaultValues: {
-			pin: "",
-		},
-		resolver: zodResolver(Login2FASchema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			pin: "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
-
-	const onSubmit = async (data: Login2FA) => {
-		await mutateAsync({
-			pin: data.pin,
-			id: authId,
-		})
-			.then(() => {
-				toast.success("Signin successfully", {
-					duration: 2000,
-				});
-
-				push("/dashboard/projects");
-			})
-			.catch(() => {
-				toast.error("Signin failed", {
-					duration: 2000,
-				});
-			});
-	};
-	return (
-		<Form {...form}>
-			<form
-				onSubmit={form.handleSubmit(onSubmit)}
-				className="grid w-full gap-4"
-			>
-				{isError && (
-					<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
-						<AlertTriangle className="text-red-600 dark:text-red-400" />
-						<span className="text-sm text-red-600 dark:text-red-400">
-							{error?.message}
-						</span>
-					</div>
-				)}
-				<CardTitle className="text-xl font-bold">2FA Setup</CardTitle>
-
-				<FormField
-					control={form.control}
-					name="pin"
-					render={({ field }) => (
-						<FormItem className="flex flex-col justify-center max-sm:items-center">
-							<FormLabel>Pin</FormLabel>
-							<FormControl>
-								<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
-								app.
-							</FormDescription>
-							<FormMessage />
-						</FormItem>
-					)}
-				/>
-				<Button isLoading={isLoading} type="submit">
-					Submit 2FA
-				</Button>
-			</form>
-		</Form>
-	);
-};

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

@@ -130,7 +130,7 @@ const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
 			}
 			try {
 				return JSON.parse(str);
-			} catch (e) {
+			} catch (_e) {
 				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
 				return z.NEVER;
 			}
@@ -259,7 +259,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 				refetch();
 			})
 			.catch(() => {
-				toast.error("Error to update the swarm settings");
+				toast.error("Error updating the swarm settings");
 			});
 	};
 	return (

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

@@ -29,7 +29,6 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Server } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -94,7 +93,7 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 				});
 			})
 			.catch(() => {
-				toast.error("Error to update the command");
+				toast.error("Error updating the command");
 			});
 	};
 

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

@@ -17,7 +17,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -71,7 +70,7 @@ export const AddCommand = ({ applicationId }: Props) => {
 				});
 			})
 			.catch(() => {
-				toast.error("Error to update the command");
+				toast.error("Error updating the command");
 			});
 	};
 
@@ -81,7 +80,8 @@ export const AddCommand = ({ applicationId }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Run Command</CardTitle>
 					<CardDescription>
-						Run a custom command in the container
+						Run a custom command in the container after the application
+						initialized
 					</CardDescription>
 				</div>
 			</CardHeader>

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

@@ -1,63 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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/handle-ports.tsx

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

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

@@ -1,4 +1,6 @@
 import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -7,23 +9,24 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Rss } from "lucide-react";
+import { Rss, Trash2 } from "lucide-react";
-import React from "react";
+import { toast } from "sonner";
-import { AddPort } from "./add-port";
+import { HandlePorts } from "./handle-ports";
-import { DeletePort } from "./delete-port";
-import { UpdatePort } from "./update-port";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowPorts = ({ applicationId }: Props) => {
-	const { data } = api.application.one.useQuery(
+	const { data, refetch } = 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">
@@ -35,7 +38,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.ports.length > 0 && (
-					<AddPort applicationId={applicationId}>Add Port</AddPort>
+					<HandlePorts applicationId={applicationId}>Add Port</HandlePorts>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -45,7 +48,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No ports configured
 						</span>
-						<AddPort applicationId={applicationId}>Add Port</AddPort>
+						<HandlePorts applicationId={applicationId}>Add Port</HandlePorts>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
@@ -78,8 +81,36 @@ export const ShowPorts = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-4">
-											<UpdatePort portId={port.portId} />
+											<HandlePorts
-											<DeletePort portId={port.portId} />
+												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>
 										</div>
 									</div>
 								</div>

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

@@ -1,195 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, 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>
-											<Input 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/delete-redirect.tsx

@@ -1,66 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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/handle-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 { PlusIcon } from "lucide-react";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -61,7 +61,7 @@ const redirectPresets = [
 		redirect: {
 			regex: "^https?://(?:www.)?(.+)",
 			permanent: true,
-			replacement: "https://www.$${1}",
+			replacement: "https://www.${1}",
 		},
 	},
 	{
@@ -70,26 +70,39 @@ const redirectPresets = [
 		redirect: {
 			regex: "^https?://www.(.+)",
 			permanent: true,
-			replacement: "https://$${1}",
+			replacement: "https://${1}",
 		},
 	},
 ];
 
 interface Props {
 	applicationId: string;
+	redirectId?: string;
 	children?: React.ReactNode;
 }
 
-export const AddRedirect = ({
+export const HandleRedirect = ({
 	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 } =
+	const { mutateAsync, isLoading, error, isError } = redirectId
-		api.redirects.create.useMutation();
+		? api.redirects.update.useMutation()
+		: api.redirects.create.useMutation();
 
 	const form = useForm<AddRedirect>({
 		defaultValues: {
@@ -102,29 +115,35 @@ export const AddRedirect = ({
 
 	useEffect(() => {
 		form.reset({
-			permanent: false,
+			permanent: data?.permanent || false,
-			regex: "",
+			regex: data?.regex || "",
-			replacement: "",
+			replacement: data?.replacement || "",
 		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
 	const onSubmit = async (data: AddRedirect) => {
 		await mutateAsync({
 			applicationId,
 			...data,
+			redirectId: redirectId || "",
 		})
 			.then(async () => {
-				toast.success("Redirect Created");
+				toast.success(redirectId ? "Redirect Updated" : "Redirect Created");
 				await utils.application.one.invalidate({
 					applicationId,
 				});
+				refetch();
 				await utils.application.readTraefikConfig.invalidate({
 					applicationId,
 				});
 				onDialogToggle(false);
 			})
 			.catch(() => {
-				toast.error("Error to create the redirect");
+				toast.error(
+					redirectId
+						? "Error updating the redirect"
+						: "Error creating the redirect",
+				);
 			});
 	};
 
@@ -148,7 +167,17 @@ export const AddRedirect = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={onDialogToggle}>
 			<DialogTrigger asChild>
-				<Button>{children}</Button>
+				{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>
+				)}
 			</DialogTrigger>
 			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
@@ -243,7 +272,7 @@ export const AddRedirect = ({
 							form="hook-form-add-redirect"
 							type="submit"
 						>
-							Create
+							{redirectId ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</Form>

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

@@ -1,3 +1,5 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,23 +8,27 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Split } from "lucide-react";
+import { Split, Trash2 } from "lucide-react";
-import React from "react";
+import { toast } from "sonner";
-import { AddRedirect } from "./add-redirect";
+import { HandleRedirect } from "./handle-redirect";
-import { DeleteRedirect } from "./delete-redirect";
+
-import { UpdateRedirect } from "./update-redirect";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowRedirects = ({ applicationId }: Props) => {
-	const { data } = api.application.one.useQuery(
+	const { data, refetch } = 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">
@@ -35,7 +41,9 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.redirects.length > 0 && (
-					<AddRedirect applicationId={applicationId}>Add Redirect</AddRedirect>
+					<HandleRedirect applicationId={applicationId}>
+						Add Redirect
+					</HandleRedirect>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -45,9 +53,9 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No redirects configured
 						</span>
-						<AddRedirect applicationId={applicationId}>
+						<HandleRedirect applicationId={applicationId}>
 							Add Redirect
-						</AddRedirect>
+						</HandleRedirect>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2">
@@ -76,8 +84,40 @@ export const ShowRedirects = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-4">
-											<UpdateRedirect redirectId={redirect.redirectId} />
+											<HandleRedirect
-											<DeleteRedirect redirectId={redirect.redirectId} />
+												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>
 										</div>
 									</div>
 								</div>

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

@@ -1,182 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } 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/delete-security.tsx

@@ -1,66 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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/handle-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 { PlusIcon } from "lucide-react";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -35,17 +35,29 @@ type AddSecurity = z.infer<typeof AddSecuritychema>;
 
 interface Props {
 	applicationId: string;
+	securityId?: string;
 	children?: React.ReactNode;
 }
 
-export const AddSecurity = ({
+export const HandleSecurity = ({
 	applicationId,
+	securityId,
 	children = <PlusIcon className="h-4 w-4" />,
 }: Props) => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
-	const { mutateAsync, isLoading, error, isError } =
+	const { data } = api.security.one.useQuery(
-		api.security.create.useMutation();
+		{
+			securityId: securityId ?? "",
+		},
+		{
+			enabled: !!securityId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } = securityId
+		? api.security.update.useMutation()
+		: api.security.create.useMutation();
 
 	const form = useForm<AddSecurity>({
 		defaultValues: {
@@ -56,16 +68,20 @@ export const AddSecurity = ({
 	});
 
 	useEffect(() => {
-		form.reset();
+		form.reset({
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+			username: data?.username || "",
+			password: data?.password || "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
 	const onSubmit = async (data: AddSecurity) => {
 		await mutateAsync({
 			applicationId,
 			...data,
+			securityId: securityId || "",
 		})
 			.then(async () => {
-				toast.success("Security Created");
+				toast.success(securityId ? "Security Updated" : "Security Created");
 				await utils.application.one.invalidate({
 					applicationId,
 				});
@@ -75,20 +91,34 @@ export const AddSecurity = ({
 				setIsOpen(false);
 			})
 			.catch(() => {
-				toast.error("Error to create the security");
+				toast.error(
+					securityId
+						? "Error updating the security"
+						: "Error creating security",
+				);
 			});
 	};
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button>{children}</Button>
+				{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>
+				)}
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>
-						Add security to your application
+						{securityId ? "Update" : "Add"} security to your application
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
@@ -137,7 +167,7 @@ export const AddSecurity = ({
 							form="hook-form-add-security"
 							type="submit"
 						>
-							Create
+							{securityId ? "Update" : "Create"}
 						</Button>
 					</DialogFooter>
 				</Form>

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

@@ -1,3 +1,5 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -6,23 +8,26 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { LockKeyhole } from "lucide-react";
+import { LockKeyhole, Trash2 } from "lucide-react";
-import React from "react";
+import { toast } from "sonner";
-import { AddSecurity } from "./add-security";
+import { HandleSecurity } from "./handle-security";
-import { DeleteSecurity } from "./delete-security";
+
-import { UpdateSecurity } from "./update-security";
 interface Props {
 	applicationId: string;
 }
 
 export const ShowSecurity = ({ applicationId }: Props) => {
-	const { data } = api.application.one.useQuery(
+	const { data, refetch } = 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">
@@ -32,7 +37,9 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 				</div>
 
 				{data && data?.security.length > 0 && (
-					<AddSecurity applicationId={applicationId}>Add Security</AddSecurity>
+					<HandleSecurity applicationId={applicationId}>
+						Add Security
+					</HandleSecurity>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
@@ -42,9 +49,9 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No security configured
 						</span>
-						<AddSecurity applicationId={applicationId}>
+						<HandleSecurity applicationId={applicationId}>
 							Add Security
-						</AddSecurity>
+						</HandleSecurity>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2">
@@ -67,8 +74,39 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-2">
-											<UpdateSecurity securityId={security.securityId} />
+											<HandleSecurity
-											<DeleteSecurity securityId={security.securityId} />
+												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>
 										</div>
 									</div>
 								</div>

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

@@ -1,155 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { 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

@@ -1,231 +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 { 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

@@ -0,0 +1,287 @@
+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 { 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="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="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="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/show-traefik-config.tsx

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

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

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

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

@@ -1,3 +1,4 @@
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -18,7 +19,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -107,7 +107,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to create the Bind mount");
+					toast.error("Error creating the Bind mount");
 				});
 		} else if (data.type === "volume") {
 			await mutateAsync({
@@ -122,7 +122,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to create the Volume mount");
+					toast.error("Error creating the Volume mount");
 				});
 		} else if (data.type === "file") {
 			await mutateAsync({
@@ -138,7 +138,7 @@ export const AddVolumes = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to create the File mount");
+					toast.error("Error creating the File mount");
 				});
 		}
 
@@ -150,7 +150,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
@@ -303,9 +303,12 @@ export const AddVolumes = ({
 													<FormLabel>Content</FormLabel>
 													<FormControl>
 														<FormControl>
-															<Textarea
+															<CodeEditor
-																placeholder="Any content"
+																language="properties"
-																className="h-64"
+																placeholder={`NODE_ENV=production
+PORT=3000
+`}
+																className="h-96 font-mono"
 																{...field}
 															/>
 														</FormControl>

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

@@ -1,61 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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,4 +1,6 @@
 import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -7,40 +9,48 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Package } from "lucide-react";
+import { Package, Trash2 } from "lucide-react";
-import React from "react";
+import { toast } from "sonner";
+import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
-import { DeleteVolume } from "./delete-volume";
 import { UpdateVolume } from "./update-volume";
 interface Props {
-	applicationId: string;
+	id: string;
+	type: ServiceType | "compose";
 }
 
-export const ShowVolumes = ({ applicationId }: Props) => {
+export const ShowVolumes = ({ id, type }: Props) => {
-	const { data, refetch } = api.application.one.useQuery(
+	const queryMap = {
-		{
+		postgres: () =>
-			applicationId,
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		},
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		{ enabled: !!applicationId },
+		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();
 	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 application use the following
+						If you want to persist data in this service use the following config
-						config to setup the volumes
+						to setup the volumes
 					</CardDescription>
 				</div>
 
 				{data && data?.mounts.length > 0 && (
-					<AddVolumes
+					<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
-						serviceId={applicationId}
-						refetch={refetch}
-						serviceType="application"
-					>
 						Add Volume
 					</AddVolumes>
 				)}
@@ -52,17 +62,13 @@ export const ShowVolumes = ({ applicationId }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No volumes/mounts configured
 						</span>
-						<AddVolumes
+						<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
-							serviceId={applicationId}
-							refetch={refetch}
-							serviceType="application"
-						>
 							Add Volume
 						</AddVolumes>
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
-						<AlertBlock type="info">
+						<AlertBlock type="warning">
 							Please remember to click Redeploy after adding, editing, or
 							deleting a mount to apply the changes.
 						</AlertBlock>
@@ -73,7 +79,8 @@ export const ShowVolumes = ({ applicationId }: 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"
 									>
-										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
+										{/* <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="flex flex-col gap-1">
 												<span className="font-medium">Mount Type</span>
 												<span className="text-sm text-muted-foreground">
@@ -90,21 +97,12 @@ export const ShowVolumes = ({ applicationId }: Props) => {
 											)}
 
 											{mount.type === "file" && (
-												<>
+												<div className="flex flex-col gap-1">
-													<div className="flex flex-col gap-1">
+													<span className="font-medium">Content</span>
-														<span className="font-medium">Content</span>
+													<span className="text-sm text-muted-foreground line-clamp-[10] whitespace-break-spaces">
-														<span className="text-sm text-muted-foreground">
+														{mount.content}
-															{mount.content}
+													</span>
-														</span>
+												</div>
-													</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">
@@ -114,21 +112,55 @@ export const ShowVolumes = ({ applicationId }: Props) => {
 													</span>
 												</div>
 											)}
-											<div className="flex flex-col gap-1">
+											{mount.type === "file" ? (
-												<span className="font-medium">Mount Path</span>
+												<div className="flex flex-col gap-1">
-												<span className="text-sm text-muted-foreground">
+													<span className="font-medium">File Path</span>
-													{mount.mountPath}
+													<span className="text-sm text-muted-foreground">
-												</span>
+														{mount.filePath}
-											</div>
+													</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="application"
+												serviceType={type}
 											/>
-											<DeleteVolume mountId={mount.mountId} refetch={refetch} />
+											<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>
 										</div>
 									</div>
 								</div>

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

@@ -1,8 +1,8 @@
 import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
-	DialogClose,
 	DialogContent,
 	DialogDescription,
 	DialogFooter,
@@ -19,10 +19,9 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Pencil } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -78,7 +77,7 @@ export const UpdateVolume = ({
 	serviceType,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
+	const _utils = api.useUtils();
 	const { data } = api.mounts.one.useQuery(
 		{
 			mountId,
@@ -119,7 +118,7 @@ export const UpdateVolume = ({
 			} else if (typeForm === "file") {
 				form.reset({
 					content: data.content || "",
-					mountPath: "/",
+					mountPath: serviceType === "compose" ? "/" : data.mountPath,
 					filePath: data.filePath || "",
 					type: "file",
 				});
@@ -140,7 +139,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to update the Bind mount");
+					toast.error("Error updating the Bind mount");
 				});
 		} else if (data.type === "volume") {
 			await mutateAsync({
@@ -154,7 +153,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to update the Volume mount");
+					toast.error("Error updating the Volume mount");
 				});
 		} else if (data.type === "file") {
 			await mutateAsync({
@@ -169,7 +168,7 @@ export const UpdateVolume = ({
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error to update the File mount");
+					toast.error("Error updating the File mount");
 				});
 		}
 		refetch();
@@ -178,11 +177,16 @@ export const UpdateVolume = ({
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button variant="ghost" isLoading={isLoading}>
+				<Button
-					<Pencil className="size-4  text-muted-foreground" />
+					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>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>
@@ -247,9 +251,12 @@ export const UpdateVolume = ({
 												<FormLabel>Content</FormLabel>
 												<FormControl>
 													<FormControl>
-														<Textarea
+														<CodeEditor
-															placeholder="Any content"
+															language="properties"
-															className="h-64"
+															placeholder={`NODE_ENV=production
+PORT=3000
+`}
+															className="h-96 font-mono"
 															{...field}
 														/>
 													</FormControl>

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -25,6 +26,7 @@ enum BuildType {
 	paketo_buildpacks = "paketo_buildpacks",
 	nixpacks = "nixpacks",
 	static = "static",
+	railpack = "railpack",
 }
 
 const mySchema = z.discriminatedUnion("buildType", [
@@ -41,6 +43,7 @@ const mySchema = z.discriminatedUnion("buildType", [
 	}),
 	z.object({
 		buildType: z.literal("heroku_buildpacks"),
+		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
 		buildType: z.literal("paketo_buildpacks"),
@@ -52,6 +55,9 @@ const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
 		buildType: z.literal("static"),
 	}),
+	z.object({
+		buildType: z.literal("railpack"),
+	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
@@ -90,6 +96,13 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 						dockerBuildStage: data.dockerBuildStage || "",
 					}),
 				});
+			} else if (data.buildType === "heroku_buildpacks") {
+				form.reset({
+					buildType: data.buildType,
+					...(data.buildType && {
+						herokuVersion: data.herokuVersion || "",
+					}),
+				});
 			} else {
 				form.reset({
 					buildType: data.buildType,
@@ -110,13 +123,15 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 				data.buildType === "dockerfile" ? data.dockerContextPath : null,
 			dockerBuildStage:
 				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
+			herokuVersion:
+				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to save the build type");
+				toast.error("Error saving the build type");
 			});
 	};
 
@@ -163,6 +178,15 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 														Dockerfile
 													</FormLabel>
 												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="railpack" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Railpack{" "}
+														<Badge className="ml-1 text-xs px-1">New</Badge>
+													</FormLabel>
+												</FormItem>
 												<FormItem className="flex items-center space-x-3 space-y-0">
 													<FormControl>
 														<RadioGroupItem value="nixpacks" />
@@ -200,6 +224,28 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								);
 							}}
 						/>
+						{buildType === "heroku_buildpacks" && (
+							<FormField
+								control={form.control}
+								name="herokuVersion"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Heroku Version (Optional)</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"Heroku Version (Default: 24)"}
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						)}
 						{buildType === "dockerfile" && (
 							<>
 								<FormField

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

@@ -1,63 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { TrashIcon } from "lucide-react";
-import { useRouter } from "next/router";
-import { toast } from "sonner";
-
-interface Props {
-	applicationId: string;
-}
-
-export const DeleteApplication = ({ applicationId }: Props) => {
-	const { mutateAsync, isLoading } = api.application.delete.useMutation();
-	const { push } = useRouter();
-	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
-						application
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								applicationId,
-							})
-								.then((data) => {
-									push(`/dashboard/project/${data?.projectId}`);
-
-									toast.success("Application delete succesfully");
-								})
-								.catch(() => {
-									toast.error("Error to delete Application");
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

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

@@ -20,6 +20,12 @@ 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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 
 interface Props {
@@ -47,7 +46,7 @@ export const RefreshToken = ({ applicationId }: Props) => {
 									toast.success("Refresh updated");
 								})
 								.catch(() => {
-									toast.error("Error to update the refresh token");
+									toast.error("Error updating the refresh token");
 								});
 						}}
 					>

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

@@ -1,3 +1,5 @@
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -5,18 +7,45 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { TerminalLine } from "../../docker/logs/terminal-line";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
 
 interface Props {
 	logPath: string | null;
 	open: boolean;
 	onClose: () => void;
 	serverId?: string;
+	errorMessage?: string;
 }
-export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
+export const ShowDeployment = ({
+	logPath,
+	open,
+	onClose,
+	serverId,
+	errorMessage,
+}: Props) => {
 	const [data, setData] = useState("");
-	const endOfLogsRef = useRef<HTMLDivElement>(null);
+	const [showExtraLogs, setShowExtraLogs] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const wsRef = useRef<WebSocket | null>(null); // Ref to hold WebSocket instance
+	const [autoScroll, setAutoScroll] = useState(true);
+	const scrollRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	};
+
+	const handleScroll = () => {
+		if (!scrollRef.current) return;
+
+		const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+		const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 10;
+		setAutoScroll(isAtBottom);
+	};
 
 	useEffect(() => {
 		if (!open || !logPath) return;
@@ -48,13 +77,36 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		};
 	}, [logPath, open]);
 
-	const scrollToBottom = () => {
+	useEffect(() => {
-		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
+		const logs = parseLogs(data);
-	};
+		let filteredLogsResult = logs;
+		if (serverId) {
+			let hideSubsequentLogs = false;
+			filteredLogsResult = logs.filter((log) => {
+				if (
+					log.message.includes(
+						"===================================EXTRA LOGS============================================",
+					)
+				) {
+					hideSubsequentLogs = true;
+					return showExtraLogs;
+				}
+				return showExtraLogs ? true : !hideSubsequentLogs;
+			});
+		}
+
+		setFilteredLogs(filteredLogsResult);
+	}, [data, showExtraLogs]);
 
 	useEffect(() => {
 		scrollToBottom();
-	}, [data]);
+
+		if (autoScroll && scrollRef.current) {
+			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+		}
+	}, [filteredLogs, autoScroll]);
+
+	const optionalErrors = parseLogs(errorMessage || "");
 
 	return (
 		<Dialog
@@ -75,18 +127,57 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
-					<DialogDescription>
+					<DialogDescription className="flex items-center gap-2">
-						See all the details of this deployment
+						<span>
+							See all the details of this deployment |{" "}
+							<Badge variant="blank" className="text-xs">
+								{filteredLogs.length} lines
+							</Badge>
+						</span>
+
+						{serverId && (
+							<div className="flex items-center space-x-2">
+								<Checkbox
+									id="show-extra-logs"
+									checked={showExtraLogs}
+									onCheckedChange={(checked) =>
+										setShowExtraLogs(checked as boolean)
+									}
+								/>
+								<label
+									htmlFor="show-extra-logs"
+									className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+								>
+									Show Extra Logs
+								</label>
+							</div>
+						)}
 					</DialogDescription>
 				</DialogHeader>
 
-				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
+				<div
-					<code>
+					ref={scrollRef}
-						<pre className="whitespace-pre-wrap break-words">
+					onScroll={handleScroll}
-							{data || "Loading..."}
+					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
-						</pre>
+				>
-						<div ref={endOfLogsRef} />
+					{" "}
-					</code>
+					{filteredLogs.length > 0 ? (
+						filteredLogs.map((log: LogLine, index: number) => (
+							<TerminalLine key={index} log={log} noTimestamp />
+						))
+					) : (
+						<>
+							{optionalErrors.length > 0 ? (
+								optionalErrors.map((log: LogLine, index: number) => (
+									<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
+								))
+							) : (
+								<div className="flex justify-center items-center h-full text-muted-foreground">
+									<Loader2 className="h-6 w-6 animate-spin" />
+								</div>
+							)}
+						</>
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>

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

@@ -8,7 +8,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
+import { type RouterOutputs, api } from "@/utils/api";
 import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
@@ -18,8 +18,11 @@ import { ShowDeployment } from "./show-deployment";
 interface Props {
 	applicationId: string;
 }
+
 export const ShowDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
 	const { data } = api.application.one.useQuery({ applicationId });
 	const { data: deployments } = api.deployment.all.useQuery(
 		{ applicationId },
@@ -28,6 +31,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 			refetchInterval: 1000,
 		},
 	);
+
 	const [url, setUrl] = React.useState("");
 	useEffect(() => {
 		setUrl(document.location.origin);
@@ -69,15 +73,14 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col gap-4">
-						{deployments?.map((deployment) => (
+						{deployments?.map((deployment, index) => (
 							<div
 								key={deployment.deploymentId}
 								className="flex items-center justify-between rounded-lg border p-4 gap-2"
 							>
 								<div className="flex flex-col">
 									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-										{deployment.status}
+										{index + 1}. {deployment.status}
-
 										<StatusTooltip
 											status={deployment?.status}
 											className="size-2.5"
@@ -99,7 +102,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 
 									<Button
 										onClick={() => {
-											setActiveLog(deployment.logPath);
+											setActiveLog(deployment);
 										}}
 									>
 										View
@@ -111,9 +114,10 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 				)}
 				<ShowDeployment
 					serverId={data?.serverId || ""}
-					open={activeLog !== null}
+					open={Boolean(activeLog && activeLog.logPath !== null)}
 					onClose={() => setActiveLog(null)}
-					logPath={activeLog}
+					logPath={activeLog?.logPath || ""}
+					errorMessage={activeLog?.errorMessage || ""}
 				/>
 			</CardContent>
 		</Card>

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

@@ -104,9 +104,7 @@ export const AddDomain = ({
 
 	const dictionary = {
 		success: domainId ? "Domain Updated" : "Domain Created",
-		error: domainId
+		error: domainId ? "Error updating the domain" : "Error creating the domain",
-			? "Error to update the domain"
-			: "Error to create the domain",
 		submit: domainId ? "Update" : "Create",
 		dialogDescription: domainId
 			? "In this section you can edit a domain"
@@ -264,21 +262,21 @@ export const AddDomain = ({
 										name="certificateType"
 										render={({ field }) => (
 											<FormItem className="col-span-2">
-												<FormLabel>Certificate</FormLabel>
+												<FormLabel>Certificate Provider</FormLabel>
 												<Select
 													onValueChange={field.onChange}
 													defaultValue={field.value || ""}
 												>
 													<FormControl>
 														<SelectTrigger>
-															<SelectValue placeholder="Select a certificate" />
+															<SelectValue placeholder="Select a certificate provider" />
 														</SelectTrigger>
 													</FormControl>
 
 													<SelectContent>
 														<SelectItem value="none">None</SelectItem>
 														<SelectItem value={"letsencrypt"}>
-															Letsencrypt (Default)
+															Let's Encrypt
 														</SelectItem>
 													</SelectContent>
 												</Select>

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

@@ -1,73 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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,3 +1,4 @@
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -6,19 +7,18 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react";
+import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } 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 } = api.domain.byApplicationId.useQuery(
+	const { data, refetch } = api.domain.byApplicationId.useQuery(
 		{
 			applicationId,
 		},
@@ -26,6 +26,10 @@ 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">
@@ -69,35 +73,66 @@ export const ShowDomains = ({ applicationId }: Props) => {
 								return (
 									<div
 										key={item.domainId}
-										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
 										<Link
+											className="md:basis-1/2 flex gap-2  items-center hover:underline transition-all w-full"
 											target="_blank"
 											href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 										>
-											<ExternalLink className="size-5" />
+											<span className="truncate max-w-full text-sm">
+												{item.host}
+											</span>
+											<ExternalLink className="size-4 min-w-4" />
 										</Link>
 
-										<Input disabled value={item.host} />
+										<div className="flex gap-8">
-										<Button variant="outline" disabled>
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
-											{item.path}
+												<span>{item.path}</span>
-										</Button>
+												<span>{item.port}</span>
-										<Button variant="outline" disabled>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
-											{item.port}
+											</div>
-										</Button>
+
-										<Button variant="outline" disabled>
+											<div className="flex gap-2">
-											{item.https ? "HTTPS" : "HTTP"}
+												<AddDomain
-										</Button>
+													applicationId={applicationId}
-										<div className="flex flex-row gap-1">
+													domainId={item.domainId}
-											<AddDomain
+												>
-												applicationId={applicationId}
+													<Button
-												domainId={item.domainId}
+														variant="ghost"
-											>
+														size="icon"
-												<Button variant="ghost">
+														className="group hover:bg-blue-500/10 "
-													<PenBoxIcon className="size-4 text-muted-foreground" />
+													>
-												</Button>
+														<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-											</AddDomain>
+													</Button>
-											<DeleteDomain domainId={item.domainId} />
+												</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(() => {
+																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>
+											</div>
 										</div>
 									</div>
 								);

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

@@ -18,10 +18,11 @@ 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 { type CSSProperties, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import type { ServiceType } from "../advanced/show-resources";
 
 const addEnvironmentSchema = z.object({
 	environment: z.string(),
@@ -30,21 +31,39 @@ const addEnvironmentSchema = z.object({
 type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
 
 interface Props {
-	mariadbId: string;
+	id: string;
+	type: Exclude<ServiceType | "compose", "application">;
 }
 
-export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
+export const ShowEnvironment = ({ 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 }),
+		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 [isEnvVisible, setIsEnvVisible] = useState(true);
-	const { mutateAsync, isLoading } = api.mariadb.saveEnvironment.useMutation();
 
-	const { data, refetch } = api.mariadb.one.useQuery(
+	const mutationMap = {
-		{
+		postgres: () => api.postgres.update.useMutation(),
-			mariadbId,
+		redis: () => api.redis.update.useMutation(),
-		},
+		mysql: () => api.mysql.update.useMutation(),
-		{
+		mariadb: () => api.mariadb.update.useMutation(),
-			enabled: !!mariadbId,
+		mongo: () => api.mongo.update.useMutation(),
-		},
+		compose: () => api.compose.update.useMutation(),
-	);
+	};
+	const { mutateAsync, isLoading } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.update.useMutation();
+
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
 			environment: "",
@@ -62,22 +81,26 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 
 	const onSubmit = async (data: EnvironmentSchema) => {
 		mutateAsync({
+			mongoId: id || "",
+			postgresId: id || "",
+			redisId: id || "",
+			mysqlId: id || "",
+			mariadbId: id || "",
+			composeId: id || "",
 			env: data.environment,
-			mariadbId,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to add environment");
+				toast.error("Error adding environment");
 			});
 	};
 
 	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>
@@ -109,19 +132,24 @@ export const ShowMariadbEnvironment = ({ mariadbId }: Props) => {
 								control={form.control}
 								name="environment"
 								render={({ field }) => (
-									<FormItem className="w-full">
+									<FormItem>
-										<FormControl>
+										<FormControl className="">
 											<CodeEditor
+												style={
+													{
+														WebkitTextSecurity: isEnvVisible ? "disc" : null,
+													} as CSSProperties
+												}
 												language="properties"
 												disabled={isEnvVisible}
+												className="font-mono"
+												wrapperClassName="compose-file-editor"
 												placeholder={`NODE_ENV=production
 PORT=3000
-`}
+														`}
-												className="h-96 font-mono"
 												{...field}
 											/>
 										</FormControl>
-
 										<FormMessage />
 									</FormItem>
 								)}

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import { Secrets } from "@/components/ui/secrets";
 import { api } from "@/utils/api";
@@ -11,6 +11,7 @@ import { z } from "zod";
 const addEnvironmentSchema = z.object({
 	env: z.string(),
 	buildArgs: z.string(),
+	buildSecrets: z.record(z.string(), z.string()),
 });
 
 type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
@@ -36,6 +37,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		defaultValues: {
 			env: data?.env || "",
 			buildArgs: data?.buildArgs || "",
+			buildSecrets: data?.buildSecrets || {},
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
@@ -44,6 +46,7 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 		mutateAsync({
 			env: data.env,
 			buildArgs: data.buildArgs,
+			buildSecrets: data.buildSecrets,
 			applicationId,
 		})
 			.then(async () => {
@@ -51,17 +54,17 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to add environment");
+				toast.error("Error adding environment");
 			});
 	};
 
 	return (
-		<Form {...form}>
+		<Card className="bg-background px-6 pb-6">
-			<form
+			<Form {...form}>
-				onSubmit={form.handleSubmit(onSubmit)}
+				<form
-				className="flex w-full flex-col gap-5 "
+					onSubmit={form.handleSubmit(onSubmit)}
-			>
+					className="flex w-full flex-col gap-4"
-				<Card className="bg-background">
+				>
 					<Secrets
 						name="env"
 						title="Environment Settings"
@@ -69,35 +72,71 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
-						<Secrets
+						<>
-							name="buildArgs"
+							<Secrets
-							title="Build-time Variables"
+								name="buildArgs"
-							description={
+								title="Build-time Variables"
-								<span>
+								description={
-									Available only at build-time. See documentation&nbsp;
+									<span>
-									<a
+										Available only at build-time. See documentation&nbsp;
-										className="text-primary"
+										<a
-										href="https://docs.docker.com/build/guide/build-args/"
+											className="text-primary"
-										target="_blank"
+											href="https://docs.docker.com/build/guide/build-args/"
-										rel="noopener noreferrer"
+											target="_blank"
-									>
+											rel="noopener noreferrer"
-										here
+										>
-									</a>
+											here
-									.
+										</a>
-								</span>
+										.
-							}
+									</span>
-							placeholder="NPM_TOKEN=xyz"
+								}
-						/>
+								placeholder="NPM_TOKEN=xyz"
+							/>
+							<Secrets
+								name="buildSecrets"
+								title="Build Secrets"
+								description={
+									<span>
+										Secrets available only during build-time and not in the
+										final image. See documentation&nbsp;
+										<a
+											className="text-primary"
+											href="https://docs.docker.com/build/building/secrets/"
+											target="_blank"
+											rel="noopener noreferrer"
+										>
+											here
+										</a>
+										.
+									</span>
+								}
+								placeholder="API_TOKEN=xyz"
+								transformValue={(value) => {
+									// Convert the string format to object
+									const lines = value.split("\n").filter((line) => line.trim());
+									return Object.fromEntries(
+										lines.map((line) => {
+											const [key, ...valueParts] = line.split("=");
+											return [key.trim(), valueParts.join("=").trim()];
+										}),
+									);
+								}}
+								formatValue={(value) => {
+									// Convert the object back to string format
+									return Object.entries(value as Record<string, string>)
+										.map(([key, val]) => `${key}=${val}`)
+										.join("\n");
+								}}
+							/>
+						</>
 					)}
-					<CardContent>
+					<div className="flex flex-row justify-end">
-						<div className="flex flex-row justify-end">
+						<Button isLoading={isLoading} className="w-fit" type="submit">
-							<Button isLoading={isLoading} className="w-fit" type="submit">
+							Save
-								Save
+						</Button>
-							</Button>
+					</div>
-						</div>
+				</form>
-					</CardContent>
+			</Form>
-				</Card>
+		</Card>
-			</form>
-		</Form>
 	);
 };

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

@@ -1,69 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { toast } from "sonner";
-
-interface Props {
-	applicationId: string;
-}
-
-export const DeployApplication = ({ applicationId }: Props) => {
-	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();
-								})
-
-								.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

@@ -84,7 +84,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 		data: repositories,
 		isLoading: isLoadingRepositories,
 		error,
-		isError,
 	} = api.bitbucket.getBitbucketRepositories.useQuery(
 		{
 			bitbucketId,
@@ -137,7 +136,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to save the Bitbucket provider");
+				toast.error("Error saving the Bitbucket provider");
 			});
 	};
 
@@ -202,7 +201,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -236,7 +234,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -246,7 +244,12 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.username}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -281,7 +284,6 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

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

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

@@ -56,7 +56,7 @@ export const SaveDragNDrop = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to save the deployment");
+				toast.error("Error saving 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 to save the Git provider");
+				toast.error("Error saving 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 to save the github provider");
+				toast.error("Error saving the github provider");
 			});
 	};
 
@@ -193,7 +193,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -227,7 +226,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -237,7 +236,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.login}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",
@@ -272,7 +276,6 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -144,7 +144,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				await refetch();
 			})
 			.catch(() => {
-				toast.error("Error to save the gitlab provider");
+				toast.error("Error saving the gitlab provider");
 			});
 	};
 
@@ -209,7 +209,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														"w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",
@@ -249,7 +248,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														{repositories?.map((repo) => {
 															return (
 																<CommandItem
-																	value={repo.url}
+																	value={repo.name}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -261,7 +260,12 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	{repo.name}
+																	<span className="flex items-center gap-2">
+																		<span>{repo.name}</span>
+																		<span className="text-muted-foreground text-xs">
+																			{repo.owner.username}
+																		</span>
+																	</span>
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",
@@ -297,7 +301,6 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 											<FormControl>
 												<Button
 													variant="outline"
-													role="combobox"
 													className={cn(
 														" w-full justify-between !bg-input",
 														!field.value && "text-muted-foreground",

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

@@ -11,7 +11,7 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, LockIcon, UploadCloud } from "lucide-react";
+import { GitBranch, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";

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

@@ -1,70 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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,23 +1,34 @@
 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 { Toggle } from "@/components/ui/toggle";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { api } from "@/utils/api";
-import { CheckCircle2, Terminal } from "lucide-react";
+import {
-import React from "react";
+	Ban,
+	CheckCircle2,
+	Hammer,
+	HelpCircle,
+	RefreshCcw,
+	Terminal,
+} from "lucide-react";
+import { useRouter } from "next/router";
 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,
@@ -25,6 +36,17 @@ 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 } = api.application.deploy.useMutation();
+
+	const { mutateAsync: reload, isLoading: isReloading } =
+		api.application.reload.useMutation();
+
+	const { mutateAsync: redeploy } = api.application.redeploy.useMutation();
 
 	return (
 		<>
@@ -33,39 +55,188 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<DeployApplication applicationId={applicationId} />
+					<TooltipProvider delayDuration={0}>
-					<ResetApplication
+						<DialogAction
-						applicationId={applicationId}
+							title="Deploy Application"
-						appName={data?.appName || ""}
+							description="Are you sure you want to deploy this application?"
-					/>
+							type="default"
-
+							onClick={async () => {
-					<Toggle
+								await deploy({
-						aria-label="Toggle italic"
+									applicationId: applicationId,
-						pressed={data?.autoDeploy || false}
-						onPressedChange={async (enabled) => {
-							await update({
-								applicationId,
-								autoDeploy: enabled,
-							})
-								.then(async () => {
-									toast.success("Auto Deploy Updated");
-									await refetch();
 								})
-								.catch(() => {
+									.then(() => {
-									toast.error("Error to update Auto Deploy");
+										toast.success("Application deployed successfully");
-								});
+										refetch();
-						}}
+										router.push(
-						className="flex flex-row gap-2 items-center"
+											`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-					>
+										);
-						Autodeploy
+									})
-						{data?.autoDeploy && <CheckCircle2 className="size-4" />}
+									.catch(() => {
-					</Toggle>
+										toast.error("Error deploying application");
-					<RedbuildApplication applicationId={applicationId} />
+									});
-					{data?.applicationStatus === "idle" ? (
+							}}
-						<StartApplication applicationId={applicationId} />
+						>
-					) : (
+							<Button
-						<StopApplication applicationId={applicationId} />
+								variant="default"
-					)}
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5"
+							>
+								Deploy
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Downloads the source code and performs a complete build
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</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"}
+								className="flex items-center gap-1.5"
+							>
+								Rebuild
+								<Hammer className="size-4" />
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Only rebuilds the application without downloading new
+												code
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
+						</DialogAction>
+
+						{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}
+									className="flex items-center gap-1.5"
+								>
+									Start
+									<CheckCircle2 className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>
+													Start the application (requires a previous successful
+													build)
+												</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						) : (
+							<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}
+									className="flex items-center gap-1.5"
+								>
+									Stop
+									<Ban className="size-4" />
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Stop the currently running application</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
+					</TooltipProvider>
 					<DockerTerminalModal
 						appName={data?.appName || ""}
 						serverId={data?.serverId || ""}
@@ -75,6 +246,27 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
+					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<span className="text-sm font-medium">Autodeploy</span>
+						<Switch
+							aria-label="Toggle italic"
+							checked={data?.autoDeploy || false}
+							onCheckedChange={async (enabled) => {
+								await update({
+									applicationId,
+									autoDeploy: enabled,
+								})
+									.then(async () => {
+										toast.success("Auto Deploy Updated");
+										await refetch();
+									})
+									.catch(() => {
+										toast.error("Error updating Auto Deploy");
+									});
+							}}
+							className="flex flex-row gap-2 items-center"
+						/>
+					</div>
 				</CardContent>
 			</Card>
 			<ShowProviderForm applicationId={applicationId} />

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,
@@ -15,6 +16,7 @@ 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";
@@ -29,28 +31,67 @@ 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 (data && data?.length > 0) {
+		if (option === "native") {
-			setContainerId(data[0]?.containerId);
+			if (containers && containers?.length > 0) {
+				setContainerId(containers[0]?.containerId);
+			}
+		} else {
+			if (services && services?.length > 0) {
+				setContainerId(services[0]?.containerId);
+			}
 		}
-	}, [data]);
+	}, [option, services, containers]);
+
+	const isLoading = option === "native" ? containersLoading : servicesLoading;
+	const containersLenght =
+		option === "native" ? containers?.length : services?.length;
 
 	return (
 		<Card className="bg-background">
@@ -62,7 +103,21 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 			</CardHeader>
 
 			<CardContent className="flex flex-col gap-4">
-				<Label>Select a container to view logs</Label>
+				<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 ? (
@@ -76,22 +131,45 @@ export const ShowDockerLogs = ({ appName, serverId }: Props) => {
 					</SelectTrigger>
 					<SelectContent>
 						<SelectGroup>
-							{data?.map((container) => (
+							{option === "native" ? (
-								<SelectItem
+								<div>
-									key={container.containerId}
+									{containers?.map((container) => (
-									value={container.containerId}
+										<SelectItem
-								>
+											key={container.containerId}
-									{container.name} ({container.containerId}) {container.state}
+											value={container.containerId}
-								</SelectItem>
+										>
-							))}
+											{container.name} ({container.containerId}){" "}
-							<SelectLabel>Containers ({data?.length})</SelectLabel>
+											<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 || ""}
-					id="terminal"
 					containerId={containerId || "select-a-container"}
+					runType={option}
 				/>
 			</CardContent>
 		</Card>

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

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

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

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

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

@@ -0,0 +1,238 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import {
+	ExternalLink,
+	FileText,
+	GitPullRequest,
+	Layers,
+	PenSquare,
+	RocketIcon,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
+import { AddPreviewDomain } from "./add-preview-domain";
+import { ShowPreviewBuilds } from "./show-preview-builds";
+import { ShowPreviewSettings } from "./show-preview-settings";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowPreviewDeployments = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync: deletePreviewDeployment, isLoading } =
+		api.previewDeployment.delete.useMutation();
+
+	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+		api.previewDeployment.all.useQuery(
+			{ applicationId },
+			{
+				enabled: !!applicationId,
+			},
+		);
+
+	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
+		deletePreviewDeployment({
+			previewDeploymentId: previewDeploymentId,
+		})
+			.then(() => {
+				refetchPreviewDeployments();
+				toast.success("Preview deployment deleted");
+			})
+			.catch((error) => {
+				toast.error(error.message);
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Preview Deployments</CardTitle>
+					<CardDescription>See all the preview deployments</CardDescription>
+				</div>
+				{data?.isPreviewDeploymentsActive && (
+					<ShowPreviewSettings applicationId={applicationId} />
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.isPreviewDeploymentsActive ? (
+					<>
+						<div className="flex flex-col gap-2 text-sm">
+							<span>
+								Preview deployments are a way to test your application before it
+								is deployed to production. It will create a new deployment for
+								each pull request you create.
+							</span>
+						</div>
+						{!previewDeployments?.length ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+								<RocketIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									No preview deployments found
+								</span>
+							</div>
+						) : (
+							<div className="flex flex-col gap-4">
+								{previewDeployments?.map((deployment) => {
+									const deploymentUrl = `${deployment.domain?.https ? "https" : "http"}://${deployment.domain?.host}${deployment.domain?.path || "/"}`;
+									const status = deployment.previewStatus;
+									return (
+										<div
+											key={deployment.previewDeploymentId}
+											className="group relative overflow-hidden border rounded-lg transition-colors"
+										>
+											<div
+												className={`absolute left-0 top-0 w-1 h-full ${
+													status === "done"
+														? "bg-green-500"
+														: status === "running"
+															? "bg-yellow-500"
+															: "bg-red-500"
+												}`}
+											/>
+
+											<div className="p-4">
+												<div className="flex items-start justify-between mb-3">
+													<div className="flex items-start gap-3">
+														<GitPullRequest className="size-5 text-muted-foreground mt-1 flex-shrink-0" />
+														<div>
+															<div className="font-medium text-sm">
+																{deployment.pullRequestTitle}
+															</div>
+															<div className="text-sm text-muted-foreground mt-1">
+																{deployment.branch}
+															</div>
+														</div>
+													</div>
+													<Badge variant="outline" className="gap-2">
+														<StatusTooltip
+															status={deployment.previewStatus}
+															className="size-2"
+														/>
+														<DateTooltip date={deployment.createdAt} />
+													</Badge>
+												</div>
+
+												<div className="pl-8 space-y-3">
+													<div className="relative flex-grow">
+														<Input
+															value={deploymentUrl}
+															readOnly
+															className="pr-8 text-sm text-blue-500 hover:text-blue-600 cursor-pointer"
+															onClick={() =>
+																window.open(deploymentUrl, "_blank")
+															}
+														/>
+														<ExternalLink className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-400" />
+													</div>
+
+													<div className="flex gap-2 opacity-80 group-hover:opacity-100 transition-opacity">
+														<Button
+															variant="outline"
+															size="sm"
+															className="gap-2"
+															onClick={() =>
+																window.open(deployment.pullRequestURL, "_blank")
+															}
+														>
+															<GithubIcon className="size-4" />
+															Pull Request
+														</Button>
+														<ShowModalLogs
+															appName={deployment.appName}
+															serverId={data?.serverId || ""}
+														>
+															<Button
+																variant="outline"
+																size="sm"
+																className="gap-2"
+															>
+																<FileText className="size-4" />
+																Logs
+															</Button>
+														</ShowModalLogs>
+
+														<ShowPreviewBuilds
+															deployments={deployment.deployments || []}
+															serverId={data?.serverId || ""}
+															trigger={
+																<Button
+																	variant="outline"
+																	size="sm"
+																	className="gap-2"
+																>
+																	<Layers className="size-4" />
+																	Builds
+																</Button>
+															}
+														/>
+
+														<AddPreviewDomain
+															previewDeploymentId={`${deployment.previewDeploymentId}`}
+															domainId={deployment.domain?.domainId}
+														>
+															<Button
+																variant="ghost"
+																size="sm"
+																className="gap-2"
+															>
+																<PenSquare className="size-4" />
+															</Button>
+														</AddPreviewDomain>
+														<DialogAction
+															title="Delete Preview"
+															description="Are you sure you want to delete this preview?"
+															onClick={() =>
+																handleDeletePreviewDeployment(
+																	deployment.previewDeploymentId,
+																)
+															}
+														>
+															<Button
+																variant="ghost"
+																size="sm"
+																isLoading={isLoading}
+																className="text-red-600 hover:text-red-700 hover:bg-red-50"
+															>
+																<Trash2 className="size-4" />
+															</Button>
+														</DialogAction>
+													</div>
+												</div>
+											</div>
+										</div>
+									);
+								})}
+							</div>
+						)}
+					</>
+				) : (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<RocketIcon className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							Preview deployments are disabled for this application, please
+							enable it
+						</span>
+						<ShowPreviewSettings applicationId={applicationId} />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -1,76 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { 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

@@ -1,65 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { CheckCircle2 } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	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

@@ -1,65 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { api } from "@/utils/api";
-import { Ban } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	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>
-	);
-};