Merge branch 'canary' into 1365-create-preview-deployment-using-api

.github/workflows/dokploy.yml

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

.github/workflows/format.yml

@@ -0,0 +1,22 @@
+name: autofix.ci
+
+on:
+  push:
+    branches: [canary]
+  pull_request:
+    branches: [canary]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup biomeJs
+        uses: biomejs/setup-biome@v2  
+
+      - name: Run Biome formatter
+        run:  biome format . --write
+
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef

.github/workflows/pull-request.yml

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

.nvmrc

@@ -1 +1 @@
-20.9.0
+20.16.0

CONTRIBUTING.md

@@ -52,7 +52,7 @@ 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
+We use Node v20.16.0 and recommend this specific version. If you have nvm installed, you can run `nvm install 20.16.0 && nvm use` in the root directory.
 
 ```bash
 git clone https://github.com/dokploy/dokploy.git
@@ -61,9 +61,9 @@ pnpm install
 cp apps/dokploy/.env.example apps/dokploy/.env
 ```
 
-## Development
+## Requirements
 
-Is required to have **Docker** installed on your machine.
+- [Docker](/GUIDES.md#docker)
 
 ### Setup
 
@@ -87,6 +87,8 @@ pnpm run dokploy:dev
 
 Go to http://localhost:3000 to see the development server
 
+Note: this project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
+
 ## Build
 
 ```bash
@@ -145,11 +147,9 @@ 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
+curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.35.0-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.
@@ -165,86 +165,7 @@ Thank you for your contribution!
 
 ## Templates
 
-To add a new template, go to `templates` folder and create a new folder with the name of the template.
+To add a new template, go to `https://github.com/Dokploy/templates` repository and read the README.md file.
-
-Let's take the example of `plausible` template.
-
-1. create a folder in `templates/plausible`
-2. create a `docker-compose.yml` file inside the folder with the content of compose.
-3. create a `index.ts` file inside the folder with the following code as base:
-4. When creating a pull request, please provide a video of the template working in action.
-
-```typescript
-// EXAMPLE
-import {
-  generateBase64,
-  generateHash,
-  generateRandomDomain,
-  type Template,
-  type Schema,
-  type DomainSchema,
-} from "../utils";
-
-export function generate(schema: Schema): Template {
-  // do your stuff here, like create a new domain, generate random passwords, mounts.
-  const mainServiceHash = generateHash(schema.projectName);
-  const mainDomain = generateRandomDomain(schema);
-  const secretBase = generateBase64(64);
-  const toptKeyBase = generateBase64(32);
-
-  const domains: DomainSchema[] = [
-    {
-      host: mainDomain,
-      port: 8000,
-      serviceName: "plausible",
-    },
-  ];
-
-  const envs = [
-    `BASE_URL=http://${mainDomain}`,
-    `SECRET_KEY_BASE=${secretBase}`,
-    `TOTP_VAULT_KEY=${toptKeyBase}`,
-    `HASH=${mainServiceHash}`,
-  ];
-
-  const mounts: Template["mounts"] = [
-    {
-      filePath: "./clickhouse/clickhouse-config.xml",
-      content: "some content......",
-    },
-  ];
-
-  return {
-    envs,
-    mounts,
-    domains,
-  };
-}
-```
-
-4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
-
-**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
-
-```typescript
-{
-	id: "plausible",
-	name: "Plausible",
-	version: "v2.1.0",
-	description:
-		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
-	logo: "plausible.svg", // we defined the name and the extension of the logo
-	links: {
-		github: "https://github.com/plausible/plausible",
-		website: "https://plausible.io/",
-		docs: "https://plausible.io/docs",
-	},
-	tags: ["analytics"],
-	load: () => import("./plausible/index").then((m) => m.generate),
-},
-```
-
-5. Add the logo or image of the template to `public/templates/plausible.svg`
 
 ### Recommendations
 

Dockerfile

@@ -1,7 +1,9 @@
-FROM node:20.9-slim AS base
+# syntax=docker/dockerfile:1
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app
@@ -29,7 +31,7 @@ WORKDIR /app
 # Set production
 ENV NODE_ENV=production
 
-RUN apt-get update && apt-get install -y curl unzip apache2-utils iproute2 && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y curl unzip zip apache2-utils iproute2 rsync git-lfs && git lfs install && rm -rf /var/lib/apt/lists/*
 
 # Copy only the necessary files
 COPY --from=build /prod/dokploy/.next ./.next
@@ -49,18 +51,18 @@ 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
+ARG NIXPACKS_VERSION=1.39.0
 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
+ARG RAILPACK_VERSION=0.0.64
 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
 
 EXPOSE 3000
-CMD [ "pnpm", "start" ]
+CMD [ "pnpm", "start" ]

Dockerfile.cloud

@@ -1,7 +1,9 @@
-FROM node:20.9-slim AS base
+# syntax=docker/dockerfile:1
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

Dockerfile.monitoring

@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1
 # Build stage
 FROM golang:1.21-alpine3.19 AS builder
 

Dockerfile.schedule

@@ -1,7 +1,9 @@
-FROM node:20.9-slim AS base
+# syntax=docker/dockerfile:1
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

Dockerfile.server

@@ -1,7 +1,9 @@
-FROM node:20.9-slim AS base
+# syntax=docker/dockerfile:1
+FROM node:20.16.0-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
+RUN corepack prepare pnpm@9.12.0 --activate
 
 FROM base AS build
 COPY . /usr/src/app

GUIDES.md

@@ -0,0 +1,50 @@
+# Docker
+
+Here's how to install docker on different operating systems:
+
+## macOS
+
+1. Visit [Docker Desktop for Mac](https://www.docker.com/products/docker-desktop)
+2. Download the Docker Desktop installer
+3. Double-click the downloaded `.dmg` file
+4. Drag Docker to your Applications folder
+5. Open Docker Desktop from Applications
+6. Follow the onboarding tutorial if desired
+
+## Linux
+
+### Ubuntu
+
+```bash
+# Uninstall old versions
+for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done
+
+# Update package index
+sudo apt-get update
+
+# Install prerequisites
+sudo apt-get install ca-certificates curl
+sudo install -m 0755 -d /etc/apt/keyrings
+
+# Add Docker's official GPG key
+sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
+sudo chmod a+r /etc/apt/keyrings/docker.asc
+
+# Add the repository to Apt sources
+echo \
+  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
+  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
+  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
+
+# Install Docker Engine
+sudo apt-get update
+sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
+```
+
+## Windows
+
+1. Enable WSL2 if not already enabled
+2. Visit [Docker Desktop for Windows](https://www.docker.com/products/docker-desktop)
+3. Download the installer
+4. Run the installer and follow the prompts
+5. Start Docker Desktop from the Start menu

LICENSE.MD

@@ -2,7 +2,7 @@
 
 ## Core License (Apache License 2.0)
 
-Copyright 2024 Mauricio Siu.
+Copyright 2025 Mauricio Siu.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,8 +19,8 @@ See the License for the specific language governing permissions and limitations
 
 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, Preview Deployments 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, Schedules, Preview Deployments and Multi Server, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support, Docker Compose file support, Preview Deployments and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
+- **Restriction on Resale**: The multi-node support, Docker Compose file support, Schedules, Preview Deployments and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support, Preview Deployments and Multi Server features must be distributed freely and cannot be sold or offered as a service.
+- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support, Schedules, 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

@@ -1,20 +1,16 @@
 <div align="center">
-   <div>
+  <a href="https://dokploy.com">
-    <a href="https://dokploy.com" target="_blank" rel="noopener">
+    <img src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." align="center" width="100%"  />
-        <img style="object-fit: cover;" align="center" width="100%"src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." />
+  </a>
-    </a>
-</div>
-
-</br>
-<div align="center">
-  <div>Join us on Discord for help, feedback, and discussions!</div>
   </br>
+  </br>
+  <p>Join us on Discord for help, feedback, and discussions!</p>
   <a href="https://discord.gg/2tBnJ3jDJc">
     <img src="https://discordapp.com/api/guilds/1234073262418563112/widget.png?style=banner2" alt="Discord Shield"/>
   </a>
 </div>
-</div>
 <br />
+
 Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies the deployment and management of applications and databases.
 
 ### Features
@@ -61,57 +57,48 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 ### Hero Sponsors 🎖
 
-<div style="display: flex; align-items: center; gap: 20px;">
+<div>
-  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy" target="_blank" style="display: inline-block; margin-right: 10px;">
+  <a href="https://www.hostinger.com/vps-hosting?ref=dokploy"><img src=".github/sponsors/hostinger.jpg" alt="Hostinger" width="300"/></a>
-    <img src=".github/sponsors/hostinger.jpg" alt="Hostinger" height="50"/>
+  <a href="https://www.lxaer.com/?ref=dokploy"><img src=".github/sponsors/lxaer.png" alt="LX Aer" width="100"/></a>
-  </a>
-  <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 🥇 -->
+
+<!-- Add Premium Supporters here -->
+
 ### Premium Supporters 🥇
 
-<div style="display: flex; gap: 30px; flex-wrap: wrap;">
+<div>
-<a href="https://supafort.com/?ref=dokploy" target="_blank"><img src="https://supafort.com/build/q-4Ht4rBZR.webp" alt="Supafort.com" width="190"/></a>
+  <a href="https://supafort.com/?ref=dokploy"><img src="https://supafort.com/build/q-4Ht4rBZR.webp" alt="Supafort.com" width="300"/></a>
+  <a href="https://agentdock.ai/?ref=dokploy"><img src=".github/sponsors/agentdock.png" alt="agentdock.ai" width="100"/></a>
 </div>
 
 <!-- Elite Contributors 🥈 -->
 
 <!-- Add Elite Contributors here -->
 
-### Supporting Members 🥉
+### Elite Contributors 🥈
 
-<div style="display: flex; gap: 30px; flex-wrap: wrap;">
+<div>
-<a href="https://lightspeed.run/?ref=dokploy"><img src="https://github.com/lightspeedrun.png" width="60px" alt="Lightspeed.run"/></a>
+  <a href="https://americancloud.com/?ref=dokploy"><img src=".github/sponsors/american-cloud.png" alt="AmericanCloud" width="300"/></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://tolgee.io/?utm_source=github_dokploy&utm_medium=banner&utm_campaign=dokploy"><img src="https://dokploy.com/tolgee-logo.png" alt="Tolgee" width="100"/></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>
 
+### Supporting Members 🥉
+
+<div>
+
+  <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://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;">
-<a href="https://steamsets.com/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/111978405?s=200&v=4" width="60px" alt="Steamsets.com"/></a>
-<a href="https://rivo.gg/?ref=dokploy"><img src="https://avatars.githubusercontent.com/u/126797452?s=200&v=4" width="60px" alt="Rivo.gg"/></a>
-<a href="https://photoquest.wedding/?ref=dokploy"><img src="https://photoquest.wedding/favicon/android-chrome-512x512.png" width="60px" alt="Rivo.gg"/></a>
-
-</div>
 
 #### Organizations:
 
-[![Sponsors on Open Collective](https://opencollective.com/dokploy/organizations.svg?width=890)](https://opencollective.com/dokploy)
+[Sponsors on Open Collective](https://opencollective.com/dokploy)
 
 #### Individuals:
 
@@ -121,27 +108,14 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 <a href="https://github.com/dokploy/dokploy/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=dokploy/dokploy" />
-  </a>
+</a>
 
 ## Video Tutorial
 
 <a href="https://youtu.be/mznYKPvhcfw">
-  <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400" style="border-radius:20px;"/>
+  <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400"/>
 </a>
 
-<!-- ## Supported OS
-
-- Ubuntu 24.04 LTS
-- Ubuntu 23.10
-- Ubuntu 22.04 LTS
-- Ubuntu 20.04 LTS
-- Ubuntu 18.04 LTS
-- Debian 12
-- Debian 11
-- Fedora 40
-- Centos 9
-- Centos 8 -->
-
 ## Contributing
 
 Check out the [Contributing Guide](CONTRIBUTING.md) for more information.

SECURITY.md

@@ -0,0 +1,28 @@
+# Dokploy Security Policy
+
+At Dokploy, security is a top priority. We appreciate the help of security researchers and the community in identifying and reporting vulnerabilities.
+
+## How to Report a Vulnerability
+
+If you have discovered a security vulnerability in Dokploy, we ask that you report it responsibly by following these guidelines:
+
+1.  **Contact us:** Send an email to [contact@dokploy.com](mailto:contact@dokploy.com).
+2.  **Provide clear details:** Include as much information as possible to help us understand and reproduce the vulnerability. This should include:
+    *   A clear description of the vulnerability.
+    *   Steps to reproduce the vulnerability.
+    *   Any sample code, screenshots, or videos that might be helpful.
+    *   The potential impact of the vulnerability.
+3.  **Do not make the vulnerability public:** Please refrain from publicly disclosing the vulnerability until we have had the opportunity to investigate and address it. This is crucial for protecting our users.
+4.  **Allow us time:** We will endeavor to acknowledge receipt of your report as soon as possible and keep you informed of our progress. The time to resolve the vulnerability may vary depending on its complexity and severity.
+
+## What We Expect From You
+
+*   Do not access user data or systems beyond what is necessary to demonstrate the vulnerability.
+*   Do not perform denial-of-service (DoS) attacks, spamming, or social engineering.
+*   Do not modify or destroy data that does not belong to you.
+
+## Our Commitment
+
+We are committed to working with you quickly and responsibly to address any legitimate security vulnerability.
+
+Thank you for helping us keep Dokploy secure for everyone.

apps/api/package.json

@@ -9,25 +9,25 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
+		"@dokploy/server": "workspace:*",
+		"@hono/node-server": "^1.14.3",
+		"@hono/zod-validator": "0.3.0",
+		"@nerimity/mimiqueue": "1.2.3",
+		"dotenv": "^16.4.5",
+		"hono": "^4.7.10",
 		"pino": "9.4.0",
 		"pino-pretty": "11.2.2",
-		"@hono/zod-validator": "0.3.0",
-		"zod": "^3.23.4",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"@dokploy/server": "workspace:*",
-		"@hono/node-server": "^1.12.1",
-		"hono": "^4.5.8",
-		"dotenv": "^16.3.1",
 		"redis": "4.7.0",
-		"@nerimity/mimiqueue": "1.2.3"
+		"zod": "^3.25.32"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.2",
+		"@types/node": "^20.17.51",
 		"@types/react": "^18.2.37",
 		"@types/react-dom": "^18.2.15",
-		"@types/node": "^20.11.17",
+		"tsx": "^4.16.2",
-		"tsx": "^4.7.1"
+		"typescript": "^5.8.3"
 	},
 	"packageManager": "pnpm@9.5.0"
 }

apps/dokploy/.nvmrc

@@ -1 +1 @@
-20.9.0
+20.16.0

apps/dokploy/CONTRIBUTING.md

@@ -1,242 +0,0 @@
-
-
-# Contributing
-
-Hey, thanks for your interest in contributing to Dokploy! We appreciate your help and taking your time to contribute.
-
-
-Before you start, please first discuss the feature/bug you want to add with the owners and comunity via github issues.
-
-We have a few guidelines to follow when contributing to this project:
-
-- [Commit Convention](#commit-convention)
-- [Setup](#setup)
-- [Development](#development)
-- [Build](#build)
-- [Pull Request](#pull-request)
-
-## Commit Convention
-
-Before you craete a Pull Request, please make sure your commit message follows the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
-
-### Commit Message Format
-```
-<type>[optional scope]: <description>
-
-[optional body]
-
-[optional footer(s)]
-```
-
-#### Type
-Must be one of the following:
-
-* **feat**: A new feature
-* **fix**: A bug fix
-* **docs**: Documentation only changes
-* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
-* **refactor**: A code change that neither fixes a bug nor adds a feature
-* **perf**: A code change that improves performance
-* **test**: Adding missing tests or correcting existing tests
-* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-* **ci**: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
-* **chore**: Other changes that don't modify `src` or `test` files
-* **revert**: Reverts a previous commit
-
-Example:
-```
-feat: add new feature
-```
-
-
-
-
-## Setup
-
-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.
-
-```bash
-git clone https://github.com/dokploy/dokploy.git
-cd dokploy
-pnpm install
-cp .env.example .env
-```
-
-## Development
-
-Is required to have **Docker** installed on your machine.
-
-
-### Setup
-
-Run the command that will spin up all the required services and files.
-
-```bash
-pnpm run setup
-```
-
-Now run the development server.
-
-```bash
-pnpm run dev
-```
-
-
-Go to http://localhost:3000 to see the development server
-
-## Build
-
-```bash
-pnpm run build
-```
-
-## Docker
-
-To build the docker image
-```bash
-pnpm run docker:build
-```
-
-To push the docker image
-```bash
-pnpm run docker:push
-```
-
-## Password Reset
-
-In the case you lost your password, you can reset it using the following command
-
-```bash
-pnpm run reset-password
-```
-
-If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
-
-```bash
-bunx lt --port 3000
-```
-
-If you run into permission issues of docker run the following command
-
-```bash
-sudo chown -R USERNAME dokploy or sudo chown -R $(whoami) ~/.docker
-```
-
-## Application deploy
-
-In case you want to deploy the application on your machine and you selected nixpacks or buildpacks, you need to install first.
-
-```bash
-# Install Nixpacks
-curl -sSL https://nixpacks.com/install.sh -o install.sh \
-    && chmod +x install.sh \
-    && ./install.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.
-- Create a new branch for each feature or bug fix.
-- Make sure to add tests for your changes.
-- Make sure to update the documentation for any changes Go to the [docs.dokploy.com](https://docs.dokploy.com) website to see the changes.
-- When creating a pull request, please provide a clear and concise description of the changes made.
-- If you include a video or screenshot, would be awesome so we can see the changes in action.
-- If your pull request fixes an open issue, please reference the issue in the pull request description.
-- Once your pull request is merged, you will be automatically added as a contributor to the project.
-
-Thank you for your contribution!
-
-
-
-
-
-## Templates
-
-To add a new template, go to `templates` folder and create a new folder with the name of the template.
-
-Let's take the example of `plausible` template.
-
-1. create a folder in `templates/plausible`
-2. create a `docker-compose.yml` file inside the folder with the content of compose.
-3. create a `index.ts` file inside the folder with the following code as base:
-4. When creating a pull request, please provide a video of the template working in action.
-
-```typescript
-// EXAMPLE
-import {
-	generateHash,
-	generateRandomDomain,
-	type Template,
-	type Schema,
-} from "../utils";
-
-
-export function generate(schema: Schema): Template {
-
-	// do your stuff here, like create a new domain, generate random passwords, mounts.
-	const mainServiceHash = generateHash(schema.projectName);
-	const randomDomain = generateRandomDomain(schema);
-	const secretBase = generateBase64(64);
-	const toptKeyBase = generateBase64(32);
-
-	const envs = [
-// If you want to show a domain in the UI, please add the prefix _HOST at the end of the variable name.
-		`PLAUSIBLE_HOST=${randomDomain}`,
-		"PLAUSIBLE_PORT=8000",
-		`BASE_URL=http://${randomDomain}`,
-		`SECRET_KEY_BASE=${secretBase}`,
-		`TOTP_VAULT_KEY=${toptKeyBase}`,
-		`HASH=${mainServiceHash}`,
-	];
-
-    const mounts: Template["mounts"] = [
-		{
-			mountPath: "./clickhouse/clickhouse-config.xml",
-			content: `some content......`,
-		},
-	];
-
-	return {
-		envs,
-        mounts,
-	};
-}
-```
-
-4. Now you need to add the information about the template to the `templates/templates.ts` is a object with the following properties:
-
-**Make sure the id of the template is the same as the folder name and don't have any spaces, only slugified names and lowercase.**
-
-```typescript
-{
-	id: "plausible",
-	name: "Plausible",
-	version: "v2.1.0",
-	description:
-		"Plausible is a open source, self-hosted web analytics platform that lets you track website traffic and user behavior.",
-	logo: "plausible.svg", // we defined the name and the extension of the logo
-	links: {
-		github: "https://github.com/plausible/plausible",
-		website: "https://plausible.io/",
-		docs: "https://plausible.io/docs",
-	},
-	tags: ["analytics"],
-	load: () => import("./plausible/index").then((m) => m.generate),
-},
-```
-
-5. Add the logo or image of the template to `public/templates/plausible.svg`
-
-
-### Recomendations
-- 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.
-- Test first on a vps or a server to make sure the template works.
-

apps/dokploy/Dockerfile

@@ -1,26 +0,0 @@
-FROM node:18-slim AS base
-ENV PNPM_HOME="/pnpm"
-ENV PATH="$PNPM_HOME:$PATH"
-RUN corepack enable
-
-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/*
-
-# Install dependencies
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
-
-# Build only the dokploy app
-RUN pnpm run dokploy:build 
-
-# Deploy only the dokploy app
-RUN pnpm deploy --filter=dokploy --prod /prod/dokploy
-
-FROM base AS dokploy
-COPY --from=build /prod/dokploy /prod/dokploy
-WORKDIR /prod/dokploy
-EXPOSE 3000
-CMD [ "pnpm", "start" ]

apps/dokploy/LICENSE.MD

@@ -1,26 +0,0 @@
-# License
-
-## Core License (Apache License 2.0)
-
-Copyright 2024 Mauricio Siu.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and limitations under the License.
-
-## Additional Terms for Specific Features
-
-The following additional terms apply to the multi-node support, Docker Compose file, Preview Deployments and Multi Server features of Dokploy. In the event of a conflict, these provisions shall take precedence over those in the Apache License:
-
-- **Self-Hosted Version Free**: All features of Dokploy, including multi-node support, Docker Compose file support, Preview Deployments and Multi Server, will always be free to use in the self-hosted version.
-- **Restriction on Resale**: The multi-node support, Docker Compose file support, Preview Deployments and Multi Server features cannot be sold or offered as a service by any party other than the copyright holder without prior written consent.
-- **Modification Distribution**: Any modifications to the multi-node support, Docker Compose file support, Preview Deployments and Multi Server features must be distributed freely and cannot be sold or offered as a service.
-
-For further inquiries or permissions, please contact us directly.

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

@@ -9,6 +9,7 @@ describe("createDomainLabels", () => {
 		port: 8080,
 		https: false,
 		uniqueConfigKey: 1,
+		customCertResolver: null,
 		certificateType: "none",
 		applicationId: "",
 		composeId: "",
@@ -18,6 +19,8 @@ describe("createDomainLabels", () => {
 		path: "/",
 		createdAt: "",
 		previewDeploymentId: "",
+		internalPath: "/",
+		stripPath: false,
 	};
 
 	it("should create basic labels for web entrypoint", async () => {

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

@@ -1006,7 +1006,7 @@ services:
 
 volumes:
   db-config-testhash:
-`) as ComposeSpecification;
+`);
 
 test("Expect to change the suffix in all the possible places (4 Try)", () => {
 	const composeData = load(composeFileComplex) as ComposeSpecification;
@@ -1115,3 +1115,60 @@ test("Expect to change the suffix in all the possible places (5 Try)", () => {
 
 	expect(updatedComposeData).toEqual(expectedDockerComposeExample1);
 });
+
+const composeFileBackrest = `
+services:
+  backrest:
+    image: garethgeorge/backrest:v1.7.3
+    restart: unless-stopped
+    ports:
+      - 9898
+    environment:
+      - BACKREST_PORT=9898
+      - BACKREST_DATA=/data
+      - BACKREST_CONFIG=/config/config.json
+      - XDG_CACHE_HOME=/cache
+      - TZ=\${TZ}
+    volumes:
+      - backrest/data:/data
+      - backrest/config:/config
+      - backrest/cache:/cache
+      - /:/userdata:ro
+
+volumes:
+  backrest:
+  backrest-cache:
+`;
+
+const expectedDockerComposeBackrest = load(`
+services:
+  backrest:
+    image: garethgeorge/backrest:v1.7.3
+    restart: unless-stopped
+    ports:
+      - 9898
+    environment:
+      - BACKREST_PORT=9898
+      - BACKREST_DATA=/data
+      - BACKREST_CONFIG=/config/config.json
+      - XDG_CACHE_HOME=/cache
+      - TZ=\${TZ}
+    volumes:
+      - backrest-testhash/data:/data
+      - backrest-testhash/config:/config
+      - backrest-testhash/cache:/cache
+      - /:/userdata:ro
+
+volumes:
+  backrest-testhash:
+  backrest-cache-testhash:
+`) as ComposeSpecification;
+
+test("Should handle volume paths with subdirectories correctly", () => {
+	const composeData = load(composeFileBackrest) as ComposeSpecification;
+	const suffix = "testhash";
+
+	const updatedComposeData = addSuffixToAllVolumes(composeData, suffix);
+
+	expect(updatedComposeData).toEqual(expectedDockerComposeBackrest);
+});

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

@@ -27,7 +27,16 @@ if (typeof window === "undefined") {
 const baseApp: ApplicationNested = {
 	applicationId: "",
 	herokuVersion: "",
+	giteaBranch: "",
+	giteaBuildPath: "",
+	giteaId: "",
+	giteaOwner: "",
+	giteaRepository: "",
+	cleanCache: false,
+	watchPaths: [],
+	enableSubmodules: false,
 	applicationStatus: "done",
+	triggerType: "push",
 	appName: "",
 	autoDeploy: true,
 	serverId: "",
@@ -37,6 +46,7 @@ const baseApp: ApplicationNested = {
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
 	previewCertificateType: "none",
+	previewCustomCertResolver: null,
 	previewEnv: null,
 	previewHttps: false,
 	previewPath: "/",
@@ -95,6 +105,7 @@ const baseApp: ApplicationNested = {
 	ports: [],
 	projectId: "",
 	publishDirectory: null,
+	isStaticSpa: null,
 	redirects: [],
 	refreshToken: "",
 	registry: null,
@@ -110,6 +121,7 @@ const baseApp: ApplicationNested = {
 	updateConfigSwarm: null,
 	username: null,
 	dockerContextPath: null,
+	rollbackActive: false,
 };
 
 describe("unzipDrop using real zip files", () => {
@@ -139,67 +151,68 @@ describe("unzipDrop using real zip files", () => {
 		} finally {
 		}
 	});
-
-	it("should correctly extract a zip with a single root folder and a subfolder", async () => {
-		baseApp.appName = "folderwithfile";
-		// const appName = "folderwithfile";
-		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/folder-with-file.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, baseApp);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-		expect(files.some((f) => f.name === "folder1.txt")).toBe(true);
-	});
-
-	it("should correctly extract a zip with multiple root folders", async () => {
-		baseApp.appName = "two-folders";
-		// const appName = "two-folders";
-		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/two-folders.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, baseApp);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-
-		expect(files.some((f) => f.name === "folder1")).toBe(true);
-		expect(files.some((f) => f.name === "folder2")).toBe(true);
-	});
-
-	it("should correctly extract a zip with a single root with a file", async () => {
-		baseApp.appName = "nested";
-		// const appName = "nested";
-		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/nested.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, baseApp);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-
-		expect(files.some((f) => f.name === "folder1")).toBe(true);
-		expect(files.some((f) => f.name === "folder2")).toBe(true);
-		expect(files.some((f) => f.name === "folder3")).toBe(true);
-	});
-
-	it("should correctly extract a zip with a single root with a folder", async () => {
-		baseApp.appName = "folder-with-sibling-file";
-		// const appName = "folder-with-sibling-file";
-		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
-		const zip = new AdmZip("./__test__/drop/zips/folder-with-sibling-file.zip");
-
-		const zipBuffer = zip.toBuffer();
-		const file = new File([zipBuffer], "single.zip");
-		await unzipDrop(file, baseApp);
-
-		const files = await fs.readdir(outputPath, { withFileTypes: true });
-
-		expect(files.some((f) => f.name === "folder1")).toBe(true);
-		expect(files.some((f) => f.name === "test.txt")).toBe(true);
-	});
 });
+
+// 	it("should correctly extract a zip with a single root folder and a subfolder", async () => {
+// 		baseApp.appName = "folderwithfile";
+// 		// const appName = "folderwithfile";
+// 		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+// 		const zip = new AdmZip("./__test__/drop/zips/folder-with-file.zip");
+
+// 		const zipBuffer = zip.toBuffer();
+// 		const file = new File([zipBuffer], "single.zip");
+// 		await unzipDrop(file, baseApp);
+
+// 		const files = await fs.readdir(outputPath, { withFileTypes: true });
+// 		expect(files.some((f) => f.name === "folder1.txt")).toBe(true);
+// 	});
+
+// 	it("should correctly extract a zip with multiple root folders", async () => {
+// 		baseApp.appName = "two-folders";
+// 		// const appName = "two-folders";
+// 		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+// 		const zip = new AdmZip("./__test__/drop/zips/two-folders.zip");
+
+// 		const zipBuffer = zip.toBuffer();
+// 		const file = new File([zipBuffer], "single.zip");
+// 		await unzipDrop(file, baseApp);
+
+// 		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+// 		expect(files.some((f) => f.name === "folder1")).toBe(true);
+// 		expect(files.some((f) => f.name === "folder2")).toBe(true);
+// 	});
+
+// 	it("should correctly extract a zip with a single root with a file", async () => {
+// 		baseApp.appName = "nested";
+// 		// const appName = "nested";
+// 		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+// 		const zip = new AdmZip("./__test__/drop/zips/nested.zip");
+
+// 		const zipBuffer = zip.toBuffer();
+// 		const file = new File([zipBuffer], "single.zip");
+// 		await unzipDrop(file, baseApp);
+
+// 		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+// 		expect(files.some((f) => f.name === "folder1")).toBe(true);
+// 		expect(files.some((f) => f.name === "folder2")).toBe(true);
+// 		expect(files.some((f) => f.name === "folder3")).toBe(true);
+// 	});
+
+// 	it("should correctly extract a zip with a single root with a folder", async () => {
+// 		baseApp.appName = "folder-with-sibling-file";
+// 		// const appName = "folder-with-sibling-file";
+// 		const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
+// 		const zip = new AdmZip("./__test__/drop/zips/folder-with-sibling-file.zip");
+
+// 		const zipBuffer = zip.toBuffer();
+// 		const file = new File([zipBuffer], "single.zip");
+// 		await unzipDrop(file, baseApp);
+
+// 		const files = await fs.readdir(outputPath, { withFileTypes: true });
+
+// 		expect(files.some((f) => f.name === "folder1")).toBe(true);
+// 		expect(files.some((f) => f.name === "test.txt")).toBe(true);
+// 	});
+// });

apps/dokploy/__test__/templates/config.template.test.ts

@@ -0,0 +1,497 @@
+import type { Schema } from "@dokploy/server/templates";
+import type { CompleteTemplate } from "@dokploy/server/templates/processors";
+import { processTemplate } from "@dokploy/server/templates/processors";
+import { describe, expect, it } from "vitest";
+
+describe("processTemplate", () => {
+	// Mock schema for testing
+	const mockSchema: Schema = {
+		projectName: "test",
+		serverIp: "127.0.0.1",
+	};
+
+	describe("variables processing", () => {
+		it("should process basic variables with utility functions", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					main_domain: "${domain}",
+					secret_base: "${base64:64}",
+					totp_key: "${base64:32}",
+					password: "${password:32}",
+					hash: "${hash:16}",
+				},
+				config: {
+					domains: [],
+					env: {},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(0);
+			expect(result.domains).toHaveLength(0);
+			expect(result.mounts).toHaveLength(0);
+		});
+
+		it("should allow referencing variables in other variables", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					main_domain: "${domain}",
+					api_domain: "api.${main_domain}",
+				},
+				config: {
+					domains: [],
+					env: {},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(0);
+			expect(result.domains).toHaveLength(0);
+			expect(result.mounts).toHaveLength(0);
+		});
+
+		it("should allow creation of real jwt secret", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					jwt_secret: "cQsdycq1hDLopQonF6jUTqgQc5WEZTwWLL02J6XJ",
+					anon_payload: JSON.stringify({
+						role: "tester",
+						iss: "dockploy",
+						iat: "${timestamps:2025-01-01T00:00:00Z}",
+						exp: "${timestamps:2030-01-01T00:00:00Z}",
+					}),
+					anon_key: "${jwt:jwt_secret:anon_payload}",
+				},
+				config: {
+					domains: [],
+					env: {
+						ANON_KEY: "${anon_key}",
+					},
+				},
+			};
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(1);
+			expect(result.envs).toContain(
+				"ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNzM1Njg5NjAwIiwiZXhwIjoiMTg5MzQ1NjAwMCIsInJvbGUiOiJ0ZXN0ZXIiLCJpc3MiOiJkb2NrcGxveSJ9.BG5JoxL2_NaTFbPgyZdm3kRWenf_O3su_HIRKGCJ_kY",
+			);
+			expect(result.mounts).toHaveLength(0);
+			expect(result.domains).toHaveLength(0);
+		});
+	});
+
+	describe("domains processing", () => {
+		it("should process domains with explicit host", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					main_domain: "${domain}",
+				},
+				config: {
+					domains: [
+						{
+							serviceName: "plausible",
+							port: 8000,
+							host: "${main_domain}",
+						},
+					],
+					env: {},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.domains).toHaveLength(1);
+			const domain = result.domains[0];
+			expect(domain).toBeDefined();
+			if (!domain) return;
+			expect(domain).toMatchObject({
+				serviceName: "plausible",
+				port: 8000,
+			});
+			expect(domain.host).toBeDefined();
+			expect(domain.host).toContain(mockSchema.projectName);
+		});
+
+		it("should generate random domain if host is not specified", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [
+						{
+							serviceName: "plausible",
+							port: 8000,
+						},
+					],
+					env: {},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.domains).toHaveLength(1);
+			const domain = result.domains[0];
+			expect(domain).toBeDefined();
+			if (!domain || !domain.host) return;
+			expect(domain.host).toBeDefined();
+			expect(domain.host).toContain(mockSchema.projectName);
+		});
+
+		it("should allow using ${domain} directly in host", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [
+						{
+							serviceName: "plausible",
+							port: 8000,
+							host: "${domain}",
+						},
+					],
+					env: {},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.domains).toHaveLength(1);
+			const domain = result.domains[0];
+			expect(domain).toBeDefined();
+			if (!domain || !domain.host) return;
+			expect(domain.host).toBeDefined();
+			expect(domain.host).toContain(mockSchema.projectName);
+		});
+	});
+
+	describe("environment variables processing", () => {
+		it("should process env vars with variable references", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					main_domain: "${domain}",
+					secret_base: "${base64:64}",
+				},
+				config: {
+					domains: [],
+					env: {
+						BASE_URL: "http://${main_domain}",
+						SECRET_KEY_BASE: "${secret_base}",
+					},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(2);
+			const baseUrl = result.envs.find((env: string) =>
+				env.startsWith("BASE_URL="),
+			);
+			const secretKey = result.envs.find((env: string) =>
+				env.startsWith("SECRET_KEY_BASE="),
+			);
+
+			expect(baseUrl).toBeDefined();
+			expect(secretKey).toBeDefined();
+			if (!baseUrl || !secretKey) return;
+
+			expect(baseUrl).toContain(mockSchema.projectName);
+			const base64Value = secretKey.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(86);
+			expect(base64Value.length).toBeLessThanOrEqual(88);
+		});
+
+		it("should process env vars when provided as an array", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: [
+						'CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"',
+						'ANOTHER_VAR="some value"',
+						"DOMAIN=${domain}",
+					],
+					mounts: [],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+
+			// Should preserve exact format for static values
+			expect(result.envs[0]).toBe('CLOUDFLARE_TUNNEL_TOKEN="<INSERT TOKEN>"');
+			expect(result.envs[1]).toBe('ANOTHER_VAR="some value"');
+
+			// Should process variables in array items
+			expect(result.envs[2]).toContain(mockSchema.projectName);
+		});
+
+		it("should allow using utility functions directly in env vars", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: {
+						RANDOM_DOMAIN: "${domain}",
+						SECRET_KEY: "${base64:32}",
+					},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(2);
+			const randomDomainEnv = result.envs.find((env: string) =>
+				env.startsWith("RANDOM_DOMAIN="),
+			);
+			const secretKeyEnv = result.envs.find((env: string) =>
+				env.startsWith("SECRET_KEY="),
+			);
+			expect(randomDomainEnv).toBeDefined();
+			expect(secretKeyEnv).toBeDefined();
+			if (!randomDomainEnv || !secretKeyEnv) return;
+
+			expect(randomDomainEnv).toContain(mockSchema.projectName);
+			const base64Value = secretKeyEnv.split("=")[1];
+			expect(base64Value).toBeDefined();
+			if (!base64Value) return;
+			expect(base64Value).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(base64Value.length).toBeGreaterThanOrEqual(42);
+			expect(base64Value.length).toBeLessThanOrEqual(44);
+		});
+
+		it("should handle boolean values in env vars when provided as an array", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: [
+						"ENABLE_USER_SIGN_UP=false",
+						"DEBUG_MODE=true",
+						"SOME_NUMBER=42",
+					],
+					mounts: [],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+			expect(result.envs).toContain("ENABLE_USER_SIGN_UP=false");
+			expect(result.envs).toContain("DEBUG_MODE=true");
+			expect(result.envs).toContain("SOME_NUMBER=42");
+		});
+
+		it("should handle boolean values in env vars when provided as an object", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: {
+						ENABLE_USER_SIGN_UP: false,
+						DEBUG_MODE: true,
+						SOME_NUMBER: 42,
+					},
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+			expect(result.envs).toContain("ENABLE_USER_SIGN_UP=false");
+			expect(result.envs).toContain("DEBUG_MODE=true");
+			expect(result.envs).toContain("SOME_NUMBER=42");
+		});
+	});
+
+	describe("mounts processing", () => {
+		it("should process mounts with variable references", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					config_path: "/etc/config",
+					secret_key: "${base64:32}",
+				},
+				config: {
+					domains: [],
+					env: {},
+					mounts: [
+						{
+							filePath: "${config_path}/config.xml",
+							content: "secret_key=${secret_key}",
+						},
+					],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.mounts).toHaveLength(1);
+			const mount = result.mounts[0];
+			expect(mount).toBeDefined();
+			if (!mount) return;
+			expect(mount.filePath).toContain("/etc/config");
+			expect(mount.content).toMatch(/secret_key=[A-Za-z0-9+/]{32}/);
+		});
+
+		it("should allow using utility functions directly in mount content", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [],
+					env: {},
+					mounts: [
+						{
+							filePath: "/config/secrets.txt",
+							content: "random_domain=${domain}\nsecret=${base64:32}",
+						},
+					],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.mounts).toHaveLength(1);
+			const mount = result.mounts[0];
+			expect(mount).toBeDefined();
+			if (!mount) return;
+			expect(mount.content).toContain(mockSchema.projectName);
+			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{32}/);
+		});
+	});
+
+	describe("complex template processing", () => {
+		it("should process a complete template with all features", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {
+					main_domain: "${domain}",
+					secret_base: "${base64:64}",
+					totp_key: "${base64:32}",
+				},
+				config: {
+					domains: [
+						{
+							serviceName: "plausible",
+							port: 8000,
+							host: "${main_domain}",
+						},
+						{
+							serviceName: "api",
+							port: 3000,
+							host: "api.${main_domain}",
+						},
+					],
+					env: {
+						BASE_URL: "http://${main_domain}",
+						SECRET_KEY_BASE: "${secret_base}",
+						TOTP_VAULT_KEY: "${totp_key}",
+					},
+					mounts: [
+						{
+							filePath: "/config/app.conf",
+							content: `
+                domain=\${main_domain}
+                secret=\${secret_base}
+                totp=\${totp_key}
+              `,
+						},
+					],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+
+			// Check domains
+			expect(result.domains).toHaveLength(2);
+			const [domain1, domain2] = result.domains;
+			expect(domain1).toBeDefined();
+			expect(domain2).toBeDefined();
+			if (!domain1 || !domain2) return;
+			expect(domain1.host).toBeDefined();
+			expect(domain1.host).toContain(mockSchema.projectName);
+			expect(domain2.host).toContain("api.");
+			expect(domain2.host).toContain(mockSchema.projectName);
+
+			// Check env vars
+			expect(result.envs).toHaveLength(3);
+			const baseUrl = result.envs.find((env: string) =>
+				env.startsWith("BASE_URL="),
+			);
+			const secretKey = result.envs.find((env: string) =>
+				env.startsWith("SECRET_KEY_BASE="),
+			);
+			const totpKey = result.envs.find((env: string) =>
+				env.startsWith("TOTP_VAULT_KEY="),
+			);
+
+			expect(baseUrl).toBeDefined();
+			expect(secretKey).toBeDefined();
+			expect(totpKey).toBeDefined();
+			if (!baseUrl || !secretKey || !totpKey) return;
+
+			expect(baseUrl).toContain(mockSchema.projectName);
+
+			// Check base64 lengths and format
+			const secretKeyValue = secretKey.split("=")[1];
+			const totpKeyValue = totpKey.split("=")[1];
+
+			expect(secretKeyValue).toBeDefined();
+			expect(totpKeyValue).toBeDefined();
+			if (!secretKeyValue || !totpKeyValue) return;
+
+			expect(secretKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(secretKeyValue.length).toBeGreaterThanOrEqual(86);
+			expect(secretKeyValue.length).toBeLessThanOrEqual(88);
+
+			expect(totpKeyValue).toMatch(/^[A-Za-z0-9+/]+={0,2}$/);
+			expect(totpKeyValue.length).toBeGreaterThanOrEqual(42);
+			expect(totpKeyValue.length).toBeLessThanOrEqual(44);
+
+			// Check mounts
+			expect(result.mounts).toHaveLength(1);
+			const mount = result.mounts[0];
+			expect(mount).toBeDefined();
+			if (!mount) return;
+			expect(mount.content).toContain(mockSchema.projectName);
+			expect(mount.content).toMatch(/secret=[A-Za-z0-9+/]{86,88}/);
+			expect(mount.content).toMatch(/totp=[A-Za-z0-9+/]{42,44}/);
+		});
+	});
+
+	describe("Should populate envs, domains and mounts in the case we didn't used any variable", () => {
+		it("should populate envs, domains and mounts in the case we didn't used any variable", () => {
+			const template: CompleteTemplate = {
+				metadata: {} as any,
+				variables: {},
+				config: {
+					domains: [
+						{
+							serviceName: "plausible",
+							port: 8000,
+							host: "${hash}",
+						},
+					],
+					env: {
+						BASE_URL: "http://${domain}",
+						SECRET_KEY_BASE: "${password:32}",
+						TOTP_VAULT_KEY: "${base64:128}",
+					},
+					mounts: [
+						{
+							filePath: "/config/secrets.txt",
+							content: "random_domain=${domain}\nsecret=${password:32}",
+						},
+					],
+				},
+			};
+
+			const result = processTemplate(template, mockSchema);
+			expect(result.envs).toHaveLength(3);
+			expect(result.domains).toHaveLength(1);
+			expect(result.mounts).toHaveLength(1);
+		});
+	});
+});

apps/dokploy/__test__/templates/helpers.template.test.ts

@@ -0,0 +1,232 @@
+import type { Schema } from "@dokploy/server/templates";
+import { processValue } from "@dokploy/server/templates/processors";
+import { describe, expect, it } from "vitest";
+
+describe("helpers functions", () => {
+	// Mock schema for testing
+	const mockSchema: Schema = {
+		projectName: "test",
+		serverIp: "127.0.0.1",
+	};
+	// some helpers to test jwt
+	type JWTParts = [string, string, string];
+	const jwtMatchExp = /^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+$/;
+	const jwtBase64Decode = (str: string) => {
+		const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+		const padding = "=".repeat((4 - (base64.length % 4)) % 4);
+		const decoded = Buffer.from(base64 + padding, "base64").toString("utf-8");
+		return JSON.parse(decoded);
+	};
+	const jwtCheckHeader = (jwtHeader: string) => {
+		const decodedHeader = jwtBase64Decode(jwtHeader);
+		expect(decodedHeader).toHaveProperty("alg");
+		expect(decodedHeader).toHaveProperty("typ");
+		expect(decodedHeader.alg).toEqual("HS256");
+		expect(decodedHeader.typ).toEqual("JWT");
+	};
+
+	describe("${domain}", () => {
+		it("should generate a random domain", () => {
+			const domain = processValue("${domain}", {}, mockSchema);
+			expect(domain.startsWith(`${mockSchema.projectName}-`)).toBeTruthy();
+			expect(
+				domain.endsWith(
+					`${mockSchema.serverIp.replaceAll(".", "-")}.traefik.me`,
+				),
+			).toBeTruthy();
+		});
+	});
+
+	describe("${base64}", () => {
+		it("should generate a base64 string", () => {
+			const base64 = processValue("${base64}", {}, mockSchema);
+			expect(base64).toMatch(/^[A-Za-z0-9+=/]+={0,2}$/);
+		});
+		it.each([
+			[4, 8],
+			[8, 12],
+			[16, 24],
+			[32, 44],
+			[64, 88],
+			[128, 172],
+		])(
+			"should generate a base64 string from parameter %d bytes length",
+			(length, finalLength) => {
+				const base64 = processValue(`\${base64:${length}}`, {}, mockSchema);
+				expect(base64).toMatch(/^[A-Za-z0-9+=/]+={0,2}$/);
+				expect(base64.length).toBe(finalLength);
+			},
+		);
+	});
+
+	describe("${password}", () => {
+		it("should generate a password string", () => {
+			const password = processValue("${password}", {}, mockSchema);
+			expect(password).toMatch(/^[A-Za-z0-9]+$/);
+		});
+		it.each([6, 8, 12, 16, 32])(
+			"should generate a password string respecting parameter %d length",
+			(length) => {
+				const password = processValue(`\${password:${length}}`, {}, mockSchema);
+				expect(password).toMatch(/^[A-Za-z0-9]+$/);
+				expect(password.length).toBe(length);
+			},
+		);
+	});
+
+	describe("${hash}", () => {
+		it("should generate a hash string", () => {
+			const hash = processValue("${hash}", {}, mockSchema);
+			expect(hash).toMatch(/^[A-Za-z0-9]+$/);
+		});
+		it.each([6, 8, 12, 16, 32])(
+			"should generate a hash string respecting parameter %d length",
+			(length) => {
+				const hash = processValue(`\${hash:${length}}`, {}, mockSchema);
+				expect(hash).toMatch(/^[A-Za-z0-9]+$/);
+				expect(hash.length).toBe(length);
+			},
+		);
+	});
+
+	describe("${uuid}", () => {
+		it("should generate a UUID string", () => {
+			const uuid = processValue("${uuid}", {}, mockSchema);
+			expect(uuid).toMatch(
+				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/,
+			);
+		});
+	});
+
+	describe("${timestamp}", () => {
+		it("should generate a timestamp string in milliseconds", () => {
+			const timestamp = processValue("${timestamp}", {}, mockSchema);
+			const nowLength = Math.floor(Date.now()).toString().length;
+			expect(timestamp).toMatch(/^\d+$/);
+			expect(timestamp.length).toBe(nowLength);
+		});
+	});
+	describe("${timestampms}", () => {
+		it("should generate a timestamp string in milliseconds", () => {
+			const timestamp = processValue("${timestampms}", {}, mockSchema);
+			const nowLength = Date.now().toString().length;
+			expect(timestamp).toMatch(/^\d+$/);
+			expect(timestamp.length).toBe(nowLength);
+		});
+		it("should generate a timestamp string in milliseconds from parameter", () => {
+			const timestamp = processValue(
+				"${timestampms:2025-01-01}",
+				{},
+				mockSchema,
+			);
+			expect(timestamp).toEqual("1735689600000");
+		});
+	});
+	describe("${timestamps}", () => {
+		it("should generate a timestamp string in seconds", () => {
+			const timestamps = processValue("${timestamps}", {}, mockSchema);
+			const nowLength = Math.floor(Date.now() / 1000).toString().length;
+			expect(timestamps).toMatch(/^\d+$/);
+			expect(timestamps.length).toBe(nowLength);
+		});
+		it("should generate a timestamp string in seconds from parameter", () => {
+			const timestamps = processValue(
+				"${timestamps:2025-01-01}",
+				{},
+				mockSchema,
+			);
+			expect(timestamps).toEqual("1735689600");
+		});
+	});
+
+	describe("${randomPort}", () => {
+		it("should generate a random port string", () => {
+			const randomPort = processValue("${randomPort}", {}, mockSchema);
+			expect(randomPort).toMatch(/^\d+$/);
+			expect(Number(randomPort)).toBeLessThan(65536);
+		});
+	});
+
+	describe("${username}", () => {
+		it("should generate a username string", () => {
+			const username = processValue("${username}", {}, mockSchema);
+			expect(username).toMatch(/^[a-zA-Z0-9._-]{3,}$/);
+		});
+	});
+
+	describe("${email}", () => {
+		it("should generate an email string", () => {
+			const email = processValue("${email}", {}, mockSchema);
+			expect(email).toMatch(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/);
+		});
+	});
+
+	describe("${jwt}", () => {
+		it("should generate a JWT string", () => {
+			const jwt = processValue("${jwt}", {}, mockSchema);
+			expect(jwt).toMatch(jwtMatchExp);
+			const parts = jwt.split(".") as JWTParts;
+			const decodedPayload = jwtBase64Decode(parts[1]);
+			jwtCheckHeader(parts[0]);
+			expect(decodedPayload).toHaveProperty("iat");
+			expect(decodedPayload).toHaveProperty("iss");
+			expect(decodedPayload).toHaveProperty("exp");
+			expect(decodedPayload.iss).toEqual("dokploy");
+		});
+		it.each([6, 8, 12, 16, 32])(
+			"should generate a random hex string from parameter %d byte length",
+			(length) => {
+				const jwt = processValue(`\${jwt:${length}}`, {}, mockSchema);
+				expect(jwt).toMatch(/^[A-Za-z0-9-_.]+$/);
+				expect(jwt.length).toBeGreaterThanOrEqual(length); // bytes translated to hex can take up to 2x the length
+				expect(jwt.length).toBeLessThanOrEqual(length * 2);
+			},
+		);
+	});
+	describe("${jwt:secret}", () => {
+		it("should generate a JWT string respecting parameter secret from variable", () => {
+			const jwt = processValue(
+				"${jwt:secret}",
+				{ secret: "mysecret" },
+				mockSchema,
+			);
+			expect(jwt).toMatch(jwtMatchExp);
+			const parts = jwt.split(".") as JWTParts;
+			const decodedPayload = jwtBase64Decode(parts[1]);
+			jwtCheckHeader(parts[0]);
+			expect(decodedPayload).toHaveProperty("iat");
+			expect(decodedPayload).toHaveProperty("iss");
+			expect(decodedPayload).toHaveProperty("exp");
+			expect(decodedPayload.iss).toEqual("dokploy");
+		});
+	});
+	describe("${jwt:secret:payload}", () => {
+		it("should generate a JWT string respecting parameters secret and payload from variables", () => {
+			const iat = Math.floor(new Date("2025-01-01T00:00:00Z").getTime() / 1000);
+			const expiry = iat + 3600;
+			const jwt = processValue(
+				"${jwt:secret:payload}",
+				{
+					secret: "mysecret",
+					payload: `{"iss": "test-issuer", "iat": ${iat}, "exp": ${expiry}, "customprop": "customvalue"}`,
+				},
+				mockSchema,
+			);
+			expect(jwt).toMatch(jwtMatchExp);
+			const parts = jwt.split(".") as JWTParts;
+			jwtCheckHeader(parts[0]);
+			const decodedPayload = jwtBase64Decode(parts[1]);
+			expect(decodedPayload).toHaveProperty("iat");
+			expect(decodedPayload.iat).toEqual(iat);
+			expect(decodedPayload).toHaveProperty("iss");
+			expect(decodedPayload.iss).toEqual("test-issuer");
+			expect(decodedPayload).toHaveProperty("exp");
+			expect(decodedPayload.exp).toEqual(expiry);
+			expect(decodedPayload).toHaveProperty("customprop");
+			expect(decodedPayload.customprop).toEqual("customvalue");
+			expect(jwt).toEqual(
+				"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MzU2ODk2MDAsImV4cCI6MTczNTY5MzIwMCwiaXNzIjoidGVzdC1pc3N1ZXIiLCJjdXN0b21wcm9wIjoiY3VzdG9tdmFsdWUifQ.m42U7PZSUSCf7gBOJrxJir0rQmyPq4rA59Dydr_QahI",
+			);
+		});
+	});
+});

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

@@ -14,7 +14,10 @@ import {
 import { beforeEach, expect, test, vi } from "vitest";
 
 const baseAdmin: User = {
+	https: false,
 	enablePaidFeatures: false,
+	allowImpersonation: false,
+	role: "user",
 	metricsConfig: {
 		containers: {
 			refreshRate: 20,
@@ -73,7 +76,6 @@ beforeEach(() => {
 
 test("Should read the configuration file", () => {
 	const config: FileConfig = loadOrCreateConfig("dokploy");
-
 	expect(config.http?.routers?.["dokploy-router-app"]?.service).toBe(
 		"dokploy-service-app",
 	);
@@ -83,6 +85,7 @@ test("Should apply redirect-to-https", () => {
 	updateServerTraefik(
 		{
 			...baseAdmin,
+			https: true,
 			certificateType: "letsencrypt",
 		},
 		"example.com",

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

@@ -5,24 +5,35 @@ import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
+	rollbackActive: false,
 	applicationId: "",
 	herokuVersion: "",
+	giteaRepository: "",
+	giteaOwner: "",
+	giteaBranch: "",
+	giteaBuildPath: "",
+	giteaId: "",
+	cleanCache: false,
 	applicationStatus: "done",
 	appName: "",
 	autoDeploy: true,
+	enableSubmodules: false,
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",
 	registryUrl: "",
+	watchPaths: [],
 	buildArgs: null,
 	isPreviewDeploymentsActive: false,
 	previewBuildArgs: null,
+	triggerType: "push",
 	previewCertificateType: "none",
 	previewEnv: null,
 	previewHttps: false,
 	previewPath: "/",
 	previewPort: 3000,
 	previewLimit: 0,
+	previewCustomCertResolver: null,
 	previewWildcard: "",
 	project: {
 		env: "",
@@ -75,6 +86,7 @@ const baseApp: ApplicationNested = {
 	ports: [],
 	projectId: "",
 	publishDirectory: null,
+	isStaticSpa: null,
 	redirects: [],
 	refreshToken: "",
 	registry: null,
@@ -103,9 +115,12 @@ const baseDomain: Domain = {
 	port: null,
 	serviceName: "",
 	composeId: "",
+	customCertResolver: null,
 	domainType: "application",
 	uniqueConfigKey: 1,
 	previewDeploymentId: "",
+	internalPath: "/",
+	stripPath: false,
 };
 
 const baseRedirect: Redirect = {

apps/dokploy/__test__/utils/backups.test.ts

@@ -0,0 +1,61 @@
+import { normalizeS3Path } from "@dokploy/server/utils/backups/utils";
+import { describe, expect, test } from "vitest";
+
+describe("normalizeS3Path", () => {
+	test("should handle empty and whitespace-only prefix", () => {
+		expect(normalizeS3Path("")).toBe("");
+		expect(normalizeS3Path("/")).toBe("");
+		expect(normalizeS3Path("  ")).toBe("");
+		expect(normalizeS3Path("\t")).toBe("");
+		expect(normalizeS3Path("\n")).toBe("");
+		expect(normalizeS3Path(" \n \t ")).toBe("");
+	});
+
+	test("should trim whitespace from prefix", () => {
+		expect(normalizeS3Path(" prefix")).toBe("prefix/");
+		expect(normalizeS3Path("prefix ")).toBe("prefix/");
+		expect(normalizeS3Path(" prefix ")).toBe("prefix/");
+		expect(normalizeS3Path("\tprefix\t")).toBe("prefix/");
+		expect(normalizeS3Path(" prefix/nested ")).toBe("prefix/nested/");
+	});
+
+	test("should remove leading slashes", () => {
+		expect(normalizeS3Path("/prefix")).toBe("prefix/");
+		expect(normalizeS3Path("///prefix")).toBe("prefix/");
+	});
+
+	test("should remove trailing slashes", () => {
+		expect(normalizeS3Path("prefix/")).toBe("prefix/");
+		expect(normalizeS3Path("prefix///")).toBe("prefix/");
+	});
+
+	test("should remove both leading and trailing slashes", () => {
+		expect(normalizeS3Path("/prefix/")).toBe("prefix/");
+		expect(normalizeS3Path("///prefix///")).toBe("prefix/");
+	});
+
+	test("should handle nested paths", () => {
+		expect(normalizeS3Path("prefix/nested")).toBe("prefix/nested/");
+		expect(normalizeS3Path("/prefix/nested/")).toBe("prefix/nested/");
+		expect(normalizeS3Path("///prefix/nested///")).toBe("prefix/nested/");
+	});
+
+	test("should preserve middle slashes", () => {
+		expect(normalizeS3Path("prefix/nested/deep")).toBe("prefix/nested/deep/");
+		expect(normalizeS3Path("/prefix/nested/deep/")).toBe("prefix/nested/deep/");
+	});
+
+	test("should handle special characters", () => {
+		expect(normalizeS3Path("prefix-with-dashes")).toBe("prefix-with-dashes/");
+		expect(normalizeS3Path("prefix_with_underscores")).toBe(
+			"prefix_with_underscores/",
+		);
+		expect(normalizeS3Path("prefix.with.dots")).toBe("prefix.with.dots/");
+	});
+
+	test("should handle the cases from the bug report", () => {
+		expect(normalizeS3Path("instance-backups/")).toBe("instance-backups/");
+		expect(normalizeS3Path("/instance-backups/")).toBe("instance-backups/");
+		expect(normalizeS3Path("instance-backups")).toBe("instance-backups/");
+	});
+});

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 {
 				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
 				return z.NEVER;
 			}
@@ -270,8 +270,8 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-5xl p-0">
+			<DialogContent className="sm:max-w-5xl p-0">
-				<DialogHeader className="p-6">
+				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
 						Update certain settings using a json object.
@@ -753,7 +753,7 @@ export const AddSwarmSettings = ({ applicationId }: Props) => {
 							)}
 						/>
 
-						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border p-2 ">
+						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2 m-0 sticky bottom-0 right-0 bg-muted border">
 							<Button
 								isLoading={isLoading}
 								form="hook-form-add-permissions"

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

@@ -40,7 +40,7 @@ interface Props {
 }
 
 const AddRedirectchema = z.object({
-	replicas: z.number(),
+	replicas: z.number().min(1, "Replicas must be at least 1"),
 	registryId: z.string(),
 });
 
@@ -130,9 +130,11 @@ export const ShowClusterSettings = ({ applicationId }: Props) => {
 												placeholder="1"
 												{...field}
 												onChange={(e) => {
-													field.onChange(Number(e.target.value));
+													const value = e.target.value;
+													field.onChange(value === "" ? 0 : Number(value));
 												}}
 												type="number"
+												value={field.value || ""}
 											/>
 										</FormControl>
 

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

@@ -0,0 +1,347 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Code2, Globe2, HardDrive } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const ImportSchema = z.object({
+	base64: z.string(),
+});
+
+type ImportType = z.infer<typeof ImportSchema>;
+
+interface Props {
+	composeId: string;
+}
+
+export const ShowImport = ({ composeId }: Props) => {
+	const [showModal, setShowModal] = useState(false);
+	const [showMountContent, setShowMountContent] = useState(false);
+	const [selectedMount, setSelectedMount] = useState<{
+		filePath: string;
+		content: string;
+	} | null>(null);
+	const [templateInfo, setTemplateInfo] = useState<{
+		compose: string;
+		template: {
+			domains: Array<{
+				serviceName: string;
+				port: number;
+				path?: string;
+				host?: string;
+			}>;
+			envs: string[];
+			mounts: Array<{
+				filePath: string;
+				content: string;
+			}>;
+		};
+	} | null>(null);
+
+	const utils = api.useUtils();
+	const { mutateAsync: processTemplate, isLoading: isLoadingTemplate } =
+		api.compose.processTemplate.useMutation();
+	const {
+		mutateAsync: importTemplate,
+		isLoading: isImporting,
+		isSuccess: isImportSuccess,
+	} = api.compose.import.useMutation();
+
+	const form = useForm<ImportType>({
+		defaultValues: {
+			base64: "",
+		},
+		resolver: zodResolver(ImportSchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			base64: "",
+		});
+	}, [isImportSuccess]);
+
+	const onSubmit = async () => {
+		const base64 = form.getValues("base64");
+		if (!base64) {
+			toast.error("Please enter a base64 template");
+			return;
+		}
+
+		try {
+			await importTemplate({
+				composeId,
+				base64,
+			});
+			toast.success("Template imported successfully");
+			await utils.compose.one.invalidate({
+				composeId,
+			});
+			setShowModal(false);
+		} catch {
+			toast.error("Error importing template");
+		}
+	};
+
+	const handleLoadTemplate = async () => {
+		const base64 = form.getValues("base64");
+		if (!base64) {
+			toast.error("Please enter a base64 template");
+			return;
+		}
+
+		try {
+			const result = await processTemplate({
+				composeId,
+				base64,
+			});
+			setTemplateInfo(result);
+			setShowModal(true);
+		} catch {
+			toast.error("Error processing template");
+		}
+	};
+
+	const handleShowMountContent = (mount: {
+		filePath: string;
+		content: string;
+	}) => {
+		setSelectedMount(mount);
+		setShowMountContent(true);
+	};
+
+	return (
+		<>
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Import</CardTitle>
+					<CardDescription>Import your Template configuration</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<AlertBlock type="warning">
+						Warning: Importing a template will remove all existing environment
+						variables, mounts, and domains from this service.
+					</AlertBlock>
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="grid w-full gap-4"
+						>
+							<FormField
+								control={form.control}
+								name="base64"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Configuration (Base64)</FormLabel>
+										<FormControl>
+											<Textarea
+												placeholder="Enter your Base64 configuration here..."
+												className="font-mono min-h-[200px]"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<div className="flex justify-end gap-2">
+								<Button
+									type="button"
+									className="w-fit"
+									variant="outline"
+									isLoading={isLoadingTemplate}
+									onClick={handleLoadTemplate}
+								>
+									Load
+								</Button>
+							</div>
+							<Dialog open={showModal} onOpenChange={setShowModal}>
+								<DialogContent className="max-w-[50vw]">
+									<DialogHeader>
+										<DialogTitle className="text-2xl font-bold">
+											Template Information
+										</DialogTitle>
+										<DialogDescription className="space-y-2">
+											<p>Review the template information before importing</p>
+											<AlertBlock type="warning">
+												Warning: This will remove all existing environment
+												variables, mounts, and domains from this service.
+											</AlertBlock>
+										</DialogDescription>
+									</DialogHeader>
+
+									<div className="flex flex-col gap-6">
+										<div className="space-y-4">
+											<div className="flex items-center gap-2">
+												<Code2 className="h-5 w-5 text-primary" />
+												<h3 className="text-lg font-semibold">
+													Docker Compose
+												</h3>
+											</div>
+											<CodeEditor
+												language="yaml"
+												value={templateInfo?.compose || ""}
+												className="font-mono"
+												readOnly
+											/>
+										</div>
+
+										<Separator />
+
+										{templateInfo?.template.domains &&
+											templateInfo.template.domains.length > 0 && (
+												<div className="space-y-4">
+													<div className="flex items-center gap-2">
+														<Globe2 className="h-5 w-5 text-primary" />
+														<h3 className="text-lg font-semibold">Domains</h3>
+													</div>
+													<div className="grid grid-cols-1 gap-3">
+														{templateInfo.template.domains.map(
+															(domain, index) => (
+																<div
+																	key={index}
+																	className="rounded-lg border bg-card p-3 text-card-foreground shadow-sm"
+																>
+																	<div className="font-medium">
+																		{domain.serviceName}
+																	</div>
+																	<div className="text-sm text-muted-foreground space-y-1">
+																		<div>Port: {domain.port}</div>
+																		{domain.host && (
+																			<div>Host: {domain.host}</div>
+																		)}
+																		{domain.path && (
+																			<div>Path: {domain.path}</div>
+																		)}
+																	</div>
+																</div>
+															),
+														)}
+													</div>
+												</div>
+											)}
+
+										{templateInfo?.template.envs &&
+											templateInfo.template.envs.length > 0 && (
+												<div className="space-y-4">
+													<div className="flex items-center gap-2">
+														<Code2 className="h-5 w-5 text-primary" />
+														<h3 className="text-lg font-semibold">
+															Environment Variables
+														</h3>
+													</div>
+													<div className="grid grid-cols-1 gap-2">
+														{templateInfo.template.envs.map((env, index) => (
+															<div
+																key={index}
+																className="rounded-lg truncate border bg-card p-2 font-mono text-sm"
+															>
+																{env}
+															</div>
+														))}
+													</div>
+												</div>
+											)}
+
+										{templateInfo?.template.mounts &&
+											templateInfo.template.mounts.length > 0 && (
+												<div className="space-y-4">
+													<div className="flex items-center gap-2">
+														<HardDrive className="h-5 w-5 text-primary" />
+														<h3 className="text-lg font-semibold">Mounts</h3>
+													</div>
+													<div className="grid grid-cols-1 gap-2">
+														{templateInfo.template.mounts.map(
+															(mount, index) => (
+																<div
+																	key={index}
+																	className="rounded-lg border bg-card p-2 font-mono text-sm hover:bg-accent cursor-pointer transition-colors"
+																	onClick={() => handleShowMountContent(mount)}
+																>
+																	{mount.filePath}
+																</div>
+															),
+														)}
+													</div>
+												</div>
+											)}
+									</div>
+
+									<div className="flex justify-end gap-2 pt-4">
+										<Button
+											variant="outline"
+											onClick={() => setShowModal(false)}
+										>
+											Cancel
+										</Button>
+										<Button
+											isLoading={isImporting}
+											type="submit"
+											onClick={form.handleSubmit(onSubmit)}
+											className="w-fit"
+										>
+											Import
+										</Button>
+									</div>
+								</DialogContent>
+							</Dialog>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+
+			<Dialog open={showMountContent} onOpenChange={setShowMountContent}>
+				<DialogContent className="max-w-[50vw]">
+					<DialogHeader>
+						<DialogTitle className="text-xl font-bold">
+							{selectedMount?.filePath}
+						</DialogTitle>
+						<DialogDescription>Mount File Content</DialogDescription>
+					</DialogHeader>
+
+					<ScrollArea className="h-[45vh] pr-4">
+						<CodeEditor
+							language="yaml"
+							value={selectedMount?.content || ""}
+							className="font-mono"
+							readOnly
+						/>
+					</ScrollArea>
+
+					<div className="flex justify-end gap-2 pt-4">
+						<Button onClick={() => setShowMountContent(false)}>Close</Button>
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+};

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

@@ -35,6 +35,9 @@ import { z } from "zod";
 
 const AddPortSchema = z.object({
 	publishedPort: z.number().int().min(1).max(65535),
+	publishMode: z.enum(["ingress", "host"], {
+		required_error: "Publish mode is required",
+	}),
 	targetPort: z.number().int().min(1).max(65535),
 	protocol: z.enum(["tcp", "udp"], {
 		required_error: "Protocol is required",
@@ -80,6 +83,7 @@ export const HandlePorts = ({
 	useEffect(() => {
 		form.reset({
 			publishedPort: data?.publishedPort ?? 0,
+			publishMode: data?.publishMode ?? "ingress",
 			targetPort: data?.targetPort ?? 0,
 			protocol: data?.protocol ?? "tcp",
 		});
@@ -120,7 +124,7 @@ export const HandlePorts = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Ports</DialogTitle>
 					<DialogDescription>
@@ -165,6 +169,32 @@ export const HandlePorts = ({
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="publishMode"
+								render={({ field }) => {
+									return (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Published Port Mode</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a publish mode for the port" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value={"ingress"}>Ingress</SelectItem>
+													<SelectItem value={"host"}>Host</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
 							<FormField
 								control={form.control}
 								name="targetPort"

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

@@ -60,7 +60,7 @@ export const ShowPorts = ({ applicationId }: Props) => {
 							{data?.ports.map((port) => (
 								<div key={port.portId}>
 									<div 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-3 flex-col gap-4 sm:gap-8">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 flex-col gap-4 sm:gap-8">
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Published Port</span>
 												<span className="text-sm text-muted-foreground">
@@ -68,7 +68,13 @@ export const ShowPorts = ({ applicationId }: Props) => {
 												</span>
 											</div>
 											<div className="flex flex-col gap-1">
-												<span className="font-medium"> Target Port</span>
+												<span className="font-medium">Published Port Mode</span>
+												<span className="text-sm text-muted-foreground">
+													{port?.publishMode?.toUpperCase()}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Target Port</span>
 												<span className="text-sm text-muted-foreground">
 													{port.targetPort}
 												</span>

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

@@ -179,7 +179,7 @@ export const HandleRedirect = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Redirects</DialogTitle>
 					<DialogDescription>

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

@@ -114,7 +114,7 @@ export const HandleSecurity = ({
 					<Button>{children}</Button>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Security</DialogTitle>
 					<DialogDescription>

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

@@ -122,7 +122,7 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 			<DialogTrigger asChild>
 				<Button isLoading={isLoading}>Modify</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>
 					<DialogDescription>Update the traefik config</DialogDescription>

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

@@ -1,3 +1,4 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -150,7 +151,7 @@ export const AddVolumes = ({
 			<DialogTrigger className="" asChild>
 				<Button>{children}</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Volumes / Mounts</DialogTitle>
 				</DialogHeader>
@@ -169,6 +170,23 @@ export const AddVolumes = ({
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-8 "
 					>
+						{type === "bind" && (
+							<AlertBlock>
+								<div className="space-y-2">
+									<p>
+										Make sure the host path is a valid path and exists in the
+										host machine.
+									</p>
+									<p className="text-sm text-muted-foreground">
+										<strong>Cluster Warning:</strong> If you're using cluster
+										features, bind mounts may cause deployment failures since
+										the path must exist on all worker/manager nodes. Consider
+										using external tools to distribute the folder across nodes
+										or use named volumes instead.
+									</p>
+								</div>
+							</AlertBlock>
+						)}
 						<FormField
 							control={form.control}
 							defaultValue={form.control._defaultValues.type}

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

@@ -186,7 +186,7 @@ export const UpdateVolume = ({
 					<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-3xl">
+			<DialogContent className="sm:max-w-3xl">
 				<DialogHeader>
 					<DialogTitle>Update</DialogTitle>
 					<DialogDescription>Update the mount</DialogDescription>
@@ -247,7 +247,7 @@ export const UpdateVolume = ({
 										control={form.control}
 										name="content"
 										render={({ field }) => (
-											<FormItem>
+											<FormItem className="max-w-full max-w-[45rem]">
 												<FormLabel>Content</FormLabel>
 												<FormControl>
 													<FormControl>
@@ -256,7 +256,7 @@ export const UpdateVolume = ({
 															placeholder={`NODE_ENV=production
 PORT=3000
 `}
-															className="h-96 font-mono"
+															className="h-96 font-mono w-full"
 															{...field}
 														/>
 													</FormControl>

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

@@ -1,6 +1,8 @@
+import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Form,
 	FormControl,
@@ -20,7 +22,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-enum BuildType {
+export enum BuildType {
 	dockerfile = "dockerfile",
 	heroku_buildpacks = "heroku_buildpacks",
 	paketo_buildpacks = "paketo_buildpacks",
@@ -29,9 +31,18 @@ enum BuildType {
 	railpack = "railpack",
 }
 
+const buildTypeDisplayMap: Record<BuildType, string> = {
+	[BuildType.dockerfile]: "Dockerfile",
+	[BuildType.railpack]: "Railpack",
+	[BuildType.nixpacks]: "Nixpacks",
+	[BuildType.heroku_buildpacks]: "Heroku Buildpacks",
+	[BuildType.paketo_buildpacks]: "Paketo Buildpacks",
+	[BuildType.static]: "Static",
+};
+
 const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
-		buildType: z.literal("dockerfile"),
+		buildType: z.literal(BuildType.dockerfile),
 		dockerfile: z
 			.string({
 				required_error: "Dockerfile path is required",
@@ -42,39 +53,92 @@ const mySchema = z.discriminatedUnion("buildType", [
 		dockerBuildStage: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("heroku_buildpacks"),
+		buildType: z.literal(BuildType.heroku_buildpacks),
 		herokuVersion: z.string().nullable().default(""),
 	}),
 	z.object({
-		buildType: z.literal("paketo_buildpacks"),
+		buildType: z.literal(BuildType.paketo_buildpacks),
 	}),
 	z.object({
-		buildType: z.literal("nixpacks"),
+		buildType: z.literal(BuildType.nixpacks),
 		publishDirectory: z.string().optional(),
 	}),
 	z.object({
-		buildType: z.literal("static"),
+		buildType: z.literal(BuildType.railpack),
 	}),
 	z.object({
-		buildType: z.literal("railpack"),
+		buildType: z.literal(BuildType.static),
+		isStaticSpa: z.boolean().default(false),
 	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
+
 interface Props {
 	applicationId: string;
 }
 
+interface ApplicationData {
+	buildType: BuildType;
+	dockerfile?: string | null;
+	dockerContextPath?: string | null;
+	dockerBuildStage?: string | null;
+	herokuVersion?: string | null;
+	publishDirectory?: string | null;
+	isStaticSpa?: boolean | null;
+}
+
+function isValidBuildType(value: string): value is BuildType {
+	return Object.values(BuildType).includes(value as BuildType);
+}
+
+const resetData = (data: ApplicationData): AddTemplate => {
+	switch (data.buildType) {
+		case BuildType.dockerfile:
+			return {
+				buildType: BuildType.dockerfile,
+				dockerfile: data.dockerfile || "",
+				dockerContextPath: data.dockerContextPath || "",
+				dockerBuildStage: data.dockerBuildStage || "",
+			};
+		case BuildType.heroku_buildpacks:
+			return {
+				buildType: BuildType.heroku_buildpacks,
+				herokuVersion: data.herokuVersion || "",
+			};
+		case BuildType.nixpacks:
+			return {
+				buildType: BuildType.nixpacks,
+				publishDirectory: data.publishDirectory || undefined,
+			};
+		case BuildType.paketo_buildpacks:
+			return {
+				buildType: BuildType.paketo_buildpacks,
+			};
+		case BuildType.static:
+			return {
+				buildType: BuildType.static,
+				isStaticSpa: data.isStaticSpa ?? false,
+			};
+		case BuildType.railpack:
+			return {
+				buildType: BuildType.railpack,
+			};
+		default: {
+			const buildType = data.buildType as BuildType;
+			return {
+				buildType,
+			} as AddTemplate;
+		}
+	}
+};
+
 export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	const { mutateAsync, isLoading } =
 		api.application.saveBuildType.useMutation();
 	const { data, refetch } = api.application.one.useQuery(
-		{
+		{ applicationId },
-			applicationId,
+		{ enabled: !!applicationId },
-		},
-		{
-			enabled: !!applicationId,
-		},
 	);
 
 	const form = useForm<AddTemplate>({
@@ -85,46 +149,38 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 	});
 
 	const buildType = form.watch("buildType");
+
 	useEffect(() => {
 		if (data) {
-			if (data.buildType === "dockerfile") {
+			const typedData: ApplicationData = {
-				form.reset({
+				...data,
-					buildType: data.buildType,
+				buildType: isValidBuildType(data.buildType)
-					...(data.buildType && {
+					? (data.buildType as BuildType)
-						dockerfile: data.dockerfile || "",
+					: BuildType.nixpacks, // fallback
-						dockerContextPath: data.dockerContextPath || "",
+			};
-						dockerBuildStage: data.dockerBuildStage || "",
+
-					}),
+			form.reset(resetData(typedData));
-				});
-			} else if (data.buildType === "heroku_buildpacks") {
-				form.reset({
-					buildType: data.buildType,
-					...(data.buildType && {
-						herokuVersion: data.herokuVersion || "",
-					}),
-				});
-			} else {
-				form.reset({
-					buildType: data.buildType,
-					publishDirectory: data.publishDirectory || undefined,
-				});
-			}
 		}
-	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
+	}, [data, form]);
 
 	const onSubmit = async (data: AddTemplate) => {
 		await mutateAsync({
 			applicationId,
 			buildType: data.buildType,
 			publishDirectory:
-				data.buildType === "nixpacks" ? data.publishDirectory : null,
+				data.buildType === BuildType.nixpacks ? data.publishDirectory : null,
-			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
+			dockerfile:
+				data.buildType === BuildType.dockerfile ? data.dockerfile : null,
 			dockerContextPath:
-				data.buildType === "dockerfile" ? data.dockerContextPath : null,
+				data.buildType === BuildType.dockerfile ? data.dockerContextPath : null,
 			dockerBuildStage:
-				data.buildType === "dockerfile" ? data.dockerBuildStage : null,
+				data.buildType === BuildType.dockerfile ? data.dockerBuildStage : null,
 			herokuVersion:
-				data.buildType === "heroku_buildpacks" ? data.herokuVersion : null,
+				data.buildType === BuildType.heroku_buildpacks
+					? data.herokuVersion
+					: null,
+			isStaticSpa:
+				data.buildType === BuildType.static ? data.isStaticSpa : null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -152,6 +208,22 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 			</CardHeader>
 			<CardContent>
 				<Form {...form}>
+					<AlertBlock>
+						Builders can consume significant memory and CPU resources
+						(recommended: 4+ GB RAM and 2+ CPU cores). For production
+						environments, please review our{" "}
+						<a
+							href="https://docs.dokploy.com/docs/core/applications/going-production"
+							target="_blank"
+							rel="noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Production Guide
+						</a>{" "}
+						for best practices and optimization recommendations. Builders are
+						suitable for development and prototyping purposes when you have
+						sufficient resources available.
+					</AlertBlock>
 					<form
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-4 p-2"
@@ -160,193 +232,167 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 							control={form.control}
 							name="buildType"
 							defaultValue={form.control._defaultValues.buildType}
-							render={({ field }) => {
+							render={({ field }) => (
-								return (
+								<FormItem className="space-y-3">
-									<FormItem className="space-y-3">
+									<FormLabel>Build Type</FormLabel>
-										<FormLabel>Build Type</FormLabel>
+									<FormControl>
-										<FormControl>
+										<RadioGroup
-											<RadioGroup
+											onValueChange={field.onChange}
-												onValueChange={field.onChange}
+											value={field.value}
-												value={field.value}
+											className="flex flex-col space-y-1"
-												className="flex flex-col space-y-1"
+										>
-											>
+											{Object.entries(buildTypeDisplayMap).map(
-												<FormItem className="flex items-center space-x-3 space-y-0">
+												([value, label]) => (
-													<FormControl>
+													<FormItem
-														<RadioGroupItem value="dockerfile" />
+														key={value}
-													</FormControl>
+														className="flex items-center space-x-3 space-y-0"
-													<FormLabel className="font-normal">
+													>
-														Dockerfile
+														<FormControl>
-													</FormLabel>
+															<RadioGroupItem value={value} />
-												</FormItem>
+														</FormControl>
-												<FormItem className="flex items-center space-x-3 space-y-0">
+														<FormLabel className="font-normal">
-													<FormControl>
+															{label}
-														<RadioGroupItem value="railpack" />
+															{value === BuildType.railpack && (
-													</FormControl>
+																<Badge className="ml-2 px-1 text-xs">New</Badge>
-													<FormLabel className="font-normal">
+															)}
-														Railpack{" "}
+														</FormLabel>
-														<Badge className="ml-1 text-xs px-1">New</Badge>
+													</FormItem>
-													</FormLabel>
+												),
-												</FormItem>
+											)}
-												<FormItem className="flex items-center space-x-3 space-y-0">
+										</RadioGroup>
-													<FormControl>
+									</FormControl>
-														<RadioGroupItem value="nixpacks" />
+									<FormMessage />
-													</FormControl>
+								</FormItem>
-													<FormLabel className="font-normal">
+							)}
-														Nixpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="heroku_buildpacks" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Heroku Buildpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="paketo_buildpacks" />
-													</FormControl>
-													<FormLabel className="font-normal">
-														Paketo Buildpacks
-													</FormLabel>
-												</FormItem>
-												<FormItem className="flex items-center space-x-3 space-y-0">
-													<FormControl>
-														<RadioGroupItem value="static" />
-													</FormControl>
-													<FormLabel className="font-normal">Static</FormLabel>
-												</FormItem>
-											</RadioGroup>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								);
-							}}
 						/>
-						{buildType === "heroku_buildpacks" && (
+						{buildType === BuildType.heroku_buildpacks && (
 							<FormField
 								control={form.control}
 								name="herokuVersion"
-								render={({ field }) => {
+								render={({ field }) => (
-									return (
+									<FormItem>
-										<FormItem>
+										<FormLabel>Heroku Version (Optional)</FormLabel>
-											<FormLabel>Heroku Version (Optional)</FormLabel>
+										<FormControl>
-											<FormControl>
+											<Input
-												<Input
+												placeholder="Heroku Version (Default: 24)"
-													placeholder={"Heroku Version (Default: 24)"}
+												{...field}
-													{...field}
+												value={field.value ?? ""}
-													value={field.value ?? ""}
+											/>
-												/>
+										</FormControl>
-											</FormControl>
+										<FormMessage />
-
+									</FormItem>
-											<FormMessage />
+								)}
-										</FormItem>
-									);
-								}}
 							/>
 						)}
-						{buildType === "dockerfile" && (
+						{buildType === BuildType.dockerfile && (
 							<>
 								<FormField
 									control={form.control}
 									name="dockerfile"
-									render={({ field }) => {
+									render={({ field }) => (
-										return (
-											<FormItem>
-												<FormLabel>Docker File</FormLabel>
-												<FormControl>
-													<Input
-														placeholder={"Path of your docker file"}
-														{...field}
-														value={field.value ?? ""}
-													/>
-												</FormControl>
-
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="dockerContextPath"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<FormLabel>Docker Context Path</FormLabel>
-												<FormControl>
-													<Input
-														placeholder={
-															"Path of your docker context default: ."
-														}
-														{...field}
-														value={field.value ?? ""}
-													/>
-												</FormControl>
-
-												<FormMessage />
-											</FormItem>
-										);
-									}}
-								/>
-
-								<FormField
-									control={form.control}
-									name="dockerBuildStage"
-									render={({ field }) => {
-										return (
-											<FormItem>
-												<div className="space-y-0.5">
-													<FormLabel>Docker Build Stage</FormLabel>
-													<FormDescription>
-														Allows you to target a specific stage in a
-														Multi-stage Dockerfile. If empty, Docker defaults to
-														build the last defined stage.
-													</FormDescription>
-												</div>
-												<FormControl>
-													<Input
-														placeholder={"E.g. production"}
-														{...field}
-														value={field.value ?? ""}
-													/>
-												</FormControl>
-											</FormItem>
-										);
-									}}
-								/>
-							</>
-						)}
-
-						{buildType === "nixpacks" && (
-							<FormField
-								control={form.control}
-								name="publishDirectory"
-								render={({ field }) => {
-									return (
 										<FormItem>
-											<div className="space-y-0.5">
+											<FormLabel>Docker File</FormLabel>
-												<FormLabel>Publish Directory</FormLabel>
-												<FormDescription>
-													Allows you to serve a single directory via NGINX after
-													the build phase. Useful if the final build assets
-													should be served as a static site.
-												</FormDescription>
-											</div>
 											<FormControl>
 												<Input
-													placeholder={"Publish Directory"}
+													placeholder="Path of your docker file"
 													{...field}
 													value={field.value ?? ""}
 												/>
 											</FormControl>
-
 											<FormMessage />
 										</FormItem>
-									);
+									)}
-								}}
+								/>
+								<FormField
+									control={form.control}
+									name="dockerContextPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Docker Context Path</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Path of your docker context (default: .)"
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="dockerBuildStage"
+									render={({ field }) => (
+										<FormItem>
+											<div className="space-y-0.5">
+												<FormLabel>Docker Build Stage</FormLabel>
+												<FormDescription>
+													Allows you to target a specific stage in a Multi-stage
+													Dockerfile. If empty, Docker defaults to build the
+													last defined stage.
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Input
+													placeholder="E.g. production"
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+						{buildType === BuildType.nixpacks && (
+							<FormField
+								control={form.control}
+								name="publishDirectory"
+								render={({ field }) => (
+									<FormItem>
+										<div className="space-y-0.5">
+											<FormLabel>Publish Directory</FormLabel>
+											<FormDescription>
+												Allows you to serve a single directory via NGINX after
+												the build phase. Useful if the final build assets should
+												be served as a static site.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Input
+												placeholder="Publish Directory"
+												{...field}
+												value={field.value ?? ""}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+						{buildType === BuildType.static && (
+							<FormField
+								control={form.control}
+								name="isStaticSpa"
+								render={({ field }) => (
+									<FormItem>
+										<FormControl>
+											<div className="flex items-center gap-x-2 p-2">
+												<Checkbox
+													id="checkboxIsStaticSpa"
+													value={String(field.value)}
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+												<FormLabel htmlFor="checkboxIsStaticSpa">
+													Single Page Application (SPA)
+												</FormLabel>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
 						)}
 						<div className="flex w-full justify-end">

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

@@ -15,11 +15,15 @@ import { Paintbrush } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type: "application" | "compose";
 }
 
-export const CancelQueues = ({ applicationId }: Props) => {
+export const CancelQueues = ({ id, type }: Props) => {
-	const { mutateAsync, isLoading } = api.application.cleanQueues.useMutation();
+	const { mutateAsync, isLoading } =
+		type === "application"
+			? api.application.cleanQueues.useMutation()
+			: api.compose.cleanQueues.useMutation();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	if (isCloud) {
@@ -48,7 +52,8 @@ export const CancelQueues = ({ applicationId }: Props) => {
 					<AlertDialogAction
 						onClick={async () => {
 							await mutateAsync({
-								applicationId,
+								applicationId: id || "",
+								composeId: id || "",
 							})
 								.then(() => {
 									toast.success("Queues are being cleaned");

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

@@ -14,10 +14,14 @@ import { RefreshCcw } from "lucide-react";
 import { toast } from "sonner";
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type: "application" | "compose";
 }
-export const RefreshToken = ({ applicationId }: Props) => {
+export const RefreshToken = ({ id, type }: Props) => {
-	const { mutateAsync } = api.application.refreshToken.useMutation();
+	const { mutateAsync } =
+		type === "application"
+			? api.application.refreshToken.useMutation()
+			: api.compose.refreshToken.useMutation();
 	const utils = api.useUtils();
 	return (
 		<AlertDialog>
@@ -37,12 +41,19 @@ export const RefreshToken = ({ applicationId }: Props) => {
 					<AlertDialogAction
 						onClick={async () => {
 							await mutateAsync({
-								applicationId,
+								applicationId: id || "",
+								composeId: id || "",
 							})
 								.then(() => {
-									utils.application.one.invalidate({
+									if (type === "application") {
-										applicationId,
+										utils.application.one.invalidate({
-									});
+											applicationId: id,
+										});
+									} else {
+										utils.compose.one.invalidate({
+											composeId: id,
+										});
+									}
 									toast.success("Refresh updated");
 								})
 								.catch(() => {

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

@@ -124,7 +124,7 @@ export const ShowDeployment = ({
 				}
 			}}
 		>
-			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+			<DialogContent className={"sm:max-w-5xl"}>
 				<DialogHeader>
 					<DialogTitle>Deployment</DialogTitle>
 					<DialogDescription className="flex items-center gap-2">

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

@@ -0,0 +1,70 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+
+import type { RouterOutputs } from "@/utils/api";
+import { useState } from "react";
+import { ShowDeployment } from "../deployments/show-deployment";
+import { ShowDeployments } from "./show-deployments";
+
+interface Props {
+	id: string;
+	type:
+		| "application"
+		| "compose"
+		| "schedule"
+		| "server"
+		| "backup"
+		| "previewDeployment"
+		| "volumeBackup";
+	serverId?: string;
+	refreshToken?: string;
+	children?: React.ReactNode;
+}
+
+export const formatDuration = (seconds: number) => {
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	const remainingSeconds = seconds % 60;
+	return `${minutes}m ${remainingSeconds}s`;
+};
+
+export const ShowDeploymentsModal = ({
+	id,
+	type,
+	serverId,
+	refreshToken,
+	children,
+}: Props) => {
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{children ? (
+					children
+				) : (
+					<Button className="sm:w-auto w-full" size="sm" variant="outline">
+						View Logs
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-5xl p-0">
+				<ShowDeployments
+					id={id}
+					type={type}
+					serverId={serverId}
+					refreshToken={refreshToken}
+				/>
+			</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/deployments/show-deployments.tsx

@@ -1,5 +1,6 @@
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -9,28 +10,61 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { RocketIcon } from "lucide-react";
+import { Clock, Loader2, RocketIcon, Settings, RefreshCcw } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
+import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { toast } from "sonner";
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type:
+		| "application"
+		| "compose"
+		| "schedule"
+		| "server"
+		| "backup"
+		| "previewDeployment"
+		| "volumeBackup";
+	refreshToken?: string;
+	serverId?: string;
 }
 
-export const ShowDeployments = ({ applicationId }: Props) => {
+export const formatDuration = (seconds: number) => {
+	if (seconds < 60) return `${seconds}s`;
+	const minutes = Math.floor(seconds / 60);
+	const remainingSeconds = seconds % 60;
+	return `${minutes}m ${remainingSeconds}s`;
+};
+
+export const ShowDeployments = ({
+	id,
+	type,
+	refreshToken,
+	serverId,
+}: Props) => {
 	const [activeLog, setActiveLog] = useState<
 		RouterOutputs["deployment"]["all"][number] | null
 	>(null);
-	const { data } = api.application.one.useQuery({ applicationId });
+	const { data: deployments, isLoading: isLoadingDeployments } =
-	const { data: deployments } = api.deployment.all.useQuery(
+		api.deployment.allByType.useQuery(
-		{ applicationId },
+			{
-		{
+				id,
-			enabled: !!applicationId,
+				type,
-			refetchInterval: 1000,
+			},
-		},
+			{
-	);
+				enabled: !!id,
+				refetchInterval: 1000,
+			},
+		);
+
+	const { mutateAsync: rollback, isLoading: isRollingBack } =
+		api.rollback.rollback.useMutation();
+	const { mutateAsync: killProcess, isLoading: isKillingProcess } =
+		api.deployment.killProcess.useMutation();
 
 	const [url, setUrl] = React.useState("");
 	useEffect(() => {
@@ -38,34 +72,57 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 	}, []);
 
 	return (
-		<Card className="bg-background">
+		<Card className="bg-background border-none">
 			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
 				<div className="flex flex-col gap-2">
 					<CardTitle className="text-xl">Deployments</CardTitle>
 					<CardDescription>
-						See all the 10 last deployments for this application
+						See all the 10 last deployments for this {type}
 					</CardDescription>
 				</div>
-				<CancelQueues applicationId={applicationId} />
+				<div className="flex flex-row items-center gap-2">
+					{(type === "application" || type === "compose") && (
+						<CancelQueues id={id} type={type} />
+					)}
+					{type === "application" && (
+						<ShowRollbackSettings applicationId={id}>
+							<Button variant="outline">
+								Configure Rollbacks <Settings className="size-4" />
+							</Button>
+						</ShowRollbackSettings>
+					)}
+				</div>
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
-				<div className="flex flex-col gap-2 text-sm">
+				{refreshToken && (
-					<span>
+					<div className="flex flex-col gap-2 text-sm">
-						If you want to re-deploy this application use this URL in the config
+						<span>
-						of your git provider or docker
+							If you want to re-deploy this application use this URL in the
-					</span>
+							config of your git provider or docker
-					<div className="flex flex-row items-center gap-2 flex-wrap">
+						</span>
-						<span>Webhook URL: </span>
+						<div className="flex flex-row items-center gap-2 flex-wrap">
-						<div className="flex flex-row items-center gap-2">
+							<span>Webhook URL: </span>
-							<span className="break-all text-muted-foreground">
+							<div className="flex flex-row items-center gap-2">
-								{`${url}/api/deploy/${data?.refreshToken}`}
+								<span className="break-all text-muted-foreground">
-							</span>
+									{`${url}/api/deploy${type === "compose" ? "/compose" : ""}/${refreshToken}`}
-							<RefreshToken applicationId={applicationId} />
+								</span>
+								{(type === "application" || type === "compose") && (
+									<RefreshToken id={id} type={type} />
+								)}
+							</div>
 						</div>
 					</div>
-				</div>
+				)}
-				{data?.deployments?.length === 0 ? (
+
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+				{isLoadingDeployments ? (
+					<div className="flex w-full flex-row items-center justify-center gap-3 pt-10 min-h-[25vh]">
+						<Loader2 className="size-6 text-muted-foreground animate-spin" />
+						<span className="text-base text-muted-foreground">
+							Loading deployments...
+						</span>
+					</div>
+				) : deployments?.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10 min-h-[25vh]">
 						<RocketIcon className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground">
 							No deployments found
@@ -96,24 +153,99 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 									)}
 								</div>
 								<div className="flex flex-col items-end gap-2">
-									<div className="text-sm capitalize text-muted-foreground">
+									<div className="text-sm capitalize text-muted-foreground flex items-center gap-2">
 										<DateTooltip date={deployment.createdAt} />
+										{deployment.startedAt && deployment.finishedAt && (
+											<Badge
+												variant="outline"
+												className="text-[10px] gap-1 flex items-center"
+											>
+												<Clock className="size-3" />
+												{formatDuration(
+													Math.floor(
+														(new Date(deployment.finishedAt).getTime() -
+															new Date(deployment.startedAt).getTime()) /
+															1000,
+													),
+												)}
+											</Badge>
+										)}
 									</div>
 
-									<Button
+									<div className="flex flex-row items-center gap-2">
-										onClick={() => {
+										{deployment.pid && deployment.status === "running" && (
-											setActiveLog(deployment);
+											<DialogAction
-										}}
+												title="Kill Process"
-									>
+												description="Are you sure you want to kill the process?"
-										View
+												type="default"
-									</Button>
+												onClick={async () => {
+													await killProcess({
+														deploymentId: deployment.deploymentId,
+													})
+														.then(() => {
+															toast.success("Process killed successfully");
+														})
+														.catch(() => {
+															toast.error("Error killing process");
+														});
+												}}
+											>
+												<Button
+													variant="destructive"
+													size="sm"
+													isLoading={isKillingProcess}
+												>
+													Kill Process
+												</Button>
+											</DialogAction>
+										)}
+										<Button
+											onClick={() => {
+												setActiveLog(deployment);
+											}}
+										>
+											View
+										</Button>
+
+										{deployment?.rollback &&
+											deployment.status === "done" &&
+											type === "application" && (
+												<DialogAction
+													title="Rollback to this deployment"
+													description="Are you sure you want to rollback to this deployment?"
+													type="default"
+													onClick={async () => {
+														await rollback({
+															rollbackId: deployment.rollback.rollbackId,
+														})
+															.then(() => {
+																toast.success(
+																	"Rollback initiated successfully",
+																);
+															})
+															.catch(() => {
+																toast.error("Error initiating rollback");
+															});
+													}}
+												>
+													<Button
+														variant="secondary"
+														size="sm"
+														isLoading={isRollingBack}
+													>
+														<RefreshCcw className="size-4 text-primary group-hover:text-red-500" />
+														Rollback
+													</Button>
+												</DialogAction>
+											)}
+									</div>
 								</div>
 							</div>
 						))}
 					</div>
 				)}
 				<ShowDeployment
-					serverId={data?.serverId || ""}
+					serverId={serverId}
 					open={Boolean(activeLog && activeLog.logPath !== null)}
 					onClose={() => setActiveLog(null)}
 					logPath={activeLog?.logPath || ""}

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

@@ -1,301 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, NumberInput } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import { domain } from "@/server/db/validations/domain";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Dices } from "lucide-react";
-import type z from "zod";
-
-type Domain = z.infer<typeof domain>;
-
-interface Props {
-	applicationId: string;
-	domainId?: string;
-	children: React.ReactNode;
-}
-
-export const AddDomain = ({
-	applicationId,
-	domainId = "",
-	children,
-}: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
-	const { data, refetch } = api.domain.one.useQuery(
-		{
-			domainId,
-		},
-		{
-			enabled: !!domainId,
-		},
-	);
-
-	const { data: application } = api.application.one.useQuery(
-		{
-			applicationId,
-		},
-		{
-			enabled: !!applicationId,
-		},
-	);
-
-	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,
-			applicationId,
-			...data,
-		})
-			.then(async () => {
-				toast.success(dictionary.success);
-				await utils.domain.byApplicationId.invalidate({
-					applicationId,
-				});
-				await utils.application.readTraefikConfig.invalidate({ 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: application?.appName || "",
-																		serverId: 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/domains/dns-helper-modal.tsx

@@ -0,0 +1,109 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Copy, HelpCircle, Server } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	domain: {
+		host: string;
+		https: boolean;
+		path?: string;
+	};
+	serverIp?: string;
+}
+
+export const DnsHelperModal = ({ domain, serverIp }: Props) => {
+	const copyToClipboard = (text: string) => {
+		navigator.clipboard.writeText(text);
+		toast.success("Copied to clipboard!");
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger>
+				<Button variant="ghost" size="icon" className="group">
+					<HelpCircle className="size-4" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle className="flex items-center gap-2">
+						<Server className="size-5" />
+						DNS Configuration Guide
+					</DialogTitle>
+					<DialogDescription>
+						Follow these steps to configure your DNS records for {domain.host}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<AlertBlock type="info">
+						To make your domain accessible, you need to configure your DNS
+						records with your domain provider (e.g., Cloudflare, GoDaddy,
+						NameCheap).
+					</AlertBlock>
+
+					<div className="flex flex-col gap-6">
+						<div className="rounded-lg border p-4">
+							<h3 className="font-medium mb-2">1. Add A Record</h3>
+							<div className="flex flex-col gap-3">
+								<p className="text-sm text-muted-foreground">
+									Create an A record that points your domain to the server's IP
+									address:
+								</p>
+								<div className="flex flex-col gap-2">
+									<div className="flex items-center justify-between gap-2 bg-muted p-3 rounded-md">
+										<div>
+											<p className="text-sm font-medium">Type: A</p>
+											<p className="text-sm">
+												Name: @ or {domain.host.split(".")[0]}
+											</p>
+											<p className="text-sm">
+												Value: {serverIp || "Your server IP"}
+											</p>
+										</div>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => copyToClipboard(serverIp || "")}
+											disabled={!serverIp}
+										>
+											<Copy className="size-4" />
+										</Button>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="rounded-lg border p-4">
+							<h3 className="font-medium mb-2">2. Verify Configuration</h3>
+							<div className="flex flex-col gap-3">
+								<p className="text-sm text-muted-foreground">
+									After configuring your DNS records:
+								</p>
+								<ul className="list-disc list-inside space-y-1 text-sm">
+									<li>Wait for DNS propagation (usually 15-30 minutes)</li>
+									<li>
+										Test your domain by visiting:{" "}
+										{domain.https ? "https://" : "http://"}
+										{domain.host}
+										{domain.path || "/"}
+									</li>
+									<li>Use a DNS lookup tool to verify your records</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,670 @@
+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 { zodResolver } from "@hookform/resolvers/zod";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import z from "zod";
+
+export type CacheType = "fetch" | "cache";
+
+export const domain = z
+	.object({
+		host: z.string().min(1, { message: "Add a hostname" }),
+		path: z.string().min(1).optional(),
+		internalPath: z.string().optional(),
+		stripPath: z.boolean().optional(),
+		port: z
+			.number()
+			.min(1, { message: "Port must be at least 1" })
+			.max(65535, { message: "Port must be 65535 or below" })
+			.optional(),
+		https: z.boolean().optional(),
+		certificateType: z.enum(["letsencrypt", "none", "custom"]).optional(),
+		customCertResolver: z.string().optional(),
+		serviceName: z.string().optional(),
+		domainType: z.enum(["application", "compose", "preview"]).optional(),
+	})
+	.superRefine((input, ctx) => {
+		if (input.https && !input.certificateType) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["certificateType"],
+				message: "Required",
+			});
+		}
+
+		if (input.certificateType === "custom" && !input.customCertResolver) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["customCertResolver"],
+				message: "Required",
+			});
+		}
+
+		if (input.domainType === "compose" && !input.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["serviceName"],
+				message: "Required",
+			});
+		}
+
+		// Validate stripPath requires a valid path
+		if (input.stripPath && (!input.path || input.path === "/")) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["stripPath"],
+				message:
+					"Strip path can only be enabled when a path other than '/' is specified",
+			});
+		}
+
+		// Validate internalPath starts with /
+		if (
+			input.internalPath &&
+			input.internalPath !== "/" &&
+			!input.internalPath.startsWith("/")
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["internalPath"],
+				message: "Internal path must start with '/'",
+			});
+		}
+	});
+
+type Domain = z.infer<typeof domain>;
+
+interface Props {
+	id: string;
+	type: "application" | "compose";
+	domainId?: string;
+	children: React.ReactNode;
+}
+
+export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+
+	const utils = api.useUtils();
+	const { data, refetch } = api.domain.one.useQuery(
+		{
+			domainId,
+		},
+		{
+			enabled: !!domainId,
+		},
+	);
+
+	const { data: application } =
+		type === "application"
+			? api.application.one.useQuery(
+					{
+						applicationId: id,
+					},
+					{
+						enabled: !!id,
+					},
+				)
+			: api.compose.one.useQuery(
+					{
+						composeId: id,
+					},
+					{
+						enabled: !!id,
+					},
+				);
+
+	const { mutateAsync, isError, error, isLoading } = domainId
+		? api.domain.update.useMutation()
+		: api.domain.create.useMutation();
+
+	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
+		api.domain.generateDomain.useMutation();
+
+	const { data: canGenerateTraefikMeDomains } =
+		api.domain.canGenerateTraefikMeDomains.useQuery({
+			serverId: application?.serverId || "",
+		});
+
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: id,
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: type === "compose" && !!id,
+		},
+	);
+
+	const form = useForm<Domain>({
+		resolver: zodResolver(domain),
+		defaultValues: {
+			host: "",
+			path: undefined,
+			internalPath: undefined,
+			stripPath: false,
+			port: undefined,
+			https: false,
+			certificateType: undefined,
+			customCertResolver: undefined,
+			serviceName: undefined,
+			domainType: type,
+		},
+		mode: "onChange",
+	});
+
+	const certificateType = form.watch("certificateType");
+	const https = form.watch("https");
+	const domainType = form.watch("domainType");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				...data,
+				/* Convert null to undefined */
+				path: data?.path || undefined,
+				internalPath: data?.internalPath || undefined,
+				stripPath: data?.stripPath || false,
+				port: data?.port || undefined,
+				certificateType: data?.certificateType || undefined,
+				customCertResolver: data?.customCertResolver || undefined,
+				serviceName: data?.serviceName || undefined,
+				domainType: data?.domainType || type,
+			});
+		}
+
+		if (!domainId) {
+			form.reset({
+				host: "",
+				path: undefined,
+				internalPath: undefined,
+				stripPath: false,
+				port: undefined,
+				https: false,
+				certificateType: undefined,
+				customCertResolver: undefined,
+				domainType: type,
+			});
+		}
+	}, [form, data, isLoading, domainId]);
+
+	// Separate effect for handling custom cert resolver validation
+	useEffect(() => {
+		if (certificateType === "custom") {
+			form.trigger("customCertResolver");
+		}
+	}, [certificateType, form]);
+
+	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,
+			...(data.domainType === "application" && {
+				applicationId: id,
+			}),
+			...(data.domainType === "compose" && {
+				composeId: id,
+			}),
+			...data,
+		})
+			.then(async () => {
+				toast.success(dictionary.success);
+
+				if (data.domainType === "application") {
+					await utils.domain.byApplicationId.invalidate({
+						applicationId: id,
+					});
+					await utils.application.readTraefikConfig.invalidate({
+						applicationId: id,
+					});
+				} else if (data.domainType === "compose") {
+					await utils.domain.byComposeId.invalidate({
+						composeId: id,
+					});
+				}
+
+				if (domainId) {
+					refetch();
+				}
+				setIsOpen(false);
+			})
+			.catch((e) => {
+				console.log(e);
+				toast.error(dictionary.error);
+			});
+	};
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger className="" asChild>
+				{children}
+			</DialogTrigger>
+			<DialogContent className="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">
+								<div className="flex flex-row items-end w-full gap-4">
+									{domainType === "compose" && (
+										<div className="flex flex-col gap-2 w-full">
+											{errorServices && (
+												<AlertBlock
+													type="warning"
+													className="[overflow-wrap:anywhere]"
+												>
+													{errorServices?.message}
+												</AlertBlock>
+											)}
+											<FormField
+												control={form.control}
+												name="serviceName"
+												render={({ field }) => (
+													<FormItem className="w-full">
+														<FormLabel>Service Name</FormLabel>
+														<div className="flex gap-2">
+															<Select
+																onValueChange={field.onChange}
+																defaultValue={field.value || ""}
+															>
+																<FormControl>
+																	<SelectTrigger>
+																		<SelectValue placeholder="Select a service name" />
+																	</SelectTrigger>
+																</FormControl>
+
+																<SelectContent>
+																	{services?.map((service, index) => (
+																		<SelectItem
+																			value={service}
+																			key={`${service}-${index}`}
+																		>
+																			{service}
+																		</SelectItem>
+																	))}
+																	<SelectItem value="none" disabled>
+																		Empty
+																	</SelectItem>
+																</SelectContent>
+															</Select>
+															<TooltipProvider delayDuration={0}>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="secondary"
+																			type="button"
+																			isLoading={isLoadingServices}
+																			onClick={() => {
+																				if (cacheType === "fetch") {
+																					refetchServices();
+																				} else {
+																					setCacheType("fetch");
+																				}
+																			}}
+																		>
+																			<RefreshCw className="size-4 text-muted-foreground" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		side="left"
+																		sideOffset={5}
+																		className="max-w-[10rem]"
+																	>
+																		<p>
+																			Fetch: Will clone the repository and load
+																			the services
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+															<TooltipProvider delayDuration={0}>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="secondary"
+																			type="button"
+																			isLoading={isLoadingServices}
+																			onClick={() => {
+																				if (cacheType === "cache") {
+																					refetchServices();
+																				} else {
+																					setCacheType("cache");
+																				}
+																			}}
+																		>
+																			<DatabaseZap className="size-4 text-muted-foreground" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		side="left"
+																		sideOffset={5}
+																		className="max-w-[10rem]"
+																	>
+																		<p>
+																			Cache: If you previously deployed this
+																			compose, it will read the services from
+																			the last deployment/fetch from the
+																			repository
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														</div>
+
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</div>
+									)}
+								</div>
+								<FormField
+									control={form.control}
+									name="host"
+									render={({ field }) => (
+										<FormItem>
+											{!canGenerateTraefikMeDomains &&
+												field.value.includes("traefik.me") && (
+													<AlertBlock type="warning">
+														You need to set an IP address in your{" "}
+														<Link
+															href="/dashboard/settings/server"
+															className="text-primary"
+														>
+															{application?.serverId
+																? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+																: "Web Server -> Server -> Update Server IP"}
+														</Link>{" "}
+														to make your traefik.me domain work.
+													</AlertBlock>
+												)}
+											<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: application?.appName || "",
+																		serverId: 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="internalPath"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Internal Path</FormLabel>
+												<FormDescription>
+													The path where your application expects to receive
+													requests internally (defaults to "/")
+												</FormDescription>
+												<FormControl>
+													<Input placeholder={"/"} {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+
+								<FormField
+									control={form.control}
+									name="stripPath"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Strip Path</FormLabel>
+												<FormDescription>
+													Remove the external path from the request before
+													forwarding to the application
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="port"
+									render={({ field }) => {
+										return (
+											<FormItem>
+												<FormLabel>Container Port</FormLabel>
+												<FormDescription>
+													The port where your application is running inside the
+													container (e.g., 3000 for Node.js, 80 for Nginx, 8080
+													for Java)
+												</FormDescription>
+												<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>
+									)}
+								/>
+
+								{https && (
+									<>
+										<FormField
+											control={form.control}
+											name="certificateType"
+											render={({ field }) => {
+												return (
+													<FormItem>
+														<FormLabel>Certificate Provider</FormLabel>
+														<Select
+															onValueChange={(value) => {
+																field.onChange(value);
+																if (value !== "custom") {
+																	form.setValue(
+																		"customCertResolver",
+																		undefined,
+																	);
+																}
+															}}
+															value={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>
+																<SelectItem value={"custom"}>Custom</SelectItem>
+															</SelectContent>
+														</Select>
+														<FormMessage />
+													</FormItem>
+												);
+											}}
+										/>
+
+										{certificateType === "custom" && (
+											<FormField
+												control={form.control}
+												name="customCertResolver"
+												render={({ field }) => {
+													return (
+														<FormItem>
+															<FormLabel>Custom Certificate Resolver</FormLabel>
+															<FormControl>
+																<Input
+																	className="w-full"
+																	placeholder="Enter your custom certificate resolver"
+																	{...field}
+																	value={field.value || ""}
+																	onChange={(e) => {
+																		field.onChange(e);
+																		form.trigger("customCertResolver");
+																	}}
+																/>
+															</FormControl>
+															<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/domains/show-domains.tsx

@@ -1,4 +1,5 @@
 import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -7,29 +8,135 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
+import {
+	CheckCircle2,
+	ExternalLink,
+	GlobeIcon,
+	InfoIcon,
+	Loader2,
+	PenBoxIcon,
+	RefreshCw,
+	Server,
+	Trash2,
+	XCircle,
+} from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 import { toast } from "sonner";
-import { AddDomain } from "./add-domain";
+import { DnsHelperModal } from "./dns-helper-modal";
+import { AddDomain } from "./handle-domain";
+
+export type ValidationState = {
+	isLoading: boolean;
+	isValid?: boolean;
+	error?: string;
+	resolvedIp?: string;
+	message?: string;
+	cdnProvider?: string;
+};
+
+export type ValidationStates = Record<string, ValidationState>;
 
 interface Props {
-	applicationId: string;
+	id: string;
+	type: "application" | "compose";
 }
 
-export const ShowDomains = ({ applicationId }: Props) => {
+export const ShowDomains = ({ id, type }: Props) => {
-	const { data, refetch } = api.domain.byApplicationId.useQuery(
+	const { data: application } =
-		{
+		type === "application"
-			applicationId,
+			? api.application.one.useQuery(
-		},
+					{
-		{
+						applicationId: id,
-			enabled: !!applicationId,
+					},
-		},
+					{
+						enabled: !!id,
+					},
+				)
+			: api.compose.one.useQuery(
+					{
+						composeId: id,
+					},
+					{
+						enabled: !!id,
+					},
+				);
+	const [validationStates, setValidationStates] = useState<ValidationStates>(
+		{},
 	);
+	const { data: ip } = api.settings.getIp.useQuery();
 
+	const {
+		data,
+		refetch,
+		isLoading: isLoadingDomains,
+	} = type === "application"
+		? api.domain.byApplicationId.useQuery(
+				{
+					applicationId: id,
+				},
+				{
+					enabled: !!id,
+				},
+			)
+		: api.domain.byComposeId.useQuery(
+				{
+					composeId: id,
+				},
+				{
+					enabled: !!id,
+				},
+			);
+
+	const { mutateAsync: validateDomain } =
+		api.domain.validateDomain.useMutation();
 	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
 		api.domain.delete.useMutation();
 
+	const handleValidateDomain = async (host: string) => {
+		setValidationStates((prev) => ({
+			...prev,
+			[host]: { isLoading: true },
+		}));
+
+		try {
+			const result = await validateDomain({
+				domain: host,
+				serverIp:
+					application?.server?.ipAddress?.toString() || ip?.toString() || "",
+			});
+
+			setValidationStates((prev) => ({
+				...prev,
+				[host]: {
+					isLoading: false,
+					isValid: result.isValid,
+					error: result.error,
+					resolvedIp: result.resolvedIp,
+					cdnProvider: result.cdnProvider,
+					message: result.error && result.isValid ? result.error : undefined,
+				},
+			}));
+		} catch (err) {
+			const error = err as Error;
+			setValidationStates((prev) => ({
+				...prev,
+				[host]: {
+					isLoading: false,
+					isValid: false,
+					error: error.message || "Failed to validate domain",
+				},
+			}));
+		}
+	};
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -43,7 +150,7 @@ export const ShowDomains = ({ applicationId }: Props) => {
 
 					<div className="flex flex-row gap-4 flex-wrap">
 						{data && data?.length > 0 && (
-							<AddDomain applicationId={applicationId}>
+							<AddDomain id={id} type={type}>
 								<Button>
 									<GlobeIcon className="size-4" /> Add Domain
 								</Button>
@@ -52,15 +159,22 @@ export const ShowDomains = ({ applicationId }: Props) => {
 					</div>
 				</CardHeader>
 				<CardContent className="flex w-full flex-row gap-4">
-					{data?.length === 0 ? (
+					{isLoadingDomains ? (
-						<div className="flex w-full flex-col items-center justify-center gap-3">
+						<div className="flex w-full flex-row gap-4 min-h-[40vh] justify-center items-center">
+							<Loader2 className="size-5 animate-spin text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								Loading domains...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[40vh]">
 							<GlobeIcon className="size-8 text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
 								To access the application it is required to set at least 1
 								domain
 							</span>
 							<div className="flex flex-row gap-4 flex-wrap">
-								<AddDomain applicationId={applicationId}>
+								<AddDomain id={id} type={type}>
 									<Button>
 										<GlobeIcon className="size-4" /> Add Domain
 									</Button>
@@ -68,73 +182,216 @@ export const ShowDomains = ({ applicationId }: Props) => {
 							</div>
 						</div>
 					) : (
-						<div className="flex w-full flex-col gap-4">
+						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
 							{data?.map((item) => {
+								const validationState = validationStates[item.host];
 								return (
-									<div
+									<Card
 										key={item.domainId}
-										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
+										className="relative overflow-hidden w-full border transition-all hover:shadow-md bg-transparent h-fit"
 									>
-										<Link
+										<CardContent className="p-6">
-											className="md:basis-1/2 flex gap-2  items-center hover:underline transition-all w-full"
+											<div className="flex flex-col gap-4">
-											target="_blank"
+												{/* Service & Domain Info */}
-											href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
+												<div className="flex items-center justify-between flex-wrap gap-y-2">
-										>
+													{item.serviceName && (
-											<span className="truncate max-w-full text-sm">
+														<Badge variant="outline" className="w-fit">
-												{item.host}
+															<Server className="size-3 mr-1" />
-											</span>
+															{item.serviceName}
-											<ExternalLink className="size-4 min-w-4" />
+														</Badge>
-										</Link>
+													)}
-
+													<div className="flex gap-2 flex-wrap">
-										<div className="flex gap-8">
+														{!item.host.includes("traefik.me") && (
-											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+															<DnsHelperModal
-												<span>{item.path}</span>
+																domain={{
-												<span>{item.port}</span>
+																	host: item.host,
-												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+																	https: item.https,
-											</div>
+																	path: item.path || undefined,
-
+																}}
-											<div className="flex gap-2">
+																serverIp={
-												<AddDomain
+																	application?.server?.ipAddress?.toString() ||
-													applicationId={applicationId}
+																	ip?.toString()
-													domainId={item.domainId}
+																}
-												>
+															/>
-													<Button
+														)}
-														variant="ghost"
+														<AddDomain
-														size="icon"
+															id={id}
-														className="group hover:bg-blue-500/10 "
+															type={type}
+															domainId={item.domainId}
+														>
+															<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>
+														</AddDomain>
+														<DialogAction
+															title="Delete Domain"
+															description="Are you sure you want to delete this domain?"
+															type="destructive"
+															onClick={async () => {
+																await deleteDomain({
+																	domainId: item.domainId,
+																})
+																	.then((_data) => {
+																		refetch();
+																		toast.success(
+																			"Domain deleted successfully",
+																		);
+																	})
+																	.catch(() => {
+																		toast.error("Error deleting domain");
+																	});
+															}}
+														>
+															<Button
+																variant="ghost"
+																size="icon"
+																className="group hover:bg-red-500/10"
+																isLoading={isRemoving}
+															>
+																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+															</Button>
+														</DialogAction>
+													</div>
+												</div>
+												<div className="w-full break-all">
+													<Link
+														className="flex items-center gap-2 text-base font-medium hover:underline"
+														target="_blank"
+														href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 													>
-														<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+														{item.host}
-													</Button>
+														<ExternalLink className="size-4 min-w-4" />
-												</AddDomain>
+													</Link>
-												<DialogAction
+												</div>
-													title="Delete Domain"
+
-													description="Are you sure you want to delete this domain?"
+												{/* Domain Details */}
-													type="destructive"
+												<div className="flex flex-wrap gap-3">
-													onClick={async () => {
+													<TooltipProvider>
-														await deleteDomain({
+														<Tooltip>
-															domainId: item.domainId,
+															<TooltipTrigger asChild>
-														})
+																<Badge variant="secondary">
-															.then(() => {
+																	<InfoIcon className="size-3 mr-1" />
-																refetch();
+																	Path: {item.path || "/"}
-																toast.success("Domain deleted successfully");
+																</Badge>
-															})
+															</TooltipTrigger>
-															.catch(() => {
+															<TooltipContent>
-																toast.error("Error deleting domain");
+																<p>URL path for this service</p>
-															});
+															</TooltipContent>
-													}}
+														</Tooltip>
-												>
+													</TooltipProvider>
-													<Button
+
-														variant="ghost"
+													<TooltipProvider>
-														size="icon"
+														<Tooltip>
-														className="group hover:bg-red-500/10"
+															<TooltipTrigger asChild>
-														isLoading={isRemoving}
+																<Badge variant="secondary">
-													>
+																	<InfoIcon className="size-3 mr-1" />
-														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	Port: {item.port}
-													</Button>
+																</Badge>
-												</DialogAction>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>Container port exposed</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Badge
+																	variant={item.https ? "outline" : "secondary"}
+																>
+																	{item.https ? "HTTPS" : "HTTP"}
+																</Badge>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>
+																	{item.https
+																		? "Secure HTTPS connection"
+																		: "Standard HTTP connection"}
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+
+													{item.certificateType && (
+														<TooltipProvider>
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<Badge variant="outline">
+																		Cert: {item.certificateType}
+																	</Badge>
+																</TooltipTrigger>
+																<TooltipContent>
+																	<p>SSL Certificate Provider</p>
+																</TooltipContent>
+															</Tooltip>
+														</TooltipProvider>
+													)}
+
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Badge
+																	variant="outline"
+																	className={
+																		validationState?.isValid
+																			? "bg-green-500/10 text-green-500 cursor-pointer"
+																			: validationState?.error
+																				? "bg-red-500/10 text-red-500 cursor-pointer"
+																				: "bg-yellow-500/10 text-yellow-500 cursor-pointer"
+																	}
+																	onClick={() =>
+																		handleValidateDomain(item.host)
+																	}
+																>
+																	{validationState?.isLoading ? (
+																		<>
+																			<Loader2 className="size-3 mr-1 animate-spin" />
+																			Checking DNS...
+																		</>
+																	) : validationState?.isValid ? (
+																		<>
+																			<CheckCircle2 className="size-3 mr-1" />
+																			{validationState.message &&
+																			validationState.cdnProvider
+																				? `Behind ${validationState.cdnProvider}`
+																				: "DNS Valid"}
+																		</>
+																	) : validationState?.error ? (
+																		<>
+																			<XCircle className="size-3 mr-1" />
+																			{validationState.error}
+																		</>
+																	) : (
+																		<>
+																			<RefreshCw className="size-3 mr-1" />
+																			Validate DNS
+																		</>
+																	)}
+																</Badge>
+															</TooltipTrigger>
+															<TooltipContent className="max-w-xs">
+																{validationState?.error ? (
+																	<div className="flex flex-col gap-1">
+																		<p className="font-medium text-red-500">
+																			Error:
+																		</p>
+																		<p>{validationState.error}</p>
+																	</div>
+																) : (
+																	"Click to validate DNS configuration"
+																)}
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
 											</div>
-										</div>
+										</CardContent>
-									</div>
+									</Card>
 								);
 							})}
 						</div>

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

@@ -71,15 +71,19 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
+	// Watch form value
+	const currentEnvironment = form.watch("environment");
+	const hasChanges = currentEnvironment !== (data?.env || "");
+
 	useEffect(() => {
 		if (data) {
 			form.reset({
 				environment: data.env || "",
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [data, form]);
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
 			mongoId: id || "",
 			postgresId: id || "",
@@ -87,7 +91,7 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			mysqlId: id || "",
 			mariadbId: id || "",
 			composeId: id || "",
-			env: data.environment,
+			env: formData.environment,
 		})
 			.then(async () => {
 				toast.success("Environments Added");
@@ -98,6 +102,12 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			environment: data?.env || "",
+		});
+	};
+
 	return (
 		<div className="flex w-full flex-col gap-5 ">
 			<Card className="bg-background">
@@ -106,6 +116,11 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 						<CardTitle className="text-xl">Environment Settings</CardTitle>
 						<CardDescription>
 							You can add environment variables to your resource.
+							{hasChanges && (
+								<span className="text-yellow-500 ml-2">
+									(You have unsaved changes)
+								</span>
+							)}
 						</CardDescription>
 					</div>
 
@@ -132,8 +147,8 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 								control={form.control}
 								name="environment"
 								render={({ field }) => (
-									<FormItem className="w-full">
+									<FormItem>
-										<FormControl>
+										<FormControl className="">
 											<CodeEditor
 												style={
 													{
@@ -142,21 +157,35 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 												}
 												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>
 								)}
 							/>
 
-							<div className="flex flex-row justify-end">
+							<div className="flex flex-row justify-end gap-2">
-								<Button isLoading={isLoading} className="w-fit" type="submit">
+								{hasChanges && (
+									<Button
+										type="button"
+										variant="outline"
+										onClick={handleCancel}
+									>
+										Cancel
+									</Button>
+								)}
+								<Button
+									isLoading={isLoading}
+									className="w-fit"
+									type="submit"
+									disabled={!hasChanges}
+								>
 									Save
 								</Button>
 							</div>

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

@@ -4,6 +4,7 @@ import { Form } from "@/components/ui/form";
 import { Secrets } from "@/components/ui/secrets";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -34,16 +35,32 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 
 	const form = useForm<EnvironmentSchema>({
 		defaultValues: {
-			env: data?.env || "",
+			env: "",
-			buildArgs: data?.buildArgs || "",
+			buildArgs: "",
 		},
 		resolver: zodResolver(addEnvironmentSchema),
 	});
 
-	const onSubmit = async (data: EnvironmentSchema) => {
+	// Watch form values
+	const currentEnv = form.watch("env");
+	const currentBuildArgs = form.watch("buildArgs");
+	const hasChanges =
+		currentEnv !== (data?.env || "") ||
+		currentBuildArgs !== (data?.buildArgs || "");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				env: data.env || "",
+				buildArgs: data.buildArgs || "",
+			});
+		}
+	}, [data, form]);
+
+	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
-			env: data.env,
+			env: formData.env,
-			buildArgs: data.buildArgs,
+			buildArgs: formData.buildArgs,
 			applicationId,
 		})
 			.then(async () => {
@@ -55,6 +72,13 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 			});
 	};
 
+	const handleCancel = () => {
+		form.reset({
+			env: data?.env || "",
+			buildArgs: data?.buildArgs || "",
+		});
+	};
+
 	return (
 		<Card className="bg-background px-6 pb-6">
 			<Form {...form}>
@@ -65,7 +89,16 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 					<Secrets
 						name="env"
 						title="Environment Settings"
-						description="You can add environment variables to your resource."
+						description={
+							<span>
+								You can add environment variables to your resource.
+								{hasChanges && (
+									<span className="text-yellow-500 ml-2">
+										(You have unsaved changes)
+									</span>
+								)}
+							</span>
+						}
 						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
 					/>
 					{data?.buildType === "dockerfile" && (
@@ -89,8 +122,18 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 							placeholder="NPM_TOKEN=xyz"
 						/>
 					)}
-					<div className="flex flex-row justify-end">
+					<div className="flex flex-row justify-end gap-2">
-						<Button isLoading={isLoading} className="w-fit" type="submit">
+						{hasChanges && (
+							<Button type="button" variant="outline" onClick={handleCancel}>
+								Cancel
+							</Button>
+						)}
+						<Button
+							isLoading={isLoading}
+							className="w-fit"
+							type="submit"
+							disabled={!hasChanges}
+						>
 							Save
 						</Button>
 					</div>

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

@@ -1,4 +1,6 @@
+import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -29,10 +31,18 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -48,6 +58,8 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().optional(),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -73,6 +85,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
+			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -118,9 +132,11 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.bitbucketBuildPath || "/",
 				bitbucketId: data.bitbucketId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules || false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.applicationId, form]);
 
 	const onSubmit = async (data: BitbucketProvider) => {
 		await mutateAsync({
@@ -130,6 +146,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 			bitbucketBuildPath: data.buildPath,
 			bitbucketId: data.bitbucketId,
 			applicationId,
+			watchPaths: data.watchPaths || [],
+			enableSubmodules: data.enableSubmodules || false,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -195,7 +213,20 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<BitbucketIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -363,6 +394,99 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+														?
+													</div>
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path, index) => (
+											<Badge key={index} variant="secondary">
+												{path}
+												<X
+													className="ml-1 size-3 cursor-pointer"
+													onClick={() => {
+														const newPaths = [...(field.value || [])];
+														newPaths.splice(index, 1);
+														form.setValue("watchPaths", newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<FormControl>
+										<div className="flex gap-2">
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const value = input.value.trim();
+														if (value) {
+															const newPaths = [...(field.value || []), value];
+															form.setValue("watchPaths", newPaths);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+											<Button
+												type="button"
+												variant="secondary"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+													) as HTMLInputElement;
+													const value = input.value.trim();
+													if (value) {
+														const newPaths = [...(field.value || []), value];
+														form.setValue("watchPaths", newPaths);
+														input.value = "";
+													}
+												}}
+											>
+												Add
+											</Button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -53,7 +53,7 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 				registryURL: data.registryUrl || "",
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.applicationId, form]);
 
 	const onSubmit = async (values: DockerProvider) => {
 		await mutateAsync({
@@ -115,7 +115,11 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Username</FormLabel>
 									<FormControl>
-										<Input placeholder="username" {...field} />
+										<Input
+											placeholder="Username"
+											autoComplete="username"
+											{...field}
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>
@@ -130,7 +134,12 @@ export const SaveDockerProvider = ({ applicationId }: Props) => {
 								<FormItem>
 									<FormLabel>Password</FormLabel>
 									<FormControl>
-										<Input placeholder="Password" {...field} type="password" />
+										<Input
+											placeholder="Password"
+											autoComplete="one-time-code"
+											{...field}
+											type="password"
+										/>
 									</FormControl>
 									<FormMessage />
 								</FormItem>

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

@@ -17,23 +17,35 @@ import {
 	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 { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon } from "lucide-react";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 
+import { GitIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
 const GitProviderSchema = z.object({
+	buildPath: z.string().min(1, "Path is required").default("/"),
 	repositoryURL: z.string().min(1, {
 		message: "Repository URL is required",
 	}),
 	branch: z.string().min(1, "Branch required"),
-	buildPath: z.string().min(1, "Build Path required"),
 	sshKey: z.string().optional(),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -56,6 +68,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			buildPath: "/",
 			repositoryURL: "",
 			sshKey: undefined,
+			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -67,6 +81,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 				branch: data.customGitBranch || "",
 				buildPath: data.customGitBuildPath || "/",
 				repositoryURL: data.customGitUrl || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -78,6 +94,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 			customGitUrl: values.repositoryURL,
 			customGitSSHKeyId: values.sshKey === "none" ? null : values.sshKey,
 			applicationId,
+			watchPaths: values.watchPaths || [],
+			enableSubmodules: values.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -102,9 +120,22 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Repository URL</FormLabel>
+										<div className="flex items-center justify-between">
+											<FormLabel>Repository URL</FormLabel>
+											{field.value?.startsWith("https://") && (
+												<Link
+													href={field.value}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+												>
+													<GitIcon className="h-4 w-4" />
+													<span>View Repository</span>
+												</Link>
+											)}
+										</div>
 										<FormControl>
-											<Input placeholder="git@bitbucket.org" {...field} />
+											<Input placeholder="Repository URL" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -160,19 +191,22 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</Button>
 						)}
 					</div>
-					<FormField
+					<div className="space-y-4">
-						control={form.control}
+						<FormField
-						name="branch"
+							control={form.control}
-						render={({ field }) => (
+							name="branch"
-							<FormItem>
+							render={({ field }) => (
-								<FormLabel>Branch</FormLabel>
+								<FormItem>
-								<FormControl>
+									<FormLabel>Branch</FormLabel>
-									<Input placeholder="Branch" {...field} />
+									<FormControl>
-								</FormControl>
+										<Input placeholder="Branch" {...field} />
-								<FormMessage />
+									</FormControl>
-							</FormItem>
+									<FormMessage />
-						)}
+								</FormItem>
-					/>
+							)}
+						/>
+					</div>
+
 					<FormField
 						control={form.control}
 						name="buildPath"
@@ -186,6 +220,101 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 							</FormItem>
 						)}
 					/>
+					<FormField
+						control={form.control}
+						name="watchPaths"
+						render={({ field }) => (
+							<FormItem className="md:col-span-2">
+								<div className="flex items-center gap-2">
+									<FormLabel>Watch Paths</FormLabel>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger>
+												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+													?
+												</div>
+											</TooltipTrigger>
+											<TooltipContent className="max-w-[300px]">
+												<p>
+													Add paths to watch for changes. When files in these
+													paths change, a new deployment will be triggered. This
+													will work only when manual webhook is setup.
+												</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+								<div className="flex flex-wrap gap-2 mb-2">
+									{field.value?.map((path, index) => (
+										<Badge key={index} variant="secondary">
+											{path}
+											<X
+												className="ml-1 size-3 cursor-pointer"
+												onClick={() => {
+													const newPaths = [...(field.value || [])];
+													newPaths.splice(index, 1);
+													form.setValue("watchPaths", newPaths);
+												}}
+											/>
+										</Badge>
+									))}
+								</div>
+								<FormControl>
+									<div className="flex gap-2">
+										<Input
+											placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+											onKeyDown={(e) => {
+												if (e.key === "Enter") {
+													e.preventDefault();
+													const input = e.currentTarget;
+													const value = input.value.trim();
+													if (value) {
+														const newPaths = [...(field.value || []), value];
+														form.setValue("watchPaths", newPaths);
+														input.value = "";
+													}
+												}
+											}}
+										/>
+										<Button
+											type="button"
+											variant="secondary"
+											onClick={() => {
+												const input = document.querySelector(
+													'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+												) as HTMLInputElement;
+												const value = input.value.trim();
+												if (value) {
+													const newPaths = [...(field.value || []), value];
+													form.setValue("watchPaths", newPaths);
+													input.value = "";
+												}
+											}}
+										>
+											Add
+										</Button>
+									</div>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+
+					<FormField
+						control={form.control}
+						name="enableSubmodules"
+						render={({ field }) => (
+							<FormItem className="flex items-center space-x-2">
+								<FormControl>
+									<Switch
+										checked={field.value}
+										onCheckedChange={field.onChange}
+									/>
+								</FormControl>
+								<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+							</FormItem>
+						)}
+					/>
 				</div>
 
 				<div className="flex flex-row justify-end">

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

@@ -0,0 +1,538 @@
+import { GiteaIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface GiteaRepository {
+	name: string;
+	url: string;
+	id: number;
+	owner: {
+		username: string;
+	};
+}
+
+interface GiteaBranch {
+	name: string;
+	commit: {
+		id: string;
+	};
+}
+
+const GiteaProviderSchema = z.object({
+	buildPath: z.string().min(1, "Path is required").default("/"),
+	repository: z
+		.object({
+			repo: z.string().min(1, "Repo is required"),
+			owner: z.string().min(1, "Owner is required"),
+		})
+		.required(),
+	branch: z.string().min(1, "Branch is required"),
+	giteaId: z.string().min(1, "Gitea Provider is required"),
+	watchPaths: z.array(z.string()).default([]),
+	enableSubmodules: z.boolean().optional(),
+});
+
+type GiteaProvider = z.infer<typeof GiteaProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveGiteaProvider = ({ applicationId }: Props) => {
+	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading: isSavingGiteaProvider } =
+		api.application.saveGiteaProvider.useMutation();
+
+	const form = useForm<GiteaProvider>({
+		defaultValues: {
+			buildPath: "/",
+			repository: {
+				owner: "",
+				repo: "",
+			},
+			giteaId: "",
+			branch: "",
+			watchPaths: [],
+			enableSubmodules: false,
+		},
+		resolver: zodResolver(GiteaProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+	const giteaId = form.watch("giteaId");
+
+	const { data: giteaUrl } = api.gitea.getGiteaUrl.useQuery(
+		{ giteaId },
+		{
+			enabled: !!giteaId,
+		},
+	);
+
+	const {
+		data: repositories,
+		isLoading: isLoadingRepositories,
+		error,
+	} = api.gitea.getGiteaRepositories.useQuery(
+		{
+			giteaId,
+		},
+		{
+			enabled: !!giteaId,
+		},
+	);
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.gitea.getGiteaBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repositoryName: repository?.repo,
+			giteaId: giteaId,
+		},
+		{
+			enabled: !!repository?.owner && !!repository?.repo && !!giteaId,
+		},
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.giteaBranch || "",
+				repository: {
+					repo: data.giteaRepository || "",
+					owner: data.giteaOwner || "",
+				},
+				buildPath: data.giteaBuildPath || "/",
+				giteaId: data.giteaId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules || false,
+			});
+		}
+	}, [form.reset, data?.applicationId, form]);
+
+	const onSubmit = async (data: GiteaProvider) => {
+		await mutateAsync({
+			giteaBranch: data.branch,
+			giteaRepository: data.repository.repo,
+			giteaOwner: data.repository.owner,
+			giteaBuildPath: data.buildPath,
+			giteaId: data.giteaId,
+			applicationId,
+			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules || false,
+		})
+			.then(async () => {
+				toast.success("Service Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the Gitea provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					{error && <AlertBlock type="error">{error?.message}</AlertBlock>}
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="giteaId"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Gitea Account</FormLabel>
+									<Select
+										onValueChange={(value) => {
+											field.onChange(value);
+											form.setValue("repository", {
+												owner: "",
+												repo: "",
+											});
+											form.setValue("branch", "");
+										}}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Gitea Account" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{giteaProviders?.map((giteaProvider) => (
+												<SelectItem
+													key={giteaProvider.giteaId}
+													value={giteaProvider.giteaId}
+												>
+													{giteaProvider.gitProvider.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`${giteaUrl}/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GiteaIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
+
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{isLoadingRepositories
+														? "Loading...."
+														: field.value.owner
+															? repositories?.find(
+																	(repo: GiteaRepository) =>
+																		repo.name === field.value.repo,
+																)?.name
+															: "Select repository"}
+
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search repository..."
+													className="h-9"
+												/>
+												{isLoadingRepositories && (
+													<span className="py-6 text-center text-sm">
+														Loading Repositories....
+													</span>
+												)}
+												<CommandEmpty>No repositories found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{repositories && repositories.length === 0 && (
+															<CommandEmpty>
+																No repositories found.
+															</CommandEmpty>
+														)}
+														{repositories?.map((repo: GiteaRepository) => {
+															return (
+																<CommandItem
+																	value={repo.name}
+																	key={repo.url}
+																	onSelect={() => {
+																		form.setValue("repository", {
+																			owner: repo.owner.username as string,
+																			repo: repo.name,
+																		});
+																		form.setValue("branch", "");
+																	}}
+																>
+																	<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",
+																			repo.name === field.value.repo
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															);
+														})}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.repository && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Repository is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem className="block w-full">
+									<FormLabel>Branch</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														" w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{status === "loading" && fetchStatus === "fetching"
+														? "Loading...."
+														: field.value
+															? branches?.find(
+																	(branch: GiteaBranch) =>
+																		branch.name === field.value,
+																)?.name
+															: "Select branch"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search branch..."
+													className="h-9"
+												/>
+												{status === "loading" && fetchStatus === "fetching" && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Loading Branches....
+													</span>
+												)}
+												{!repository?.owner && (
+													<span className="py-6 text-center text-sm text-muted-foreground">
+														Select a repository
+													</span>
+												)}
+												<ScrollArea className="h-96">
+													<CommandEmpty>No branch found.</CommandEmpty>
+
+													<CommandGroup>
+														{branches && branches.length === 0 && (
+															<CommandItem>No branches found.</CommandItem>
+														)}
+														{branches?.map((branch: GiteaBranch) => (
+															<CommandItem
+																value={branch.name}
+																key={branch.commit.id}
+																onSelect={() => {
+																	form.setValue("branch", branch.name);
+																}}
+															>
+																{branch.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		branch.name === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+
+										<FormMessage />
+									</Popover>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="buildPath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/" {...field} />
+									</FormControl>
+
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path: string, index: number) => (
+											<Badge
+												key={index}
+												variant="secondary"
+												className="flex items-center gap-1"
+											>
+												{path}
+												<X
+													className="size-3 cursor-pointer hover:text-destructive"
+													onClick={() => {
+														const newPaths = [...field.value];
+														newPaths.splice(index, 1);
+														field.onChange(newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<div className="flex gap-2">
+										<FormControl>
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const path = input.value.trim();
+														if (path) {
+															field.onChange([...field.value, path]);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+										</FormControl>
+										<Button
+											type="button"
+											variant="outline"
+											size="icon"
+											onClick={() => {
+												const input = document.querySelector(
+													'input[placeholder*="Enter a path"]',
+												) as HTMLInputElement;
+												const path = input.value.trim();
+												if (path) {
+													field.onChange([...field.value, path]);
+													input.value = "";
+												}
+											}}
+										>
+											<Plus className="size-4" />
+										</Button>
+									</div>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="flex w-full justify-end">
+						<Button
+							isLoading={isSavingGiteaProvider}
+							type="submit"
+							className="w-fit"
+						>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -1,3 +1,5 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -28,10 +30,18 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -47,6 +57,9 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	triggerType: z.enum(["push", "tag"]).default("push"),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -71,12 +84,15 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
+			triggerType: "push",
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
+	const triggerType = form.watch("triggerType");
 
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
@@ -113,9 +129,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.buildPath || "/",
 				githubId: data.githubId || "",
+				watchPaths: data.watchPaths || [],
+				triggerType: data.triggerType || "push",
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.applicationId, form]);
 
 	const onSubmit = async (data: GithubProvider) => {
 		await mutateAsync({
@@ -125,6 +144,9 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 			owner: data.repository.owner,
 			buildPath: data.buildPath,
 			githubId: data.githubId,
+			watchPaths: data.watchPaths || [],
+			triggerType: data.triggerType,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -187,7 +209,20 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GithubIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -350,11 +385,148 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 									<FormControl>
 										<Input placeholder="/" {...field} />
 									</FormControl>
-
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="triggerType"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2 ">
+										<FormLabel>Trigger Type</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Choose when to trigger deployments: on push to the
+														selected branch or when a new tag is created.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a trigger type" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="push">On Push</SelectItem>
+											<SelectItem value="tag">On Tag</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{triggerType === "push" && (
+							<FormField
+								control={form.control}
+								name="watchPaths"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<div className="flex items-center gap-2">
+											<FormLabel>Watch Paths</FormLabel>
+											<TooltipProvider>
+												<Tooltip>
+													<TooltipTrigger asChild>
+														<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+													</TooltipTrigger>
+													<TooltipContent>
+														<p>
+															Add paths to watch for changes. When files in
+															these paths change, a new deployment will be
+															triggered.
+														</p>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</div>
+										<div className="flex flex-wrap gap-2 mb-2">
+											{field.value?.map((path, index) => (
+												<Badge
+													key={index}
+													variant="secondary"
+													className="flex items-center gap-1"
+												>
+													{path}
+													<X
+														className="size-3 cursor-pointer hover:text-destructive"
+														onClick={() => {
+															const newPaths = [...(field.value || [])];
+															newPaths.splice(index, 1);
+															field.onChange(newPaths);
+														}}
+													/>
+												</Badge>
+											))}
+										</div>
+										<div className="flex gap-2">
+											<FormControl>
+												<Input
+													placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+													onKeyDown={(e) => {
+														if (e.key === "Enter") {
+															e.preventDefault();
+															const input = e.currentTarget;
+															const path = input.value.trim();
+															if (path) {
+																field.onChange([...(field.value || []), path]);
+																input.value = "";
+															}
+														}
+													}}
+												/>
+											</FormControl>
+											<Button
+												type="button"
+												variant="outline"
+												size="icon"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder*="Enter a path"]',
+													) as HTMLInputElement;
+													const path = input.value.trim();
+													if (path) {
+														field.onChange([...(field.value || []), path]);
+														input.value = "";
+													}
+												}}
+											>
+												<Plus className="size-4" />
+											</Button>
+										</div>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,4 +1,6 @@
+import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -29,11 +31,19 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, Plus, X } from "lucide-react";
-import { useEffect } from "react";
+import Link from "next/link";
+import { useEffect, useMemo } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -50,6 +60,8 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -76,6 +88,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -83,6 +96,16 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 	const repository = form.watch("repository");
 	const gitlabId = form.watch("gitlabId");
 
+	const gitlabUrl = useMemo(() => {
+		const url = gitlabProviders?.find(
+			(provider) => provider.gitlabId === gitlabId,
+		)?.gitlabUrl;
+
+		const gitlabUrl = url?.replace(/\/$/, "");
+
+		return gitlabUrl || "https://gitlab.com";
+	}, [gitlabId, gitlabProviders]);
+
 	const {
 		data: repositories,
 		isLoading: isLoadingRepositories,
@@ -124,9 +147,11 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 				},
 				buildPath: data.gitlabBuildPath || "/",
 				gitlabId: data.gitlabId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.applicationId, form]);
 
 	const onSubmit = async (data: GitlabProvider) => {
 		await mutateAsync({
@@ -138,6 +163,8 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 			applicationId,
 			gitlabProjectId: data.repository.id,
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
+			watchPaths: data.watchPaths || [],
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -203,7 +230,20 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`${gitlabUrl}/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GitlabIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -248,7 +288,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														{repositories?.map((repo) => {
 															return (
 																<CommandItem
-																	value={repo.name}
+																	value={repo.url}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -269,7 +309,8 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",
-																			repo.name === field.value.repo
+																			repo.url ===
+																				field.value.gitlabPathNamespace
 																				? "opacity-100"
 																				: "opacity-0",
 																		)}
@@ -375,11 +416,104 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 									<FormControl>
 										<Input placeholder="/" {...field} />
 									</FormControl>
-
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path, index) => (
+											<Badge
+												key={index}
+												variant="secondary"
+												className="flex items-center gap-1"
+											>
+												{path}
+												<X
+													className="size-3 cursor-pointer hover:text-destructive"
+													onClick={() => {
+														const newPaths = [...(field.value || [])];
+														newPaths.splice(index, 1);
+														field.onChange(newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<div className="flex gap-2">
+										<FormControl>
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const path = input.value.trim();
+														if (path) {
+															field.onChange([...(field.value || []), path]);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+										</FormControl>
+										<Button
+											type="button"
+											variant="outline"
+											size="icon"
+											onClick={() => {
+												const input = document.querySelector(
+													'input[placeholder*="Enter a path"]',
+												) as HTMLInputElement;
+												const path = input.value.trim();
+												if (path) {
+													field.onChange([...(field.value || []), path]);
+													input.value = "";
+												}
+											}}
+										>
+											<Plus className="size-4" />
+										</Button>
+									</div>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,37 +1,135 @@
 import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
 import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
+import { SaveGiteaProvider } from "@/components/dashboard/application/general/generic/save-gitea-provider";
 import { SaveGithubProvider } from "@/components/dashboard/application/general/generic/save-github-provider";
 import {
 	BitbucketIcon,
 	DockerIcon,
 	GitIcon,
+	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { GitBranch, UploadCloud } from "lucide-react";
+import { GitBranch, Loader2, UploadCloud } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import { toast } from "sonner";
 import { SaveBitbucketProvider } from "./save-bitbucket-provider";
 import { SaveDragNDrop } from "./save-drag-n-drop";
 import { SaveGitlabProvider } from "./save-gitlab-provider";
+import { UnauthorizedGitProvider } from "./unauthorized-git-provider";
 
-type TabState = "github" | "docker" | "git" | "drop" | "gitlab" | "bitbucket";
+type TabState =
+	| "github"
+	| "docker"
+	| "git"
+	| "drop"
+	| "gitlab"
+	| "bitbucket"
+	| "gitea";
 
 interface Props {
 	applicationId: string;
 }
 
 export const ShowProviderForm = ({ applicationId }: Props) => {
-	const { data: githubProviders } = api.github.githubProviders.useQuery();
+	const { data: githubProviders, isLoading: isLoadingGithub } =
-	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
+		api.github.githubProviders.useQuery();
-	const { data: bitbucketProviders } =
+	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
+		api.gitlab.gitlabProviders.useQuery();
+	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
 		api.bitbucket.bitbucketProviders.useQuery();
+	const { data: giteaProviders, isLoading: isLoadingGitea } =
+		api.gitea.giteaProviders.useQuery();
+
+	const { data: application, refetch } = api.application.one.useQuery({
+		applicationId,
+	});
+	const { mutateAsync: disconnectGitProvider } =
+		api.application.disconnectGitProvider.useMutation();
 
-	const { data: application } = api.application.one.useQuery({ applicationId });
 	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
+
+	const isLoading =
+		isLoadingGithub || isLoadingGitlab || isLoadingBitbucket || isLoadingGitea;
+
+	const handleDisconnect = async () => {
+		try {
+			await disconnectGitProvider({ applicationId });
+			toast.success("Repository disconnected successfully");
+			await refetch();
+		} catch (error) {
+			toast.error(
+				`Failed to disconnect repository: ${
+					error instanceof Error ? error.message : "Unknown error"
+				}`,
+			);
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<Card className="group relative w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-start justify-between">
+						<div className="flex flex-col gap-2">
+							<span className="flex flex-col space-y-0.5">Provider</span>
+							<p className="flex items-center text-sm font-normal text-muted-foreground">
+								Select the source of your code
+							</p>
+						</div>
+						<div className="hidden space-y-1 text-sm font-normal md:block">
+							<GitBranch className="size-6 text-muted-foreground" />
+						</div>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex min-h-[25vh] items-center justify-center">
+						<div className="flex items-center gap-2 text-muted-foreground">
+							<Loader2 className="size-4 animate-spin" />
+							<span>Loading providers...</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	// Check if user doesn't have access to the current git provider
+	if (
+		application &&
+		!application.hasGitProviderAccess &&
+		application.sourceType !== "docker" &&
+		application.sourceType !== "drop"
+	) {
+		return (
+			<Card className="group relative w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-start justify-between">
+						<div className="flex flex-col gap-2">
+							<span className="flex flex-col space-y-0.5">Provider</span>
+							<p className="flex items-center text-sm font-normal text-muted-foreground">
+								Repository connection through unauthorized provider
+							</p>
+						</div>
+						<div className="hidden space-y-1 text-sm font-normal md:block">
+							<GitBranch className="size-6 text-muted-foreground" />
+						</div>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UnauthorizedGitProvider
+						service={application}
+						onDisconnect={handleDisconnect}
+					/>
+				</CardContent>
+			</Card>
+		);
+	}
+
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -55,8 +153,8 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between  w-full gap-4">
+					<div className="flex flex-row items-center justify-between w-full overflow-auto">
-						<TabsList className="md:grid md:w-fit md:grid-cols-7 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+						<TabsList className="flex gap-4 justify-start bg-transparent">
 							<TabsTrigger
 								value="github"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
@@ -78,6 +176,13 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 								<BitbucketIcon className="size-4 text-current fill-current" />
 								Bitbucket
 							</TabsTrigger>
+							<TabsTrigger
+								value="gitea"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<GiteaIcon className="size-4 text-current fill-current" />
+								Gitea
+							</TabsTrigger>
 							<TabsTrigger
 								value="docker"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
@@ -106,7 +211,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<GithubIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitHub, you need to configure your account
@@ -126,7 +231,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{gitlabProviders && gitlabProviders?.length > 0 ? (
 							<SaveGitlabProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<GitlabIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitLab, you need to configure your account
@@ -146,7 +251,7 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 						{bitbucketProviders && bitbucketProviders?.length > 0 ? (
 							<SaveBitbucketProvider applicationId={applicationId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<BitbucketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using Bitbucket, you need to configure your account
@@ -162,6 +267,26 @@ export const ShowProviderForm = ({ applicationId }: Props) => {
 							</div>
 						)}
 					</TabsContent>
+					<TabsContent value="gitea" className="w-full p-2">
+						{giteaProviders && giteaProviders?.length > 0 ? (
+							<SaveGiteaProvider applicationId={applicationId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+								<GiteaIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using Gitea, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
 					<TabsContent value="docker" className="w-full p-2">
 						<SaveDockerProvider applicationId={applicationId} />
 					</TabsContent>

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

@@ -0,0 +1,149 @@
+import {
+	BitbucketIcon,
+	GitIcon,
+	GiteaIcon,
+	GithubIcon,
+	GitlabIcon,
+} from "@/components/icons/data-tools-icons";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { RouterOutputs } from "@/utils/api";
+import { AlertCircle, GitBranch, Unlink } from "lucide-react";
+
+interface Props {
+	service:
+		| RouterOutputs["application"]["one"]
+		| RouterOutputs["compose"]["one"];
+	onDisconnect: () => void;
+}
+
+export const UnauthorizedGitProvider = ({ service, onDisconnect }: Props) => {
+	const getProviderIcon = (sourceType: string) => {
+		switch (sourceType) {
+			case "github":
+				return <GithubIcon className="size-5 text-muted-foreground" />;
+			case "gitlab":
+				return <GitlabIcon className="size-5 text-muted-foreground" />;
+			case "bitbucket":
+				return <BitbucketIcon className="size-5 text-muted-foreground" />;
+			case "gitea":
+				return <GiteaIcon className="size-5 text-muted-foreground" />;
+			case "git":
+				return <GitIcon className="size-5 text-muted-foreground" />;
+			default:
+				return <GitBranch className="size-5 text-muted-foreground" />;
+		}
+	};
+
+	const getRepositoryInfo = () => {
+		switch (service.sourceType) {
+			case "github":
+				return {
+					repo: service.repository,
+					branch: service.branch,
+					owner: service.owner,
+				};
+			case "gitlab":
+				return {
+					repo: service.gitlabRepository,
+					branch: service.gitlabBranch,
+					owner: service.gitlabOwner,
+				};
+			case "bitbucket":
+				return {
+					repo: service.bitbucketRepository,
+					branch: service.bitbucketBranch,
+					owner: service.bitbucketOwner,
+				};
+			case "gitea":
+				return {
+					repo: service.giteaRepository,
+					branch: service.giteaBranch,
+					owner: service.giteaOwner,
+				};
+			case "git":
+				return {
+					repo: service.customGitUrl,
+					branch: service.customGitBranch,
+					owner: null,
+				};
+			default:
+				return { repo: null, branch: null, owner: null };
+		}
+	};
+
+	const { repo, branch, owner } = getRepositoryInfo();
+
+	return (
+		<div className="space-y-4">
+			<Alert>
+				<AlertCircle className="h-4 w-4" />
+				<AlertDescription>
+					This application is connected to a {service.sourceType} repository
+					through a git provider that you don't have access to. You can see
+					basic repository information below, but cannot modify the
+					configuration.
+				</AlertDescription>
+			</Alert>
+
+			<Card className="border-dashed border-2 border-muted-foreground/20 bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-center gap-2">
+						{getProviderIcon(service.sourceType)}
+						<span className="capitalize text-sm font-medium">
+							{service.sourceType} Repository
+						</span>
+					</CardTitle>
+				</CardHeader>
+				<CardContent className="space-y-3">
+					{owner && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Owner:
+							</span>
+							<p className="text-sm">{owner}</p>
+						</div>
+					)}
+					{repo && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Repository:
+							</span>
+							<p className="text-sm">{repo}</p>
+						</div>
+					)}
+					{branch && (
+						<div>
+							<span className="text-sm font-medium text-muted-foreground">
+								Branch:
+							</span>
+							<p className="text-sm">{branch}</p>
+						</div>
+					)}
+
+					<div className="pt-4 border-t">
+						<DialogAction
+							title="Disconnect Repository"
+							description="Are you sure you want to disconnect this repository?"
+							type="default"
+							onClick={async () => {
+								onDisconnect();
+							}}
+						>
+							<Button variant="secondary" className="w-full">
+								<Unlink className="size-4 mr-2" />
+								Disconnect Repository
+							</Button>
+						</DialogAction>
+						<p className="text-xs text-muted-foreground mt-2">
+							Disconnecting will allow you to configure a new repository with
+							your own git providers.
+						</p>
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -4,8 +4,22 @@ import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+	Ban,
+	CheckCircle2,
+	Hammer,
+	RefreshCcw,
+	Rocket,
+	Terminal,
+} from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -41,141 +55,224 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 					<CardTitle className="text-xl">Deploy Settings</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
-					<DialogAction
+					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-						title="Deploy Application"
-						description="Are you sure you want to deploy this application?"
-						type="default"
-						onClick={async () => {
-							await deploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application deployed successfully");
-									refetch();
-									router.push(
-										`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
-									);
-								})
-								.catch(() => {
-									toast.error("Error deploying application");
-								});
-						}}
-					>
-						<Button
-							variant="default"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Deploy
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Reload Application"
-						description="Are you sure you want to reload this application?"
-						type="default"
-						onClick={async () => {
-							await reload({
-								applicationId: applicationId,
-								appName: data?.appName || "",
-							})
-								.then(() => {
-									toast.success("Application reloaded successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error reloading application");
-								});
-						}}
-					>
-						<Button variant="secondary" isLoading={isReloading}>
-							Reload
-							<RefreshCcw className="size-4" />
-						</Button>
-					</DialogAction>
-					<DialogAction
-						title="Rebuild Application"
-						description="Are you sure you want to rebuild this application?"
-						type="default"
-						onClick={async () => {
-							await redeploy({
-								applicationId: applicationId,
-							})
-								.then(() => {
-									toast.success("Application rebuilt successfully");
-									refetch();
-								})
-								.catch(() => {
-									toast.error("Error rebuilding application");
-								});
-						}}
-					>
-						<Button
-							variant="secondary"
-							isLoading={data?.applicationStatus === "running"}
-						>
-							Rebuild
-							<Hammer className="size-4" />
-						</Button>
-					</DialogAction>
-
-					{data?.applicationStatus === "idle" ? (
 						<DialogAction
-							title="Start Application"
+							title="Deploy Application"
-							description="Are you sure you want to start this application?"
+							description="Are you sure you want to deploy this application?"
 							type="default"
 							onClick={async () => {
-								await start({
+								await deploy({
 									applicationId: applicationId,
 								})
 									.then(() => {
-										toast.success("Application started successfully");
+										toast.success("Application deployed successfully");
 										refetch();
+										router.push(
+											`/dashboard/project/${data?.projectId}/services/application/${applicationId}?tab=deployments`,
+										);
 									})
 									.catch(() => {
-										toast.error("Error starting application");
+										toast.error("Error deploying application");
 									});
 							}}
 						>
-							<Button variant="secondary" isLoading={isStarting}>
+							<Button
-								Start
+								variant="default"
-								<CheckCircle2 className="size-4" />
+								isLoading={data?.applicationStatus === "running"}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Rocket className="size-4 mr-1" />
+											Deploy
+										</div>
+									</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="Stop Application"
+							title="Reload Application"
-							description="Are you sure you want to stop this application?"
+							description="Are you sure you want to reload this application?"
+							type="default"
 							onClick={async () => {
-								await stop({
+								await reload({
 									applicationId: applicationId,
+									appName: data?.appName || "",
 								})
 									.then(() => {
-										toast.success("Application stopped successfully");
+										toast.success("Application reloaded successfully");
 										refetch();
 									})
 									.catch(() => {
-										toast.error("Error stopping application");
+										toast.error("Error reloading application");
 									});
 							}}
 						>
-							<Button variant="destructive" isLoading={isStopping}>
+							<Button
-								Stop
+								variant="secondary"
-								<Ban className="size-4" />
+								isLoading={isReloading}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<RefreshCcw className="size-4 mr-1" />
+											Reload
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Reload the application without rebuilding it</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
 							</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 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Hammer className="size-4 mr-1" />
+											Rebuild
+										</div>
+									</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 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<CheckCircle2 className="size-4 mr-1" />
+												Start
+											</div>
+										</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 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Ban className="size-4 mr-1" />
+												Stop
+											</div>
+										</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 || ""}
 					>
-						<Button variant="outline">
+						<Button
-							<Terminal />
+							variant="outline"
+							className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Terminal className="size-4 mr-1" />
 							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"
+							aria-label="Toggle autodeploy"
 							checked={data?.autoDeploy || false}
 							onCheckedChange={async (enabled) => {
 								await update({
@@ -190,7 +287,29 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 										toast.error("Error updating Auto Deploy");
 									});
 							}}
-							className="flex flex-row gap-2 items-center"
+							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+						/>
+					</div>
+
+					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+						<span className="text-sm font-medium">Clean Cache</span>
+						<Switch
+							aria-label="Toggle clean cache"
+							checked={data?.cleanCache || false}
+							onCheckedChange={async (enabled) => {
+								await update({
+									applicationId,
+									cleanCache: enabled,
+								})
+									.then(async () => {
+										toast.success("Clean Cache Updated");
+										await refetch();
+									})
+									.catch(() => {
+										toast.error("Error updating Clean Cache");
+									});
+							}}
+							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
 						/>
 					</div>
 				</CardContent>

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

@@ -94,6 +94,7 @@ export const AddPreviewDomain = ({
 				/* Convert null to undefined */
 				path: data?.path || undefined,
 				port: data?.port || undefined,
+				customCertResolver: data?.customCertResolver || undefined,
 			});
 		}
 
@@ -137,7 +138,7 @@ export const AddPreviewDomain = ({
 			<DialogTrigger className="" asChild>
 				{children}
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-2xl">
+			<DialogContent className="sm:max-w-2xl">
 				<DialogHeader>
 					<DialogTitle>Domain</DialogTitle>
 					<DialogDescription>{dictionary.dialogDescription}</DialogDescription>

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

@@ -1,100 +0,0 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	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

@@ -17,15 +17,15 @@ import {
 	ExternalLink,
 	FileText,
 	GitPullRequest,
-	Layers,
+	Loader2,
 	PenSquare,
 	RocketIcon,
 	Trash2,
 } from "lucide-react";
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
+import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { AddPreviewDomain } from "./add-preview-domain";
-import { ShowPreviewBuilds } from "./show-preview-builds";
 import { ShowPreviewSettings } from "./show-preview-settings";
 
 interface Props {
@@ -38,13 +38,16 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 	const { mutateAsync: deletePreviewDeployment, isLoading } =
 		api.previewDeployment.delete.useMutation();
 
-	const { data: previewDeployments, refetch: refetchPreviewDeployments } =
+	const {
-		api.previewDeployment.all.useQuery(
+		data: previewDeployments,
-			{ applicationId },
+		refetch: refetchPreviewDeployments,
-			{
+		isLoading: isLoadingPreviewDeployments,
-				enabled: !!applicationId,
+	} = api.previewDeployment.all.useQuery(
-			},
+		{ applicationId },
-		);
+		{
+			enabled: !!applicationId,
+		},
+	);
 
 	const handleDeletePreviewDeployment = async (previewDeploymentId: string) => {
 		deletePreviewDeployment({
@@ -80,8 +83,15 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 								each pull request you create.
 							</span>
 						</div>
-						{!previewDeployments?.length ? (
+						{isLoadingPreviewDeployments ? (
-							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+							<div className="flex w-full flex-row items-center justify-center gap-3 min-h-[35vh]">
+								<Loader2 className="size-5 text-muted-foreground animate-spin" />
+								<span className="text-base text-muted-foreground">
+									Loading preview deployments...
+								</span>
+							</div>
+						) : !previewDeployments?.length ? (
+							<div className="flex w-full flex-col items-center justify-center gap-3 min-h-[35vh]">
 								<RocketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									No preview deployments found
@@ -168,19 +178,10 @@ export const ShowPreviewDeployments = ({ applicationId }: Props) => {
 															</Button>
 														</ShowModalLogs>
 
-														<ShowPreviewBuilds
+														<ShowDeploymentsModal
-															deployments={deployment.deployments || []}
+															id={deployment.previewDeploymentId}
+															type="previewDeployment"
 															serverId={data?.serverId || ""}
-															trigger={
-																<Button
-																	variant="outline"
-																	size="sm"
-																	className="gap-2"
-																>
-																	<Layers className="size-4" />
-																	Builds
-																</Button>
-															}
 														/>
 
 														<AddPreviewDomain

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

@@ -35,16 +35,30 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-const schema = z.object({
+const schema = z
-	env: z.string(),
+	.object({
-	buildArgs: z.string(),
+		env: z.string(),
-	wildcardDomain: z.string(),
+		buildArgs: z.string(),
-	port: z.number(),
+		wildcardDomain: z.string(),
-	previewLimit: z.number(),
+		port: z.number(),
-	previewHttps: z.boolean(),
+		previewLimit: z.number(),
-	previewPath: z.string(),
+		previewHttps: z.boolean(),
-	previewCertificateType: z.enum(["letsencrypt", "none"]),
+		previewPath: z.string(),
-});
+		previewCertificateType: z.enum(["letsencrypt", "none", "custom"]),
+		previewCustomCertResolver: z.string().optional(),
+	})
+	.superRefine((input, ctx) => {
+		if (
+			input.previewCertificateType === "custom" &&
+			!input.previewCustomCertResolver
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["previewCustomCertResolver"],
+				message: "Required",
+			});
+		}
+	});
 
 type Schema = z.infer<typeof schema>;
 
@@ -90,6 +104,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				previewHttps: data.previewHttps || false,
 				previewPath: data.previewPath || "/",
 				previewCertificateType: data.previewCertificateType || "none",
+				previewCustomCertResolver: data.previewCustomCertResolver || "",
 			});
 		}
 	}, [data]);
@@ -105,6 +120,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewHttps: formData.previewHttps,
 			previewPath: formData.previewPath,
 			previewCertificateType: formData.previewCertificateType,
+			previewCustomCertResolver: formData.previewCustomCertResolver,
 		})
 			.then(() => {
 				toast.success("Preview Deployments settings updated");
@@ -122,7 +138,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 						Configure
 					</Button>
 				</DialogTrigger>
-				<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl w-full">
+				<DialogContent className="sm:max-w-5xl w-full">
 					<DialogHeader>
 						<DialogTitle>Preview Deployment Settings</DialogTitle>
 						<DialogDescription>
@@ -184,10 +200,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 										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>
@@ -238,6 +250,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 															<SelectItem value={"letsencrypt"}>
 																Let's Encrypt
 															</SelectItem>
+															<SelectItem value={"custom"}>Custom</SelectItem>
 														</SelectContent>
 													</Select>
 													<FormMessage />
@@ -245,6 +258,25 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											)}
 										/>
 									)}
+
+									{form.watch("previewCertificateType") === "custom" && (
+										<FormField
+											control={form.control}
+											name="previewCustomCertResolver"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Certificate Provider</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="my-custom-resolver"
+															{...field}
+														/>
+													</FormControl>
+													<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">
@@ -266,7 +298,11 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 												})
 													.then(() => {
 														refetch();
-														toast.success("Preview deployments enabled");
+														toast.success(
+															checked
+																? "Preview deployments enabled"
+																: "Preview deployments disabled",
+														);
 													})
 													.catch((error) => {
 														toast.error(error.message);

apps/dokploy/components/dashboard/application/rollbacks/Backup

@@ -0,0 +1,108 @@
+Backup
+# license-namedbackups-abxelc
+1. docker ps --filter "label=com.docker.swarm.service.name=license-namedbackups-abxelc" --format "{{.Names}}"
+2. docker run --rm \
+--volumes-from "license-namedbackups-abxelc.1.m3cxy78ocj3w0zu42kmgamc5y" \
+-v $(pwd):/backup \
+ubuntu \
+tar cvf /backup/backup.tar /var/lib/postgresql/data
+
+
+# Official Command Backup
+
+1. Backup
+
+docker run --rm \
+  -v license-namedbackups-abxelc-data:/volume_data \
+  -v $(pwd):/backup \
+  ubuntu \
+  bash -c "cd /volume_data && tar cvf /backup/generic_backup.tar ."
+
+
+2. Restore
+
+docker service scale license-namedbackups-abxelc=0
+
+docker volume rm license-namedbackups-abxelc-data
+
+2. docker run --rm \
+-v license-namedbackups-abxelc-data:/volume_data \
+-v $(pwd):/backup \
+ubuntu \
+bash -c "cd /volume_data && tar xvf /backup/generic_backup.tar ."
+
+docker service scale license-namedbackups-abxelc=1
+
+
+root@srv594061:~# docker volume inspect  n8n_data-data
+[
+    {
+        "CreatedAt": "2025-06-28T18:07:44Z",
+        "Driver": "local",
+        "Labels": null,
+        "Mountpoint": "/var/lib/docker/volumes/n8n_data-data/_data",
+        "Name": "n8n_data-data",
+        "Options": null,
+        "Scope": "local"
+    }
+]
+
+Archivos funcuionando creados por N8N
+
+# root@srv594061:~# cd /var/lib/docker/volumes/n8n_data-data/_data
+# root@srv594061:/var/lib/docker/volumes/n8n_data-data/_data# ls
+# binaryData  config  crash.journal  database.sqlite  git  n8nEventLog.log  ssh
+
+Luego que intente hacer el backup con el comando de backup
+
+
+root@srv594061:~# docker run --rm   -v n8n_data-data:/volume_data   -v $(pwd):/backup   ubuntu   bash -c "cd /volume_data && tar cvf /backup/generic_backup6.tar ."
+./
+./config
+./crash.journal
+./binaryData/
+./git/
+./database.sqlite
+./ssh/
+./n8nEventLog.log
+root@srv594061:~# 
+
+# Paramos la aplicacion
+docker service scale n8n=0
+
+# Haciendo el restore
+root@srv594061:~# docker volume rm n8n_data-data
+n8n_data-data
+root@srv594061:~# docker run --rm -v n8n_data-data:/volume_data -v $(pwd):/backup ubuntu bash -c "cd /volume_data && tar xvf /backup/generic_backup6.tar && chown -R 999:999 ."
+./
+./config
+./crash.journal
+./binaryData/
+./git/
+./database.sqlite
+./ssh/
+./n8nEventLog.log
+
+# Tenemos los archivos en el volumen
+root@srv594061:~# ls /var/lib/docker/volumes/n8n_data-data/_data
+binaryData  config  crash.journal  database.sqlite  git  n8nEventLog.log  ssh
+root@srv594061:~# 
+
+docker service scale n8n=1
+
+# Luego en N8N Cuando se que el volumen tiene la data 
+Permissions 0644 for n8n settings file /home/node/.n8n/config are too wide. This is ignored for now, but in the future n8n will attempt to change the permissions automatically. To automatically enforce correct permissions now set N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS=true (recommended), or turn this check off set N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS=false.
+User settings loaded from: /home/node/.n8n/config
+Last session crashed
+Error: EACCES: permission denied, open '/home/node/.n8n/crash.journal'
+at open (node:internal/fs/promises:639:25)
+at touchFile (/usr/local/lib/node_modules/n8n/dist/crash-journal.js:18:20)
+at Object.init (/usr/local/lib/node_modules/n8n/dist/crash-journal.js:32:5)
+at Start.initCrashJournal (/usr/local/lib/node_modules/n8n/dist/commands/base-command.js:113:9)
+at Start.init (/usr/local/lib/node_modules/n8n/dist/commands/start.js:141:9)
+at Start._run (/usr/local/lib/node_modules/n8n/node_modules/@oclif/core/lib/command.js:301:13)
+at Config.runCommand (/usr/local/lib/node_modules/n8n/node_modules/@oclif/core/lib/config/config.js:424:25)
+at run (/usr/local/lib/node_modules/n8n/node_modules/@oclif/core/lib/main.js:94:16)
+at /usr/local/lib/node_modules/n8n/bin/n8n:71:2
+TypeError: Cannot read properties of undefined (reading 'error')
+

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

@@ -0,0 +1,123 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const formSchema = z.object({
+	rollbackActive: z.boolean(),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const ShowRollbackSettings = ({ applicationId, children }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const { data: application, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const { mutateAsync: updateApplication, isLoading } =
+		api.application.update.useMutation();
+
+	const form = useForm<FormValues>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			rollbackActive: application?.rollbackActive ?? false,
+		},
+	});
+
+	const onSubmit = async (data: FormValues) => {
+		await updateApplication({
+			applicationId,
+			rollbackActive: data.rollbackActive,
+		})
+			.then(() => {
+				toast.success("Rollback settings updated");
+				setIsOpen(false);
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Failed to update rollback settings");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>{children}</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Rollback Settings</DialogTitle>
+					<DialogDescription>
+						Configure how rollbacks work for this application
+					</DialogDescription>
+					<AlertBlock>
+						Having rollbacks enabled increases storage usage. Be careful with
+						this option. Note that manually cleaning the cache may delete
+						rollback images, making them unavailable for future rollbacks.
+					</AlertBlock>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						<FormField
+							control={form.control}
+							name="rollbackActive"
+							render={({ field }) => (
+								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+									<div className="space-y-0.5">
+										<FormLabel className="text-base">
+											Enable Rollbacks
+										</FormLabel>
+										<FormDescription>
+											Allow rolling back to previous deployments
+										</FormDescription>
+									</div>
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+								</FormItem>
+							)}
+						/>
+
+						<Button type="submit" className="w-full" isLoading={isLoading}>
+							Save Settings
+						</Button>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,542 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	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 {
+	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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import type { CacheType } from "../domains/handle-domain";
+
+export const commonCronExpressions = [
+	{ label: "Every minute", value: "* * * * *" },
+	{ label: "Every hour", value: "0 * * * *" },
+	{ label: "Every day at midnight", value: "0 0 * * *" },
+	{ label: "Every Sunday at midnight", value: "0 0 * * 0" },
+	{ label: "Every month on the 1st at midnight", value: "0 0 1 * *" },
+	{ label: "Every 15 minutes", value: "*/15 * * * *" },
+	{ label: "Every weekday at midnight", value: "0 0 * * 1-5" },
+];
+
+const formSchema = z
+	.object({
+		name: z.string().min(1, "Name is required"),
+		cronExpression: z.string().min(1, "Cron expression is required"),
+		shellType: z.enum(["bash", "sh"]).default("bash"),
+		command: z.string(),
+		enabled: z.boolean().default(true),
+		serviceName: z.string(),
+		scheduleType: z.enum([
+			"application",
+			"compose",
+			"server",
+			"dokploy-server",
+		]),
+		script: z.string(),
+	})
+	.superRefine((data, ctx) => {
+		if (data.scheduleType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required",
+				path: ["serviceName"],
+			});
+		}
+
+		if (
+			(data.scheduleType === "dokploy-server" ||
+				data.scheduleType === "server") &&
+			!data.script
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Script is required",
+				path: ["script"],
+			});
+		}
+
+		if (
+			(data.scheduleType === "application" ||
+				data.scheduleType === "compose") &&
+			!data.command
+		) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Command is required",
+				path: ["command"],
+			});
+		}
+	});
+
+interface Props {
+	id?: string;
+	scheduleId?: string;
+	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
+}
+
+export const HandleSchedules = ({ id, scheduleId, scheduleType }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+
+	const utils = api.useUtils();
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: "",
+			cronExpression: "",
+			shellType: "bash",
+			command: "",
+			enabled: true,
+			serviceName: "",
+			scheduleType: scheduleType || "application",
+			script: "",
+		},
+	});
+
+	const scheduleTypeForm = form.watch("scheduleType");
+
+	const { data: schedule } = api.schedule.one.useQuery(
+		{ scheduleId: scheduleId || "" },
+		{ enabled: !!scheduleId },
+	);
+
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: id || "",
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: !!id && scheduleType === "compose",
+		},
+	);
+
+	useEffect(() => {
+		if (scheduleId && schedule) {
+			form.reset({
+				name: schedule.name,
+				cronExpression: schedule.cronExpression,
+				shellType: schedule.shellType,
+				command: schedule.command,
+				enabled: schedule.enabled,
+				serviceName: schedule.serviceName || "",
+				scheduleType: schedule.scheduleType,
+				script: schedule.script || "",
+			});
+		}
+	}, [form, schedule, scheduleId]);
+
+	const { mutateAsync, isLoading } = scheduleId
+		? api.schedule.update.useMutation()
+		: api.schedule.create.useMutation();
+
+	const onSubmit = async (values: z.infer<typeof formSchema>) => {
+		if (!id && !scheduleId) return;
+
+		await mutateAsync({
+			...values,
+			scheduleId: scheduleId || "",
+			...(scheduleType === "application" && {
+				applicationId: id || "",
+			}),
+			...(scheduleType === "compose" && {
+				composeId: id || "",
+			}),
+			...(scheduleType === "server" && {
+				serverId: id || "",
+			}),
+			...(scheduleType === "dokploy-server" && {
+				userId: id || "",
+			}),
+		})
+			.then(() => {
+				toast.success(
+					`Schedule ${scheduleId ? "updated" : "created"} successfully`,
+				);
+				utils.schedule.list.invalidate({
+					id,
+					scheduleType,
+				});
+				setIsOpen(false);
+			})
+			.catch((error) => {
+				toast.error(
+					error instanceof Error ? error.message : "An unknown error occurred",
+				);
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{scheduleId ? (
+					<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>
+						<PlusCircle className="w-4 h-4 mr-2" />
+						Add Schedule
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent
+				className={cn(
+					scheduleTypeForm === "dokploy-server" || scheduleTypeForm === "server"
+						? "sm:max-w-2xl"
+						: "sm:max-w-lg",
+				)}
+			>
+				<DialogHeader>
+					<DialogTitle>{scheduleId ? "Edit" : "Create"} Schedule</DialogTitle>
+					<DialogDescription>
+						{scheduleId ? "Manage" : "Create"} a schedule to run a task at a
+						specific time or interval.
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						{scheduleTypeForm === "compose" && (
+							<div className="flex flex-col w-full gap-4">
+								{errorServices && (
+									<AlertBlock
+										type="warning"
+										className="[overflow-wrap:anywhere]"
+									>
+										{errorServices?.message}
+									</AlertBlock>
+								)}
+								<FormField
+									control={form.control}
+									name="serviceName"
+									render={({ field }) => (
+										<FormItem className="w-full">
+											<FormLabel>Service Name</FormLabel>
+											<div className="flex gap-2">
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a service name" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														{services?.map((service, index) => (
+															<SelectItem
+																value={service}
+																key={`${service}-${index}`}
+															>
+																{service}
+															</SelectItem>
+														))}
+														<SelectItem value="none" disabled>
+															Empty
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "fetch") {
+																		refetchServices();
+																	} else {
+																		setCacheType("fetch");
+																	}
+																}}
+															>
+																<RefreshCw className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Fetch: Will clone the repository and load the
+																services
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "cache") {
+																		refetchServices();
+																	} else {
+																		setCacheType("cache");
+																	}
+																}}
+															>
+																<DatabaseZap className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Cache: If you previously deployed this compose,
+																it will read the services from the last
+																deployment/fetch from the repository
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						)}
+
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										Task Name
+									</FormLabel>
+									<FormControl>
+										<Input placeholder="Daily Database Backup" {...field} />
+									</FormControl>
+									<FormDescription>
+										A descriptive name for your scheduled task
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="cronExpression"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										Schedule
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<Info className="w-4 h-4 text-muted-foreground cursor-help" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Cron expression format: minute hour day month
+														weekday
+													</p>
+													<p>Example: 0 0 * * * (daily at midnight)</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</FormLabel>
+									<div className="flex flex-col gap-2">
+										<Select
+											onValueChange={(value) => {
+												field.onChange(value);
+											}}
+										>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a predefined schedule" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{commonCronExpressions.map((expr) => (
+													<SelectItem key={expr.value} value={expr.value}>
+														{expr.label} ({expr.value})
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<div className="relative">
+											<FormControl>
+												<Input
+													placeholder="Custom cron expression (e.g., 0 0 * * *)"
+													{...field}
+												/>
+											</FormControl>
+										</div>
+									</div>
+									<FormDescription>
+										Choose a predefined schedule or enter a custom cron
+										expression
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{(scheduleTypeForm === "application" ||
+							scheduleTypeForm === "compose") && (
+							<>
+								<FormField
+									control={form.control}
+									name="shellType"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												Shell Type
+											</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select shell type" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value="bash">Bash</SelectItem>
+													<SelectItem value="sh">Sh</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormDescription>
+												Choose the shell to execute your command
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="command"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												Command
+											</FormLabel>
+											<FormControl>
+												<Input placeholder="npm run backup" {...field} />
+											</FormControl>
+											<FormDescription>
+												The command to execute in your container
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						{(scheduleTypeForm === "dokploy-server" ||
+							scheduleTypeForm === "server") && (
+							<FormField
+								control={form.control}
+								name="script"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Script</FormLabel>
+										<FormControl>
+											<FormControl>
+												<CodeEditor
+													language="shell"
+													placeholder={`# This is a comment
+echo "Hello, world!"
+`}
+													className="h-96 font-mono"
+													{...field}
+												/>
+											</FormControl>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+
+						<FormField
+							control={form.control}
+							name="enabled"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+										Enabled
+									</FormLabel>
+								</FormItem>
+							)}
+						/>
+
+						<Button type="submit" isLoading={isLoading} className="w-full">
+							{scheduleId ? "Update" : "Create"} Schedule
+						</Button>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,243 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import {
+	ClipboardList,
+	Clock,
+	Loader2,
+	Play,
+	Terminal,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
+import { HandleSchedules } from "./handle-schedules";
+
+interface Props {
+	id: string;
+	scheduleType?: "application" | "compose" | "server" | "dokploy-server";
+}
+
+export const ShowSchedules = ({ id, scheduleType = "application" }: Props) => {
+	const {
+		data: schedules,
+		isLoading: isLoadingSchedules,
+		refetch: refetchSchedules,
+	} = api.schedule.list.useQuery(
+		{
+			id: id || "",
+			scheduleType,
+		},
+		{
+			enabled: !!id,
+		},
+	);
+
+	const utils = api.useUtils();
+
+	const { mutateAsync: deleteSchedule, isLoading: isDeleting } =
+		api.schedule.delete.useMutation();
+
+	const { mutateAsync: runManually, isLoading } =
+		api.schedule.runManually.useMutation();
+
+	return (
+		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
+			<CardHeader className="px-0">
+				<div className="flex justify-between items-center">
+					<div className="flex flex-col gap-2">
+						<CardTitle className="text-xl font-bold flex items-center gap-2">
+							Scheduled Tasks
+						</CardTitle>
+						<CardDescription>
+							Schedule tasks to run automatically at specified intervals.
+						</CardDescription>
+					</div>
+
+					{schedules && schedules.length > 0 && (
+						<HandleSchedules id={id} scheduleType={scheduleType} />
+					)}
+				</div>
+			</CardHeader>
+			<CardContent className="px-0">
+				{isLoadingSchedules ? (
+					<div className="flex gap-4   w-full items-center justify-center text-center mx-auto min-h-[45vh]">
+						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
+						<span className="text-sm text-muted-foreground/70">
+							Loading scheduled tasks...
+						</span>
+					</div>
+				) : schedules && schedules.length > 0 ? (
+					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
+						{schedules.map((schedule) => {
+							const serverId =
+								schedule.serverId ||
+								schedule.application?.serverId ||
+								schedule.compose?.serverId;
+							return (
+								<div
+									key={schedule.scheduleId}
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+								>
+									<div className="flex items-start gap-3">
+										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
+											<Clock className="size-4 text-primary/70" />
+										</div>
+										<div className="space-y-1.5">
+											<div className="flex items-center gap-2">
+												<h3 className="text-sm font-medium leading-none">
+													{schedule.name}
+												</h3>
+												<Badge
+													variant={schedule.enabled ? "default" : "secondary"}
+													className="text-[10px] px-1 py-0"
+												>
+													{schedule.enabled ? "Enabled" : "Disabled"}
+												</Badge>
+											</div>
+											<div className="flex items-center gap-2 text-sm text-muted-foreground">
+												<Badge
+													variant="outline"
+													className="font-mono text-[10px] bg-transparent"
+												>
+													Cron: {schedule.cronExpression}
+												</Badge>
+												{schedule.scheduleType !== "server" &&
+													schedule.scheduleType !== "dokploy-server" && (
+														<>
+															<span className="text-xs text-muted-foreground/50">
+																•
+															</span>
+															<Badge
+																variant="outline"
+																className="font-mono text-[10px] bg-transparent"
+															>
+																{schedule.shellType}
+															</Badge>
+														</>
+													)}
+											</div>
+											{schedule.command && (
+												<div className="flex items-center gap-2">
+													<Terminal className="size-3.5 text-muted-foreground/70" />
+													<code className="font-mono text-[10px] text-muted-foreground/70">
+														{schedule.command}
+													</code>
+												</div>
+											)}
+										</div>
+									</div>
+
+									<div className="flex items-center gap-1.5">
+										<ShowDeploymentsModal
+											id={schedule.scheduleId}
+											type="schedule"
+											serverId={serverId || undefined}
+										>
+											<Button variant="ghost" size="icon">
+												<ClipboardList className="size-4  transition-colors " />
+											</Button>
+										</ShowDeploymentsModal>
+
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<Button
+														type="button"
+														variant="ghost"
+														size="icon"
+														isLoading={isLoading}
+														onClick={async () => {
+															toast.success("Schedule run successfully");
+
+															await runManually({
+																scheduleId: schedule.scheduleId,
+															})
+																.then(async () => {
+																	await new Promise((resolve) =>
+																		setTimeout(resolve, 1500),
+																	);
+																	refetchSchedules();
+																})
+																.catch(() => {
+																	toast.error("Error running schedule");
+																});
+														}}
+													>
+														<Play className="size-4  transition-colors" />
+													</Button>
+												</TooltipTrigger>
+												<TooltipContent>Run Manual Schedule</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+
+										<HandleSchedules
+											scheduleId={schedule.scheduleId}
+											id={id}
+											scheduleType={scheduleType}
+										/>
+
+										<DialogAction
+											title="Delete Schedule"
+											description="Are you sure you want to delete this schedule?"
+											type="destructive"
+											onClick={async () => {
+												await deleteSchedule({
+													scheduleId: schedule.scheduleId,
+												})
+													.then(() => {
+														utils.schedule.list.invalidate({
+															id,
+															scheduleType,
+														});
+														toast.success("Schedule deleted successfully");
+													})
+													.catch(() => {
+														toast.error("Error deleting schedule");
+													});
+											}}
+										>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="group hover:bg-red-500/10 "
+												isLoading={isDeleting}
+											>
+												<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+											</Button>
+										</DialogAction>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				) : (
+					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg">
+						<Clock className="size-8 mb-4 text-muted-foreground" />
+						<p className="text-lg font-medium text-muted-foreground">
+							No scheduled tasks
+						</p>
+						<p className="text-sm text-muted-foreground mt-1">
+							Create your first scheduled task to automate your workflows
+						</p>
+						<HandleSchedules id={id} scheduleType={scheduleType} />
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -99,7 +99,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 					<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="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Application</DialogTitle>
 					<DialogDescription>Update the application data</DialogDescription>
@@ -121,7 +121,7 @@ export const UpdateApplication = ({ applicationId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -0,0 +1,672 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	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 {
+	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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusCircle,
+	RefreshCw,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import type { CacheType } from "../domains/handle-domain";
+import { commonCronExpressions } from "../schedules/handle-schedules";
+
+const formSchema = z
+	.object({
+		name: z.string().min(1, "Name is required"),
+		cronExpression: z.string().min(1, "Cron expression is required"),
+		volumeName: z.string().min(1, "Volume name is required"),
+		prefix: z.string(),
+		// keepLatestCount: z.coerce.number().optional(),
+		turnOff: z.boolean().default(false),
+		enabled: z.boolean().default(true),
+		serviceType: z.enum([
+			"application",
+			"compose",
+			"postgres",
+			"mariadb",
+			"mongo",
+			"mysql",
+			"redis",
+		]),
+		serviceName: z.string(),
+		destinationId: z.string().min(1, "Destination required"),
+	})
+	.superRefine((data, ctx) => {
+		if (data.serviceType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required",
+				path: ["serviceName"],
+			});
+		}
+
+		if (data.serviceType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required",
+				path: ["serviceName"],
+			});
+		}
+	});
+
+interface Props {
+	id?: string;
+	volumeBackupId?: string;
+	volumeBackupType?:
+		| "application"
+		| "compose"
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis";
+}
+
+export const HandleVolumeBackups = ({
+	id,
+	volumeBackupId,
+	volumeBackupType,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+
+	const utils = api.useUtils();
+	const form = useForm<z.infer<typeof formSchema>>({
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			name: "",
+			cronExpression: "",
+			volumeName: "",
+			prefix: "",
+			// keepLatestCount: undefined,
+			turnOff: false,
+			enabled: true,
+			serviceName: "",
+			serviceType: volumeBackupType,
+		},
+	});
+
+	const serviceTypeForm = volumeBackupType;
+	const { data: destinations } = api.destination.all.useQuery();
+	const { data: volumeBackup } = api.volumeBackups.one.useQuery(
+		{ volumeBackupId: volumeBackupId || "" },
+		{ enabled: !!volumeBackupId },
+	);
+
+	const { data: mounts } = api.mounts.allNamedByApplicationId.useQuery(
+		{ applicationId: id || "" },
+		{ enabled: !!id && volumeBackupType === "application" },
+	);
+
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: id || "",
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: !!id && volumeBackupType === "compose",
+		},
+	);
+
+	const serviceName = form.watch("serviceName");
+
+	const { data: mountsByService } = api.compose.loadMountsByService.useQuery(
+		{
+			composeId: id || "",
+			serviceName,
+		},
+		{
+			enabled: !!id && volumeBackupType === "compose" && !!serviceName,
+		},
+	);
+
+	useEffect(() => {
+		if (volumeBackupId && volumeBackup) {
+			form.reset({
+				name: volumeBackup.name,
+				cronExpression: volumeBackup.cronExpression,
+				volumeName: volumeBackup.volumeName || "",
+				prefix: volumeBackup.prefix,
+				// keepLatestCount: volumeBackup.keepLatestCount || undefined,
+				turnOff: volumeBackup.turnOff,
+				enabled: volumeBackup.enabled || false,
+				serviceName: volumeBackup.serviceName || "",
+				destinationId: volumeBackup.destinationId,
+				serviceType: volumeBackup.serviceType,
+			});
+		}
+	}, [form, volumeBackup, volumeBackupId]);
+
+	const { mutateAsync, isLoading } = volumeBackupId
+		? api.volumeBackups.update.useMutation()
+		: api.volumeBackups.create.useMutation();
+
+	const onSubmit = async (values: z.infer<typeof formSchema>) => {
+		if (!id && !volumeBackupId) return;
+
+		await mutateAsync({
+			...values,
+			destinationId: values.destinationId,
+			volumeBackupId: volumeBackupId || "",
+			serviceType: volumeBackupType,
+			...(volumeBackupType === "application" && {
+				applicationId: id || "",
+			}),
+			...(volumeBackupType === "compose" && {
+				composeId: id || "",
+			}),
+			...(volumeBackupType === "postgres" && {
+				serverId: id || "",
+			}),
+			...(volumeBackupType === "postgres" && {
+				postgresId: id || "",
+			}),
+			...(volumeBackupType === "mariadb" && {
+				mariadbId: id || "",
+			}),
+			...(volumeBackupType === "mongo" && {
+				mongoId: id || "",
+			}),
+			...(volumeBackupType === "mysql" && {
+				mysqlId: id || "",
+			}),
+			...(volumeBackupType === "redis" && {
+				redisId: id || "",
+			}),
+		})
+			.then(() => {
+				toast.success(
+					`Volume backup ${volumeBackupId ? "updated" : "created"} successfully`,
+				);
+				utils.volumeBackups.list.invalidate({
+					id,
+					volumeBackupType,
+				});
+				setIsOpen(false);
+			})
+			.catch((error) => {
+				toast.error(
+					error instanceof Error ? error.message : "An unknown error occurred",
+				);
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{volumeBackupId ? (
+					<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>
+						<PlusCircle className="w-4 h-4 mr-2" />
+						Add Volume Backup
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent
+				className={cn(
+					"overflow-y-auto",
+					volumeBackupType === "compose" || volumeBackupType === "application"
+						? "max-h-[95vh] sm:max-w-2xl"
+						: " sm:max-w-lg",
+				)}
+			>
+				<DialogHeader>
+					<DialogTitle>
+						{volumeBackupId ? "Edit" : "Create"} Volume Backup
+					</DialogTitle>
+					<DialogDescription>
+						Create a volume backup to backup your volume to a destination
+					</DialogDescription>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										Task Name
+									</FormLabel>
+									<FormControl>
+										<Input placeholder="Daily Database Backup" {...field} />
+									</FormControl>
+									<FormDescription>
+										A descriptive name for your scheduled task
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="cronExpression"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										Schedule
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<Info className="w-4 h-4 text-muted-foreground cursor-help" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Cron expression format: minute hour day month
+														weekday
+													</p>
+													<p>Example: 0 0 * * * (daily at midnight)</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</FormLabel>
+									<div className="flex flex-col gap-2">
+										<Select
+											onValueChange={(value) => {
+												field.onChange(value);
+											}}
+										>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a predefined schedule" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{commonCronExpressions.map((expr) => (
+													<SelectItem key={expr.value} value={expr.value}>
+														{expr.label} ({expr.value})
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<div className="relative">
+											<FormControl>
+												<Input
+													placeholder="Custom cron expression (e.g., 0 0 * * *)"
+													{...field}
+												/>
+											</FormControl>
+										</div>
+									</div>
+									<FormDescription>
+										Choose a predefined schedule or enter a custom cron
+										expression
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="destinationId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Destination</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a destination" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{destinations?.map((destination) => (
+												<SelectItem
+													key={destination.destinationId}
+													value={destination.destinationId}
+												>
+													{destination.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormDescription>
+										Choose the backup destination where files will be stored
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{serviceTypeForm === "compose" && (
+							<>
+								<div className="flex flex-col w-full gap-4">
+									{errorServices && (
+										<AlertBlock
+											type="warning"
+											className="[overflow-wrap:anywhere]"
+										>
+											{errorServices?.message}
+										</AlertBlock>
+									)}
+									<FormField
+										control={form.control}
+										name="serviceName"
+										render={({ field }) => (
+											<FormItem className="w-full">
+												<FormLabel>Service Name</FormLabel>
+												<div className="flex gap-2">
+													<Select
+														onValueChange={field.onChange}
+														defaultValue={field.value || ""}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue placeholder="Select a service name" />
+															</SelectTrigger>
+														</FormControl>
+
+														<SelectContent>
+															{services?.map((service, index) => (
+																<SelectItem
+																	value={service}
+																	key={`${service}-${index}`}
+																>
+																	{service}
+																</SelectItem>
+															))}
+															<SelectItem value="none" disabled>
+																Empty
+															</SelectItem>
+														</SelectContent>
+													</Select>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "fetch") {
+																			refetchServices();
+																		} else {
+																			setCacheType("fetch");
+																		}
+																	}}
+																>
+																	<RefreshCw className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Fetch: Will clone the repository and load the
+																	services
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "cache") {
+																			refetchServices();
+																		} else {
+																			setCacheType("cache");
+																		}
+																	}}
+																>
+																	<DatabaseZap className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Cache: If you previously deployed this
+																	compose, it will read the services from the
+																	last deployment/fetch from the repository
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								{mountsByService && mountsByService.length > 0 && (
+									<FormField
+										control={form.control}
+										name="volumeName"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Volumes</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a volume name" />
+														</SelectTrigger>
+													</FormControl>
+													<SelectContent>
+														{mountsByService?.map((volume) => (
+															<SelectItem
+																key={volume.Name}
+																value={volume.Name || ""}
+															>
+																{volume.Name}
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+												<FormDescription>
+													Choose the volume to backup, if you dont see the
+													volume here, you can type the volume name manually
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</>
+						)}
+						{serviceTypeForm === "application" && (
+							<FormField
+								control={form.control}
+								name="volumeName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Volumes</FormLabel>
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value || ""}
+										>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a volume name" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												{mounts?.map((mount) => (
+													<SelectItem key={mount.Name} value={mount.Name || ""}>
+														{mount.Name}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<FormDescription>
+											Choose the volume to backup, if you dont see the volume
+											here, you can type the volume name manually
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+
+						<FormField
+							control={form.control}
+							name="volumeName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Volume Name</FormLabel>
+									<FormControl>
+										<Input placeholder="my-volume-name" {...field} />
+									</FormControl>
+									<FormDescription>
+										The name of the Docker volume to backup
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="prefix"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Backup Prefix</FormLabel>
+									<FormControl>
+										<Input placeholder="backup-" {...field} />
+									</FormControl>
+									<FormDescription>
+										Prefix for backup files (optional)
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* <FormField
+							control={form.control}
+							name="keepLatestCount"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Keep Latest Count</FormLabel>
+									<FormControl>
+										<Input
+											type="number"
+											placeholder="5"
+											{...field}
+											onChange={(e) =>
+												field.onChange(Number(e.target.value) || undefined)
+											}
+										/>
+									</FormControl>
+									<FormDescription>
+										Number of backup files to keep (optional)
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/> */}
+
+						<FormField
+							control={form.control}
+							name="turnOff"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+										Turn Off Container During Backup
+									</FormLabel>
+									<FormDescription className="text-amber-600 dark:text-amber-400">
+										⚠️ The container will be temporarily stopped during backup to
+										prevent file corruption. This ensures data integrity but may
+										cause temporary service interruption.
+									</FormDescription>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="enabled"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="flex items-center gap-2">
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+										Enabled
+									</FormLabel>
+								</FormItem>
+							)}
+						/>
+
+						<Button type="submit" isLoading={isLoading} className="w-full">
+							{volumeBackupId ? "Update" : "Create"} Volume Backup
+						</Button>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,411 @@
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+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 {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import { CheckIcon, ChevronsUpDown, Copy, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+import { formatBytes } from "../../database/backups/restore-backup";
+import { AlertBlock } from "@/components/shared/alert-block";
+
+interface Props {
+	id: string;
+	type: "application" | "compose";
+	serverId?: string;
+}
+
+const RestoreBackupSchema = z.object({
+	destinationId: z
+		.string({
+			required_error: "Please select a destination",
+		})
+		.min(1, {
+			message: "Destination is required",
+		}),
+	backupFile: z
+		.string({
+			required_error: "Please select a backup file",
+		})
+		.min(1, {
+			message: "Backup file is required",
+		}),
+	volumeName: z
+		.string({
+			required_error: "Please enter a volume name",
+		})
+		.min(1, {
+			message: "Volume name is required",
+		}),
+});
+
+export const RestoreVolumeBackups = ({ id, type, serverId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+	const { data: destinations = [] } = api.destination.all.useQuery();
+
+	const form = useForm<z.infer<typeof RestoreBackupSchema>>({
+		defaultValues: {
+			destinationId: "",
+			backupFile: "",
+			volumeName: "",
+		},
+		resolver: zodResolver(RestoreBackupSchema),
+	});
+
+	const destinationId = form.watch("destinationId");
+	const volumeName = form.watch("volumeName");
+	const backupFile = form.watch("backupFile");
+
+	const debouncedSetSearch = debounce((value: string) => {
+		setDebouncedSearchTerm(value);
+	}, 350);
+
+	const handleSearchChange = (value: string) => {
+		setSearch(value);
+		debouncedSetSearch(value);
+	};
+
+	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+		{
+			destinationId: destinationId,
+			search: debouncedSearchTerm,
+			serverId: serverId ?? "",
+		},
+		{
+			enabled: isOpen && !!destinationId,
+		},
+	);
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+
+	api.volumeBackups.restoreVolumeBackupWithLogs.useSubscription(
+		{
+			id,
+			serviceType: type,
+			serverId,
+			destinationId,
+			volumeName,
+			backupFileName: backupFile,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
+
+				if (log === "Restore completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Restore logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+
+	const onSubmit = async () => {
+		setIsDeploying(true);
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					<RotateCcw className="mr-2 size-4" />
+					Restore Volume Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle className="flex items-center">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Volume Backup
+					</DialogTitle>
+					<DialogDescription>
+						Select a destination and search for volume backup files
+					</DialogDescription>
+					<AlertBlock>
+						Make sure the volume name is not being used by another container.
+					</AlertBlock>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-restore-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="destinationId"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Destination</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value
+														? destinations.find(
+																(d) => d.destinationId === field.value,
+															)?.name
+														: "Select Destination"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search destinations..."
+													className="h-9"
+												/>
+												<CommandEmpty>No destinations found.</CommandEmpty>
+												<ScrollArea className="h-64">
+													<CommandGroup>
+														{destinations.map((destination) => (
+															<CommandItem
+																value={destination.destinationId}
+																key={destination.destinationId}
+																onSelect={() => {
+																	form.setValue(
+																		"destinationId",
+																		destination.destinationId,
+																	);
+																}}
+															>
+																{destination.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		destination.destinationId === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="backupFile"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel className="flex items-center">
+										Search Backup Files
+										{field.value && (
+											<Badge variant="outline" className="truncate w-52">
+												{field.value}
+												<Copy
+													className="ml-2 size-4 cursor-pointer"
+													onClick={(e) => {
+														e.stopPropagation();
+														e.preventDefault();
+														copy(field.value);
+														toast.success("Backup file copied to clipboard");
+													}}
+												/>
+											</Badge>
+										)}
+									</FormLabel>
+									<Popover modal>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													<span className="truncate text-left flex-1 w-52">
+														{field.value || "Search and select a backup file"}
+													</span>
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search backup files..."
+													value={search}
+													onValueChange={handleSearchChange}
+													className="h-9"
+												/>
+												{isLoading ? (
+													<div className="py-6 text-center text-sm">
+														Loading backup files...
+													</div>
+												) : files.length === 0 && search ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files found for "{search}"
+													</div>
+												) : files.length === 0 ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files available
+													</div>
+												) : (
+													<ScrollArea className="h-64">
+														<CommandGroup className="w-96">
+															{files?.map((file) => (
+																<CommandItem
+																	value={file.Path}
+																	key={file.Path}
+																	onSelect={() => {
+																		form.setValue("backupFile", file.Path);
+																		if (file.IsDir) {
+																			setSearch(`${file.Path}/`);
+																			setDebouncedSearchTerm(`${file.Path}/`);
+																		} else {
+																			setSearch(file.Path);
+																			setDebouncedSearchTerm(file.Path);
+																		}
+																	}}
+																>
+																	<div className="flex w-full flex-col gap-1">
+																		<div className="flex w-full justify-between">
+																			<span className="font-medium">
+																				{file.Path}
+																			</span>
+
+																			<CheckIcon
+																				className={cn(
+																					"ml-auto h-4 w-4",
+																					file.Path === field.value
+																						? "opacity-100"
+																						: "opacity-0",
+																				)}
+																			/>
+																		</div>
+																		<div className="flex items-center gap-4 text-xs text-muted-foreground">
+																			<span>
+																				Size: {formatBytes(file.Size)}
+																			</span>
+																			{file.IsDir && (
+																				<span className="text-blue-500">
+																					Directory
+																				</span>
+																			)}
+																			{file.Hashes?.MD5 && (
+																				<span>MD5: {file.Hashes.MD5}</span>
+																			)}
+																		</div>
+																	</div>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												)}
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="volumeName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Volume Name</FormLabel>
+									<FormControl>
+										<Input placeholder="Enter volume name" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter>
+							<Button
+								isLoading={isDeploying}
+								form="hook-form-restore-backup"
+								type="submit"
+								// disabled={
+								// 	!form.watch("backupFile") ||
+								// 	(backupType === "compose" && !form.watch("databaseType"))
+								// }
+							>
+								Restore
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						// refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,250 @@
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import {
+	ClipboardList,
+	DatabaseBackup,
+	Loader2,
+	Play,
+	Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { HandleVolumeBackups } from "./handle-volume-backups";
+import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
+import { RestoreVolumeBackups } from "./restore-volume-backups";
+
+interface Props {
+	id: string;
+	type?: "application" | "compose";
+	serverId?: string;
+}
+
+export const ShowVolumeBackups = ({
+	id,
+	type = "application",
+	serverId,
+}: Props) => {
+	const {
+		data: volumeBackups,
+		isLoading: isLoadingVolumeBackups,
+		refetch: refetchVolumeBackups,
+	} = api.volumeBackups.list.useQuery(
+		{
+			id: id || "",
+			volumeBackupType: type,
+		},
+		{
+			enabled: !!id,
+		},
+	);
+
+	const utils = api.useUtils();
+
+	const { mutateAsync: deleteVolumeBackup, isLoading: isDeleting } =
+		api.volumeBackups.delete.useMutation();
+
+	const { mutateAsync: runManually, isLoading } =
+		api.volumeBackups.runManually.useMutation();
+
+	return (
+		<Card className="border px-6 shadow-none bg-transparent h-full min-h-[50vh]">
+			<CardHeader className="px-0">
+				<div className="flex justify-between items-center">
+					<div className="flex flex-col gap-2">
+						<CardTitle className="text-xl font-bold flex items-center gap-2">
+							Volume Backups
+						</CardTitle>
+						<CardDescription>
+							Schedule volume backups to run automatically at specified
+							intervals.
+						</CardDescription>
+					</div>
+
+					<div className="flex items-center gap-2">
+						{volumeBackups && volumeBackups.length > 0 && (
+							<>
+								<HandleVolumeBackups id={id} volumeBackupType={type} />
+
+								<div className="flex items-center gap-2">
+									<RestoreVolumeBackups
+										id={id}
+										type={type}
+										serverId={serverId}
+									/>
+								</div>
+							</>
+						)}
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent className="px-0">
+				{isLoadingVolumeBackups ? (
+					<div className="flex gap-4   w-full items-center justify-center text-center mx-auto min-h-[45vh]">
+						<Loader2 className="size-4 text-muted-foreground/70 transition-colors animate-spin self-center" />
+						<span className="text-sm text-muted-foreground/70">
+							Loading volume backups...
+						</span>
+					</div>
+				) : volumeBackups && volumeBackups.length > 0 ? (
+					<div className="grid xl:grid-cols-2 gap-4 grid-cols-1 h-full">
+						{volumeBackups.map((volumeBackup) => {
+							const serverId =
+								volumeBackup.application?.serverId ||
+								volumeBackup.postgres?.serverId ||
+								volumeBackup.mysql?.serverId ||
+								volumeBackup.mariadb?.serverId ||
+								volumeBackup.mongo?.serverId ||
+								volumeBackup.redis?.serverId ||
+								volumeBackup.compose?.serverId;
+							return (
+								<div
+									key={volumeBackup.volumeBackupId}
+									className="flex items-center justify-between rounded-lg border p-3 transition-colors bg-muted/50"
+								>
+									<div className="flex items-start gap-3">
+										<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary/5">
+											<DatabaseBackup className="size-4 text-primary/70" />
+										</div>
+										<div className="space-y-1.5">
+											<div className="flex items-center gap-2">
+												<h3 className="text-sm font-medium leading-none">
+													{volumeBackup.name}
+												</h3>
+												<Badge
+													variant={
+														volumeBackup.enabled ? "default" : "secondary"
+													}
+													className="text-[10px] px-1 py-0"
+												>
+													{volumeBackup.enabled ? "Enabled" : "Disabled"}
+												</Badge>
+											</div>
+											<div className="flex items-center gap-2 text-sm text-muted-foreground">
+												<Badge
+													variant="outline"
+													className="font-mono text-[10px] bg-transparent"
+												>
+													Cron: {volumeBackup.cronExpression}
+												</Badge>
+											</div>
+										</div>
+									</div>
+
+									<div className="flex items-center gap-1.5">
+										<ShowDeploymentsModal
+											id={volumeBackup.volumeBackupId}
+											type="volumeBackup"
+											serverId={serverId || undefined}
+										>
+											<Button variant="ghost" size="icon">
+												<ClipboardList className="size-4  transition-colors " />
+											</Button>
+										</ShowDeploymentsModal>
+
+										<TooltipProvider delayDuration={0}>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<Button
+														type="button"
+														variant="ghost"
+														size="icon"
+														isLoading={isLoading}
+														onClick={async () => {
+															toast.success("Volume backup run successfully");
+
+															await runManually({
+																volumeBackupId: volumeBackup.volumeBackupId,
+															})
+																.then(async () => {
+																	await new Promise((resolve) =>
+																		setTimeout(resolve, 1500),
+																	);
+																	refetchVolumeBackups();
+																})
+																.catch(() => {
+																	toast.error("Error running volume backup");
+																});
+														}}
+													>
+														<Play className="size-4  transition-colors" />
+													</Button>
+												</TooltipTrigger>
+												<TooltipContent>
+													Run Manual Volume Backup
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+
+										<HandleVolumeBackups
+											volumeBackupId={volumeBackup.volumeBackupId}
+											id={id}
+											volumeBackupType={type}
+										/>
+
+										<DialogAction
+											title="Delete Volume Backup"
+											description="Are you sure you want to delete this volume backup?"
+											type="destructive"
+											onClick={async () => {
+												await deleteVolumeBackup({
+													volumeBackupId: volumeBackup.volumeBackupId,
+												})
+													.then(() => {
+														utils.volumeBackups.list.invalidate({
+															id,
+															volumeBackupType: type,
+														});
+														toast.success("Volume backup deleted successfully");
+													})
+													.catch(() => {
+														toast.error("Error deleting volume backup");
+													});
+											}}
+										>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="group hover:bg-red-500/10 "
+												isLoading={isDeleting}
+											>
+												<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+											</Button>
+										</DialogAction>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				) : (
+					<div className="flex flex-col gap-2 items-center justify-center py-12  rounded-lg">
+						<DatabaseBackup className="size-8 mb-4 text-muted-foreground" />
+						<p className="text-lg font-medium text-muted-foreground">
+							No volume backups
+						</p>
+						<p className="text-sm text-muted-foreground mt-1">
+							Create your first volume backup to automate your workflows
+						</p>
+						<div className="flex items-center gap-2">
+							<HandleVolumeBackups id={id} volumeBackupType={type} />
+							<RestoreVolumeBackups id={id} type={type} serverId={serverId} />
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -126,7 +126,7 @@ export const DeleteService = ({ id, type }: Props) => {
 					<Trash2 className="size-4 text-primary group-hover:text-red-500" />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-lg">
+			<DialogContent className="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Are you absolutely sure?</DialogTitle>
 					<DialogDescription>

apps/dokploy/components/dashboard/compose/deployments/cancel-queues-compose.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 { Paintbrush } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	composeId: string;
-}
-
-export const CancelQueuesCompose = ({ composeId }: Props) => {
-	const { mutateAsync, isLoading } = api.compose.cleanQueues.useMutation();
-	const { data: isCloud } = api.settings.isCloud.useQuery();
-
-	if (isCloud) {
-		return null;
-	}
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger asChild>
-				<Button variant="destructive" className="w-fit" isLoading={isLoading}>
-					Cancel Queues
-					<Paintbrush className="size-4" />
-				</Button>
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>
-						Are you sure to cancel the incoming deployments?
-					</AlertDialogTitle>
-					<AlertDialogDescription>
-						This will cancel all the incoming deployments
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								composeId,
-							})
-								.then(() => {
-									toast.success("Queues are being cleaned");
-								})
-								.catch((err) => {
-									toast.error(err.message);
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

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

@@ -1,59 +0,0 @@
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-	AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { api } from "@/utils/api";
-import { RefreshCcw } from "lucide-react";
-import { toast } from "sonner";
-
-interface Props {
-	composeId: string;
-}
-export const RefreshTokenCompose = ({ composeId }: Props) => {
-	const { mutateAsync } = api.compose.refreshToken.useMutation();
-	const utils = api.useUtils();
-	return (
-		<AlertDialog>
-			<AlertDialogTrigger>
-				<RefreshCcw className="h-4 w-4 cursor-pointer text-muted-foreground" />
-			</AlertDialogTrigger>
-			<AlertDialogContent>
-				<AlertDialogHeader>
-					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-					<AlertDialogDescription>
-						This action cannot be undone. This will permanently change the token
-						and all the previous tokens will be invalidated
-					</AlertDialogDescription>
-				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync({
-								composeId,
-							})
-								.then(() => {
-									utils.compose.one.invalidate({
-										composeId,
-									});
-									toast.success("Refresh Token updated");
-								})
-								.catch(() => {
-									toast.error("Error updating the refresh token");
-								});
-						}}
-					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
-			</AlertDialogContent>
-		</AlertDialog>
-	);
-};

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

@@ -1,184 +0,0 @@
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	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;
-	serverId?: string;
-	open: boolean;
-	onClose: () => void;
-	errorMessage?: string;
-}
-export const ShowDeploymentCompose = ({
-	logPath,
-	open,
-	onClose,
-	serverId,
-	errorMessage,
-}: Props) => {
-	const [data, setData] = useState("");
-	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
-	const [showExtraLogs, setShowExtraLogs] = useState(false);
-	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;
-
-		setData("");
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-
-		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}&serverId=${serverId}`;
-		const ws = new WebSocket(wsUrl);
-
-		wsRef.current = ws; // Store WebSocket instance in ref
-
-		ws.onmessage = (e) => {
-			setData((currentData) => currentData + e.data);
-		};
-
-		ws.onerror = (error) => {
-			console.error("WebSocket error: ", error);
-		};
-
-		ws.onclose = () => {
-			wsRef.current = null;
-		};
-
-		return () => {
-			if (wsRef.current?.readyState === WebSocket.OPEN) {
-				ws.close();
-				wsRef.current = null;
-			}
-		};
-	}, [logPath, open]);
-
-	useEffect(() => {
-		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();
-
-		if (autoScroll && scrollRef.current) {
-			scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-		}
-	}, [filteredLogs, autoScroll]);
-
-	const optionalErrors = parseLogs(errorMessage || "");
-
-	return (
-		<Dialog
-			open={open}
-			onOpenChange={(e) => {
-				onClose();
-				if (!e) {
-					setData("");
-				}
-
-				if (wsRef.current) {
-					if (wsRef.current.readyState === WebSocket.OPEN) {
-						wsRef.current.close();
-					}
-				}
-			}}
-		>
-			<DialogContent className={"sm:max-w-5xl max-h-screen"}>
-				<DialogHeader>
-					<DialogTitle>Deployment</DialogTitle>
-					<DialogDescription className="flex items-center gap-2">
-						<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
-					ref={scrollRef}
-					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
-				>
-					{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/compose/deployments/show-deployments-compose.tsx

@@ -1,125 +0,0 @@
-import { DateTooltip } from "@/components/shared/date-tooltip";
-import { StatusTooltip } from "@/components/shared/status-tooltip";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { type RouterOutputs, api } from "@/utils/api";
-import { RocketIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { CancelQueuesCompose } from "./cancel-queues-compose";
-import { RefreshTokenCompose } from "./refresh-token-compose";
-import { ShowDeploymentCompose } from "./show-deployment-compose";
-
-interface Props {
-	composeId: string;
-}
-export const ShowDeploymentsCompose = ({ composeId }: Props) => {
-	const [activeLog, setActiveLog] = useState<
-		RouterOutputs["deployment"]["all"][number] | null
-	>(null);
-	const { data } = api.compose.one.useQuery({ composeId });
-	const { data: deployments } = api.deployment.allByCompose.useQuery(
-		{ composeId },
-		{
-			enabled: !!composeId,
-			refetchInterval: 5000,
-		},
-	);
-	const [url, setUrl] = React.useState("");
-	useEffect(() => {
-		setUrl(document.location.origin);
-	}, []);
-
-	return (
-		<Card className="bg-background">
-			<CardHeader className="flex flex-row items-center justify-between flex-wrap gap-2">
-				<div className="flex flex-col gap-2">
-					<CardTitle className="text-xl">Deployments</CardTitle>
-					<CardDescription>
-						See all the 10 last deployments for this compose
-					</CardDescription>
-				</div>
-				<CancelQueuesCompose composeId={composeId} />
-				{/* <CancelQueues applicationId={applicationId} /> */}
-			</CardHeader>
-			<CardContent className="flex flex-col gap-4">
-				<div className="flex flex-col gap-2 text-sm">
-					<span>
-						If you want to re-deploy this application use this URL in the config
-						of your git provider or docker
-					</span>
-					<div className="flex flex-row items-center gap-2 flex-wrap">
-						<span>Webhook URL: </span>
-						<div className="flex flex-row items-center gap-2">
-							<span className="text-muted-foreground">
-								{`${url}/api/deploy/compose/${data?.refreshToken}`}
-							</span>
-							<RefreshTokenCompose composeId={composeId} />
-						</div>
-					</div>
-				</div>
-				{data?.deployments?.length === 0 ? (
-					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
-						<RocketIcon className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
-							No deployments found
-						</span>
-					</div>
-				) : (
-					<div className="flex flex-col gap-4">
-						{deployments?.map((deployment) => (
-							<div
-								key={deployment.deploymentId}
-								className="flex items-center justify-between rounded-lg border p-4"
-							>
-								<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="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>
-				)}
-				<ShowDeploymentCompose
-					serverId={data?.serverId || ""}
-					open={Boolean(activeLog && activeLog.logPath !== null)}
-					onClose={() => setActiveLog(null)}
-					logPath={activeLog?.logPath || ""}
-					errorMessage={activeLog?.errorMessage || ""}
-				/>
-			</CardContent>
-		</Card>
-	);
-};

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

@@ -1,441 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input, NumberInput } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { domainCompose } from "@/server/db/validations/domain";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import type z from "zod";
-
-type Domain = z.infer<typeof domainCompose>;
-
-export type CacheType = "fetch" | "cache";
-
-interface Props {
-	composeId: string;
-	domainId?: string;
-	children: React.ReactNode;
-}
-
-export const AddDomainCompose = ({
-	composeId,
-	domainId = "",
-	children,
-}: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cacheType, setCacheType] = useState<CacheType>("cache");
-	const utils = api.useUtils();
-	const { data, refetch } = api.domain.one.useQuery(
-		{
-			domainId,
-		},
-		{
-			enabled: !!domainId,
-		},
-	);
-
-	const { data: compose } = api.compose.one.useQuery(
-		{
-			composeId,
-		},
-		{
-			enabled: !!composeId,
-		},
-	);
-
-	const {
-		data: services,
-		isFetching: isLoadingServices,
-		error: errorServices,
-		refetch: refetchServices,
-	} = api.compose.loadServices.useQuery(
-		{
-			composeId,
-			type: cacheType,
-		},
-		{
-			retry: false,
-			refetchOnWindowFocus: false,
-		},
-	);
-
-	const { mutateAsync: generateDomain, isLoading: isLoadingGenerate } =
-		api.domain.generateDomain.useMutation();
-
-	const { mutateAsync, isError, error, isLoading } = domainId
-		? api.domain.update.useMutation()
-		: api.domain.create.useMutation();
-
-	const form = useForm<Domain>({
-		resolver: zodResolver(domainCompose),
-	});
-
-	const https = form.watch("https");
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				...data,
-				/* Convert null to undefined */
-				path: data?.path || undefined,
-				port: data?.port || undefined,
-				serviceName: data?.serviceName || 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,
-			composeId,
-			domainType: "compose",
-			...data,
-		})
-			.then(async () => {
-				await utils.domain.byComposeId.invalidate({
-					composeId,
-				});
-				toast.success(dictionary.success);
-				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>
-				<div className="flex flex-col gap-4">
-					<AlertBlock type="info">
-						Deploy is required to apply changes after creating or updating a
-						domain.
-					</AlertBlock>
-					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				</div>
-
-				<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">
-								{errorServices && (
-									<AlertBlock
-										type="warning"
-										className="[overflow-wrap:anywhere]"
-									>
-										{errorServices?.message}
-									</AlertBlock>
-								)}
-								<div className="flex flex-row items-end w-full gap-4">
-									<FormField
-										control={form.control}
-										name="serviceName"
-										render={({ field }) => (
-											<FormItem className="w-full">
-												<FormLabel>Service Name</FormLabel>
-												<div className="flex gap-2">
-													<Select
-														onValueChange={field.onChange}
-														defaultValue={field.value || ""}
-													>
-														<FormControl>
-															<SelectTrigger>
-																<SelectValue placeholder="Select a service name" />
-															</SelectTrigger>
-														</FormControl>
-
-														<SelectContent>
-															{services?.map((service, index) => (
-																<SelectItem
-																	value={service}
-																	key={`${service}-${index}`}
-																>
-																	{service}
-																</SelectItem>
-															))}
-															<SelectItem value="none" disabled>
-																Empty
-															</SelectItem>
-														</SelectContent>
-													</Select>
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	variant="secondary"
-																	type="button"
-																	isLoading={isLoadingServices}
-																	onClick={() => {
-																		if (cacheType === "fetch") {
-																			refetchServices();
-																		} else {
-																			setCacheType("fetch");
-																		}
-																	}}
-																>
-																	<RefreshCw className="size-4 text-muted-foreground" />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent
-																side="left"
-																sideOffset={5}
-																className="max-w-[10rem]"
-															>
-																<p>
-																	Fetch: Will clone the repository and load the
-																	services
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	variant="secondary"
-																	type="button"
-																	isLoading={isLoadingServices}
-																	onClick={() => {
-																		if (cacheType === "cache") {
-																			refetchServices();
-																		} else {
-																			setCacheType("cache");
-																		}
-																	}}
-																>
-																	<DatabaseZap className="size-4 text-muted-foreground" />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent
-																side="left"
-																sideOffset={5}
-																className="max-w-[10rem]"
-															>
-																<p>
-																	Cache: If you previously deployed this
-																	compose, it will read the services from the
-																	last deployment/fetch from the repository
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-												</div>
-
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								</div>
-
-								<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({
-																		serverId: compose?.serverId || "",
-																		appName: compose?.appName || "",
-																	})
-																		.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>
-									)}
-								/>
-
-								{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={form.formState.isSubmitting}
-							form="hook-form"
-							type="submit"
-						>
-							{dictionary.submit}
-						</Button>
-					</DialogFooter>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -1,150 +0,0 @@
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { api } from "@/utils/api";
-import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
-import Link from "next/link";
-import { toast } from "sonner";
-import { AddDomainCompose } from "./add-domain";
-
-interface Props {
-	composeId: string;
-}
-
-export const ShowDomainsCompose = ({ composeId }: Props) => {
-	const { data, refetch } = api.domain.byComposeId.useQuery(
-		{
-			composeId,
-		},
-		{
-			enabled: !!composeId,
-		},
-	);
-
-	const { mutateAsync: deleteDomain, isLoading: isRemoving } =
-		api.domain.delete.useMutation();
-
-	return (
-		<div className="flex w-full flex-col gap-5 ">
-			<Card className="bg-background">
-				<CardHeader className="flex flex-row items-center flex-wrap gap-4 justify-between">
-					<div className="flex flex-col gap-1">
-						<CardTitle className="text-xl">Domains</CardTitle>
-						<CardDescription>
-							Domains are used to access to the application
-						</CardDescription>
-					</div>
-
-					<div className="flex flex-row gap-4 flex-wrap">
-						{data && data?.length > 0 && (
-							<AddDomainCompose composeId={composeId}>
-								<Button>
-									<GlobeIcon className="size-4" /> Add Domain
-								</Button>
-							</AddDomainCompose>
-						)}
-					</div>
-				</CardHeader>
-				<CardContent className="flex w-full flex-row gap-4">
-					{data?.length === 0 ? (
-						<div className="flex w-full flex-col items-center justify-center gap-3">
-							<GlobeIcon className="size-8 text-muted-foreground" />
-							<span className="text-base text-muted-foreground">
-								To access to the application it is required to set at least 1
-								domain
-							</span>
-							<div className="flex flex-row gap-4 flex-wrap">
-								<AddDomainCompose composeId={composeId}>
-									<Button>
-										<GlobeIcon className="size-4" /> Add Domain
-									</Button>
-								</AddDomainCompose>
-							</div>
-						</div>
-					) : (
-						<div className="flex w-full flex-col gap-4">
-							{data?.map((item) => {
-								return (
-									<div
-										key={item.domainId}
-										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
-									>
-										<div className="md:basis-1/2 flex gap-6 w-full items-center">
-											<span className="opacity-50 text-center font-medium text-sm whitespace-nowrap">
-												{item.serviceName}
-											</span>
-
-											<Link
-												className="flex gap-2 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
-												target="_blank"
-												href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
-											>
-												<span className="truncate  text-sm">{item.host}</span>
-												<ExternalLink className="size-4 min-w-4" />
-											</Link>
-										</div>
-
-										<div className="flex gap-8">
-											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
-												<span>{item.path}</span>
-												<span>{item.port}</span>
-												<span>{item.https ? "HTTPS" : "HTTP"}</span>
-											</div>
-
-											<div className="flex gap-2">
-												<AddDomainCompose
-													composeId={composeId}
-													domainId={item.domainId}
-												>
-													<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>
-												</AddDomainCompose>
-												<DialogAction
-													title="Delete Domain"
-													description="Are you sure you want to delete this domain?"
-													type="destructive"
-													onClick={async () => {
-														await deleteDomain({
-															domainId: item.domainId,
-														})
-															.then((_data) => {
-																refetch();
-																toast.success("Domain deleted successfully");
-															})
-															.catch(() => {
-																toast.error("Error deleting domain");
-															});
-													}}
-												>
-													<Button
-														variant="ghost"
-														size="icon"
-														className="group hover:bg-red-500/10"
-														isLoading={isRemoving}
-													>
-														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-													</Button>
-												</DialogAction>
-											</div>
-										</div>
-									</div>
-								);
-							})}
-						</div>
-					)}
-				</CardContent>
-			</Card>
-		</div>
-	);
-};

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

@@ -1,8 +1,15 @@
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import { Ban, CheckCircle2, Hammer, Terminal } from "lucide-react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
@@ -27,116 +34,180 @@ export const ComposeActions = ({ composeId }: Props) => {
 		api.compose.stop.useMutation();
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
-			<DialogAction
+			<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-				title="Deploy Compose"
-				description="Are you sure you want to deploy this compose?"
-				type="default"
-				onClick={async () => {
-					await deploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose deployed successfully");
-							refetch();
-							router.push(
-								`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
-							);
-						})
-						.catch(() => {
-							toast.error("Error deploying compose");
-						});
-				}}
-			>
-				<Button variant="default" isLoading={data?.composeStatus === "running"}>
-					Deploy
-				</Button>
-			</DialogAction>
-			<DialogAction
-				title="Rebuild Compose"
-				description="Are you sure you want to rebuild this compose?"
-				type="default"
-				onClick={async () => {
-					await redeploy({
-						composeId: composeId,
-					})
-						.then(() => {
-							toast.success("Compose rebuilt successfully");
-							refetch();
-						})
-						.catch(() => {
-							toast.error("Error rebuilding compose");
-						});
-				}}
-			>
-				<Button
-					variant="secondary"
-					isLoading={data?.composeStatus === "running"}
-				>
-					Rebuild
-					<Hammer className="size-4" />
-				</Button>
-			</DialogAction>
-			{data?.composeType === "docker-compose" &&
-			data?.composeStatus === "idle" ? (
 				<DialogAction
-					title="Start Compose"
+					title="Deploy Compose"
-					description="Are you sure you want to start this compose?"
+					description="Are you sure you want to deploy this compose?"
 					type="default"
 					onClick={async () => {
-						await start({
+						await deploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose started successfully");
+								toast.success("Compose deployed successfully");
 								refetch();
+								router.push(
+									`/dashboard/project/${data?.project.projectId}/services/compose/${composeId}?tab=deployments`,
+								);
 							})
 							.catch(() => {
-								toast.error("Error starting compose");
+								toast.error("Error deploying compose");
 							});
 					}}
 				>
-					<Button variant="secondary" isLoading={isStarting}>
+					<Button
-						Start
+						variant="default"
-						<CheckCircle2 className="size-4" />
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+					>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<div className="flex items-center">
+									<Rocket className="size-4 mr-1" />
+									Deploy
+								</div>
+							</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="Stop Compose"
+					title="Reload Compose"
-					description="Are you sure you want to stop this compose?"
+					description="Are you sure you want to reload this compose?"
+					type="default"
 					onClick={async () => {
-						await stop({
+						await redeploy({
 							composeId: composeId,
 						})
 							.then(() => {
-								toast.success("Compose stopped successfully");
+								toast.success("Compose reloaded successfully");
 								refetch();
 							})
 							.catch(() => {
-								toast.error("Error stopping compose");
+								toast.error("Error reloading compose");
 							});
 					}}
 				>
-					<Button variant="destructive" isLoading={isStopping}>
+					<Button
-						Stop
+						variant="secondary"
-						<Ban className="size-4" />
+						isLoading={data?.composeStatus === "running"}
+						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+					>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<div className="flex items-center">
+									<RefreshCcw className="size-4 mr-1" />
+									Reload
+								</div>
+							</TooltipTrigger>
+							<TooltipPrimitive.Portal>
+								<TooltipContent sideOffset={5} className="z-[60]">
+									<p>Reload the compose without rebuilding it</p>
+								</TooltipContent>
+							</TooltipPrimitive.Portal>
+						</Tooltip>
 					</Button>
 				</DialogAction>
-			)}
+				{data?.composeType === "docker-compose" &&
-
+				data?.composeStatus === "idle" ? (
+					<DialogAction
+						title="Start Compose"
+						description="Are you sure you want to start this compose?"
+						type="default"
+						onClick={async () => {
+							await start({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose started successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error starting compose");
+								});
+						}}
+					>
+						<Button
+							variant="secondary"
+							isLoading={isStarting}
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center">
+										<CheckCircle2 className="size-4 mr-1" />
+										Start
+									</div>
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>
+											Start the compose (requires a previous successful build)
+										</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
+					</DialogAction>
+				) : (
+					<DialogAction
+						title="Stop Compose"
+						description="Are you sure you want to stop this compose?"
+						onClick={async () => {
+							await stop({
+								composeId: composeId,
+							})
+								.then(() => {
+									toast.success("Compose stopped successfully");
+									refetch();
+								})
+								.catch(() => {
+									toast.error("Error stopping compose");
+								});
+						}}
+					>
+						<Button
+							variant="destructive"
+							isLoading={isStopping}
+							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+						>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<div className="flex items-center">
+										<Ban className="size-4 mr-1" />
+										Stop
+									</div>
+								</TooltipTrigger>
+								<TooltipPrimitive.Portal>
+									<TooltipContent sideOffset={5} className="z-[60]">
+										<p>Stop the currently running compose</p>
+									</TooltipContent>
+								</TooltipPrimitive.Portal>
+							</Tooltip>
+						</Button>
+					</DialogAction>
+				)}
+			</TooltipProvider>
 			<DockerTerminalModal
 				appName={data?.appName || ""}
 				serverId={data?.serverId || ""}
 			>
-				<Button variant="outline">
+				<Button
-					<Terminal />
+					variant="outline"
+					className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+				>
+					<Terminal className="size-4 mr-1" />
 					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"
+					aria-label="Toggle autodeploy"
 					checked={data?.autoDeploy || false}
 					onCheckedChange={async (enabled) => {
 						await update({
@@ -151,7 +222,7 @@ export const ComposeActions = ({ composeId }: Props) => {
 								toast.error("Error updating Auto Deploy");
 							});
 					}}
-					className="flex flex-row gap-2 items-center"
+					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
 				/>
 			</div>
 		</div>

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

@@ -44,8 +44,10 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 		resolver: zodResolver(AddComposeFile),
 	});
 
+	const composeFile = form.watch("composeFile");
+
 	useEffect(() => {
-		if (data) {
+		if (data && !composeFile) {
 			form.reset({
 				composeFile: data.composeFile || "",
 			});
@@ -75,10 +77,26 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 					composeId,
 				});
 			})
-			.catch((_e) => {
+			.catch(() => {
 				toast.error("Error updating the Compose config");
 			});
 	};
+
+	// Add keyboard shortcut for Ctrl+S/Cmd+S
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === "s" && !isLoading) {
+				e.preventDefault();
+				form.handleSubmit(onSubmit)();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [form, onSubmit, isLoading]);
+
 	return (
 		<>
 			<div className="w-full flex flex-col gap-4 ">
@@ -97,6 +115,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 										<div className="flex flex-col gap-4 w-full outline-none focus:outline-none overflow-auto">
 											<CodeEditor
 												// disabled
+												language="yaml"
 												value={field.value}
 												className="font-mono"
 												wrapperClassName="compose-file-editor"

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

@@ -1,4 +1,6 @@
+import { BitbucketIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -29,10 +31,18 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -48,6 +58,8 @@ const BitbucketProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	bitbucketId: z.string().min(1, "Bitbucket Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type BitbucketProvider = z.infer<typeof BitbucketProviderSchema>;
@@ -73,6 +85,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			},
 			bitbucketId: "",
 			branch: "",
+			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(BitbucketProviderSchema),
 	});
@@ -118,9 +132,11 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				bitbucketId: data.bitbucketId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.composeId, form]);
 
 	const onSubmit = async (data: BitbucketProvider) => {
 		await mutateAsync({
@@ -132,6 +148,8 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "bitbucket",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -197,7 +215,20 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`https://bitbucket.org/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<BitbucketIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -365,6 +396,99 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+														?
+													</div>
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path, index) => (
+											<Badge key={index} variant="secondary">
+												{path}
+												<X
+													className="ml-1 size-3 cursor-pointer"
+													onClick={() => {
+														const newPaths = [...(field.value || [])];
+														newPaths.splice(index, 1);
+														form.setValue("watchPaths", newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<FormControl>
+										<div className="flex gap-2">
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const value = input.value.trim();
+														if (value) {
+															const newPaths = [...(field.value || []), value];
+															form.setValue("watchPaths", newPaths);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+											<Button
+												type="button"
+												variant="secondary"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+													) as HTMLInputElement;
+													const value = input.value.trim();
+													if (value) {
+														const newPaths = [...(field.value || []), value];
+														form.setValue("watchPaths", newPaths);
+														input.value = "";
+													}
+												}}
+											>
+												Add
+											</Button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,3 +1,5 @@
+import { GitIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Form,
@@ -17,9 +19,17 @@ import {
 	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 { zodResolver } from "@hookform/resolvers/zod";
-import { KeyRoundIcon, LockIcon } from "lucide-react";
+import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
@@ -33,6 +43,8 @@ const GitProviderSchema = z.object({
 	}),
 	branch: z.string().min(1, "Branch required"),
 	sshKey: z.string().optional(),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GitProvider = z.infer<typeof GitProviderSchema>;
@@ -54,6 +66,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			repositoryURL: "",
 			composePath: "./docker-compose.yml",
 			sshKey: undefined,
+			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitProviderSchema),
 	});
@@ -65,6 +79,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 				branch: data.customGitBranch || "",
 				repositoryURL: data.customGitUrl || "",
 				composePath: data.composePath,
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
 	}, [form.reset, data, form]);
@@ -77,6 +93,9 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 			composeId,
 			sourceType: "git",
 			composePath: values.composePath,
+			composeStatus: "idle",
+			watchPaths: values.watchPaths || [],
+			enableSubmodules: values.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Git Provider Saved");
@@ -101,11 +120,22 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 								name="repositoryURL"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel className="flex flex-row justify-between">
+										<div className="flex items-center justify-between">
-											Repository URL
+											<FormLabel>Repository URL</FormLabel>
-										</FormLabel>
+											{field.value?.startsWith("https://") && (
+												<Link
+													href={field.value}
+													target="_blank"
+													rel="noopener noreferrer"
+													className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+												>
+													<GitIcon className="h-4 w-4" />
+													<span>View Repository</span>
+												</Link>
+											)}
+										</div>
 										<FormControl>
-											<Input placeholder="git@bitbucket.org" {...field} />
+											<Input placeholder="Repository URL" {...field} />
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -191,6 +221,100 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 							</FormItem>
 						)}
 					/>
+					<FormField
+						control={form.control}
+						name="watchPaths"
+						render={({ field }) => (
+							<FormItem className="md:col-span-2">
+								<div className="flex items-center gap-2">
+									<FormLabel>Watch Paths</FormLabel>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger>
+												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+													?
+												</div>
+											</TooltipTrigger>
+											<TooltipContent className="max-w-[300px]">
+												<p>
+													Add paths to watch for changes. When files in these
+													paths change, a new deployment will be triggered. This
+													will work only when manual webhook is setup.
+												</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+								<div className="flex flex-wrap gap-2 mb-2">
+									{field.value?.map((path, index) => (
+										<Badge key={index} variant="secondary">
+											{path}
+											<X
+												className="ml-1 size-3 cursor-pointer"
+												onClick={() => {
+													const newPaths = [...(field.value || [])];
+													newPaths.splice(index, 1);
+													form.setValue("watchPaths", newPaths);
+												}}
+											/>
+										</Badge>
+									))}
+								</div>
+								<FormControl>
+									<div className="flex gap-2">
+										<Input
+											placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+											onKeyDown={(e) => {
+												if (e.key === "Enter") {
+													e.preventDefault();
+													const input = e.currentTarget;
+													const value = input.value.trim();
+													if (value) {
+														const newPaths = [...(field.value || []), value];
+														form.setValue("watchPaths", newPaths);
+														input.value = "";
+													}
+												}
+											}}
+										/>
+										<Button
+											type="button"
+											variant="secondary"
+											onClick={() => {
+												const input = document.querySelector(
+													'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+												) as HTMLInputElement;
+												const value = input.value.trim();
+												if (value) {
+													const newPaths = [...(field.value || []), value];
+													form.setValue("watchPaths", newPaths);
+													input.value = "";
+												}
+											}}
+										>
+											Add
+										</Button>
+									</div>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="enableSubmodules"
+						render={({ field }) => (
+							<FormItem className="flex items-center space-x-2">
+								<FormControl>
+									<Switch
+										checked={field.value}
+										onCheckedChange={field.onChange}
+									/>
+								</FormControl>
+								<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+							</FormItem>
+						)}
+					/>
 				</div>
 
 				<div className="flex flex-row justify-end">

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

@@ -0,0 +1,503 @@
+import { GiteaIcon } from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import type { Repository } from "@/utils/gitea-utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CheckIcon, ChevronsUpDown, Plus, X } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const GiteaProviderSchema = z.object({
+	composePath: z.string().min(1),
+	repository: z
+		.object({
+			repo: z.string().min(1, "Repo is required"),
+			owner: z.string().min(1, "Owner is required"),
+		})
+		.required(),
+	branch: z.string().min(1, "Branch is required"),
+	giteaId: z.string().min(1, "Gitea Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
+});
+
+type GiteaProvider = z.infer<typeof GiteaProviderSchema>;
+
+interface Props {
+	composeId: string;
+}
+
+export const SaveGiteaProviderCompose = ({ composeId }: Props) => {
+	const { data: giteaProviders } = api.gitea.giteaProviders.useQuery();
+	const { data, refetch } = api.compose.one.useQuery({ composeId });
+	const { mutateAsync, isLoading: isSavingGiteaProvider } =
+		api.compose.update.useMutation();
+
+	const form = useForm<GiteaProvider>({
+		defaultValues: {
+			composePath: "./docker-compose.yml",
+			repository: {
+				owner: "",
+				repo: "",
+			},
+			giteaId: "",
+			branch: "",
+			watchPaths: [],
+			enableSubmodules: false,
+		},
+		resolver: zodResolver(GiteaProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+	const giteaId = form.watch("giteaId");
+
+	const { data: giteaUrl } = api.gitea.getGiteaUrl.useQuery(
+		{ giteaId },
+		{
+			enabled: !!giteaId,
+		},
+	);
+
+	const {
+		data: repositories,
+		isLoading: isLoadingRepositories,
+		error,
+	} = api.gitea.getGiteaRepositories.useQuery<Repository[]>(
+		{
+			giteaId,
+		},
+		{
+			enabled: !!giteaId,
+		},
+	);
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.gitea.getGiteaBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repositoryName: repository?.repo,
+			giteaId: giteaId,
+		},
+		{
+			enabled: !!repository?.owner && !!repository?.repo && !!giteaId,
+		},
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.giteaBranch || "",
+				repository: {
+					repo: data.giteaRepository || "",
+					owner: data.giteaOwner || "",
+				},
+				composePath: data.composePath || "./docker-compose.yml",
+				giteaId: data.giteaId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
+			});
+		}
+	}, [form.reset, data?.composeId, form]);
+
+	const onSubmit = async (data: GiteaProvider) => {
+		await mutateAsync({
+			giteaBranch: data.branch,
+			giteaRepository: data.repository.repo,
+			giteaOwner: data.repository.owner,
+			composePath: data.composePath,
+			giteaId: data.giteaId,
+			composeId,
+			sourceType: "gitea",
+			composeStatus: "idle",
+			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
+		} as any)
+			.then(async () => {
+				toast.success("Service Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error saving the Gitea provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					{error && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="giteaId"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Gitea Account</FormLabel>
+									<Select
+										onValueChange={(value) => {
+											field.onChange(value);
+											form.setValue("repository", {
+												owner: "",
+												repo: "",
+											});
+											form.setValue("branch", "");
+										}}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a Gitea Account" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{giteaProviders?.map((giteaProvider) => (
+												<SelectItem
+													key={giteaProvider.giteaId}
+													value={giteaProvider.giteaId}
+												>
+													{giteaProvider.gitProvider.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`${giteaUrl}/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GiteaIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{isLoadingRepositories
+														? "Loading...."
+														: field.value.owner
+															? repositories?.find(
+																	(repo) => repo.name === field.value.repo,
+																)?.name
+															: "Select repository"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search repository..."
+													className="h-9"
+												/>
+												{isLoadingRepositories && (
+													<span className="py-6 text-center text-sm">
+														Loading Repositories....
+													</span>
+												)}
+												<CommandEmpty>No repositories found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{repositories?.map((repo) => (
+															<CommandItem
+																key={repo.url}
+																value={repo.name}
+																onSelect={() => {
+																	form.setValue("repository", {
+																		owner: repo.owner.username,
+																		repo: repo.name,
+																	});
+																	form.setValue("branch", "");
+																}}
+															>
+																<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",
+																		repo.name === field.value.repo
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.repository && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Repository is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="branch"
+							render={({ field }) => (
+								<FormItem className="block w-full">
+									<FormLabel>Branch</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{status === "loading" && fetchStatus === "fetching"
+														? "Loading...."
+														: field.value
+															? branches?.find(
+																	(branch) => branch.name === field.value,
+																)?.name
+															: "Select branch"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search branches..."
+													className="h-9"
+												/>
+												<CommandEmpty>No branches found.</CommandEmpty>
+												<ScrollArea className="h-96">
+													<CommandGroup>
+														{branches?.map((branch) => (
+															<CommandItem
+																key={branch.name}
+																value={branch.name}
+																onSelect={() =>
+																	form.setValue("branch", branch.name)
+																}
+															>
+																<span className="flex items-center gap-2">
+																	{branch.name}
+																</span>
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		branch.name === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									{form.formState.errors.branch && (
+										<p className={cn("text-sm font-medium text-destructive")}>
+											Branch is required
+										</p>
+									)}
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="composePath"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Compose Path</FormLabel>
+									<FormControl>
+										<Input placeholder="docker-compose.yml" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+														?
+													</div>
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path, index) => (
+											<Badge key={index} variant="secondary">
+												{path}
+												<X
+													className="ml-1 size-3 cursor-pointer"
+													onClick={() => {
+														const newPaths = [...(field.value || [])];
+														newPaths.splice(index, 1);
+														form.setValue("watchPaths", newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<FormControl>
+										<div className="flex gap-2">
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const value = input.value.trim();
+														if (value) {
+															const newPaths = [...(field.value || []), value];
+															form.setValue("watchPaths", newPaths);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+											<Button
+												type="button"
+												variant="outline"
+												size="icon"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder*="Enter a path"]',
+													) as HTMLInputElement;
+													const path = input.value.trim();
+													if (path) {
+														field.onChange([...(field.value || []), path]);
+														input.value = "";
+													}
+												}}
+											>
+												<Plus className="size-4" />
+											</Button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
+					</div>
+
+					<div className="flex justify-end">
+						<Button type="submit" isLoading={isSavingGiteaProvider}>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -1,3 +1,5 @@
+import { GithubIcon } from "@/components/icons/data-tools-icons";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -28,10 +30,18 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -47,6 +57,9 @@ const GithubProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	githubId: z.string().min(1, "Github Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	triggerType: z.enum(["push", "tag"]).default("push"),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GithubProvider = z.infer<typeof GithubProviderSchema>;
@@ -71,13 +84,16 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			},
 			githubId: "",
 			branch: "",
+			watchPaths: [],
+			triggerType: "push",
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GithubProviderSchema),
 	});
 
 	const repository = form.watch("repository");
 	const githubId = form.watch("githubId");
-
+	const triggerType = form.watch("triggerType");
 	const { data: repositories, isLoading: isLoadingRepositories } =
 		api.github.getGithubRepositories.useQuery(
 			{
@@ -113,9 +129,12 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				githubId: data.githubId || "",
+				watchPaths: data.watchPaths || [],
+				triggerType: data.triggerType || "push",
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.composeId, form]);
 
 	const onSubmit = async (data: GithubProvider) => {
 		await mutateAsync({
@@ -127,6 +146,9 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 			githubId: data.githubId,
 			sourceType: "github",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
+			triggerType: data.triggerType,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -183,13 +205,25 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`https://github.com/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GithubIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -357,6 +391,145 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="triggerType"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Trigger Type</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Choose when to trigger deployments: on push to the
+														selected branch or when a new tag is created.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select a trigger type" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="push">On Push</SelectItem>
+											<SelectItem value="tag">On Tag</SelectItem>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						{triggerType === "push" && (
+							<FormField
+								control={form.control}
+								name="watchPaths"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<div className="flex items-center gap-2">
+											<FormLabel>Watch Paths</FormLabel>
+											<TooltipProvider>
+												<Tooltip>
+													<TooltipTrigger>
+														<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+															?
+														</div>
+													</TooltipTrigger>
+													<TooltipContent>
+														<p>
+															Add paths to watch for changes. When files in
+															these paths change, a new deployment will be
+															triggered.
+														</p>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</div>
+										<div className="flex flex-wrap gap-2 mb-2">
+											{field.value?.map((path, index) => (
+												<Badge key={index} variant="secondary">
+													{path}
+													<X
+														className="ml-1 size-3 cursor-pointer"
+														onClick={() => {
+															const newPaths = [...(field.value || [])];
+															newPaths.splice(index, 1);
+															form.setValue("watchPaths", newPaths);
+														}}
+													/>
+												</Badge>
+											))}
+										</div>
+										<FormControl>
+											<div className="flex gap-2">
+												<Input
+													placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+													onKeyDown={(e) => {
+														if (e.key === "Enter") {
+															e.preventDefault();
+															const input = e.currentTarget;
+															const value = input.value.trim();
+															if (value) {
+																const newPaths = [
+																	...(field.value || []),
+																	value,
+																];
+																form.setValue("watchPaths", newPaths);
+																input.value = "";
+															}
+														}
+													}}
+												/>
+												<Button
+													type="button"
+													variant="secondary"
+													onClick={() => {
+														const input = document.querySelector(
+															'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+														) as HTMLInputElement;
+														const value = input.value.trim();
+														if (value) {
+															const newPaths = [...(field.value || []), value];
+															form.setValue("watchPaths", newPaths);
+															input.value = "";
+														}
+													}}
+												>
+													Add
+												</Button>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						)}
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,4 +1,6 @@
+import { GitlabIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Command,
@@ -29,10 +31,18 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -50,6 +60,8 @@ const GitlabProviderSchema = z.object({
 		.required(),
 	branch: z.string().min(1, "Branch is required"),
 	gitlabId: z.string().min(1, "Gitlab Provider is required"),
+	watchPaths: z.array(z.string()).optional(),
+	enableSubmodules: z.boolean().default(false),
 });
 
 type GitlabProvider = z.infer<typeof GitlabProviderSchema>;
@@ -76,6 +88,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			},
 			gitlabId: "",
 			branch: "",
+			watchPaths: [],
+			enableSubmodules: false,
 		},
 		resolver: zodResolver(GitlabProviderSchema),
 	});
@@ -124,9 +138,11 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 				},
 				composePath: data.composePath,
 				gitlabId: data.gitlabId || "",
+				watchPaths: data.watchPaths || [],
+				enableSubmodules: data.enableSubmodules ?? false,
 			});
 		}
-	}, [form.reset, data, form]);
+	}, [form.reset, data?.composeId, form]);
 
 	const onSubmit = async (data: GitlabProvider) => {
 		await mutateAsync({
@@ -140,6 +156,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 			gitlabPathNamespace: data.repository.gitlabPathNamespace,
 			sourceType: "gitlab",
 			composeStatus: "idle",
+			watchPaths: data.watchPaths,
+			enableSubmodules: data.enableSubmodules,
 		})
 			.then(async () => {
 				toast.success("Service Provided Saved");
@@ -199,13 +217,25 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
-
 						<FormField
 							control={form.control}
 							name="repository"
 							render={({ field }) => (
 								<FormItem className="md:col-span-2 flex flex-col">
-									<FormLabel>Repository</FormLabel>
+									<div className="flex items-center justify-between">
+										<FormLabel>Repository</FormLabel>
+										{field.value.owner && field.value.repo && (
+											<Link
+												href={`https://gitlab.com/${field.value.owner}/${field.value.repo}`}
+												target="_blank"
+												rel="noopener noreferrer"
+												className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
+											>
+												<GitlabIcon className="h-4 w-4" />
+												<span>View Repository</span>
+											</Link>
+										)}
+									</div>
 									<Popover>
 										<PopoverTrigger asChild>
 											<FormControl>
@@ -250,7 +280,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 														{repositories?.map((repo) => {
 															return (
 																<CommandItem
-																	value={repo.name}
+																	value={repo.url}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -271,7 +301,8 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",
-																			repo.name === field.value.repo
+																			repo.url ===
+																				field.value.gitlabPathNamespace
 																				? "opacity-100"
 																				: "opacity-0",
 																		)}
@@ -382,6 +413,99 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<FormField
+							control={form.control}
+							name="watchPaths"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2">
+									<div className="flex items-center gap-2">
+										<FormLabel>Watch Paths</FormLabel>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger>
+													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+														?
+													</div>
+												</TooltipTrigger>
+												<TooltipContent>
+													<p>
+														Add paths to watch for changes. When files in these
+														paths change, a new deployment will be triggered.
+													</p>
+												</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+									<div className="flex flex-wrap gap-2 mb-2">
+										{field.value?.map((path, index) => (
+											<Badge key={index} variant="secondary">
+												{path}
+												<X
+													className="ml-1 size-3 cursor-pointer"
+													onClick={() => {
+														const newPaths = [...(field.value || [])];
+														newPaths.splice(index, 1);
+														form.setValue("watchPaths", newPaths);
+													}}
+												/>
+											</Badge>
+										))}
+									</div>
+									<FormControl>
+										<div className="flex gap-2">
+											<Input
+												placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"
+												onKeyDown={(e) => {
+													if (e.key === "Enter") {
+														e.preventDefault();
+														const input = e.currentTarget;
+														const value = input.value.trim();
+														if (value) {
+															const newPaths = [...(field.value || []), value];
+															form.setValue("watchPaths", newPaths);
+															input.value = "";
+														}
+													}
+												}}
+											/>
+											<Button
+												type="button"
+												variant="secondary"
+												onClick={() => {
+													const input = document.querySelector(
+														'input[placeholder="Enter a path to watch (e.g., src/**, dist/*.js)"]',
+													) as HTMLInputElement;
+													const value = input.value.trim();
+													if (value) {
+														const newPaths = [...(field.value || []), value];
+														form.setValue("watchPaths", newPaths);
+														input.value = "";
+													}
+												}}
+											>
+												Add
+											</Button>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="enableSubmodules"
+							render={({ field }) => (
+								<FormItem className="flex items-center space-x-2">
+									<FormControl>
+										<Switch
+											checked={field.value}
+											onCheckedChange={field.onChange}
+										/>
+									</FormControl>
+									<FormLabel className="!mt-0">Enable Submodules</FormLabel>
+								</FormItem>
+							)}
+						/>
 					</div>
 					<div className="flex w-full justify-end">
 						<Button

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

@@ -1,35 +1,123 @@
 import {
 	BitbucketIcon,
 	GitIcon,
+	GiteaIcon,
 	GithubIcon,
 	GitlabIcon,
 } from "@/components/icons/data-tools-icons";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { CodeIcon, GitBranch } from "lucide-react";
+import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";
 import { SaveGitProviderCompose } from "./save-git-provider-compose";
+import { SaveGiteaProviderCompose } from "./save-gitea-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
+import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
+import { toast } from "sonner";
 
-type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket";
+type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
 interface Props {
 	composeId: string;
 }
 
 export const ShowProviderFormCompose = ({ composeId }: Props) => {
-	const { data: githubProviders } = api.github.githubProviders.useQuery();
+	const { data: githubProviders, isLoading: isLoadingGithub } =
-	const { data: gitlabProviders } = api.gitlab.gitlabProviders.useQuery();
+		api.github.githubProviders.useQuery();
-	const { data: bitbucketProviders } =
+	const { data: gitlabProviders, isLoading: isLoadingGitlab } =
+		api.gitlab.gitlabProviders.useQuery();
+	const { data: bitbucketProviders, isLoading: isLoadingBitbucket } =
 		api.bitbucket.bitbucketProviders.useQuery();
+	const { data: giteaProviders, isLoading: isLoadingGitea } =
+		api.gitea.giteaProviders.useQuery();
 
-	const { data: compose } = api.compose.one.useQuery({ composeId });
+	const { mutateAsync: disconnectGitProvider } =
+		api.compose.disconnectGitProvider.useMutation();
+
+	const { data: compose, refetch } = api.compose.one.useQuery({ composeId });
 	const [tab, setSab] = useState<TabState>(compose?.sourceType || "github");
+
+	const isLoading =
+		isLoadingGithub || isLoadingGitlab || isLoadingBitbucket || isLoadingGitea;
+
+	const handleDisconnect = async () => {
+		try {
+			await disconnectGitProvider({ composeId });
+			toast.success("Repository disconnected successfully");
+			await refetch();
+		} catch (error) {
+			toast.error(
+				`Failed to disconnect repository: ${
+					error instanceof Error ? error.message : "Unknown error"
+				}`,
+			);
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<Card className="group relative w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-start justify-between">
+						<div className="flex flex-col gap-2">
+							<span className="flex flex-col space-y-0.5">Provider</span>
+							<p className="flex items-center text-sm font-normal text-muted-foreground">
+								Select the source of your code
+							</p>
+						</div>
+						<div className="hidden space-y-1 text-sm font-normal md:block">
+							<GitBranch className="size-6 text-muted-foreground" />
+						</div>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<div className="flex min-h-[25vh] items-center justify-center">
+						<div className="flex items-center gap-2 text-muted-foreground">
+							<Loader2 className="size-4 animate-spin" />
+							<span>Loading providers...</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	// Check if user doesn't have access to the current git provider
+	if (
+		compose &&
+		!compose.hasGitProviderAccess &&
+		compose.sourceType !== "raw"
+	) {
+		return (
+			<Card className="group relative w-full bg-transparent">
+				<CardHeader>
+					<CardTitle className="flex items-start justify-between">
+						<div className="flex flex-col gap-2">
+							<span className="flex flex-col space-y-0.5">Provider</span>
+							<p className="flex items-center text-sm font-normal text-muted-foreground">
+								Repository connection through unauthorized provider
+							</p>
+						</div>
+						<div className="hidden space-y-1 text-sm font-normal md:block">
+							<GitBranch className="size-6 text-muted-foreground" />
+						</div>
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UnauthorizedGitProvider
+						service={compose}
+						onDisconnect={handleDisconnect}
+					/>
+				</CardContent>
+			</Card>
+		);
+	}
+
 	return (
 		<Card className="group relative w-full bg-transparent">
 			<CardHeader>
@@ -54,21 +142,21 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						setSab(e as TabState);
 					}}
 				>
-					<div className="flex flex-row items-center justify-between  w-full gap-4">
+					<div className="flex flex-row items-center justify-between w-full overflow-auto">
-						<TabsList className="md:grid md:w-fit md:grid-cols-5 max-md:overflow-x-scroll justify-start bg-transparent overflow-y-hidden">
+						<TabsList className="flex gap-4 justify-start bg-transparent">
 							<TabsTrigger
 								value="github"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
 								<GithubIcon className="size-4 text-current fill-current" />
-								Github
+								GitHub
 							</TabsTrigger>
 							<TabsTrigger
 								value="gitlab"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
 								<GitlabIcon className="size-4 text-current fill-current" />
-								Gitlab
+								GitLab
 							</TabsTrigger>
 							<TabsTrigger
 								value="bitbucket"
@@ -77,7 +165,12 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								<BitbucketIcon className="size-4 text-current fill-current" />
 								Bitbucket
 							</TabsTrigger>
-
+							<TabsTrigger
+								value="gitea"
+								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+							>
+								<GiteaIcon className="size-4 text-current fill-current" /> Gitea
+							</TabsTrigger>
 							<TabsTrigger
 								value="git"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
@@ -89,16 +182,17 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 								value="raw"
 								className="rounded-none border-b-2 gap-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
 							>
-								<CodeIcon className="size-4 " />
+								<CodeIcon className="size-4" />
 								Raw
 							</TabsTrigger>
 						</TabsList>
 					</div>
+
 					<TabsContent value="github" className="w-full p-2">
 						{githubProviders && githubProviders?.length > 0 ? (
 							<SaveGithubProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<GithubIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitHub, you need to configure your account
@@ -118,7 +212,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						{gitlabProviders && gitlabProviders?.length > 0 ? (
 							<SaveGitlabProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<GitlabIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using GitLab, you need to configure your account
@@ -138,7 +232,7 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 						{bitbucketProviders && bitbucketProviders?.length > 0 ? (
 							<SaveBitbucketProviderCompose composeId={composeId} />
 						) : (
-							<div className="flex flex-col items-center gap-3 min-h-[15vh] justify-center">
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
 								<BitbucketIcon className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									To deploy using Bitbucket, you need to configure your account
@@ -154,6 +248,26 @@ export const ShowProviderFormCompose = ({ composeId }: Props) => {
 							</div>
 						)}
 					</TabsContent>
+					<TabsContent value="gitea" className="w-full p-2">
+						{giteaProviders && giteaProviders?.length > 0 ? (
+							<SaveGiteaProviderCompose composeId={composeId} />
+						) : (
+							<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+								<GiteaIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using Gitea, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/git-providers"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
 					<TabsContent value="git" className="w-full p-2">
 						<SaveGitProviderCompose composeId={composeId} />
 					</TabsContent>

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

@@ -71,8 +71,8 @@ export const IsolatedDeployment = ({ composeId }: Props) => {
 			isolatedDeployment: formData?.isolatedDeployment || false,
 		})
 			.then(async (_data) => {
-				randomizeCompose();
+				await randomizeCompose();
-				refetch();
+				await refetch();
 				toast.success("Compose updated");
 			})
 			.catch(() => {
@@ -84,15 +84,10 @@ export const IsolatedDeployment = ({ composeId }: Props) => {
 		await mutateAsync({
 			composeId,
 			suffix: data?.appName || "",
-		})
+		}).then(async (data) => {
-			.then(async (data) => {
+			await utils.project.all.invalidate();
-				await utils.project.all.invalidate();
+			setCompose(data);
-				setCompose(data);
+		});
-				toast.success("Compose Isolated");
-			})
-			.catch(() => {
-				toast.error("Error isolating the compose");
-			});
 	};
 
 	return (
@@ -147,9 +142,11 @@ export const IsolatedDeployment = ({ composeId }: Props) => {
 								render={({ field }) => (
 									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
 										<div className="space-y-0.5">
-											<FormLabel>Enable Randomize ({data?.appName})</FormLabel>
+											<FormLabel>
+												Enable Isolated Deployment ({data?.appName})
+											</FormLabel>
 											<FormDescription>
-												Enable randomize to the compose file.
+												Enable isolated deployment to the compose file.
 											</FormDescription>
 										</div>
 										<FormControl>

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

@@ -77,8 +77,8 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 			randomize: formData?.randomize || false,
 		})
 			.then(async (_data) => {
-				randomizeCompose();
+				await randomizeCompose();
-				refetch();
+				await refetch();
 				toast.success("Compose updated");
 			})
 			.catch(() => {
@@ -90,15 +90,10 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 		await mutateAsync({
 			composeId,
 			suffix,
-		})
+		}).then(async (data) => {
-			.then(async (data) => {
+			await utils.project.all.invalidate();
-				await utils.project.all.invalidate();
+			setCompose(data);
-				setCompose(data);
+		});
-				toast.success("Compose randomized");
-			})
-			.catch(() => {
-				toast.error("Error randomizing the compose");
-			});
 	};
 
 	return (

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

@@ -10,7 +10,7 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
-import { Puzzle, RefreshCw } from "lucide-react";
+import { Loader2, Puzzle, RefreshCw } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -40,7 +40,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				.then(() => {
 					refetch();
 				})
-				.catch((_err) => {});
+				.catch(() => {});
 		}
 	}, [isOpen]);
 
@@ -52,7 +52,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					Preview Compose
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
+			<DialogContent className="sm:max-w-6xl max-h-[50rem]">
 				<DialogHeader>
 					<DialogTitle>Converted Compose</DialogTitle>
 					<DialogDescription>
@@ -62,35 +62,54 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<div className="flex flex-row gap-2 justify-end">
+				<AlertBlock type="info">
-					<Button
+					Preview your docker-compose file with added domains. Note: At least
-						variant="secondary"
+					one domain must be specified for this conversion to take effect.
-						isLoading={isLoading}
+				</AlertBlock>
-						onClick={() => {
+				{isLoading ? (
-							mutateAsync({ composeId })
+					<div className="flex flex-row items-center justify-center min-h-[25rem] border p-4 rounded-md">
-								.then(() => {
+						<Loader2 className="h-8 w-8 text-muted-foreground mb-2 animate-spin" />
-									refetch();
+					</div>
-									toast.success("Fetched source type");
+				) : compose?.length === 5 ? (
-								})
+					<div className="border p-4 rounded-md flex flex-col items-center justify-center min-h-[25rem]">
-								.catch((err) => {
+						<Puzzle className="h-8 w-8 text-muted-foreground mb-2" />
-									toast.error("Error fetching source type", {
+						<span className="text-muted-foreground">
-										description: err.message,
+							No converted compose data available.
-									});
+						</span>
-								});
+					</div>
-						}}
+				) : (
-					>
+					<>
-						Refresh <RefreshCw className="ml-2 h-4 w-4" />
+						<div className="flex flex-row gap-2 justify-end">
-					</Button>
+							<Button
-				</div>
+								variant="secondary"
+								isLoading={isLoading}
+								onClick={() => {
+									mutateAsync({ composeId })
+										.then(() => {
+											refetch();
+											toast.success("Fetched source type");
+										})
+										.catch((err) => {
+											toast.error("Error fetching source type", {
+												description: err.message,
+											});
+										});
+								}}
+							>
+								Refresh <RefreshCw className="ml-2 h-4 w-4" />
+							</Button>
+						</div>
 
-				<pre>
+						<pre>
-					<CodeEditor
+							<CodeEditor
-						value={compose || ""}
+								value={compose || ""}
-						language="yaml"
+								language="yaml"
-						readOnly
+								readOnly
-						height="50rem"
+								height="50rem"
-					/>
+							/>
-				</pre>
+						</pre>
+					</>
+				)}
 			</DialogContent>
 		</Dialog>
 	);

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

@@ -23,7 +23,7 @@ export const ShowUtilities = ({ composeId }: Props) => {
 			<DialogTrigger asChild>
 				<Button variant="ghost">Show Utilities</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-5xl">
+			<DialogContent className="sm:max-w-5xl">
 				<DialogHeader>
 					<DialogTitle>Utilities </DialogTitle>
 					<DialogDescription>Modify the application data</DialogDescription>

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

@@ -99,7 +99,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 					<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="sm:max-w-lg">
 				<DialogHeader>
 					<DialogTitle>Modify Compose</DialogTitle>
 					<DialogDescription>Update the compose data</DialogDescription>
@@ -121,7 +121,7 @@ export const UpdateCompose = ({ composeId }: Props) => {
 										<FormItem>
 											<FormLabel>Name</FormLabel>
 											<FormControl>
-												<Input placeholder="Tesla" {...field} />
+												<Input placeholder="Vandelay Industries" {...field} />
 											</FormControl>
 
 											<FormMessage />

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

@@ -1,312 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-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 {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Switch } from "@/components/ui/switch";
-import { cn } from "@/lib/utils";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const AddPostgresBackup1Schema = z.object({
-	destinationId: z.string().min(1, "Destination required"),
-	schedule: z.string().min(1, "Schedule (Cron) required"),
-	// .regex(
-	//   new RegExp(
-	//     /^(\*|([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])|\*\/([0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])) (\*|([0-9]|1[0-9]|2[0-3])|\*\/([0-9]|1[0-9]|2[0-3])) (\*|([1-9]|1[0-9]|2[0-9]|3[0-1])|\*\/([1-9]|1[0-9]|2[0-9]|3[0-1])) (\*|([1-9]|1[0-2])|\*\/([1-9]|1[0-2])) (\*|([0-6])|\*\/([0-6]))$/,
-	//   ),
-	//   "Invalid Cron",
-	// ),
-	prefix: z.string().min(1, "Prefix required"),
-	enabled: z.boolean(),
-	database: z.string().min(1, "Database required"),
-});
-
-type AddPostgresBackup = z.infer<typeof AddPostgresBackup1Schema>;
-
-interface Props {
-	databaseId: string;
-	databaseType: "postgres" | "mariadb" | "mysql" | "mongo";
-	refetch: () => void;
-}
-
-export const AddBackup = ({ databaseId, databaseType, refetch }: Props) => {
-	const { data, isLoading } = api.destination.all.useQuery();
-
-	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
-		api.backup.create.useMutation();
-
-	const form = useForm<AddPostgresBackup>({
-		defaultValues: {
-			database: "",
-			destinationId: "",
-			enabled: true,
-			prefix: "/",
-			schedule: "",
-		},
-		resolver: zodResolver(AddPostgresBackup1Schema),
-	});
-
-	useEffect(() => {
-		form.reset({
-			database: "",
-			destinationId: "",
-			enabled: true,
-			prefix: "/",
-			schedule: "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
-
-	const onSubmit = async (data: AddPostgresBackup) => {
-		const getDatabaseId =
-			databaseType === "postgres"
-				? {
-						postgresId: databaseId,
-					}
-				: databaseType === "mariadb"
-					? {
-							mariadbId: databaseId,
-						}
-					: databaseType === "mysql"
-						? {
-								mysqlId: databaseId,
-							}
-						: databaseType === "mongo"
-							? {
-									mongoId: databaseId,
-								}
-							: undefined;
-
-		await createBackup({
-			destinationId: data.destinationId,
-			prefix: data.prefix,
-			schedule: data.schedule,
-			enabled: data.enabled,
-			database: data.database,
-			databaseType,
-			...getDatabaseId,
-		})
-			.then(async () => {
-				toast.success("Backup Created");
-				refetch();
-			})
-			.catch(() => {
-				toast.error("Error creating a backup");
-			});
-	};
-	return (
-		<Dialog>
-			<DialogTrigger asChild>
-				<Button>
-					<PlusIcon className="h-4 w-4" />
-					Create Backup
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-lg max-h-screen overflow-y-auto">
-				<DialogHeader>
-					<DialogTitle>Create a backup</DialogTitle>
-					<DialogDescription>Add a new backup</DialogDescription>
-				</DialogHeader>
-
-				<Form {...form}>
-					<form
-						id="hook-form-add-backup"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<div className="grid grid-cols-1 gap-4">
-							<FormField
-								control={form.control}
-								name="destinationId"
-								render={({ field }) => (
-									<FormItem className="">
-										<FormLabel>Destination</FormLabel>
-										<Popover>
-											<PopoverTrigger asChild>
-												<FormControl>
-													<Button
-														variant="outline"
-														className={cn(
-															"w-full justify-between !bg-input",
-															!field.value && "text-muted-foreground",
-														)}
-													>
-														{isLoading
-															? "Loading...."
-															: field.value
-																? data?.find(
-																		(destination) =>
-																			destination.destinationId === field.value,
-																	)?.name
-																: "Select Destination"}
-
-														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-													</Button>
-												</FormControl>
-											</PopoverTrigger>
-											<PopoverContent className="p-0" align="start">
-												<Command>
-													<CommandInput
-														placeholder="Search Destination..."
-														className="h-9"
-													/>
-													{isLoading && (
-														<span className="py-6 text-center text-sm">
-															Loading Destinations....
-														</span>
-													)}
-													<CommandEmpty>No destinations found.</CommandEmpty>
-													<ScrollArea className="h-64">
-														<CommandGroup>
-															{data?.map((destination) => (
-																<CommandItem
-																	value={destination.destinationId}
-																	key={destination.destinationId}
-																	onSelect={() => {
-																		form.setValue(
-																			"destinationId",
-																			destination.destinationId,
-																		);
-																	}}
-																>
-																	{destination.name}
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			destination.destinationId === field.value
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																</CommandItem>
-															))}
-														</CommandGroup>
-													</ScrollArea>
-												</Command>
-											</PopoverContent>
-										</Popover>
-
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<FormField
-								control={form.control}
-								name="database"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Database</FormLabel>
-											<FormControl>
-												<Input placeholder={"dokploy"} {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="schedule"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Schedule (Cron)</FormLabel>
-											<FormControl>
-												<Input placeholder={"0 0 * * *"} {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="prefix"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Prefix Destination</FormLabel>
-											<FormControl>
-												<Input placeholder={"dokploy/"} {...field} />
-											</FormControl>
-											<FormDescription>
-												Use if you want to storage in a specific path of your
-												destination/bucket
-											</FormDescription>
-
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="enabled"
-								render={({ field }) => (
-									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
-										<div className="space-y-0.5">
-											<FormLabel>Enabled</FormLabel>
-											<FormDescription>
-												Enable or disable the backup
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Switch
-												checked={field.value}
-												onCheckedChange={field.onChange}
-											/>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-						</div>
-						<DialogFooter>
-							<Button
-								isLoading={isCreatingPostgresBackup}
-								form="hook-form-add-backup"
-								type="submit"
-							>
-								Create
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -0,0 +1,828 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+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 {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+	DatabaseZap,
+	Info,
+	PenBoxIcon,
+	PlusIcon,
+	RefreshCw,
+} from "lucide-react";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { commonCronExpressions } from "../../application/schedules/handle-schedules";
+
+type CacheType = "cache" | "fetch";
+
+type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server";
+
+const Schema = z
+	.object({
+		destinationId: z.string().min(1, "Destination required"),
+		schedule: z.string().min(1, "Schedule (Cron) required"),
+		prefix: z.string().min(1, "Prefix required"),
+		enabled: z.boolean(),
+		database: z.string().min(1, "Database required"),
+		keepLatestCount: z.coerce.number().optional(),
+		serviceName: z.string().nullable(),
+		databaseType: z
+			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
+			.optional(),
+		backupType: z.enum(["database", "compose"]),
+		metadata: z
+			.object({
+				postgres: z
+					.object({
+						databaseUser: z.string(),
+					})
+					.optional(),
+				mariadb: z
+					.object({
+						databaseUser: z.string(),
+						databasePassword: z.string(),
+					})
+					.optional(),
+				mongo: z
+					.object({
+						databaseUser: z.string(),
+						databasePassword: z.string(),
+					})
+					.optional(),
+				mysql: z
+					.object({
+						databaseRootPassword: z.string(),
+					})
+					.optional(),
+			})
+			.optional(),
+	})
+	.superRefine((data, ctx) => {
+		if (data.backupType === "compose" && !data.databaseType) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Database type is required for compose backups",
+				path: ["databaseType"],
+			});
+		}
+
+		if (data.backupType === "compose" && !data.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required for compose backups",
+				path: ["serviceName"],
+			});
+		}
+
+		if (data.backupType === "compose" && data.databaseType) {
+			if (data.databaseType === "postgres") {
+				if (!data.metadata?.postgres?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for PostgreSQL",
+						path: ["metadata", "postgres", "databaseUser"],
+					});
+				}
+			} else if (data.databaseType === "mariadb") {
+				if (!data.metadata?.mariadb?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for MariaDB",
+						path: ["metadata", "mariadb", "databaseUser"],
+					});
+				}
+				if (!data.metadata?.mariadb?.databasePassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database password is required for MariaDB",
+						path: ["metadata", "mariadb", "databasePassword"],
+					});
+				}
+			} else if (data.databaseType === "mongo") {
+				if (!data.metadata?.mongo?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for MongoDB",
+						path: ["metadata", "mongo", "databaseUser"],
+					});
+				}
+				if (!data.metadata?.mongo?.databasePassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database password is required for MongoDB",
+						path: ["metadata", "mongo", "databasePassword"],
+					});
+				}
+			} else if (data.databaseType === "mysql") {
+				if (!data.metadata?.mysql?.databaseRootPassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Root password is required for MySQL",
+						path: ["metadata", "mysql", "databaseRootPassword"],
+					});
+				}
+			}
+		}
+	});
+
+interface Props {
+	id?: string;
+	backupId?: string;
+	databaseType?: DatabaseType;
+	refetch: () => void;
+	backupType: "database" | "compose";
+}
+
+export const HandleBackup = ({
+	id,
+	backupId,
+	databaseType = "postgres",
+	refetch,
+	backupType = "database",
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	const { data, isLoading } = api.destination.all.useQuery();
+	const { data: backup } = api.backup.one.useQuery(
+		{
+			backupId: backupId ?? "",
+		},
+		{
+			enabled: !!backupId,
+		},
+	);
+	const [cacheType, setCacheType] = useState<CacheType>("cache");
+	const { mutateAsync: createBackup, isLoading: isCreatingPostgresBackup } =
+		backupId
+			? api.backup.update.useMutation()
+			: api.backup.create.useMutation();
+
+	const form = useForm<z.infer<typeof Schema>>({
+		defaultValues: {
+			database: databaseType === "web-server" ? "dokploy" : "",
+			destinationId: "",
+			enabled: true,
+			prefix: "/",
+			schedule: "",
+			keepLatestCount: undefined,
+			serviceName: null,
+			databaseType: backupType === "compose" ? undefined : databaseType,
+			backupType: backupType,
+			metadata: {},
+		},
+		resolver: zodResolver(Schema),
+	});
+
+	const {
+		data: services,
+		isFetching: isLoadingServices,
+		error: errorServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: backup?.composeId ?? id ?? "",
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: backupType === "compose" && !!backup?.composeId && !!id,
+		},
+	);
+
+	useEffect(() => {
+		form.reset({
+			database: backup?.database
+				? backup?.database
+				: databaseType === "web-server"
+					? "dokploy"
+					: "",
+			destinationId: backup?.destinationId ?? "",
+			enabled: backup?.enabled ?? true,
+			prefix: backup?.prefix ?? "/",
+			schedule: backup?.schedule ?? "",
+			keepLatestCount: backup?.keepLatestCount ?? undefined,
+			serviceName: backup?.serviceName ?? null,
+			databaseType: backup?.databaseType ?? databaseType,
+			backupType: backup?.backupType ?? backupType,
+			metadata: backup?.metadata ?? {},
+		});
+	}, [form, form.reset, backupId, backup]);
+
+	const onSubmit = async (data: z.infer<typeof Schema>) => {
+		const getDatabaseId =
+			backupType === "compose"
+				? {
+						composeId: id,
+					}
+				: databaseType === "postgres"
+					? {
+							postgresId: id,
+						}
+					: databaseType === "mariadb"
+						? {
+								mariadbId: id,
+							}
+						: databaseType === "mysql"
+							? {
+									mysqlId: id,
+								}
+							: databaseType === "mongo"
+								? {
+										mongoId: id,
+									}
+								: databaseType === "web-server"
+									? {
+											userId: id,
+										}
+									: undefined;
+
+		await createBackup({
+			destinationId: data.destinationId,
+			prefix: data.prefix,
+			schedule: data.schedule,
+			enabled: data.enabled,
+			database: data.database,
+			keepLatestCount: data.keepLatestCount ?? null,
+			databaseType: data.databaseType || databaseType,
+			serviceName: data.serviceName,
+			...getDatabaseId,
+			backupId: backupId ?? "",
+			backupType,
+			metadata: data.metadata,
+		})
+			.then(async () => {
+				toast.success(`Backup ${backupId ? "Updated" : "Created"}`);
+				refetch();
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error(`Error ${backupId ? "updating" : "creating"} a backup`);
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{backupId ? (
+					<Button
+						variant="ghost"
+						size="icon"
+						className="group hover:bg-blue-500/10 size-8"
+					>
+						<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+					</Button>
+				) : (
+					<Button>
+						<PlusIcon className="h-4 w-4" />
+						{backupId ? "Update Backup" : "Create Backup"}
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>
+						{backupId ? "Update Backup" : "Create Backup"}
+					</DialogTitle>
+					<DialogDescription>
+						{backupId ? "Update a backup" : "Add a new backup"}
+					</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="grid grid-cols-1 gap-4">
+							{errorServices && (
+								<AlertBlock type="warning" className="[overflow-wrap:anywhere]">
+									{errorServices?.message}
+								</AlertBlock>
+							)}
+							{backupType === "compose" && (
+								<FormField
+									control={form.control}
+									name="databaseType"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Database Type</FormLabel>
+											<Select
+												value={field.value}
+												onValueChange={(value) => {
+													field.onChange(value as DatabaseType);
+													form.setValue("metadata", {});
+												}}
+											>
+												<SelectTrigger className="w-full">
+													<SelectValue placeholder="Select a database type" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="postgres">PostgreSQL</SelectItem>
+													<SelectItem value="mariadb">MariaDB</SelectItem>
+													<SelectItem value="mysql">MySQL</SelectItem>
+													<SelectItem value="mongo">MongoDB</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+							<FormField
+								control={form.control}
+								name="destinationId"
+								render={({ field }) => (
+									<FormItem className="">
+										<FormLabel>Destination</FormLabel>
+										<Popover>
+											<PopoverTrigger asChild>
+												<FormControl>
+													<Button
+														variant="outline"
+														className={cn(
+															"w-full justify-between !bg-input",
+															!field.value && "text-muted-foreground",
+														)}
+													>
+														{isLoading
+															? "Loading...."
+															: field.value
+																? data?.find(
+																		(destination) =>
+																			destination.destinationId === field.value,
+																	)?.name
+																: "Select Destination"}
+
+														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+													</Button>
+												</FormControl>
+											</PopoverTrigger>
+											<PopoverContent className="p-0" align="start">
+												<Command>
+													<CommandInput
+														placeholder="Search Destination..."
+														className="h-9"
+													/>
+													{isLoading && (
+														<span className="py-6 text-center text-sm">
+															Loading Destinations....
+														</span>
+													)}
+													<CommandEmpty>No destinations found.</CommandEmpty>
+													<ScrollArea className="h-64">
+														<CommandGroup>
+															{data?.map((destination) => (
+																<CommandItem
+																	value={destination.destinationId}
+																	key={destination.destinationId}
+																	onSelect={() => {
+																		form.setValue(
+																			"destinationId",
+																			destination.destinationId,
+																		);
+																	}}
+																>
+																	{destination.name}
+																	<CheckIcon
+																		className={cn(
+																			"ml-auto h-4 w-4",
+																			destination.destinationId === field.value
+																				? "opacity-100"
+																				: "opacity-0",
+																		)}
+																	/>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												</Command>
+											</PopoverContent>
+										</Popover>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							{backupType === "compose" && (
+								<div className="flex flex-row items-end w-full gap-4">
+									<FormField
+										control={form.control}
+										name="serviceName"
+										render={({ field }) => (
+											<FormItem className="w-full">
+												<FormLabel>Service Name</FormLabel>
+												<div className="flex gap-2">
+													<Select
+														onValueChange={field.onChange}
+														value={field.value || undefined}
+													>
+														<FormControl>
+															<SelectTrigger>
+																<SelectValue placeholder="Select a service name" />
+															</SelectTrigger>
+														</FormControl>
+
+														<SelectContent>
+															{services?.map((service, index) => (
+																<SelectItem
+																	value={service}
+																	key={`${service}-${index}`}
+																>
+																	{service}
+																</SelectItem>
+															))}
+															{(!services || services.length === 0) && (
+																<SelectItem value="none" disabled>
+																	Empty
+																</SelectItem>
+															)}
+														</SelectContent>
+													</Select>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "fetch") {
+																			refetchServices();
+																		} else {
+																			setCacheType("fetch");
+																		}
+																	}}
+																>
+																	<RefreshCw className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Fetch: Will clone the repository and load the
+																	services
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													<TooltipProvider delayDuration={0}>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="secondary"
+																	type="button"
+																	isLoading={isLoadingServices}
+																	onClick={() => {
+																		if (cacheType === "cache") {
+																			refetchServices();
+																		} else {
+																			setCacheType("cache");
+																		}
+																	}}
+																>
+																	<DatabaseZap className="size-4 text-muted-foreground" />
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent
+																side="left"
+																sideOffset={5}
+																className="max-w-[10rem]"
+															>
+																<p>
+																	Cache: If you previously deployed this
+																	compose, it will read the services from the
+																	last deployment/fetch from the repository
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+												</div>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+							)}
+							<FormField
+								control={form.control}
+								name="database"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Database</FormLabel>
+											<FormControl>
+												<Input
+													disabled={databaseType === "web-server"}
+													placeholder={"dokploy"}
+													{...field}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="schedule"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel className="flex items-center gap-2">
+												Schedule
+												<TooltipProvider>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Info className="w-4 h-4 text-muted-foreground cursor-help" />
+														</TooltipTrigger>
+														<TooltipContent>
+															<p>
+																Cron expression format: minute hour day month
+																weekday
+															</p>
+															<p>Example: 0 0 * * * (daily at midnight)</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</FormLabel>
+											<div className="flex flex-col gap-2">
+												<Select
+													onValueChange={(value) => {
+														field.onChange(value);
+													}}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a predefined schedule" />
+														</SelectTrigger>
+													</FormControl>
+													<SelectContent>
+														{commonCronExpressions.map((expr) => (
+															<SelectItem key={expr.value} value={expr.value}>
+																{expr.label} ({expr.value})
+															</SelectItem>
+														))}
+													</SelectContent>
+												</Select>
+												<div className="relative">
+													<FormControl>
+														<Input
+															placeholder="Custom cron expression (e.g., 0 0 * * *)"
+															{...field}
+														/>
+													</FormControl>
+												</div>
+											</div>
+											<FormDescription>
+												Choose a predefined schedule or enter a custom cron
+												expression
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="prefix"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Prefix Destination</FormLabel>
+											<FormControl>
+												<Input placeholder={"dokploy/"} {...field} />
+											</FormControl>
+											<FormDescription>
+												Use if you want to back up in a specific path of your
+												destination/bucket
+											</FormDescription>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="keepLatestCount"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Keep the latest</FormLabel>
+											<FormControl>
+												<Input
+													type="number"
+													placeholder={"keeps all the backups if left empty"}
+													{...field}
+												/>
+											</FormControl>
+											<FormDescription>
+												Optional. If provided, only keeps the latest N backups
+												in the cloud.
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+							<FormField
+								control={form.control}
+								name="enabled"
+								render={({ field }) => (
+									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
+										<div className="space-y-0.5">
+											<FormLabel>Enabled</FormLabel>
+											<FormDescription>
+												Enable or disable the backup
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+							{backupType === "compose" && (
+								<>
+									{form.watch("databaseType") === "postgres" && (
+										<FormField
+											control={form.control}
+											name="metadata.postgres.databaseUser"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Database User</FormLabel>
+													<FormControl>
+														<Input placeholder="postgres" {...field} />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									)}
+
+									{form.watch("databaseType") === "mariadb" && (
+										<>
+											<FormField
+												control={form.control}
+												name="metadata.mariadb.databaseUser"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Database User</FormLabel>
+														<FormControl>
+															<Input placeholder="mariadb" {...field} />
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+											<FormField
+												control={form.control}
+												name="metadata.mariadb.databasePassword"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Database Password</FormLabel>
+														<FormControl>
+															<Input
+																type="password"
+																placeholder="••••••••"
+																{...field}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</>
+									)}
+
+									{form.watch("databaseType") === "mongo" && (
+										<>
+											<FormField
+												control={form.control}
+												name="metadata.mongo.databaseUser"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Database User</FormLabel>
+														<FormControl>
+															<Input placeholder="mongo" {...field} />
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+											<FormField
+												control={form.control}
+												name="metadata.mongo.databasePassword"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Database Password</FormLabel>
+														<FormControl>
+															<Input
+																type="password"
+																placeholder="••••••••"
+																{...field}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</>
+									)}
+
+									{form.watch("databaseType") === "mysql" && (
+										<FormField
+											control={form.control}
+											name="metadata.mysql.databaseRootPassword"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Root Password</FormLabel>
+													<FormControl>
+														<Input
+															type="password"
+															placeholder="••••••••"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									)}
+								</>
+							)}
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isCreatingPostgresBackup}
+								form="hook-form-add-backup"
+								type="submit"
+							>
+								{backupId ? "Update" : "Create"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,820 @@
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+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 {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
+import { debounce } from "lodash";
+import {
+	CheckIcon,
+	ChevronsUpDown,
+	Copy,
+	DatabaseZap,
+	RefreshCw,
+	RotateCcw,
+} from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import type { ServiceType } from "../../application/advanced/show-resources";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+
+type DatabaseType =
+	| Exclude<ServiceType, "application" | "redis">
+	| "web-server";
+
+interface Props {
+	id: string;
+	databaseType?: DatabaseType;
+	serverId?: string | null;
+	backupType?: "database" | "compose";
+}
+
+const RestoreBackupSchema = z
+	.object({
+		destinationId: z
+			.string({
+				required_error: "Please select a destination",
+			})
+			.min(1, {
+				message: "Destination is required",
+			}),
+		backupFile: z
+			.string({
+				required_error: "Please select a backup file",
+			})
+			.min(1, {
+				message: "Backup file is required",
+			}),
+		databaseName: z
+			.string({
+				required_error: "Please enter a database name",
+			})
+			.min(1, {
+				message: "Database name is required",
+			}),
+		databaseType: z
+			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
+			.optional(),
+		backupType: z.enum(["database", "compose"]).default("database"),
+		metadata: z
+			.object({
+				postgres: z
+					.object({
+						databaseUser: z.string(),
+					})
+					.optional(),
+				mariadb: z
+					.object({
+						databaseUser: z.string(),
+						databasePassword: z.string(),
+					})
+					.optional(),
+				mongo: z
+					.object({
+						databaseUser: z.string(),
+						databasePassword: z.string(),
+					})
+					.optional(),
+				mysql: z
+					.object({
+						databaseRootPassword: z.string(),
+					})
+					.optional(),
+				serviceName: z.string().optional(),
+			})
+			.optional(),
+	})
+	.superRefine((data, ctx) => {
+		if (data.backupType === "compose" && !data.databaseType) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Database type is required for compose backups",
+				path: ["databaseType"],
+			});
+		}
+
+		if (data.backupType === "compose" && !data.metadata?.serviceName) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				message: "Service name is required for compose backups",
+				path: ["metadata", "serviceName"],
+			});
+		}
+
+		if (data.backupType === "compose" && data.databaseType) {
+			if (data.databaseType === "postgres") {
+				if (!data.metadata?.postgres?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for PostgreSQL",
+						path: ["metadata", "postgres", "databaseUser"],
+					});
+				}
+			} else if (data.databaseType === "mariadb") {
+				if (!data.metadata?.mariadb?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for MariaDB",
+						path: ["metadata", "mariadb", "databaseUser"],
+					});
+				}
+				if (!data.metadata?.mariadb?.databasePassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database password is required for MariaDB",
+						path: ["metadata", "mariadb", "databasePassword"],
+					});
+				}
+			} else if (data.databaseType === "mongo") {
+				if (!data.metadata?.mongo?.databaseUser) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database user is required for MongoDB",
+						path: ["metadata", "mongo", "databaseUser"],
+					});
+				}
+				if (!data.metadata?.mongo?.databasePassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Database password is required for MongoDB",
+						path: ["metadata", "mongo", "databasePassword"],
+					});
+				}
+			} else if (data.databaseType === "mysql") {
+				if (!data.metadata?.mysql?.databaseRootPassword) {
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: "Root password is required for MySQL",
+						path: ["metadata", "mysql", "databaseRootPassword"],
+					});
+				}
+			}
+		}
+	});
+
+export const formatBytes = (bytes: number): string => {
+	if (bytes === 0) return "0 Bytes";
+	const k = 1024;
+	const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+};
+
+export const RestoreBackup = ({
+	id,
+	databaseType,
+	serverId,
+	backupType = "database",
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+
+	const { data: destinations = [] } = api.destination.all.useQuery();
+
+	const form = useForm<z.infer<typeof RestoreBackupSchema>>({
+		defaultValues: {
+			destinationId: "",
+			backupFile: "",
+			databaseName: databaseType === "web-server" ? "dokploy" : "",
+			databaseType:
+				backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
+			backupType: backupType,
+			metadata: {},
+		},
+		resolver: zodResolver(RestoreBackupSchema),
+	});
+
+	const destionationId = form.watch("destinationId");
+	const currentDatabaseType = form.watch("databaseType");
+	const metadata = form.watch("metadata");
+
+	const debouncedSetSearch = debounce((value: string) => {
+		setDebouncedSearchTerm(value);
+	}, 350);
+
+	const handleSearchChange = (value: string) => {
+		setSearch(value);
+		debouncedSetSearch(value);
+	};
+
+	const { data: files = [], isLoading } = api.backup.listBackupFiles.useQuery(
+		{
+			destinationId: destionationId,
+			search: debouncedSearchTerm,
+			serverId: serverId ?? "",
+		},
+		{
+			enabled: isOpen && !!destionationId,
+		},
+	);
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+
+	api.backup.restoreBackupWithLogs.useSubscription(
+		{
+			databaseId: id,
+			databaseType: currentDatabaseType as DatabaseType,
+			databaseName: form.watch("databaseName"),
+			backupFile: form.watch("backupFile"),
+			destinationId: form.watch("destinationId"),
+			backupType: backupType,
+			metadata: metadata,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
+
+				if (log === "Restore completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Restore logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+
+	const onSubmit = async (data: z.infer<typeof RestoreBackupSchema>) => {
+		if (backupType === "compose" && !data.databaseType) {
+			toast.error("Please select a database type");
+			return;
+		}
+		console.log({ data });
+		setIsDeploying(true);
+	};
+
+	const [cacheType, setCacheType] = useState<"fetch" | "cache">("cache");
+	const {
+		data: services = [],
+		isLoading: isLoadingServices,
+		refetch: refetchServices,
+	} = api.compose.loadServices.useQuery(
+		{
+			composeId: id,
+			type: cacheType,
+		},
+		{
+			retry: false,
+			refetchOnWindowFocus: false,
+			enabled: backupType === "compose",
+		},
+	);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">
+					<RotateCcw className="mr-2 size-4" />
+					Restore Backup
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle className="flex items-center">
+						<RotateCcw className="mr-2 size-4" />
+						Restore Backup
+					</DialogTitle>
+					<DialogDescription>
+						Select a destination and search for backup files
+					</DialogDescription>
+				</DialogHeader>
+
+				<Form {...form}>
+					<form
+						id="hook-form-restore-backup"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="destinationId"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel>Destination</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													{field.value
+														? destinations.find(
+																(d) => d.destinationId === field.value,
+															)?.name
+														: "Select Destination"}
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search destinations..."
+													className="h-9"
+												/>
+												<CommandEmpty>No destinations found.</CommandEmpty>
+												<ScrollArea className="h-64">
+													<CommandGroup>
+														{destinations.map((destination) => (
+															<CommandItem
+																value={destination.destinationId}
+																key={destination.destinationId}
+																onSelect={() => {
+																	form.setValue(
+																		"destinationId",
+																		destination.destinationId,
+																	);
+																}}
+															>
+																{destination.name}
+																<CheckIcon
+																	className={cn(
+																		"ml-auto h-4 w-4",
+																		destination.destinationId === field.value
+																			? "opacity-100"
+																			: "opacity-0",
+																	)}
+																/>
+															</CommandItem>
+														))}
+													</CommandGroup>
+												</ScrollArea>
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="backupFile"
+							render={({ field }) => (
+								<FormItem className="">
+									<FormLabel className="flex items-center justify-between">
+										Search Backup Files
+										{field.value && (
+											<Badge variant="outline" className="truncate">
+												{field.value}
+												<Copy
+													className="ml-2 size-4 cursor-pointer"
+													onClick={(e) => {
+														e.stopPropagation();
+														e.preventDefault();
+														copy(field.value);
+														toast.success("Backup file copied to clipboard");
+													}}
+												/>
+											</Badge>
+										)}
+									</FormLabel>
+									<Popover modal>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													className={cn(
+														"w-full justify-between !bg-input",
+														!field.value && "text-muted-foreground",
+													)}
+												>
+													<span className="truncate text-left flex-1 w-52">
+														{field.value || "Search and select a backup file"}
+													</span>
+													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+												</Button>
+											</FormControl>
+										</PopoverTrigger>
+										<PopoverContent className="p-0" align="start">
+											<Command>
+												<CommandInput
+													placeholder="Search backup files..."
+													value={search}
+													onValueChange={handleSearchChange}
+													className="h-9"
+												/>
+												{isLoading ? (
+													<div className="py-6 text-center text-sm">
+														Loading backup files...
+													</div>
+												) : files.length === 0 && search ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files found for "{search}"
+													</div>
+												) : files.length === 0 ? (
+													<div className="py-6 text-center text-sm text-muted-foreground">
+														No backup files available
+													</div>
+												) : (
+													<ScrollArea className="h-64">
+														<CommandGroup className="w-96">
+															{files?.map((file) => (
+																<CommandItem
+																	value={file.Path}
+																	key={file.Path}
+																	onSelect={() => {
+																		form.setValue("backupFile", file.Path);
+																		if (file.IsDir) {
+																			setSearch(`${file.Path}/`);
+																			setDebouncedSearchTerm(`${file.Path}/`);
+																		} else {
+																			setSearch(file.Path);
+																			setDebouncedSearchTerm(file.Path);
+																		}
+																	}}
+																>
+																	<div className="flex w-full flex-col gap-1">
+																		<div className="flex w-full justify-between">
+																			<span className="font-medium">
+																				{file.Path}
+																			</span>
+
+																			<CheckIcon
+																				className={cn(
+																					"ml-auto h-4 w-4",
+																					file.Path === field.value
+																						? "opacity-100"
+																						: "opacity-0",
+																				)}
+																			/>
+																		</div>
+																		<div className="flex items-center gap-4 text-xs text-muted-foreground">
+																			<span>
+																				Size: {formatBytes(file.Size)}
+																			</span>
+																			{file.IsDir && (
+																				<span className="text-blue-500">
+																					Directory
+																				</span>
+																			)}
+																			{file.Hashes?.MD5 && (
+																				<span>MD5: {file.Hashes.MD5}</span>
+																			)}
+																		</div>
+																	</div>
+																</CommandItem>
+															))}
+														</CommandGroup>
+													</ScrollArea>
+												)}
+											</Command>
+										</PopoverContent>
+									</Popover>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="databaseName"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Database Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="Enter database name"
+											{...field}
+											disabled={databaseType === "web-server"}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{backupType === "compose" && (
+							<>
+								<FormField
+									control={form.control}
+									name="databaseType"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Database Type</FormLabel>
+											<Select
+												value={field.value}
+												onValueChange={(value: DatabaseType) => {
+													field.onChange(value);
+													form.setValue("metadata", {});
+												}}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select database type" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectItem value="postgres">PostgreSQL</SelectItem>
+													<SelectItem value="mariadb">MariaDB</SelectItem>
+													<SelectItem value="mongo">MongoDB</SelectItem>
+													<SelectItem value="mysql">MySQL</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="metadata.serviceName"
+									render={({ field }) => (
+										<FormItem className="w-full">
+											<FormLabel>Service Name</FormLabel>
+											<div className="flex gap-2">
+												<Select
+													onValueChange={field.onChange}
+													value={field.value || undefined}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a service name" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														{services?.map((service, index) => (
+															<SelectItem
+																value={service}
+																key={`${service}-${index}`}
+															>
+																{service}
+															</SelectItem>
+														))}
+														{(!services || services.length === 0) && (
+															<SelectItem value="none" disabled>
+																Empty
+															</SelectItem>
+														)}
+													</SelectContent>
+												</Select>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "fetch") {
+																		refetchServices();
+																	} else {
+																		setCacheType("fetch");
+																	}
+																}}
+															>
+																<RefreshCw className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Fetch: Will clone the repository and load the
+																services
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+												<TooltipProvider delayDuration={0}>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<Button
+																variant="secondary"
+																type="button"
+																isLoading={isLoadingServices}
+																onClick={() => {
+																	if (cacheType === "cache") {
+																		refetchServices();
+																	} else {
+																		setCacheType("cache");
+																	}
+																}}
+															>
+																<DatabaseZap className="size-4 text-muted-foreground" />
+															</Button>
+														</TooltipTrigger>
+														<TooltipContent
+															side="left"
+															sideOffset={5}
+															className="max-w-[10rem]"
+														>
+															<p>
+																Cache: If you previously deployed this compose,
+																it will read the services from the last
+																deployment/fetch from the repository
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											</div>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								{currentDatabaseType === "postgres" && (
+									<FormField
+										control={form.control}
+										name="metadata.postgres.databaseUser"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Database User</FormLabel>
+												<FormControl>
+													<Input placeholder="Enter database user" {...field} />
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								{currentDatabaseType === "mariadb" && (
+									<>
+										<FormField
+											control={form.control}
+											name="metadata.mariadb.databaseUser"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Database User</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="Enter database user"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="metadata.mariadb.databasePassword"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Database Password</FormLabel>
+													<FormControl>
+														<Input
+															type="password"
+															placeholder="Enter database password"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
+
+								{currentDatabaseType === "mongo" && (
+									<>
+										<FormField
+											control={form.control}
+											name="metadata.mongo.databaseUser"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Database User</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="Enter database user"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="metadata.mongo.databasePassword"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Database Password</FormLabel>
+													<FormControl>
+														<Input
+															type="password"
+															placeholder="Enter database password"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
+
+								{currentDatabaseType === "mysql" && (
+									<FormField
+										control={form.control}
+										name="metadata.mysql.databaseRootPassword"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Root Password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="Enter root password"
+														{...field}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</>
+						)}
+
+						<DialogFooter>
+							<Button
+								isLoading={isDeploying}
+								form="hook-form-restore-backup"
+								type="submit"
+								// disabled={
+								// 	!form.watch("backupFile") ||
+								// 	(backupType === "compose" && !form.watch("databaseType"))
+								// }
+							>
+								Restore
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						// refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -1,3 +1,10 @@
+import {
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+} from "@/components/icons/data-tools-icons";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,43 +20,77 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { DatabaseBackup, Play, Trash2 } from "lucide-react";
+import {
+	ClipboardList,
+	Database,
+	DatabaseBackup,
+	Play,
+	Trash2,
+} from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
-import { AddBackup } from "./add-backup";
+import { ShowDeploymentsModal } from "../../application/deployments/show-deployments-modal";
-import { UpdateBackup } from "./update-backup";
+import { HandleBackup } from "./handle-backup";
+import { RestoreBackup } from "./restore-backup";
 
 interface Props {
 	id: string;
-	type: Exclude<ServiceType, "application" | "redis">;
+	databaseType?: Exclude<ServiceType, "application" | "redis"> | "web-server";
+	backupType?: "database" | "compose";
 }
-export const ShowBackups = ({ id, type }: Props) => {
+export const ShowBackups = ({
-	const queryMap = {
+	id,
-		postgres: () =>
+	databaseType,
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+	backupType = "database",
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+}: Props) => {
-		mariadb: () =>
+	const [activeManualBackup, setActiveManualBackup] = useState<
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		string | undefined
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+	>();
-	};
+	const queryMap =
+		backupType === "database"
+			? {
+					postgres: () =>
+						api.postgres.one.useQuery({ postgresId: 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 }),
+					"web-server": () => api.user.getBackups.useQuery(),
+				}
+			: {
+					compose: () =>
+						api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
+				};
 	const { data } = api.destination.all.useQuery();
-	const { data: postgres, refetch } = queryMap[type]
+	const key = backupType === "database" ? databaseType : "compose";
-		? queryMap[type]()
+	const query = queryMap[key as keyof typeof queryMap];
+	const { data: postgres, refetch } = query
+		? query()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 
-	const mutationMap = {
+	const mutationMap =
-		postgres: () => api.backup.manualBackupPostgres.useMutation(),
+		backupType === "database"
-		mysql: () => api.backup.manualBackupMySql.useMutation(),
+			? {
-		mariadb: () => api.backup.manualBackupMariadb.useMutation(),
+					postgres: api.backup.manualBackupPostgres.useMutation(),
-		mongo: () => api.backup.manualBackupMongo.useMutation(),
+					mysql: api.backup.manualBackupMySql.useMutation(),
-	};
+					mariadb: api.backup.manualBackupMariadb.useMutation(),
+					mongo: api.backup.manualBackupMongo.useMutation(),
+					"web-server": api.backup.manualBackupWebServer.useMutation(),
+				}
+			: {
+					compose: api.backup.manualBackupCompose.useMutation(),
+				};
 
-	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutationMap[
+	const mutation = mutationMap[key as keyof typeof mutationMap];
-		type
+
-	]
+	const { mutateAsync: manualBackup, isLoading: isManualBackup } = mutation
-		? mutationMap[type]()
+		? mutation
 		: api.backup.manualBackupMongo.useMutation();
 
 	const { mutateAsync: deleteBackup, isLoading: isRemoving } =
@@ -59,7 +100,10 @@ export const ShowBackups = ({ id, type }: Props) => {
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between gap-4  flex-wrap">
 				<div className="flex flex-col gap-0.5">
-					<CardTitle className="text-xl">Backups</CardTitle>
+					<CardTitle className="text-xl flex flex-row gap-2">
+						<Database className="size-6 text-muted-foreground" />
+						Backups
+					</CardTitle>
 					<CardDescription>
 						Add backups to your database to save the data to a different
 						provider.
@@ -67,12 +111,27 @@ export const ShowBackups = ({ id, type }: Props) => {
 				</div>
 
 				{postgres && postgres?.backups?.length > 0 && (
-					<AddBackup databaseId={id} databaseType={type} refetch={refetch} />
+					<div className="flex flex-col lg:flex-row gap-4 w-full lg:w-auto">
+						{databaseType !== "web-server" && (
+							<HandleBackup
+								id={id}
+								databaseType={databaseType}
+								backupType={backupType}
+								refetch={refetch}
+							/>
+						)}
+						<RestoreBackup
+							id={id}
+							databaseType={databaseType}
+							backupType={backupType}
+							serverId={"serverId" in postgres ? postgres.serverId : undefined}
+						/>
+					</div>
 				)}
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				{data?.length === 0 ? (
-					<div className="flex flex-col items-center gap-3">
+					<div className="flex flex-col items-center gap-3 min-h-[35vh] justify-center">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
 						<span className="text-base text-muted-foreground text-center">
 							To create a backup it is required to set at least 1 provider.
@@ -87,121 +146,230 @@ export const ShowBackups = ({ id, type }: Props) => {
 						</span>
 					</div>
 				) : (
-					<div>
+					<div className="flex flex-col gap-4 w-full">
 						{postgres?.backups.length === 0 ? (
 							<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
 								<DatabaseBackup className="size-8 text-muted-foreground" />
 								<span className="text-base text-muted-foreground">
 									No backups configured
 								</span>
-								<AddBackup
+								<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
-									databaseId={id}
+									<HandleBackup
-									databaseType={type}
+										id={id}
-									refetch={refetch}
+										databaseType={databaseType}
-								/>
+										backupType={backupType}
+										refetch={refetch}
+									/>
+									<RestoreBackup
+										id={id}
+										databaseType={databaseType}
+										backupType={backupType}
+										serverId={
+											"serverId" in postgres ? postgres.serverId : undefined
+										}
+									/>
+								</div>
 							</div>
 						) : (
-							<div className="flex flex-col pt-2">
+							<div className="flex flex-col pt-2 gap-4">
+								{backupType === "compose" && (
+									<AlertBlock title="Compose Backups">
+										Make sure the compose is running before creating a backup.
+									</AlertBlock>
+								)}
 								<div className="flex flex-col gap-6">
-									{postgres?.backups.map((backup) => (
+									{postgres?.backups.map((backup) => {
-										<div key={backup.backupId}>
+										const serverId =
-											<div className="flex w-full flex-col md:flex-row md:items-center justify-between gap-4 md:gap-10 border rounded-lg p-4">
+											"serverId" in postgres ? postgres.serverId : undefined;
-												<div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-5 flex-col gap-8">
+
-													<div className="flex flex-col gap-1">
+										return (
-														<span className="font-medium">Destination</span>
+											<div key={backup.backupId}>
-														<span className="text-sm text-muted-foreground">
+												<div className="flex w-full flex-col md:flex-row md:items-start justify-between gap-4 border rounded-lg p-4 hover:bg-muted/50 transition-colors">
-															{backup.destination.name}
+													<div className="flex flex-col w-full gap-4">
-														</span>
+														<div className="flex items-center gap-3">
+															{backup.backupType === "compose" && (
+																<div className="flex items-center justify-center size-10 rounded-lg">
+																	{backup.databaseType === "postgres" && (
+																		<PostgresqlIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mysql" && (
+																		<MysqlIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mariadb" && (
+																		<MariadbIcon className="size-7" />
+																	)}
+																	{backup.databaseType === "mongo" && (
+																		<MongodbIcon className="size-7" />
+																	)}
+																</div>
+															)}
+															<div className="flex flex-col gap-1">
+																{backup.backupType === "compose" && (
+																	<div className="flex items-center gap-2">
+																		<h3 className="font-medium">
+																			{backup.serviceName}
+																		</h3>
+																		<span className="px-1.5 py-0.5 rounded-full bg-muted text-xs font-medium capitalize">
+																			{backup.databaseType}
+																		</span>
+																	</div>
+																)}
+																<div className="flex items-center gap-2">
+																	<div
+																		className={cn(
+																			"size-1.5 rounded-full",
+																			backup.enabled
+																				? "bg-green-500"
+																				: "bg-red-500",
+																		)}
+																	/>
+																	<span className="text-xs text-muted-foreground">
+																		{backup.enabled ? "Active" : "Inactive"}
+																	</span>
+																</div>
+															</div>
+														</div>
+
+														<div className="flex flex-wrap gap-x-8 gap-y-2">
+															<div className="min-w-[200px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Destination
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.destination.name}
+																</p>
+															</div>
+
+															<div className="min-w-[150px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Database
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.database}
+																</p>
+															</div>
+
+															<div className="min-w-[120px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Schedule
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.schedule}
+																</p>
+															</div>
+
+															<div className="min-w-[150px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Prefix Storage
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.prefix}
+																</p>
+															</div>
+
+															<div className="min-w-[100px]">
+																<span className="text-sm font-medium text-muted-foreground">
+																	Keep Latest
+																</span>
+																<p className="font-medium text-sm mt-0.5">
+																	{backup.keepLatestCount || "All"}
+																</p>
+															</div>
+														</div>
 													</div>
-													<div className="flex flex-col gap-1">
+
-														<span className="font-medium">Database</span>
+													<div className="flex flex-row md:flex-col gap-1.5">
-														<span className="text-sm text-muted-foreground">
+														<ShowDeploymentsModal
-															{backup.database}
+															id={backup.backupId}
-														</span>
+															type="backup"
-													</div>
+															serverId={serverId || undefined}
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Scheduled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.schedule}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Prefix Storage</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.prefix}
-														</span>
-													</div>
-													<div className="flex flex-col gap-1">
-														<span className="font-medium">Enabled</span>
-														<span className="text-sm text-muted-foreground">
-															{backup.enabled ? "Yes" : "No"}
-														</span>
-													</div>
-												</div>
-												<div className="flex flex-row gap-4">
-													<TooltipProvider delayDuration={0}>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<Button
-																	type="button"
-																	variant="ghost"
-																	isLoading={isManualBackup}
-																	onClick={async () => {
-																		await manualBackup({
-																			backupId: backup.backupId as string,
-																		})
-																			.then(async () => {
-																				toast.success(
-																					"Manual Backup Successful",
-																				);
-																			})
-																			.catch(() => {
-																				toast.error(
-																					"Error creating the manual backup",
-																				);
-																			});
-																	}}
-																>
-																	<Play className="size-5  text-muted-foreground" />
-																</Button>
-															</TooltipTrigger>
-															<TooltipContent>Run Manual Backup</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-													<UpdateBackup
-														backupId={backup.backupId}
-														refetch={refetch}
-													/>
-													<DialogAction
-														title="Delete Backup"
-														description="Are you sure you want to delete this backup?"
-														type="destructive"
-														onClick={async () => {
-															await deleteBackup({
-																backupId: backup.backupId,
-															})
-																.then(() => {
-																	refetch();
-																	toast.success("Backup deleted successfully");
-																})
-																.catch(() => {
-																	toast.error("Error deleting backup");
-																});
-														}}
-													>
-														<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
-														</Button>
+																variant="ghost"
-													</DialogAction>
+																size="icon"
+																className="size-8"
+															>
+																<ClipboardList className="size-4  transition-colors " />
+															</Button>
+														</ShowDeploymentsModal>
+														<TooltipProvider delayDuration={0}>
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<Button
+																		type="button"
+																		variant="ghost"
+																		size="icon"
+																		className="size-8"
+																		isLoading={
+																			isManualBackup &&
+																			activeManualBackup === backup.backupId
+																		}
+																		onClick={async () => {
+																			setActiveManualBackup(backup.backupId);
+																			await manualBackup({
+																				backupId: backup.backupId as string,
+																			})
+																				.then(async () => {
+																					toast.success(
+																						"Manual Backup Successful",
+																					);
+																				})
+																				.catch(() => {
+																					toast.error(
+																						"Error creating the manual backup",
+																					);
+																				});
+																			setActiveManualBackup(undefined);
+																		}}
+																	>
+																		<Play className="size-4 " />
+																	</Button>
+																</TooltipTrigger>
+																<TooltipContent>
+																	Run Manual Backup
+																</TooltipContent>
+															</Tooltip>
+														</TooltipProvider>
+
+														<HandleBackup
+															backupType={backup.backupType}
+															backupId={backup.backupId}
+															databaseType={backup.databaseType}
+															refetch={refetch}
+														/>
+														<DialogAction
+															title="Delete Backup"
+															description="Are you sure you want to delete this backup?"
+															type="destructive"
+															onClick={async () => {
+																await deleteBackup({
+																	backupId: backup.backupId,
+																})
+																	.then(() => {
+																		refetch();
+																		toast.success(
+																			"Backup deleted successfully",
+																		);
+																	})
+																	.catch(() => {
+																		toast.error("Error deleting backup");
+																	});
+															}}
+														>
+															<Button
+																variant="ghost"
+																size="icon"
+																className="group hover:bg-red-500/10 size-8"
+																isLoading={isRemoving}
+															>
+																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+															</Button>
+														</DialogAction>
+													</div>
 												</div>
 											</div>
-										</div>
+										);
-									))}
+									})}
 								</div>
 							</div>
 						)}

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

@@ -1,300 +0,0 @@
-import { Button } from "@/components/ui/button";
-import {
-	Command,
-	CommandEmpty,
-	CommandGroup,
-	CommandInput,
-	CommandItem,
-} from "@/components/ui/command";
-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 {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Switch } from "@/components/ui/switch";
-import { cn } from "@/lib/utils";
-import { api } from "@/utils/api";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, PenBoxIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-
-const UpdateBackupSchema = z.object({
-	destinationId: z.string().min(1, "Destination required"),
-	schedule: z.string().min(1, "Schedule (Cron) required"),
-	prefix: z.string().min(1, "Prefix required"),
-	enabled: z.boolean(),
-	database: z.string().min(1, "Database required"),
-});
-
-type UpdateBackup = z.infer<typeof UpdateBackupSchema>;
-
-interface Props {
-	backupId: string;
-	refetch: () => void;
-}
-
-export const UpdateBackup = ({ backupId, refetch }: Props) => {
-	const [isOpen, setIsOpen] = useState(false);
-	const { data, isLoading } = api.destination.all.useQuery();
-	const { data: backup } = api.backup.one.useQuery(
-		{
-			backupId,
-		},
-		{
-			enabled: !!backupId,
-		},
-	);
-
-	const { mutateAsync, isLoading: isLoadingUpdate } =
-		api.backup.update.useMutation();
-
-	const form = useForm<UpdateBackup>({
-		defaultValues: {
-			database: "",
-			destinationId: "",
-			enabled: true,
-			prefix: "/",
-			schedule: "",
-		},
-		resolver: zodResolver(UpdateBackupSchema),
-	});
-
-	useEffect(() => {
-		if (backup) {
-			form.reset({
-				database: backup.database,
-				destinationId: backup.destinationId,
-				enabled: backup.enabled || false,
-				prefix: backup.prefix,
-				schedule: backup.schedule,
-			});
-		}
-	}, [form, form.reset, backup]);
-
-	const onSubmit = async (data: UpdateBackup) => {
-		await mutateAsync({
-			backupId,
-			destinationId: data.destinationId,
-			prefix: data.prefix,
-			schedule: data.schedule,
-			enabled: data.enabled,
-			database: data.database,
-		})
-			.then(async () => {
-				toast.success("Backup Updated");
-				refetch();
-				setIsOpen(false);
-			})
-			.catch(() => {
-				toast.error("Error updating the Backup");
-			});
-	};
-
-	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild>
-				<Button
-					variant="ghost"
-					size="icon"
-					className="group hover:bg-blue-500/10 "
-				>
-					<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
-				<DialogHeader>
-					<DialogTitle>Update Backup</DialogTitle>
-					<DialogDescription>Update the backup</DialogDescription>
-				</DialogHeader>
-
-				<Form {...form}>
-					<form
-						id="hook-form-update-backup"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full gap-4"
-					>
-						<div className="grid grid-cols-1 gap-4">
-							<FormField
-								control={form.control}
-								name="destinationId"
-								render={({ field }) => (
-									<FormItem className="">
-										<FormLabel>Destination</FormLabel>
-										<Popover>
-											<PopoverTrigger asChild>
-												<FormControl>
-													<Button
-														variant="outline"
-														className={cn(
-															"w-full justify-between !bg-input",
-															!field.value && "text-muted-foreground",
-														)}
-													>
-														{isLoading
-															? "Loading...."
-															: field.value
-																? data?.find(
-																		(destination) =>
-																			destination.destinationId === field.value,
-																	)?.name
-																: "Select Destination"}
-
-														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-													</Button>
-												</FormControl>
-											</PopoverTrigger>
-											<PopoverContent className="p-0" align="start">
-												<Command>
-													<CommandInput
-														placeholder="Search Destination..."
-														className="h-9"
-													/>
-													{isLoading && (
-														<span className="py-6 text-center text-sm">
-															Loading Destinations....
-														</span>
-													)}
-													<CommandEmpty>No destinations found.</CommandEmpty>
-													<ScrollArea className="h-64">
-														<CommandGroup>
-															{data?.map((destination) => (
-																<CommandItem
-																	value={destination.destinationId}
-																	key={destination.destinationId}
-																	onSelect={() => {
-																		form.setValue(
-																			"destinationId",
-																			destination.destinationId,
-																		);
-																	}}
-																>
-																	{destination.name}
-																	<CheckIcon
-																		className={cn(
-																			"ml-auto h-4 w-4",
-																			destination.destinationId === field.value
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																</CommandItem>
-															))}
-														</CommandGroup>
-													</ScrollArea>
-												</Command>
-											</PopoverContent>
-										</Popover>
-
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<FormField
-								control={form.control}
-								name="database"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Database</FormLabel>
-											<FormControl>
-												<Input placeholder={"dokploy"} {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="schedule"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Schedule (Cron)</FormLabel>
-											<FormControl>
-												<Input placeholder={"0 0 * * *"} {...field} />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="prefix"
-								render={({ field }) => {
-									return (
-										<FormItem>
-											<FormLabel>Prefix Destination</FormLabel>
-											<FormControl>
-												<Input placeholder={"dokploy/"} {...field} />
-											</FormControl>
-											<FormDescription>
-												Use if you want to storage in a specific path of your
-												destination/bucket
-											</FormDescription>
-
-											<FormMessage />
-										</FormItem>
-									);
-								}}
-							/>
-							<FormField
-								control={form.control}
-								name="enabled"
-								render={({ field }) => (
-									<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 ">
-										<div className="space-y-0.5">
-											<FormLabel>Enabled</FormLabel>
-											<FormDescription>
-												Enable or disable the backup
-											</FormDescription>
-										</div>
-										<FormControl>
-											<Switch
-												checked={field.value}
-												onCheckedChange={field.onChange}
-											/>
-										</FormControl>
-									</FormItem>
-								)}
-							/>
-						</div>
-						<DialogFooter>
-							<Button
-								isLoading={isLoadingUpdate}
-								form="hook-form-update-backup"
-								type="submit"
-							>
-								Update
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

apps/dokploy/components/dashboard/docker/config/show-container-config.tsx

@@ -42,7 +42,7 @@ export const ShowContainerConfig = ({ containerId, serverId }: Props) => {
 						See in detail the config of this container
 					</DialogDescription>
 				</DialogHeader>
-				<div className="text-wrap rounded-lg border p-4 text-sm bg-card overflow-y-auto max-h-[80vh]">
+				<div className="text-wrap rounded-lg border p-4 overflow-y-auto text-sm bg-card max-h-[80vh]">
 					<code>
 						<pre className="whitespace-pre-wrap break-words">
 							<CodeEditor

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

@@ -119,7 +119,6 @@ export const DockerLogsId: React.FC<Props> = ({
 		const wsUrl = `${protocol}//${
 			window.location.host
 		}/docker-container-logs?${params.toString()}`;
-		console.log("Connecting to WebSocket:", wsUrl);
 		const ws = new WebSocket(wsUrl);
 
 		const resetNoDataTimeout = () => {
@@ -136,13 +135,19 @@ export const DockerLogsId: React.FC<Props> = ({
 				ws.close();
 				return;
 			}
-			console.log("WebSocket connected");
 			resetNoDataTimeout();
 		};
 
 		ws.onmessage = (e) => {
 			if (!isCurrentConnection) return;
-			setRawLogs((prev) => prev + e.data);
+			setRawLogs((prev) => {
+				const updated = prev + e.data;
+				const splitLines = updated.split("\n");
+				if (splitLines.length > lines) {
+					return splitLines.slice(-lines).join("\n");
+				}
+				return updated;
+			});
 			setIsLoading(false);
 			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};

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

@@ -40,7 +40,7 @@ export const ShowDockerModalLogs = ({
 					{children}
 				</DropdownMenuItem>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-7xl">
+			<DialogContent className="sm:max-w-7xl">
 				<DialogHeader>
 					<DialogTitle>View Logs</DialogTitle>
 					<DialogDescription>View the logs for {containerId}</DialogDescription>