Merge branch 'canary' of github.com:Dokploy/dokploy into fix/remove-path-prefix

apps/dokploy/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+*.md
+dist

apps/dokploy/.env.example

@@ -0,0 +1,3 @@
+DATABASE_URL="postgres://dokploy:amukds4wi9001583845717ad2@localhost:5432/dokploy"
+PORT=3000
+NODE_ENV=development

apps/dokploy/.env.production.example

@@ -0,0 +1,3 @@
+DATABASE_URL="postgres://dokploy:amukds4wi9001583845717ad2@dokploy-postgres:5432/dokploy"
+PORT=3000
+NODE_ENV=production

apps/dokploy/.gitignore

@@ -0,0 +1,59 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/redis-data
+traefik.yml
+.docker
+.env.production
+
+# testing
+/coverage
+/dist
+/production-server
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+/logs
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+/dokploy
+/config
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+# otros
+/.data
+/.main
+.vscode
+
+*.lockb
+*.rdb
+.idea

apps/dokploy/.nvmrc

@@ -0,0 +1 @@
+18.18.0

apps/dokploy/CONTRIBUTING.md

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

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

@@ -0,0 +1,26 @@
+# 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 and Docker Compose file support 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 and Docker Compose file support, will always be free to use in the self-hosted version.
+- **Restriction on Resale**: The multi-node support and Docker Compose file support 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 and Docker Compose file support 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/compose.test.ts

@@ -0,0 +1,476 @@
+import { addPrefixToAllProperties } from "@/server/utils/docker/compose";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile1 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    container_name: web_container
+    depends_on:
+      - app
+    networks:
+      - frontend
+    volumes_from:
+      - data
+    links:
+      - db
+    extends:
+      service: base_service
+    configs:
+      - source: web_config
+
+  app:
+    image: node:14
+    networks:
+      - backend
+      - frontend
+
+  db:
+    image: postgres:13
+    networks:
+      - backend
+
+  data:
+    image: busybox
+    volumes:
+      - /data
+
+  base_service:
+    image: base:latest
+
+networks:
+  frontend:
+    driver: bridge
+  backend:
+    driver: bridge
+
+volumes:
+  web_data:
+    driver: local
+
+configs:
+  web_config:
+    file: ./web_config.yml
+
+secrets:
+  db_password:
+    file: ./db_password.txt
+`;
+
+const expectedComposeFile1 = load(`
+version: "3.8"
+
+services:
+  web-testhash:
+    image: nginx:latest
+    container_name: web_container-testhash
+    depends_on:
+      - app-testhash
+    networks:
+      - frontend-testhash
+    volumes_from:
+      - data-testhash
+    links:
+      - db-testhash
+    extends:
+      service: base_service-testhash
+    configs:
+      - source: web_config-testhash
+
+  app-testhash:
+    image: node:14
+    networks:
+      - backend-testhash
+      - frontend-testhash
+
+  db-testhash:
+    image: postgres:13
+    networks:
+      - backend-testhash
+
+  data-testhash:
+    image: busybox
+    volumes:
+      - /data
+
+  base_service-testhash:
+    image: base:latest
+
+networks:
+  frontend-testhash:
+    driver: bridge
+  backend-testhash:
+    driver: bridge
+
+volumes:
+  web_data-testhash:
+    driver: local
+
+configs:
+  web_config-testhash:
+    file: ./web_config.yml
+
+secrets:
+  db_password-testhash:
+    file: ./db_password.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all properties in compose file 1", () => {
+	const composeData = load(composeFile1) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllProperties(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile1);
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  frontend:
+    image: nginx:latest
+    depends_on:
+      - backend
+    networks:
+      - public
+    volumes_from:
+      - logs
+    links:
+      - cache
+    extends:
+      service: shared_service
+    secrets:
+      - db_password
+
+  backend:
+    image: node:14
+    networks:
+      - private
+      - public
+
+  cache:
+    image: redis:latest
+    networks:
+      - private
+
+  logs:
+    image: busybox
+    volumes:
+      - /logs
+
+  shared_service:
+    image: shared:latest
+
+networks:
+  public:
+    driver: bridge
+  private:
+    driver: bridge
+
+volumes:
+  logs:
+    driver: local
+
+configs:
+  app_config:
+    file: ./app_config.yml
+
+secrets:
+  db_password:
+    file: ./db_password.txt
+`;
+
+const expectedComposeFile2 = load(`
+version: "3.8"
+
+services:
+  frontend-testhash:
+    image: nginx:latest
+    depends_on:
+      - backend-testhash
+    networks:
+      - public-testhash
+    volumes_from:
+      - logs-testhash
+    links:
+      - cache-testhash
+    extends:
+      service: shared_service-testhash
+    secrets:
+      - db_password-testhash
+
+  backend-testhash:
+    image: node:14
+    networks:
+      - private-testhash
+      - public-testhash
+
+  cache-testhash:
+    image: redis:latest
+    networks:
+      - private-testhash
+
+  logs-testhash:
+    image: busybox
+    volumes:
+      - /logs
+
+  shared_service-testhash:
+    image: shared:latest
+
+networks:
+  public-testhash:
+    driver: bridge
+  private-testhash:
+    driver: bridge
+
+volumes:
+  logs-testhash:
+    driver: local
+
+configs:
+  app_config-testhash:
+    file: ./app_config.yml
+
+secrets:
+  db_password-testhash:
+    file: ./db_password.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all properties in compose file 2", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllProperties(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile2);
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  service_a:
+    image: service_a:latest
+    depends_on:
+      - service_b
+    networks:
+      - net_a
+    volumes_from:
+      - data_volume
+    links:
+      - service_c
+    extends:
+      service: common_service
+    configs:
+      - source: service_a_config
+
+  service_b:
+    image: service_b:latest
+    networks:
+      - net_b
+      - net_a
+
+  service_c:
+    image: service_c:latest
+    networks:
+      - net_b
+
+  data_volume:
+    image: busybox
+    volumes:
+      - /data
+
+  common_service:
+    image: common:latest
+
+networks:
+  net_a:
+    driver: bridge
+  net_b:
+    driver: bridge
+
+volumes:
+  data_volume:
+    driver: local
+
+configs:
+  service_a_config:
+    file: ./service_a_config.yml
+
+secrets:
+  service_secret:
+    file: ./service_secret.txt
+`;
+
+const expectedComposeFile3 = load(`
+version: "3.8"
+
+services:
+  service_a-testhash:
+    image: service_a:latest
+    depends_on:
+      - service_b-testhash
+    networks:
+      - net_a-testhash
+    volumes_from:
+      - data_volume-testhash
+    links:
+      - service_c-testhash
+    extends:
+      service: common_service-testhash
+    configs:
+      - source: service_a_config-testhash
+
+  service_b-testhash:
+    image: service_b:latest
+    networks:
+      - net_b-testhash
+      - net_a-testhash
+
+  service_c-testhash:
+    image: service_c:latest
+    networks:
+      - net_b-testhash
+
+  data_volume-testhash:
+    image: busybox
+    volumes:
+      - /data
+
+  common_service-testhash:
+    image: common:latest
+
+networks:
+  net_a-testhash:
+    driver: bridge
+  net_b-testhash:
+    driver: bridge
+
+volumes:
+  data_volume-testhash:
+    driver: local
+
+configs:
+  service_a_config-testhash:
+    file: ./service_a_config.yml
+
+secrets:
+  service_secret-testhash:
+    file: ./service_secret.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all properties in compose file 3", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllProperties(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile3);
+});
+
+const composeFile = `
+version: "3.8"
+
+services:
+  plausible_db:
+    image: postgres:16-alpine
+    restart: always
+    volumes:
+      - db-data:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_PASSWORD=postgres
+
+  plausible_events_db:
+    image: clickhouse/clickhouse-server:24.3.3.102-alpine
+    restart: always
+    volumes:
+      - event-data:/var/lib/clickhouse
+      - event-logs:/var/log/clickhouse-server
+      - ./clickhouse/clickhouse-config.xml:/etc/clickhouse-server/config.d/logging.xml:ro
+      - ./clickhouse/clickhouse-user-config.xml:/etc/clickhouse-server/users.d/logging.xml:ro
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
+
+  plausible:
+    image: ghcr.io/plausible/community-edition:v2.1.0
+    restart: always
+    command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run"
+    depends_on:
+      - plausible_db
+      - plausible_events_db
+    ports:
+      - 127.0.0.1:8000:8000
+    env_file:
+      - plausible-conf.env
+
+volumes:
+  db-data:
+    driver: local
+  event-data:
+    driver: local
+  event-logs:
+    driver: local
+`;
+
+const expectedComposeFile = load(`
+version: "3.8"
+
+services:
+  plausible_db-testhash:
+    image: postgres:16-alpine
+    restart: always
+    volumes:
+      - db-data-testhash:/var/lib/postgresql/data
+    environment:
+      - POSTGRES_PASSWORD=postgres
+
+  plausible_events_db-testhash:
+    image: clickhouse/clickhouse-server:24.3.3.102-alpine
+    restart: always
+    volumes:
+      - event-data-testhash:/var/lib/clickhouse
+      - event-logs-testhash:/var/log/clickhouse-server
+      - ./clickhouse/clickhouse-config.xml:/etc/clickhouse-server/config.d/logging.xml:ro
+      - ./clickhouse/clickhouse-user-config.xml:/etc/clickhouse-server/users.d/logging.xml:ro
+    ulimits:
+      nofile:
+        soft: 262144
+        hard: 262144
+
+  plausible-testhash:
+    image: ghcr.io/plausible/community-edition:v2.1.0
+    restart: always
+    command: sh -c "sleep 10 && /entrypoint.sh db createdb && /entrypoint.sh db migrate && /entrypoint.sh run"
+    depends_on:
+      - plausible_db-testhash
+      - plausible_events_db-testhash
+    ports:
+      - 127.0.0.1:8000:8000
+    env_file:
+      - plausible-conf.env
+
+volumes:
+  db-data-testhash:
+    driver: local
+  event-data-testhash:
+    driver: local
+  event-logs-testhash:
+    driver: local
+`) as ComposeSpecification;
+
+test("Add prefix to all properties in Plausible compose file", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllProperties(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile);
+});

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

@@ -0,0 +1,178 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToConfigsRoot } from "@/server/utils/docker/compose/configs";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+configs:
+  web-config:
+    file: ./web-config.yml
+`;
+
+test("Add prefix to configs in root property", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.configs) {
+		return;
+	}
+	const configs = addPrefixToConfigsRoot(composeData.configs, prefix);
+
+	expect(configs).toBeDefined();
+	for (const configKey of Object.keys(configs)) {
+		expect(configKey).toContain(`-${prefix}`);
+		expect(configs[configKey]).toBeDefined();
+	}
+});
+
+const composeFileMultipleConfigs = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web-config
+        target: /etc/nginx/nginx.conf
+      - source: another-config
+        target: /etc/nginx/another.conf
+
+configs:
+  web-config:
+    file: ./web-config.yml
+  another-config:
+    file: ./another-config.yml
+`;
+
+test("Add prefix to multiple configs in root property", () => {
+	const composeData = load(composeFileMultipleConfigs) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.configs) {
+		return;
+	}
+	const configs = addPrefixToConfigsRoot(composeData.configs, prefix);
+
+	expect(configs).toBeDefined();
+	for (const configKey of Object.keys(configs)) {
+		expect(configKey).toContain(`-${prefix}`);
+		expect(configs[configKey]).toBeDefined();
+	}
+	expect(configs).toHaveProperty(`web-config-${prefix}`);
+	expect(configs).toHaveProperty(`another-config-${prefix}`);
+});
+
+const composeFileDifferentProperties = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+configs:
+  web-config:
+    file: ./web-config.yml
+  special-config:
+    external: true
+`;
+
+test("Add prefix to configs with different properties in root property", () => {
+	const composeData = load(
+		composeFileDifferentProperties,
+	) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.configs) {
+		return;
+	}
+	const configs = addPrefixToConfigsRoot(composeData.configs, prefix);
+
+	expect(configs).toBeDefined();
+	for (const configKey of Object.keys(configs)) {
+		expect(configKey).toContain(`-${prefix}`);
+		expect(configs[configKey]).toBeDefined();
+	}
+	expect(configs).toHaveProperty(`web-config-${prefix}`);
+	expect(configs).toHaveProperty(`special-config-${prefix}`);
+});
+
+const composeFileConfigRoot = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+  app:
+    image: node:latest
+
+  db:
+    image: postgres:latest
+
+configs:
+  web_config:
+    file: ./web-config.yml
+
+  app_config:
+    file: ./app-config.json
+
+  db_config:
+    file: ./db-config.yml
+`;
+
+// Expected compose file con el prefijo `testhash`
+const expectedComposeFileConfigRoot = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+  app:
+    image: node:latest
+
+  db:
+    image: postgres:latest
+
+configs:
+  web_config-testhash:
+    file: ./web-config.yml
+
+  app_config-testhash:
+    file: ./app-config.json
+
+  db_config-testhash:
+    file: ./db-config.yml
+`) as ComposeSpecification;
+
+test("Add prefix to configs in root property", () => {
+	const composeData = load(composeFileConfigRoot) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	if (!composeData?.configs) {
+		return;
+	}
+	const configs = addPrefixToConfigsRoot(composeData.configs, prefix);
+	const updatedComposeData = { ...composeData, configs };
+
+	// Verificar que el resultado coincide con el archivo esperado
+	expect(updatedComposeData).toEqual(expectedComposeFileConfigRoot);
+});

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

@@ -0,0 +1,197 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToConfigsInServices } from "@/server/utils/docker/compose/configs";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web-config
+        target: /etc/nginx/nginx.conf
+
+configs:
+  web-config:
+    file: ./web-config.yml
+`;
+
+test("Add prefix to configs in services", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToConfigsInServices(composeData.services, prefix);
+	const actualComposeData = { ...composeData, services };
+
+	expect(actualComposeData.services?.web?.configs).toContainEqual({
+		source: `web-config-${prefix}`,
+		target: "/etc/nginx/nginx.conf",
+	});
+});
+
+const composeFileSingleServiceConfig = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web-config
+        target: /etc/nginx/nginx.conf
+
+configs:
+  web-config:
+    file: ./web-config.yml
+`;
+
+test("Add prefix to configs in services with single config", () => {
+	const composeData = load(
+		composeFileSingleServiceConfig,
+	) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToConfigsInServices(composeData.services, prefix);
+
+	expect(services).toBeDefined();
+	for (const serviceKey of Object.keys(services)) {
+		const serviceConfigs = services?.[serviceKey]?.configs;
+		if (serviceConfigs) {
+			for (const config of serviceConfigs) {
+				if (typeof config === "object") {
+					expect(config.source).toContain(`-${prefix}`);
+				}
+			}
+		}
+	}
+});
+
+const composeFileMultipleServicesConfigs = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web-config
+        target: /etc/nginx/nginx.conf
+      - source: common-config
+        target: /etc/nginx/common.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app-config
+        target: /usr/src/app/config.json
+      - source: common-config
+        target: /usr/src/app/common.json
+
+configs:
+  web-config:
+    file: ./web-config.yml
+  app-config:
+    file: ./app-config.json
+  common-config:
+    file: ./common-config.yml
+`;
+
+test("Add prefix to configs in services with multiple configs", () => {
+	const composeData = load(
+		composeFileMultipleServicesConfigs,
+	) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToConfigsInServices(composeData.services, prefix);
+
+	expect(services).toBeDefined();
+	for (const serviceKey of Object.keys(services)) {
+		const serviceConfigs = services?.[serviceKey]?.configs;
+		if (serviceConfigs) {
+			for (const config of serviceConfigs) {
+				if (typeof config === "object") {
+					expect(config.source).toContain(`-${prefix}`);
+				}
+			}
+		}
+	}
+});
+
+const composeFileConfigServices = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:latest
+    configs:
+      - source: app_config
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:latest
+    configs:
+      - source: db_config
+        target: /etc/postgresql/postgresql.conf
+
+`;
+
+// Expected compose file con el prefijo `testhash`
+const expectedComposeFileConfigServices = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config-testhash
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:latest
+    configs:
+      - source: app_config-testhash
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:latest
+    configs:
+      - source: db_config-testhash
+        target: /etc/postgresql/postgresql.conf
+
+`) as ComposeSpecification;
+
+test("Add prefix to configs in services", () => {
+	const composeData = load(composeFileConfigServices) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	if (!composeData?.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToConfigsInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFileConfigServices);
+});

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

@@ -0,0 +1,249 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import {
+	addPrefixToAllConfigs,
+	addPrefixToConfigsRoot,
+} from "@/server/utils/docker/compose/configs";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFileCombinedConfigs = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:13
+    configs:
+      - source: db_config
+        target: /etc/postgresql/postgresql.conf
+
+configs:
+  web_config:
+    file: ./web-config.yml
+
+  app_config:
+    file: ./app-config.json
+
+  db_config:
+    file: ./db-config.yml
+`;
+
+const expectedComposeFileCombinedConfigs = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config-testhash
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config-testhash
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:13
+    configs:
+      - source: db_config-testhash
+        target: /etc/postgresql/postgresql.conf
+
+configs:
+  web_config-testhash:
+    file: ./web-config.yml
+
+  app_config-testhash:
+    file: ./app-config.json
+
+  db_config-testhash:
+    file: ./db-config.yml
+`) as ComposeSpecification;
+
+test("Add prefix to all configs in root and services", () => {
+	const composeData = load(composeFileCombinedConfigs) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllConfigs(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFileCombinedConfigs);
+});
+
+const composeFileWithEnvAndExternal = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config
+        target: /etc/nginx/nginx.conf
+    environment:
+      - NGINX_CONFIG=/etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:13
+    configs:
+      - source: db_config
+        target: /etc/postgresql/postgresql.conf
+
+configs:
+  web_config:
+    external: true
+
+  app_config:
+    file: ./app-config.json
+
+  db_config:
+    environment: dev
+    file: ./db-config.yml
+`;
+
+const expectedComposeFileWithEnvAndExternal = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config-testhash
+        target: /etc/nginx/nginx.conf
+    environment:
+      - NGINX_CONFIG=/etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config-testhash
+        target: /usr/src/app/config.json
+
+  db:
+    image: postgres:13
+    configs:
+      - source: db_config-testhash
+        target: /etc/postgresql/postgresql.conf
+
+configs:
+  web_config-testhash:
+    external: true
+
+  app_config-testhash:
+    file: ./app-config.json
+
+  db_config-testhash:
+    environment: dev
+    file: ./db-config.yml
+`) as ComposeSpecification;
+
+test("Add prefix to configs with environment and external", () => {
+	const composeData = load(
+		composeFileWithEnvAndExternal,
+	) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllConfigs(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFileWithEnvAndExternal);
+});
+
+const composeFileWithTemplateDriverAndLabels = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config
+        target: /usr/src/app/config.json
+
+configs:
+  web_config:
+    file: ./web-config.yml
+    template_driver: golang
+
+  app_config:
+    file: ./app-config.json
+    labels:
+      - app=frontend
+
+  db_config:
+    file: ./db-config.yml
+`;
+
+const expectedComposeFileWithTemplateDriverAndLabels = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    configs:
+      - source: web_config-testhash
+        target: /etc/nginx/nginx.conf
+
+  app:
+    image: node:14
+    configs:
+      - source: app_config-testhash
+        target: /usr/src/app/config.json
+
+configs:
+  web_config-testhash:
+    file: ./web-config.yml
+    template_driver: golang
+
+  app_config-testhash:
+    file: ./app-config.json
+    labels:
+      - app=frontend
+
+  db_config-testhash:
+    file: ./db-config.yml
+`) as ComposeSpecification;
+
+test("Add prefix to configs with template driver and labels", () => {
+	const composeData = load(
+		composeFileWithTemplateDriverAndLabels,
+	) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllConfigs(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(
+		expectedComposeFileWithTemplateDriverAndLabels,
+	);
+});

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

@@ -0,0 +1,281 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToNetworksRoot } from "@/server/utils/docker/compose/network";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+
+networks:
+  frontend:
+    driver: bridge
+    driver_opts:
+      com.docker.network.driver.mtu: 1200
+
+  backend:
+    driver: bridge
+    attachable: true
+
+  external_network:
+    external: true
+
+`;
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+test("Add prefix to networks root property", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	expect(networks).toBeDefined();
+	for (const volumeKey of Object.keys(networks)) {
+		expect(volumeKey).toContain(`-${prefix}`);
+	}
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  app:
+    image: myapp:latest
+    networks:
+      - app_net
+
+networks:
+  app_net:
+    driver: bridge
+    driver_opts:
+      com.docker.network.driver.mtu: 1500
+    ipam:
+      driver: default
+      config:
+        - subnet: 172.20.0.0/16
+
+  database_net:
+    driver: overlay
+    attachable: true
+
+  monitoring_net:
+    driver: bridge
+    internal: true
+`;
+
+test("Add prefix to advanced networks root property (2 TRY)", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	expect(networks).toBeDefined();
+	for (const networkKey of Object.keys(networks)) {
+		expect(networkKey).toContain(`-${prefix}`);
+	}
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+      - backend
+
+networks:
+  frontend:
+    external:
+      name: my_external_network
+
+  backend:
+    driver: bridge
+    labels:
+      - "com.example.description=Backend network"
+      - "com.example.environment=production"
+
+  external_network:
+    external: true
+`;
+
+test("Add prefix to networks with external properties", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	expect(networks).toBeDefined();
+	for (const networkKey of Object.keys(networks)) {
+		expect(networkKey).toContain(`-${prefix}`);
+	}
+});
+
+const composeFile4 = `
+version: "3.8"
+
+services:
+  db:
+    image: postgres:13
+    networks:
+      - db_net
+
+networks:
+  db_net:
+    driver: bridge
+    ipam:
+      config:
+        - subnet: 192.168.1.0/24
+        - gateway: 192.168.1.1
+        - aux_addresses:
+            host1: 192.168.1.2
+            host2: 192.168.1.3
+
+  external_network:
+    external: true
+`;
+
+test("Add prefix to networks with IPAM configurations", () => {
+	const composeData = load(composeFile4) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	expect(networks).toBeDefined();
+	for (const networkKey of Object.keys(networks)) {
+		expect(networkKey).toContain(`-${prefix}`);
+	}
+});
+
+const composeFile5 = `
+version: "3.8"
+
+services:
+  api:
+    image: myapi:latest
+    networks:
+      - api_net
+
+networks:
+  api_net:
+    driver: bridge
+    options:
+      com.docker.network.bridge.name: br0
+    enable_ipv6: true
+    ipam:
+      driver: default
+      config:
+        - subnet: "2001:db8:1::/64"
+        - gateway: "2001:db8:1::1"
+
+  external_network:
+    external: true
+`;
+
+test("Add prefix to networks with custom options", () => {
+	const composeData = load(composeFile5) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	expect(networks).toBeDefined();
+	for (const networkKey of Object.keys(networks)) {
+		expect(networkKey).toContain(`-${prefix}`);
+	}
+});
+
+const composeFile6 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+
+networks:
+  frontend:
+    driver: bridge
+    driver_opts:
+      com.docker.network.driver.mtu: 1200
+
+  backend:
+    driver: bridge
+    attachable: true
+
+  external_network:
+    external: true
+`;
+
+// Expected compose file with static prefix `testhash`
+const expectedComposeFile6 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend-testhash
+
+networks:
+  frontend-testhash:
+    driver: bridge
+    driver_opts:
+      com.docker.network.driver.mtu: 1200
+
+  backend-testhash:
+    driver: bridge
+    attachable: true
+
+  external_network-testhash:
+    external: true
+`;
+
+test("Add prefix to networks with static prefix", () => {
+	const composeData = load(composeFile6) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	if (!composeData?.networks) {
+		return;
+	}
+	const networks = addPrefixToNetworksRoot(composeData.networks, prefix);
+
+	const expectedComposeData = load(
+		expectedComposeFile6,
+	) as ComposeSpecification;
+	expect(networks).toStrictEqual(expectedComposeData.networks);
+});

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

@@ -0,0 +1,184 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNetworks } from "@/server/utils/docker/compose/network";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+      - backend
+
+  api:
+    image: myapi:latest
+    networks:
+      - backend
+`;
+
+test("Add prefix to networks in services", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToServiceNetworks(composeData.services, prefix);
+	const actualComposeData = { ...composeData, services };
+
+	expect(actualComposeData?.services?.web?.networks).toContain(
+		`frontend-${prefix}`,
+	);
+
+	expect(actualComposeData?.services?.api?.networks).toContain(
+		`backend-${prefix}`,
+	);
+
+	const apiNetworks = actualComposeData?.services?.api?.networks;
+
+	expect(apiNetworks).toBeDefined();
+	expect(actualComposeData?.services?.api?.networks).toContain(
+		`backend-${prefix}`,
+	);
+});
+
+// Caso 2: Objeto con aliases
+const composeFile2 = `
+version: "3.8"
+
+services:
+  api:
+    image: myapi:latest
+    networks:
+      frontend:
+        aliases:
+          - api
+
+networks:
+  frontend:
+    driver: bridge
+`;
+
+test("Add prefix to networks in services with aliases", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToServiceNetworks(composeData.services, prefix);
+	const actualComposeData = { ...composeData, services };
+
+	expect(actualComposeData.services?.api?.networks).toHaveProperty(
+		`frontend-${prefix}`,
+	);
+
+	const networkConfig = actualComposeData?.services?.api?.networks as {
+		[key: string]: { aliases?: string[] };
+	};
+	expect(networkConfig[`frontend-${prefix}`]).toBeDefined();
+	expect(networkConfig[`frontend-${prefix}`]?.aliases).toContain("api");
+
+	expect(actualComposeData.services?.api?.networks).not.toHaveProperty(
+		"frontend-ash",
+	);
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  redis:
+    image: redis:alpine
+    networks:
+      backend:
+
+networks:
+  backend:
+    driver: bridge
+`;
+
+test("Add prefix to networks in services (Object with simple networks)", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToServiceNetworks(composeData.services, prefix);
+	const actualComposeData = { ...composeData, services };
+
+	expect(actualComposeData.services?.redis?.networks).toHaveProperty(
+		`backend-${prefix}`,
+	);
+});
+
+const composeFileCombined = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+      - backend
+
+  api:
+    image: myapi:latest
+    networks:
+      frontend:
+        aliases:
+          - api
+
+  redis:
+    image: redis:alpine
+    networks:
+      backend:
+
+networks:
+  frontend:
+    driver: bridge
+
+  backend:
+    driver: bridge
+`;
+
+test("Add prefix to networks in services (combined case)", () => {
+	const composeData = load(composeFileCombined) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.services) {
+		return;
+	}
+	const services = addPrefixToServiceNetworks(composeData.services, prefix);
+	const actualComposeData = { ...composeData, services };
+
+	// Caso 1: ListOfStrings
+	expect(actualComposeData.services?.web?.networks).toContain(
+		`frontend-${prefix}`,
+	);
+	expect(actualComposeData.services?.web?.networks).toContain(
+		`backend-${prefix}`,
+	);
+
+	// Caso 2: Objeto con aliases
+	const apiNetworks = actualComposeData.services?.api?.networks as {
+		[key: string]: unknown;
+	};
+	expect(apiNetworks).toHaveProperty(`frontend-${prefix}`);
+	expect(apiNetworks[`frontend-${prefix}`]).toBeDefined();
+	expect(apiNetworks).not.toHaveProperty("frontend");
+
+	// Caso 3: Objeto con redes simples
+	const redisNetworks = actualComposeData.services?.redis?.networks;
+	expect(redisNetworks).toHaveProperty(`backend-${prefix}`);
+	expect(redisNetworks).not.toHaveProperty("backend");
+});

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

@@ -0,0 +1,256 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import {
+	addPrefixToAllNetworks,
+	addPrefixToServiceNetworks,
+} from "@/server/utils/docker/compose/network";
+import { addPrefixToNetworksRoot } from "@/server/utils/docker/compose/network";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFileCombined = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+      - backend
+
+  api:
+    image: myapi:latest
+    networks:
+      frontend:
+        aliases:
+          - api
+
+  redis:
+    image: redis:alpine
+    networks:
+      backend:
+
+networks:
+  frontend:
+    driver: bridge
+
+  backend:
+    driver: bridge
+`;
+
+test("Add prefix to networks in services and root (combined case)", () => {
+	const composeData = load(composeFileCombined) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	// Prefijo para redes definidas en el root
+	if (composeData.networks) {
+		composeData.networks = addPrefixToNetworksRoot(
+			composeData.networks,
+			prefix,
+		);
+	}
+
+	// Prefijo para redes definidas en los servicios
+	if (composeData.services) {
+		composeData.services = addPrefixToServiceNetworks(
+			composeData.services,
+			prefix,
+		);
+	}
+
+	const actualComposeData = { ...composeData };
+
+	// Verificar redes en root
+	expect(actualComposeData.networks).toHaveProperty(`frontend-${prefix}`);
+	expect(actualComposeData.networks).toHaveProperty(`backend-${prefix}`);
+	expect(actualComposeData.networks).not.toHaveProperty("frontend");
+	expect(actualComposeData.networks).not.toHaveProperty("backend");
+
+	// Caso 1: ListOfStrings
+	expect(actualComposeData.services?.web?.networks).toContain(
+		`frontend-${prefix}`,
+	);
+	expect(actualComposeData.services?.web?.networks).toContain(
+		`backend-${prefix}`,
+	);
+
+	// Caso 2: Objeto con aliases
+	const apiNetworks = actualComposeData.services?.api?.networks as {
+		[key: string]: { aliases?: string[] };
+	};
+	expect(apiNetworks).toHaveProperty(`frontend-${prefix}`);
+	expect(apiNetworks?.[`frontend-${prefix}`]?.aliases).toContain("api");
+	expect(apiNetworks).not.toHaveProperty("frontend");
+
+	// Caso 3: Objeto con redes simples
+	const redisNetworks = actualComposeData.services?.redis?.networks;
+	expect(redisNetworks).toHaveProperty(`backend-${prefix}`);
+	expect(redisNetworks).not.toHaveProperty("backend");
+});
+
+const expectedComposeFile = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend-testhash
+      - backend-testhash
+
+  api:
+    image: myapi:latest
+    networks:
+      frontend-testhash:
+        aliases:
+          - api
+
+  redis:
+    image: redis:alpine
+    networks:
+      backend-testhash:
+
+networks:
+  frontend-testhash:
+    driver: bridge
+
+  backend-testhash:
+    driver: bridge
+`);
+
+test("Add prefix to networks in compose file", () => {
+	const composeData = load(composeFileCombined) as ComposeSpecification;
+
+	const prefix = "testhash";
+	if (!composeData?.networks) {
+		return;
+	}
+	const updatedComposeData = addPrefixToAllNetworks(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile);
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend
+      - backend
+
+  db:
+    image: postgres:latest
+    networks:
+      backend:
+        aliases:
+          - db
+
+networks:
+  frontend:
+    external: true
+
+  backend:
+    driver: bridge
+`;
+
+const expectedComposeFile2 = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    networks:
+      - frontend-testhash
+      - backend-testhash
+
+  db:
+    image: postgres:latest
+    networks:
+      backend-testhash:
+        aliases:
+          - db
+
+networks:
+  frontend-testhash:
+    external: true
+
+  backend-testhash:
+    driver: bridge
+`);
+
+test("Add prefix to networks in compose file with external and internal networks", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+
+	const prefix = "testhash";
+	const updatedComposeData = addPrefixToAllNetworks(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile2);
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  app:
+    image: myapp:latest
+    networks:
+      frontend:
+        aliases:
+          - app
+      backend:
+
+  worker:
+    image: worker:latest
+    networks:
+      - backend
+
+networks:
+  frontend:
+    driver: bridge
+    attachable: true
+
+  backend:
+    driver: bridge
+    driver_opts:
+      com.docker.network.bridge.enable_icc: "true"
+`;
+
+const expectedComposeFile3 = load(`
+version: "3.8"
+
+services:
+  app:
+    image: myapp:latest
+    networks:
+      frontend-testhash:
+        aliases:
+          - app
+      backend-testhash:
+
+  worker:
+    image: worker:latest
+    networks:
+      - backend-testhash
+
+networks:
+  frontend-testhash:
+    driver: bridge
+    attachable: true
+
+  backend-testhash:
+    driver: bridge
+    driver_opts:
+      com.docker.network.bridge.enable_icc: "true"
+`);
+
+test("Add prefix to networks in compose file with multiple services and complex network configurations", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+
+	const prefix = "testhash";
+	const updatedComposeData = addPrefixToAllNetworks(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile3);
+});

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

@@ -0,0 +1,103 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToSecretsRoot } from "@/server/utils/docker/compose/secrets";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { dump, load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFileSecretsRoot = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+secrets:
+  db_password:
+    file: ./db_password.txt
+`;
+
+test("Add prefix to secrets in root property", () => {
+	const composeData = load(composeFileSecretsRoot) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData?.secrets) {
+		return;
+	}
+	const secrets = addPrefixToSecretsRoot(composeData.secrets, prefix);
+	expect(secrets).toBeDefined();
+	if (secrets) {
+		for (const secretKey of Object.keys(secrets)) {
+			expect(secretKey).toContain(`-${prefix}`);
+			expect(secrets[secretKey]).toBeDefined();
+		}
+	}
+});
+
+const composeFileSecretsRoot1 = `
+version: "3.8"
+
+services:
+  api:
+    image: myapi:latest
+
+secrets:
+  api_key:
+    file: ./api_key.txt
+`;
+
+test("Add prefix to secrets in root property (Test 1)", () => {
+	const composeData = load(composeFileSecretsRoot1) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData?.secrets) {
+		return;
+	}
+	const secrets = addPrefixToSecretsRoot(composeData.secrets, prefix);
+	expect(secrets).toBeDefined();
+
+	if (secrets) {
+		for (const secretKey of Object.keys(secrets)) {
+			expect(secretKey).toContain(`-${prefix}`);
+			expect(secrets[secretKey]).toBeDefined();
+		}
+	}
+});
+
+const composeFileSecretsRoot2 = `
+version: "3.8"
+
+services:
+  frontend:
+    image: nginx:latest
+
+secrets:
+  frontend_secret:
+    file: ./frontend_secret.txt
+  db_password:
+    external: true
+`;
+
+test("Add prefix to secrets in root property (Test 2)", () => {
+	const composeData = load(composeFileSecretsRoot2) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData?.secrets) {
+		return;
+	}
+	const secrets = addPrefixToSecretsRoot(composeData.secrets, prefix);
+	expect(secrets).toBeDefined();
+
+	if (secrets) {
+		for (const secretKey of Object.keys(secrets)) {
+			expect(secretKey).toContain(`-${prefix}`);
+			expect(secrets[secretKey]).toBeDefined();
+		}
+	}
+});

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

@@ -0,0 +1,113 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToSecretsInServices } from "@/server/utils/docker/compose/secrets";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFileSecretsServices = `
+version: "3.8"
+
+services:
+  db:
+    image: postgres:latest
+    secrets:
+      - db_password
+
+secrets:
+  db_password:
+    file: ./db_password.txt
+`;
+
+test("Add prefix to secrets in services", () => {
+	const composeData = load(composeFileSecretsServices) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+
+	const updatedComposeData = addPrefixToSecretsInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData.services?.db?.secrets).toContain(
+		`db_password-${prefix}`,
+	);
+});
+
+const composeFileSecretsServices1 = `
+version: "3.8"
+
+services:
+  app:
+    image: node:14
+    secrets:
+      - app_secret
+
+secrets:
+  app_secret:
+    file: ./app_secret.txt
+`;
+
+test("Add prefix to secrets in services (Test 1)", () => {
+	const composeData = load(composeFileSecretsServices1) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+
+	const updatedComposeData = addPrefixToSecretsInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData.services?.app?.secrets).toContain(
+		`app_secret-${prefix}`,
+	);
+});
+
+const composeFileSecretsServices2 = `
+version: "3.8"
+
+services:
+  backend:
+    image: backend:latest
+    secrets:
+      - backend_secret
+  frontend:
+    image: frontend:latest
+    secrets:
+      - frontend_secret
+
+secrets:
+  backend_secret:
+    file: ./backend_secret.txt
+  frontend_secret:
+    file: ./frontend_secret.txt
+`;
+
+test("Add prefix to secrets in services (Test 2)", () => {
+	const composeData = load(composeFileSecretsServices2) as ComposeSpecification;
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+
+	const updatedComposeData = addPrefixToSecretsInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData.services?.backend?.secrets).toContain(
+		`backend_secret-${prefix}`,
+	);
+	expect(actualComposeData.services?.frontend?.secrets).toContain(
+		`frontend_secret-${prefix}`,
+	);
+});

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

@@ -0,0 +1,159 @@
+import { addPrefixToAllSecrets } from "@/server/utils/docker/compose/secrets";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFileCombinedSecrets = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    secrets:
+      - web_secret
+
+  app:
+    image: node:14
+    secrets:
+      - app_secret
+
+secrets:
+  web_secret:
+    file: ./web_secret.txt
+
+  app_secret:
+    file: ./app_secret.txt
+`;
+
+const expectedComposeFileCombinedSecrets = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    secrets:
+      - web_secret-testhash
+
+  app:
+    image: node:14
+    secrets:
+      - app_secret-testhash
+
+secrets:
+  web_secret-testhash:
+    file: ./web_secret.txt
+
+  app_secret-testhash:
+    file: ./app_secret.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all secrets", () => {
+	const composeData = load(composeFileCombinedSecrets) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllSecrets(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFileCombinedSecrets);
+});
+
+const composeFileCombinedSecrets3 = `
+version: "3.8"
+
+services:
+  api:
+    image: myapi:latest
+    secrets:
+      - api_key
+
+  cache:
+    image: redis:latest
+    secrets:
+      - cache_secret
+
+secrets:
+  api_key:
+    file: ./api_key.txt
+  cache_secret:
+    file: ./cache_secret.txt
+`;
+
+const expectedComposeFileCombinedSecrets3 = load(`
+version: "3.8"
+
+services:
+  api:
+    image: myapi:latest
+    secrets:
+      - api_key-testhash
+
+  cache:
+    image: redis:latest
+    secrets:
+      - cache_secret-testhash
+
+secrets:
+  api_key-testhash:
+    file: ./api_key.txt
+  cache_secret-testhash:
+    file: ./cache_secret.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all secrets (3rd Case)", () => {
+	const composeData = load(composeFileCombinedSecrets3) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllSecrets(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFileCombinedSecrets3);
+});
+
+const composeFileCombinedSecrets4 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    secrets:
+      - web_secret
+
+  db:
+    image: postgres:latest
+    secrets:
+      - db_password
+
+secrets:
+  web_secret:
+    file: ./web_secret.txt
+  db_password:
+    file: ./db_password.txt
+`;
+
+const expectedComposeFileCombinedSecrets4 = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    secrets:
+      - web_secret-testhash
+
+  db:
+    image: postgres:latest
+    secrets:
+      - db_password-testhash
+
+secrets:
+  web_secret-testhash:
+    file: ./web_secret.txt
+  db_password-testhash:
+    file: ./db_password.txt
+`) as ComposeSpecification;
+
+test("Add prefix to all secrets (4th Case)", () => {
+	const composeData = load(composeFileCombinedSecrets4) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllSecrets(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFileCombinedSecrets4);
+});

apps/dokploy/__test__/compose/service/service-container-name.test.ts

@@ -0,0 +1,59 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    container_name: web_container
+
+  api:
+    image: myapi:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+test("Add prefix to service names with container_name in compose file", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que el nombre del contenedor ha cambiado correctamente
+	expect(actualComposeData.services?.[`web-${prefix}`]?.container_name).toBe(
+		`web_container-${prefix}`,
+	);
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+});

apps/dokploy/__test__/compose/service/service-depends-on.test.ts

@@ -0,0 +1,150 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile4 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    depends_on:
+      - db
+      - api
+
+  api:
+    image: myapi:latest
+
+  db:
+    image: postgres:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with depends_on (array) in compose file", () => {
+	const composeData = load(composeFile4) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que los nombres en depends_on tienen el prefijo
+	expect(actualComposeData.services?.[`web-${prefix}`]?.depends_on).toContain(
+		`db-${prefix}`,
+	);
+	expect(actualComposeData.services?.[`web-${prefix}`]?.depends_on).toContain(
+		`api-${prefix}`,
+	);
+
+	// Verificar que los servicios `db` y `api` también tienen el prefijo
+	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("db");
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
+		"postgres:latest",
+	);
+	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("api");
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+});
+
+const composeFile5 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    depends_on:
+      db:
+        condition: service_healthy
+      api:
+        condition: service_started
+
+  api:
+    image: myapi:latest
+
+  db:
+    image: postgres:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with depends_on (object) in compose file", () => {
+	const composeData = load(composeFile5) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que los nombres en depends_on tienen el prefijo
+	const webDependsOn = actualComposeData.services?.[`web-${prefix}`]
+		?.depends_on as Record<string, any>;
+	expect(webDependsOn).toHaveProperty(`db-${prefix}`);
+	expect(webDependsOn).toHaveProperty(`api-${prefix}`);
+	expect(webDependsOn[`db-${prefix}`].condition).toBe("service_healthy");
+	expect(webDependsOn[`api-${prefix}`].condition).toBe("service_started");
+
+	// Verificar que los servicios `db` y `api` también tienen el prefijo
+	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("db");
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
+		"postgres:latest",
+	);
+	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("api");
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+});

apps/dokploy/__test__/compose/service/service-extends.test.ts

@@ -0,0 +1,131 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile6 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    extends: base_service
+
+  api:
+    image: myapi:latest
+
+  base_service:
+    image: base:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with extends (string) in compose file", () => {
+	const composeData = load(composeFile6) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que el nombre en extends tiene el prefijo
+	expect(actualComposeData.services?.[`web-${prefix}`]?.extends).toBe(
+		`base_service-${prefix}`,
+	);
+
+	// Verificar que el servicio `base_service` también tiene el prefijo
+	expect(actualComposeData.services).toHaveProperty(`base_service-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("base_service");
+	expect(actualComposeData.services?.[`base_service-${prefix}`]?.image).toBe(
+		"base:latest",
+	);
+});
+
+const composeFile7 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    extends:
+      service: base_service
+      file: docker-compose.base.yml
+
+  api:
+    image: myapi:latest
+
+  base_service:
+    image: base:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with extends (object) in compose file", () => {
+	const composeData = load(composeFile7) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que el nombre en extends.service tiene el prefijo
+	const webExtends = actualComposeData.services?.[`web-${prefix}`]?.extends;
+	if (typeof webExtends !== "string") {
+		expect(webExtends?.service).toBe(`base_service-${prefix}`);
+	}
+
+	// Verificar que el servicio `base_service` también tiene el prefijo
+	expect(actualComposeData.services).toHaveProperty(`base_service-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("base_service");
+	expect(actualComposeData.services?.[`base_service-${prefix}`]?.image).toBe(
+		"base:latest",
+	);
+});

apps/dokploy/__test__/compose/service/service-links.test.ts

@@ -0,0 +1,76 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    links:
+      - db
+
+  api:
+    image: myapi:latest
+
+  db:
+    image: postgres:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with links in compose file", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que los nombres en links tienen el prefijo
+	expect(actualComposeData.services?.[`web-${prefix}`]?.links).toContain(
+		`db-${prefix}`,
+	);
+
+	// Verificar que los servicios `db` y `api` también tienen el prefijo
+	expect(actualComposeData.services).toHaveProperty(`db-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("db");
+	expect(actualComposeData.services?.[`db-${prefix}`]?.image).toBe(
+		"postgres:latest",
+	);
+	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("api");
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+});

apps/dokploy/__test__/compose/service/service-names.test.ts

@@ -0,0 +1,49 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+  api:
+    image: myapi:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names in compose file", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que los nombres de los servicios han cambiado correctamente
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).toHaveProperty(`api-${prefix}`);
+	// Verificar que las claves originales no existen
+	expect(actualComposeData.services).not.toHaveProperty("web");
+	expect(actualComposeData.services).not.toHaveProperty("api");
+});

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

@@ -0,0 +1,375 @@
+import {
+	addPrefixToAllServiceNames,
+	addPrefixToServiceNames,
+} from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFileCombinedAllCases = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    container_name: web_container
+    links:
+      - api
+    depends_on:
+      - api
+    extends: base_service
+
+  api:
+    image: myapi:latest
+    depends_on:
+      db:
+        condition: service_healthy
+    volumes_from:
+      - db
+
+  db:
+    image: postgres:latest
+
+  base_service:
+    image: base:latest
+
+networks:
+  default:
+    driver: bridge
+`;
+
+const expectedComposeFile = load(`
+version: "3.8"
+
+services:
+  web-testhash:
+    image: nginx:latest
+    container_name: web_container-testhash
+    links:
+      - api-testhash
+    depends_on:
+      - api-testhash
+    extends: base_service-testhash
+
+  api-testhash:
+    image: myapi:latest
+    depends_on:
+      db-testhash:
+        condition: service_healthy
+    volumes_from:
+      - db-testhash
+
+  db-testhash:
+    image: postgres:latest
+
+  base_service-testhash:
+    image: base:latest
+
+networks:
+  default:
+    driver: bridge
+`);
+
+test("Add prefix to all service names in compose file", () => {
+	const composeData = load(composeFileCombinedAllCases) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFile);
+});
+
+const composeFile1 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    container_name: web_container
+    depends_on:
+      - app
+    networks:
+      - frontend
+    volumes_from:
+      - data
+    links:
+      - db
+    extends:
+      service: base_service
+
+  app:
+    image: node:14
+    networks:
+      - backend
+      - frontend
+
+  db:
+    image: postgres:13
+    networks:
+      - backend
+
+  data:
+    image: busybox
+    volumes:
+      - /data
+
+  base_service:
+    image: base:latest
+
+networks:
+  frontend:
+    driver: bridge
+  backend:
+    driver: bridge
+`;
+
+const expectedComposeFile1 = load(`
+version: "3.8"
+
+services:
+  web-testhash:
+    image: nginx:latest
+    container_name: web_container-testhash
+    depends_on:
+      - app-testhash
+    networks:
+      - frontend
+    volumes_from:
+      - data-testhash
+    links:
+      - db-testhash
+    extends:
+      service: base_service-testhash
+
+  app-testhash:
+    image: node:14
+    networks:
+      - backend
+      - frontend
+
+  db-testhash:
+    image: postgres:13
+    networks:
+      - backend
+
+  data-testhash:
+    image: busybox
+    volumes:
+      - /data
+
+  base_service-testhash:
+    image: base:latest
+
+networks:
+  frontend:
+    driver: bridge
+  backend:
+    driver: bridge
+`) as ComposeSpecification;
+
+test("Add prefix to all service names in compose file 1", () => {
+	const composeData = load(composeFile1) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllServiceNames(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile1);
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  frontend:
+    image: nginx:latest
+    depends_on:
+      - backend
+    networks:
+      - public
+    volumes_from:
+      - logs
+    links:
+      - cache
+    extends:
+      service: shared_service
+
+  backend:
+    image: node:14
+    networks:
+      - private
+      - public
+
+  cache:
+    image: redis:latest
+    networks:
+      - private
+
+  logs:
+    image: busybox
+    volumes:
+      - /logs
+
+  shared_service:
+    image: shared:latest
+
+networks:
+  public:
+    driver: bridge
+  private:
+    driver: bridge
+`;
+
+const expectedComposeFile2 = load(`
+version: "3.8"
+
+services:
+  frontend-testhash:
+    image: nginx:latest
+    depends_on:
+      - backend-testhash
+    networks:
+      - public
+    volumes_from:
+      - logs-testhash
+    links:
+      - cache-testhash
+    extends:
+      service: shared_service-testhash
+
+  backend-testhash:
+    image: node:14
+    networks:
+      - private
+      - public
+
+  cache-testhash:
+    image: redis:latest
+    networks:
+      - private
+
+  logs-testhash:
+    image: busybox
+    volumes:
+      - /logs
+
+  shared_service-testhash:
+    image: shared:latest
+
+networks:
+  public:
+    driver: bridge
+  private:
+    driver: bridge
+`) as ComposeSpecification;
+
+test("Add prefix to all service names in compose file 2", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllServiceNames(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile2);
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  service_a:
+    image: service_a:latest
+    depends_on:
+      - service_b
+    networks:
+      - net_a
+    volumes_from:
+      - data_volume
+    links:
+      - service_c
+    extends:
+      service: common_service
+
+  service_b:
+    image: service_b:latest
+    networks:
+      - net_b
+      - net_a
+
+  service_c:
+    image: service_c:latest
+    networks:
+      - net_b
+
+  data_volume:
+    image: busybox
+    volumes:
+      - /data
+
+  common_service:
+    image: common:latest
+
+networks:
+  net_a:
+    driver: bridge
+  net_b:
+    driver: bridge
+`;
+
+const expectedComposeFile3 = load(`
+version: "3.8"
+
+services:
+  service_a-testhash:
+    image: service_a:latest
+    depends_on:
+      - service_b-testhash
+    networks:
+      - net_a
+    volumes_from:
+      - data_volume-testhash
+    links:
+      - service_c-testhash
+    extends:
+      service: common_service-testhash
+
+  service_b-testhash:
+    image: service_b:latest
+    networks:
+      - net_b
+      - net_a
+
+  service_c-testhash:
+    image: service_c:latest
+    networks:
+      - net_b
+
+  data_volume-testhash:
+    image: busybox
+    volumes:
+      - /data
+
+  common_service-testhash:
+    image: common:latest
+
+networks:
+  net_a:
+    driver: bridge
+  net_b:
+    driver: bridge
+`) as ComposeSpecification;
+
+test("Add prefix to all service names in compose file 3", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllServiceNames(composeData, prefix);
+
+	expect(updatedComposeData).toEqual(expectedComposeFile3);
+});

apps/dokploy/__test__/compose/service/sevice-volumes-from.test.ts

@@ -0,0 +1,78 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToServiceNames } from "@/server/utils/docker/compose/service";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes_from:
+      - shared
+
+  api:
+    image: myapi:latest
+    volumes_from:
+      - shared
+
+  shared:
+    image: busybox
+    volumes:
+      - /data
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to service names with volumes_from in compose file", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+	const updatedComposeData = addPrefixToServiceNames(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	// Verificar que la nueva clave del servicio tiene el prefijo y la vieja clave no existe
+	expect(actualComposeData.services).toHaveProperty(`web-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("web");
+
+	// Verificar que la configuración de la imagen sigue igual
+	expect(actualComposeData.services?.[`web-${prefix}`]?.image).toBe(
+		"nginx:latest",
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.image).toBe(
+		"myapi:latest",
+	);
+
+	// Verificar que los nombres en volumes_from tienen el prefijo
+	expect(actualComposeData.services?.[`web-${prefix}`]?.volumes_from).toContain(
+		`shared-${prefix}`,
+	);
+	expect(actualComposeData.services?.[`api-${prefix}`]?.volumes_from).toContain(
+		`shared-${prefix}`,
+	);
+
+	// Verificar que el servicio shared también tiene el prefijo
+	expect(actualComposeData.services).toHaveProperty(`shared-${prefix}`);
+	expect(actualComposeData.services).not.toHaveProperty("shared");
+	expect(actualComposeData.services?.[`shared-${prefix}`]?.image).toBe(
+		"busybox",
+	);
+});

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

@@ -0,0 +1,195 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToVolumesRoot } from "@/server/utils/docker/compose/volume";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFile = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes:
+      - web_data:/var/lib/nginx/data
+
+volumes:
+  web_data:
+    driver: local
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+test("Add prefix to volumes in root property", () => {
+	const composeData = load(composeFile) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.volumes) {
+		return;
+	}
+	const volumes = addPrefixToVolumesRoot(composeData.volumes, prefix);
+	expect(volumes).toBeDefined();
+	for (const volumeKey of Object.keys(volumes)) {
+		expect(volumeKey).toContain(`-${prefix}`);
+		expect(volumes[volumeKey]).toBeDefined();
+	}
+});
+
+const composeFile2 = `
+version: "3.8"
+
+services:
+  app:
+    image: node:latest
+    volumes:
+      - app_data:/var/lib/app/data
+
+volumes:
+  app_data:
+    driver: local
+    driver_opts:
+      type: nfs
+      o: addr=10.0.0.1,rw
+      device: ":/exported/path"
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to volumes in root property (Case 2)", () => {
+	const composeData = load(composeFile2) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.volumes) {
+		return;
+	}
+	const volumes = addPrefixToVolumesRoot(composeData.volumes, prefix);
+	expect(volumes).toBeDefined();
+	for (const volumeKey of Object.keys(volumes)) {
+		expect(volumeKey).toContain(`-${prefix}`);
+		expect(volumes[volumeKey]).toBeDefined();
+	}
+});
+
+const composeFile3 = `
+version: "3.8"
+
+services:
+  db:
+    image: postgres:latest
+    volumes:
+      - db_data:/var/lib/postgresql/data
+
+volumes:
+  db_data:
+    external: true
+
+networks:
+  default:
+    driver: bridge
+`;
+
+test("Add prefix to volumes in root property (Case 3)", () => {
+	const composeData = load(composeFile3) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData?.volumes) {
+		return;
+	}
+	const volumes = addPrefixToVolumesRoot(composeData.volumes, prefix);
+
+	expect(volumes).toBeDefined();
+	for (const volumeKey of Object.keys(volumes)) {
+		expect(volumeKey).toContain(`-${prefix}`);
+		expect(volumes[volumeKey]).toBeDefined();
+	}
+});
+
+const composeFile4 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+  app:
+    image: node:latest
+
+  db:
+    image: postgres:latest
+
+volumes:
+  web_data:
+    driver: local
+
+  app_data:
+    driver: local
+    driver_opts:
+      type: nfs
+      o: addr=10.0.0.1,rw
+      device: ":/exported/path"
+
+  db_data:
+    external: true
+
+
+`;
+
+// Expected compose file con el prefijo `testhash`
+const expectedComposeFile4 = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+
+  app:
+    image: node:latest
+
+  db:
+    image: postgres:latest
+
+volumes:
+  web_data-testhash:
+    driver: local
+
+  app_data-testhash:
+    driver: local
+    driver_opts:
+      type: nfs
+      o: addr=10.0.0.1,rw
+      device: ":/exported/path"
+
+  db_data-testhash:
+    external: true
+
+
+`) as ComposeSpecification;
+
+test("Add prefix to volumes in root property", () => {
+	const composeData = load(composeFile4) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	if (!composeData?.volumes) {
+		return;
+	}
+	const volumes = addPrefixToVolumesRoot(composeData.volumes, prefix);
+	const updatedComposeData = { ...composeData, volumes };
+
+	// Verificar que el resultado coincide con el archivo esperado
+	expect(updatedComposeData).toEqual(expectedComposeFile4);
+});

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

@@ -0,0 +1,81 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import { addPrefixToVolumesInServices } from "@/server/utils/docker/compose/volume";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+test("Generate random hash with 8 characters", () => {
+	const hash = generateRandomHash();
+
+	expect(hash).toBeDefined();
+	expect(hash.length).toBe(8);
+});
+
+const composeFile1 = `
+version: "3.8"
+
+services:
+  db:
+    image: postgres:latest
+    volumes:
+      - db_data:/var/lib/postgresql/data
+`;
+
+test("Add prefix to volumes declared directly in services", () => {
+	const composeData = load(composeFile1) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+
+	const updatedComposeData = addPrefixToVolumesInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+	expect(actualComposeData.services?.db?.volumes).toContain(
+		`db_data-${prefix}:/var/lib/postgresql/data`,
+	);
+});
+
+const composeFileTypeVolume = `
+version: "3.8"
+
+services:
+  db:
+    image: postgres:latest
+    volumes:
+      - type: volume
+        source: db-test
+        target: /var/lib/postgresql/data
+
+volumes:
+  db-test:
+    driver: local
+`;
+
+test("Add prefix to volumes declared directly in services (Case 2)", () => {
+	const composeData = load(composeFileTypeVolume) as ComposeSpecification;
+
+	const prefix = generateRandomHash();
+
+	if (!composeData.services) {
+		return;
+	}
+
+	const updatedComposeData = addPrefixToVolumesInServices(
+		composeData.services,
+		prefix,
+	);
+	const actualComposeData = { ...composeData, services: updatedComposeData };
+
+	expect(actualComposeData.services?.db?.volumes).toEqual([
+		{
+			type: "volume",
+			source: `db-test-${prefix}`,
+			target: "/var/lib/postgresql/data",
+		},
+	]);
+});

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

@@ -0,0 +1,288 @@
+import { generateRandomHash } from "@/server/utils/docker/compose";
+import {
+	addPrefixToAllVolumes,
+	addPrefixToVolumesInServices,
+} from "@/server/utils/docker/compose/volume";
+import type { ComposeSpecification } from "@/server/utils/docker/types";
+import { load } from "js-yaml";
+import { expect, test } from "vitest";
+
+const composeFileTypeVolume = `
+version: "3.8"
+
+services:
+  db1:
+    image: postgres:latest
+    volumes:
+      - "db-test:/var/lib/postgresql/data"
+  db2:
+    image: postgres:latest
+    volumes:
+      - type: volume
+        source: db-test
+        target: /var/lib/postgresql/data
+
+volumes:
+  db-test:
+    driver: local
+`;
+
+const expectedComposeFileTypeVolume = load(`
+version: "3.8"
+
+services:
+  db1:
+    image: postgres:latest
+    volumes:
+      - "db-test-testhash:/var/lib/postgresql/data"
+  db2:
+    image: postgres:latest
+    volumes:
+      - type: volume
+        source: db-test-testhash
+        target: /var/lib/postgresql/data
+
+volumes:
+  db-test-testhash:
+    driver: local
+`) as ComposeSpecification;
+
+test("Add prefix to volumes with type: volume in services", () => {
+	const composeData = load(composeFileTypeVolume) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllVolumes(composeData, prefix);
+	const actualComposeData = { ...composeData, ...updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFileTypeVolume);
+});
+
+const composeFileTypeVolume1 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes:
+      - "web-data:/var/www/html"
+      - type: volume
+        source: web-logs
+        target: /var/log/nginx
+
+volumes:
+  web-data:
+    driver: local
+  web-logs:
+    driver: local
+`;
+
+const expectedComposeFileTypeVolume1 = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes:
+      - "web-data-testhash:/var/www/html"
+      - type: volume
+        source: web-logs-testhash
+        target: /var/log/nginx
+
+volumes:
+  web-data-testhash:
+    driver: local
+  web-logs-testhash:
+    driver: local
+`) as ComposeSpecification;
+
+test("Add prefix to mixed volumes in services", () => {
+	const composeData = load(composeFileTypeVolume1) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllVolumes(composeData, prefix);
+	const actualComposeData = { ...composeData, ...updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFileTypeVolume1);
+});
+
+const composeFileTypeVolume2 = `
+version: "3.8"
+
+services:
+  app:
+    image: node:latest
+    volumes:
+      - "app-data:/usr/src/app"
+      - type: volume
+        source: app-logs
+        target: /var/log/app
+        volume:
+          nocopy: true
+
+volumes:
+  app-data:
+    driver: local
+  app-logs:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/app/logs
+`;
+
+const expectedComposeFileTypeVolume2 = load(`
+version: "3.8"
+
+services:
+  app:
+    image: node:latest
+    volumes:
+      - "app-data-testhash:/usr/src/app"
+      - type: volume
+        source: app-logs-testhash
+        target: /var/log/app
+        volume:
+          nocopy: true
+
+volumes:
+  app-data-testhash:
+    driver: local
+  app-logs-testhash:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/app/logs
+`) as ComposeSpecification;
+
+test("Add prefix to complex volume configurations in services", () => {
+	const composeData = load(composeFileTypeVolume2) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllVolumes(composeData, prefix);
+	const actualComposeData = { ...composeData, ...updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFileTypeVolume2);
+});
+
+const composeFileTypeVolume3 = `
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes:
+      - "web-data:/usr/share/nginx/html"
+      - type: volume
+        source: web-logs
+        target: /var/log/nginx
+        volume:
+          nocopy: true
+
+  api:
+    image: node:latest
+    volumes:
+      - "api-data:/usr/src/app"
+      - type: volume
+        source: api-logs
+        target: /var/log/app
+        volume:
+          nocopy: true
+      - type: volume
+        source: shared-logs
+        target: /shared/logs
+
+volumes:
+  web-data:
+    driver: local
+  web-logs:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/web/logs
+
+  api-data:
+    driver: local
+  api-logs:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/api/logs
+
+  shared-logs:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/shared/logs
+`;
+
+const expectedComposeFileTypeVolume3 = load(`
+version: "3.8"
+
+services:
+  web:
+    image: nginx:latest
+    volumes:
+      - "web-data-testhash:/usr/share/nginx/html"
+      - type: volume
+        source: web-logs-testhash
+        target: /var/log/nginx
+        volume:
+          nocopy: true
+
+  api:
+    image: node:latest
+    volumes:
+      - "api-data-testhash:/usr/src/app"
+      - type: volume
+        source: api-logs-testhash
+        target: /var/log/app
+        volume:
+          nocopy: true
+      - type: volume
+        source: shared-logs-testhash
+        target: /shared/logs
+
+volumes:
+  web-data-testhash:
+    driver: local
+  web-logs-testhash:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/web/logs
+
+  api-data-testhash:
+    driver: local
+  api-logs-testhash:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/api/logs
+
+  shared-logs-testhash:
+    driver: local
+    driver_opts:
+      o: bind
+      type: none
+      device: /path/to/shared/logs
+`) as ComposeSpecification;
+
+test("Add prefix to complex nested volumes configuration in services", () => {
+	const composeData = load(composeFileTypeVolume3) as ComposeSpecification;
+
+	const prefix = "testhash";
+
+	const updatedComposeData = addPrefixToAllVolumes(composeData, prefix);
+	const actualComposeData = { ...composeData, ...updatedComposeData };
+
+	expect(actualComposeData).toEqual(expectedComposeFileTypeVolume3);
+});

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

@@ -0,0 +1,98 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { APPLICATIONS_PATH } from "@/server/constants";
+import { unzipDrop } from "@/server/utils/builders/drop";
+import AdmZip from "adm-zip";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+
+if (typeof window === "undefined") {
+	const undici = require("undici");
+	globalThis.File = undici.File as any;
+	globalThis.FileList = undici.FileList as any;
+}
+
+vi.mock("@/server/constants", () => ({
+	APPLICATIONS_PATH: "./__test__/drop/zips/output",
+}));
+
+describe("unzipDrop using real zip files", () => {
+	beforeAll(async () => {
+		await fs.rm(APPLICATIONS_PATH, { recursive: true, force: true });
+	});
+
+	afterAll(async () => {
+		await fs.rm(APPLICATIONS_PATH, { recursive: true, force: true });
+	});
+
+	it("should correctly extract a zip with a single root folder", async () => {
+		const appName = "single-file";
+		const outputPath = path.join(APPLICATIONS_PATH, appName, "code");
+		const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
+
+		const zipBuffer = zip.toBuffer();
+		const file = new File([zipBuffer], "single.zip");
+		await unzipDrop(file, appName);
+
+		const files = await fs.readdir(outputPath, { withFileTypes: 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 () => {
+		const appName = "folderwithfile";
+		const outputPath = path.join(APPLICATIONS_PATH, 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, appName);
+
+		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 () => {
+		const appName = "two-folders";
+		const outputPath = path.join(APPLICATIONS_PATH, 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, appName);
+
+		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 () => {
+		const appName = "nested";
+		const outputPath = path.join(APPLICATIONS_PATH, 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, appName);
+
+		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 () => {
+		const appName = "folder-with-sibling-file";
+		const outputPath = path.join(APPLICATIONS_PATH, 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, appName);
+
+		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__/drop/zips/folder1/folder1.txt

@@ -0,0 +1 @@
+Gogogogogogo

apps/dokploy/__test__/drop/zips/folder2/folder2.txt

@@ -0,0 +1 @@
+gogogogogog

apps/dokploy/__test__/drop/zips/folder3/file3.txt

@@ -0,0 +1 @@
+gogogogogogogogogo

apps/dokploy/__test__/drop/zips/test.txt

@@ -0,0 +1 @@
+dsafasdfasdf

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

@@ -0,0 +1,198 @@
+import type { Domain } from "@/server/api/services/domain";
+import type { Redirect } from "@/server/api/services/redirect";
+import type { ApplicationNested } from "@/server/utils/builders";
+import { createRouterConfig } from "@/server/utils/traefik/domain";
+import { expect, test } from "vitest";
+
+const baseApp: ApplicationNested = {
+	applicationId: "",
+	applicationStatus: "done",
+	appName: "",
+	autoDeploy: true,
+	branch: null,
+	buildArgs: null,
+	buildPath: "/",
+	buildType: "nixpacks",
+	command: null,
+	cpuLimit: null,
+	cpuReservation: null,
+	createdAt: "",
+	customGitBranch: "",
+	customGitBuildPath: "",
+	customGitSSHKeyId: null,
+	customGitUrl: "",
+	description: "",
+	dockerfile: null,
+	dockerImage: null,
+	dropBuildPath: null,
+	enabled: null,
+	env: null,
+	healthCheckSwarm: null,
+	labelsSwarm: null,
+	memoryLimit: null,
+	memoryReservation: null,
+	modeSwarm: null,
+	mounts: [],
+	name: "",
+	networkSwarm: null,
+	owner: null,
+	password: null,
+	placementSwarm: null,
+	ports: [],
+	projectId: "",
+	redirects: [],
+	refreshToken: "",
+	registry: null,
+	registryId: null,
+	replicas: 1,
+	repository: null,
+	restartPolicySwarm: null,
+	rollbackConfigSwarm: null,
+	security: [],
+	sourceType: "git",
+	subtitle: null,
+	title: null,
+	updateConfigSwarm: null,
+	username: null,
+};
+
+const baseDomain: Domain = {
+	applicationId: "",
+	certificateType: "none",
+	createdAt: "",
+	domainId: "",
+	host: "",
+	https: false,
+	path: null,
+	port: null,
+	uniqueConfigKey: 1,
+};
+
+const baseRedirect: Redirect = {
+	redirectId: "",
+	regex: "",
+	replacement: "",
+	permanent: false,
+	uniqueConfigKey: 1,
+	createdAt: "",
+	applicationId: "",
+};
+
+/** Middlewares */
+
+test("Web entrypoint on http domain", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: false },
+		"web",
+	);
+
+	expect(router.middlewares).not.toContain("redirect-to-https");
+	expect(router.rule).not.toContain("PathPrefix");
+});
+
+test("Web entrypoint on http domain with custom path", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, path: "/foo", https: false },
+		"web",
+	);
+
+	expect(router.rule).toContain("PathPrefix(`/foo`)");
+});
+
+test("Web entrypoint on http domain with redirect", async () => {
+	const router = await createRouterConfig(
+		{
+			...baseApp,
+			appName: "test",
+			redirects: [{ ...baseRedirect, uniqueConfigKey: 1 }],
+		},
+		{ ...baseDomain, https: false },
+		"web",
+	);
+
+	expect(router.middlewares).not.toContain("redirect-to-https");
+	expect(router.middlewares).toContain("redirect-test-1");
+});
+
+test("Web entrypoint on http domain with multiple redirect", async () => {
+	const router = await createRouterConfig(
+		{
+			...baseApp,
+			appName: "test",
+			redirects: [
+				{ ...baseRedirect, uniqueConfigKey: 1 },
+				{ ...baseRedirect, uniqueConfigKey: 2 },
+			],
+		},
+		{ ...baseDomain, https: false },
+		"web",
+	);
+
+	expect(router.middlewares).not.toContain("redirect-to-https");
+	expect(router.middlewares).toContain("redirect-test-1");
+	expect(router.middlewares).toContain("redirect-test-2");
+});
+
+test("Web entrypoint on https domain", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: true },
+		"web",
+	);
+
+	expect(router.middlewares).toContain("redirect-to-https");
+});
+
+test("Web entrypoint on https domain with redirect", async () => {
+	const router = await createRouterConfig(
+		{
+			...baseApp,
+			appName: "test",
+			redirects: [{ ...baseRedirect, uniqueConfigKey: 1 }],
+		},
+		{ ...baseDomain, https: true },
+		"web",
+	);
+
+	expect(router.middlewares).toContain("redirect-to-https");
+	expect(router.middlewares).not.toContain("redirect-test-1");
+});
+
+test("Websecure entrypoint on https domain", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, https: true },
+		"websecure",
+	);
+
+	expect(router.middlewares).not.toContain("redirect-to-https");
+});
+
+test("Websecure entrypoint on https domain with redirect", async () => {
+	const router = await createRouterConfig(
+		{
+			...baseApp,
+			appName: "test",
+			redirects: [{ ...baseRedirect, uniqueConfigKey: 1 }],
+		},
+		{ ...baseDomain, https: true },
+		"websecure",
+	);
+
+	expect(router.middlewares).not.toContain("redirect-to-https");
+	expect(router.middlewares).toContain("redirect-test-1");
+});
+
+/** Certificates */
+
+test("CertificateType on websecure entrypoint", async () => {
+	const router = await createRouterConfig(
+		baseApp,
+		{ ...baseDomain, certificateType: "letsencrypt" },
+		"websecure",
+	);
+
+	expect(router.tls?.certResolver).toBe("letsencrypt");
+});

apps/dokploy/__test__/vitest.config.ts

@@ -0,0 +1,16 @@
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+	plugins: [
+		tsconfigPaths({
+			root: "./",
+			projects: ["tsconfig.json"],
+		}),
+	],
+	test: {
+		include: ["__test__/**/*.test.ts"], // Incluir solo los archivos de test en el directorio __test__
+		exclude: ["**/node_modules/**", "**/dist/**", "**/.docker/**"],
+		pool: "forks",
+	},
+});

apps/dokploy/components.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "styles/globals.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils"
+	}
+}

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

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

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

@@ -0,0 +1,764 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+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 {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { HelpCircle, Settings } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const HealthCheckSwarmSchema = z
+	.object({
+		Test: z.array(z.string()).optional(),
+		Interval: z.number().optional(),
+		Timeout: z.number().optional(),
+		StartPeriod: z.number().optional(),
+		Retries: z.number().optional(),
+	})
+	.strict();
+
+const RestartPolicySwarmSchema = z
+	.object({
+		Condition: z.string().optional(),
+		Delay: z.number().optional(),
+		MaxAttempts: z.number().optional(),
+		Window: z.number().optional(),
+	})
+	.strict();
+
+const PreferenceSchema = z
+	.object({
+		Spread: z.object({
+			SpreadDescriptor: z.string(),
+		}),
+	})
+	.strict();
+
+const PlatformSchema = z
+	.object({
+		Architecture: z.string(),
+		OS: z.string(),
+	})
+	.strict();
+
+const PlacementSwarmSchema = z
+	.object({
+		Constraints: z.array(z.string()).optional(),
+		Preferences: z.array(PreferenceSchema).optional(),
+		MaxReplicas: z.number().optional(),
+		Platforms: z.array(PlatformSchema).optional(),
+	})
+	.strict();
+
+const UpdateConfigSwarmSchema = z
+	.object({
+		Parallelism: z.number(),
+		Delay: z.number().optional(),
+		FailureAction: z.string().optional(),
+		Monitor: z.number().optional(),
+		MaxFailureRatio: z.number().optional(),
+		Order: z.string(),
+	})
+	.strict();
+
+const ReplicatedSchema = z
+	.object({
+		Replicas: z.number().optional(),
+	})
+	.strict();
+
+const ReplicatedJobSchema = z
+	.object({
+		MaxConcurrent: z.number().optional(),
+		TotalCompletions: z.number().optional(),
+	})
+	.strict();
+
+const ServiceModeSwarmSchema = z
+	.object({
+		Replicated: ReplicatedSchema.optional(),
+		Global: z.object({}).optional(),
+		ReplicatedJob: ReplicatedJobSchema.optional(),
+		GlobalJob: z.object({}).optional(),
+	})
+	.strict();
+
+const NetworkSwarmSchema = z.array(
+	z
+		.object({
+			Target: z.string().optional(),
+			Aliases: z.array(z.string()).optional(),
+			DriverOpts: z.object({}).optional(),
+		})
+		.strict(),
+);
+
+const LabelsSwarmSchema = z.record(z.string());
+
+const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
+	return z
+		.string()
+		.transform((str, ctx) => {
+			if (str === null || str === "") {
+				return null;
+			}
+			try {
+				return JSON.parse(str);
+			} catch (e) {
+				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
+				return z.NEVER;
+			}
+		})
+		.superRefine((data, ctx) => {
+			if (data === null) {
+				return;
+			}
+
+			if (Object.keys(data).length === 0) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message: "Object cannot be empty",
+				});
+				return;
+			}
+
+			const parseResult = schema.safeParse(data);
+			if (!parseResult.success) {
+				for (const error of parseResult.error.issues) {
+					const path = error.path.join(".");
+					ctx.addIssue({
+						code: z.ZodIssueCode.custom,
+						message: `${path} ${error.message}`,
+					});
+				}
+			}
+		});
+};
+
+const addSwarmSettings = z.object({
+	healthCheckSwarm: createStringToJSONSchema(HealthCheckSwarmSchema).nullable(),
+	restartPolicySwarm: createStringToJSONSchema(
+		RestartPolicySwarmSchema,
+	).nullable(),
+	placementSwarm: createStringToJSONSchema(PlacementSwarmSchema).nullable(),
+	updateConfigSwarm: createStringToJSONSchema(
+		UpdateConfigSwarmSchema,
+	).nullable(),
+	rollbackConfigSwarm: createStringToJSONSchema(
+		UpdateConfigSwarmSchema,
+	).nullable(),
+	modeSwarm: createStringToJSONSchema(ServiceModeSwarmSchema).nullable(),
+	labelsSwarm: createStringToJSONSchema(LabelsSwarmSchema).nullable(),
+	networkSwarm: createStringToJSONSchema(NetworkSwarmSchema).nullable(),
+});
+
+type AddSwarmSettings = z.infer<typeof addSwarmSettings>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const AddSwarmSettings = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const { mutateAsync, isError, error, isLoading } =
+		api.application.update.useMutation();
+
+	const form = useForm<AddSwarmSettings>({
+		defaultValues: {
+			healthCheckSwarm: null,
+			restartPolicySwarm: null,
+			placementSwarm: null,
+			updateConfigSwarm: null,
+			rollbackConfigSwarm: null,
+			modeSwarm: null,
+			labelsSwarm: null,
+			networkSwarm: null,
+		},
+		resolver: zodResolver(addSwarmSettings),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				healthCheckSwarm: data.healthCheckSwarm
+					? JSON.stringify(data.healthCheckSwarm, null, 2)
+					: null,
+				restartPolicySwarm: data.restartPolicySwarm
+					? JSON.stringify(data.restartPolicySwarm, null, 2)
+					: null,
+				placementSwarm: data.placementSwarm
+					? JSON.stringify(data.placementSwarm, null, 2)
+					: null,
+				updateConfigSwarm: data.updateConfigSwarm
+					? JSON.stringify(data.updateConfigSwarm, null, 2)
+					: null,
+				rollbackConfigSwarm: data.rollbackConfigSwarm
+					? JSON.stringify(data.rollbackConfigSwarm, null, 2)
+					: null,
+				modeSwarm: data.modeSwarm
+					? JSON.stringify(data.modeSwarm, null, 2)
+					: null,
+				labelsSwarm: data.labelsSwarm
+					? JSON.stringify(data.labelsSwarm, null, 2)
+					: null,
+				networkSwarm: data.networkSwarm
+					? JSON.stringify(data.networkSwarm, null, 2)
+					: null,
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: AddSwarmSettings) => {
+		await mutateAsync({
+			applicationId,
+			healthCheckSwarm: data.healthCheckSwarm,
+			restartPolicySwarm: data.restartPolicySwarm,
+			placementSwarm: data.placementSwarm,
+			updateConfigSwarm: data.updateConfigSwarm,
+			rollbackConfigSwarm: data.rollbackConfigSwarm,
+			modeSwarm: data.modeSwarm,
+			labelsSwarm: data.labelsSwarm,
+			networkSwarm: data.networkSwarm,
+		})
+			.then(async () => {
+				toast.success("Swarm settings updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Error to update the swarm settings");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="secondary" className="cursor-pointer w-fit">
+					<Settings className="size-4 text-muted-foreground" />
+					Swarm Settings
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-5xl p-0">
+				<DialogHeader className="p-6">
+					<DialogTitle>Swarm Settings</DialogTitle>
+					<DialogDescription>
+						Update certain settings using a json object.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-permissions"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative"
+					>
+						<FormField
+							control={form.control}
+							name="healthCheckSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Health Check</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Test?: string[] | undefined;
+	Interval?: number | undefined;
+	Timeout?: number | undefined;
+	StartPeriod?: number | undefined;
+	Retries?: number | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Test" : ["CMD-SHELL", "curl -f http://localhost:3000/health"],
+	"Interval" : 10000,
+	"Timeout" : 10000,
+	"StartPeriod" : 10000,
+	"Retries" : 10
+}`}
+											className="h-[12rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="restartPolicySwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Restart Policy</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Condition?: string | undefined;
+	Delay?: number | undefined;
+	MaxAttempts?: number | undefined;
+	Window?: number | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Condition" : "on-failure",
+	"Delay" : 10000,
+	"MaxAttempts" : 10,
+	"Window" : 10000
+}                                                  `}
+											className="h-[12rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="placementSwarm"
+							render={({ field }) => (
+								<FormItem className="relative   max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Placement</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Constraints?: string[] | undefined;
+	Preferences?: Array<{ Spread: { SpreadDescriptor: string } }> | undefined;
+	MaxReplicas?: number | undefined;
+	Platforms?:
+		| Array<{
+				Architecture: string;
+				OS: string;
+		  }>
+		| undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Constraints" : ["node.role==manager"],
+	"Preferences" : [{
+		"Spread" : {
+			"SpreadDescriptor" : "node.labels.region"
+		}
+	}],
+	"MaxReplicas" : 10,
+	"Platforms" : [{
+		"Architecture" : "amd64",
+		"OS" : "linux"
+	}]
+}                                                `}
+											className="h-[21rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="updateConfigSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Update Config</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Parallelism?: number;
+	Delay?: number | undefined;
+	FailureAction?: string | undefined;
+	Monitor?: number | undefined;
+	MaxFailureRatio?: number | undefined;
+	Order: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Parallelism" : 1,
+	"Delay" : 10000,
+	"FailureAction" : "continue",
+	"Monitor" : 10000,
+	"MaxFailureRatio" : 10,
+	"Order" : "start-first"
+}`}
+											className="h-[21rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="rollbackConfigSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Rollback Config</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Parallelism?: number;
+	Delay?: number | undefined;
+	FailureAction?: string | undefined;
+	Monitor?: number | undefined;
+	MaxFailureRatio?: number | undefined;
+	Order: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Parallelism" : 1,
+	"Delay" : 10000,
+	"FailureAction" : "continue",
+	"Monitor" : 10000,
+	"MaxFailureRatio" : 10,
+	"Order" : "start-first"
+}`}
+											className="h-[17rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="modeSwarm"
+							render={({ field }) => (
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Mode</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="center"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	Replicated?: { Replicas?: number | undefined } | undefined;
+	Global?: {} | undefined;
+	ReplicatedJob?:
+		| {
+				MaxConcurrent?: number | undefined;
+				TotalCompletions?: number | undefined;
+		  }
+		| undefined;
+	GlobalJob?: {} | undefined;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"Replicated" : {
+		"Replicas" : 1
+	},
+	"Global" : {},
+	"ReplicatedJob" : {
+		"MaxConcurrent" : 1,
+		"TotalCompletions" : 1
+	},
+	"GlobalJob" : {}
+}`}
+											className="h-[17rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="networkSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
+									<FormLabel>Network</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`[
+  {
+	"Target" : string | undefined;
+	"Aliases" : string[] | undefined;
+	"DriverOpts" : { [key: string]: string } | undefined;
+  }
+]`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`[
+ {
+	"Target" : "dokploy-network",
+	"Aliases" : ["dokploy-network"],
+	"DriverOpts" : {
+		"com.docker.network.driver.mtu" : "1500",
+		"com.docker.network.driver.host_binding" : "true",
+		"com.docker.network.driver.mtu" : "1500",
+		"com.docker.network.driver.host_binding" : "true"
+	}
+ }
+]`}
+											className="h-[20rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="labelsSwarm"
+							render={({ field }) => (
+								<FormItem className="relative max-lg:px-4 lg:pr-6 ">
+									<FormLabel>Labels</FormLabel>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormDescription className="break-all w-fit flex flex-row gap-1 items-center">
+													Check the interface
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormDescription>
+											</TooltipTrigger>
+											<TooltipContent
+												className="w-full z-[999]"
+												align="start"
+												side="bottom"
+											>
+												<code>
+													<pre>
+														{`{
+	[name: string]: string;
+}`}
+													</pre>
+												</code>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+									<FormControl>
+										<CodeEditor
+											language="json"
+											placeholder={`{
+	"com.example.app.name" : "my-app",
+	"com.example.app.version" : "1.0.0"
+}`}
+											className="h-[20rem] font-mono"
+											{...field}
+											value={field?.value || ""}
+										/>
+									</FormControl>
+									<pre>
+										<FormMessage />
+									</pre>
+								</FormItem>
+							)}
+						/>
+
+						<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 ">
+							<Button
+								isLoading={isLoading}
+								form="hook-form-add-permissions"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,208 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Server } from "lucide-react";
+import Link from "next/link";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AddSwarmSettings } from "./modify-swarm-settings";
+
+interface Props {
+	applicationId: string;
+}
+
+const AddRedirectchema = z.object({
+	replicas: z.number(),
+	registryId: z.string(),
+});
+
+type AddCommand = z.infer<typeof AddRedirectchema>;
+
+export const ShowClusterSettings = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { data: registries } = api.registry.all.useQuery();
+
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+
+	const form = useForm<AddCommand>({
+		defaultValues: {
+			registryId: data?.registryId || "",
+			replicas: data?.replicas || 1,
+		},
+		resolver: zodResolver(AddRedirectchema),
+	});
+
+	useEffect(() => {
+		if (data?.command) {
+			form.reset({
+				registryId: data?.registryId || "",
+				replicas: data?.replicas || 1,
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+
+	const onSubmit = async (data: AddCommand) => {
+		await mutateAsync({
+			applicationId,
+			registryId: data?.registryId === "none" ? null : data?.registryId,
+			replicas: data?.replicas,
+		})
+			.then(async () => {
+				toast.success("Command Updated");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the command");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Cluster Settings</CardTitle>
+					<CardDescription>
+						Add the registry and the replicas of the application
+					</CardDescription>
+				</div>
+				<AddSwarmSettings applicationId={applicationId} />
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<AlertBlock type="info">
+					Please remember to click Redeploy after modify the cluster settings to
+					apply the changes.
+				</AlertBlock>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="replicas"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replicas</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1"
+												{...field}
+												onChange={(e) => {
+													field.onChange(Number(e.target.value));
+												}}
+												type="number"
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						{registries && registries?.length === 0 ? (
+							<div className="pt-10">
+								<div className="flex flex-col items-center gap-3">
+									<Server className="size-8 text-muted-foreground" />
+									<span className="text-base text-muted-foreground">
+										To use a cluster feature, you need to configure at least a
+										registry first. Please, go to{" "}
+										<Link
+											href="/dashboard/settings/cluster"
+											className="text-foreground"
+										>
+											Settings
+										</Link>{" "}
+										to do so.
+									</span>
+								</div>
+							</div>
+						) : (
+							<>
+								<FormField
+									control={form.control}
+									name="registryId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Select a registry</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a registry" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{registries?.map((registry) => (
+															<SelectItem
+																key={registry.registryId}
+																value={registry.registryId}
+															>
+																{registry.registryName}
+															</SelectItem>
+														))}
+														<SelectItem value={"none"}>None</SelectItem>
+														<SelectLabel>
+															Registries ({registries?.length})
+														</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
+
+						<div className="flex justify-end">
+							<Button isLoading={isLoading} type="submit" className="w-fit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,120 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+interface Props {
+	applicationId: string;
+}
+
+const AddRedirectSchema = z.object({
+	command: z.string(),
+});
+
+type AddCommand = z.infer<typeof AddRedirectSchema>;
+
+export const AddCommand = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
+
+	const form = useForm<AddCommand>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(AddRedirectSchema),
+	});
+
+	useEffect(() => {
+		if (data?.command) {
+			form.reset({
+				command: data?.command || "",
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+
+	const onSubmit = async (data: AddCommand) => {
+		await mutateAsync({
+			applicationId,
+			command: data?.command,
+		})
+			.then(async () => {
+				toast.success("Command Updated");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the command");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Run Command</CardTitle>
+					<CardDescription>
+						Run a custom command in the container
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl>
+											<Input placeholder="Custom command" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex justify-end">
+							<Button isLoading={isLoading} type="submit" className="w-fit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,212 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddPortSchema = z.object({
+	publishedPort: z.number().int().min(1).max(65535),
+	targetPort: z.number().int().min(1).max(65535),
+	protocol: z.enum(["tcp", "udp"], {
+		required_error: "Protocol is required",
+	}),
+});
+
+type AddPort = z.infer<typeof AddPortSchema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddPort = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.port.create.useMutation();
+
+	const form = useForm<AddPort>({
+		defaultValues: {
+			publishedPort: 0,
+			targetPort: 0,
+		},
+		resolver: zodResolver(AddPortSchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			publishedPort: 0,
+			targetPort: 0,
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddPort) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Port Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the port");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Ports</DialogTitle>
+					<DialogDescription>
+						Ports are used to expose your application to the internet.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-port"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="publishedPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Published Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="targetPort"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Target Port</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="1-65535"
+												{...field}
+												value={field.value?.toString() || ""}
+												onChange={(e) => {
+													const value = e.target.value;
+													if (value === "") {
+														field.onChange(0);
+													} else {
+														const number = Number.parseInt(value, 10);
+														if (!Number.isNaN(number)) {
+															field.onChange(number);
+														}
+													}
+												}}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="protocol"
+								render={({ field }) => {
+									return (
+										<FormItem className="md:col-span-2">
+											<FormLabel>Protocol</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												value={field.value}
+											>
+												<FormControl>
+													<SelectTrigger>
+														<SelectValue placeholder="Select a protocol" />
+													</SelectTrigger>
+												</FormControl>
+												<SelectContent>
+													<SelectItem value={"tcp"}>TCP</SelectItem>
+													<SelectItem value={"udp"}>UDP</SelectItem>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-port"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

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

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

@@ -0,0 +1,93 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Rss } from "lucide-react";
+import React from "react";
+import { AddPort } from "./add-port";
+import { DeletePort } from "./delete-port";
+import { UpdatePort } from "./update-port";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowPorts = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Ports</CardTitle>
+					<CardDescription>
+						the ports allows you to expose your application to the internet
+					</CardDescription>
+				</div>
+
+				{data && data?.ports.length > 0 && (
+					<AddPort applicationId={applicationId}>Add Port</AddPort>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.ports.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Rss className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No ports configured
+						</span>
+						<AddPort applicationId={applicationId}>Add Port</AddPort>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2 gap-4">
+						<AlertBlock type="info">
+							Please remember to click Redeploy after adding, editing, or
+							deleting the ports to apply the changes.
+						</AlertBlock>
+						<div className="flex flex-col gap-6">
+							{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="flex flex-col gap-1">
+												<span className="font-medium">Published Port</span>
+												<span className="text-sm text-muted-foreground">
+													{port.publishedPort}
+												</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>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Protocol</span>
+												<span className="text-sm text-muted-foreground">
+													{port.protocol.toUpperCase()}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-4">
+											<UpdatePort portId={port.portId} />
+											<DeletePort portId={port.portId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -0,0 +1,176 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddRedirectchema = z.object({
+	regex: z.string().min(1, "Regex required"),
+	permanent: z.boolean().default(false),
+	replacement: z.string().min(1, "Replacement required"),
+});
+
+type AddRedirect = z.infer<typeof AddRedirectchema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddRedirect = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.redirects.create.useMutation();
+
+	const form = useForm<AddRedirect>({
+		defaultValues: {
+			permanent: false,
+			regex: "",
+			replacement: "",
+		},
+		resolver: zodResolver(AddRedirectchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			permanent: false,
+			regex: "",
+			replacement: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddRedirect) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Redirect Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the redirect");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Redirects</DialogTitle>
+					<DialogDescription>
+						Redirects are used to redirect requests to another url.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-redirect"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="regex"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Regex</FormLabel>
+										<FormControl>
+											<Input placeholder="^http://localhost/(.*)" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="replacement"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Replacement</FormLabel>
+										<FormControl>
+											<Input placeholder="http://mydomain/$${1}" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="permanent"
+								render={({ field }) => (
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+										<div className="space-y-0.5">
+											<FormLabel>Permanent</FormLabel>
+											<FormDescription>
+												Set the permanent option to true to apply a permanent
+												redirection.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-redirect"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

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

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

@@ -0,0 +1,91 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Split } from "lucide-react";
+import React from "react";
+import { AddRedirect } from "./add-redirect";
+import { DeleteRedirect } from "./delete-redirect";
+import { UpdateRedirect } from "./update-redirect";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowRedirects = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Redirects</CardTitle>
+					<CardDescription>
+						If you want to redirect requests to this application use the
+						following config to setup the redirects
+					</CardDescription>
+				</div>
+
+				{data && data?.redirects.length > 0 && (
+					<AddRedirect applicationId={applicationId}>Add Redirect</AddRedirect>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.redirects.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<Split className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No redirects configured
+						</span>
+						<AddRedirect applicationId={applicationId}>
+							Add Redirect
+						</AddRedirect>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col gap-6">
+							{data?.redirects.map((redirect) => (
+								<div key={redirect.redirectId}>
+									<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="flex flex-col gap-1">
+												<span className="font-medium">Regex</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.regex}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Replacement</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.replacement}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Permanent</span>
+												<span className="text-sm text-muted-foreground">
+													{redirect.permanent ? "Yes" : "No"}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-4">
+											<UpdateRedirect redirectId={redirect.redirectId} />
+											<DeleteRedirect redirectId={redirect.redirectId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -0,0 +1,146 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddSecuritychema = z.object({
+	username: z.string().min(1, "Username is required"),
+	password: z.string().min(1, "Password is required"),
+});
+
+type AddSecurity = z.infer<typeof AddSecuritychema>;
+
+interface Props {
+	applicationId: string;
+	children?: React.ReactNode;
+}
+
+export const AddSecurity = ({
+	applicationId,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.security.create.useMutation();
+
+	const form = useForm<AddSecurity>({
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+		resolver: zodResolver(AddSecuritychema),
+	});
+
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddSecurity) => {
+		await mutateAsync({
+			applicationId,
+			...data,
+		})
+			.then(async () => {
+				toast.success("Security Created");
+				await utils.application.one.invalidate({
+					applicationId,
+				});
+				await utils.application.readTraefikConfig.invalidate({
+					applicationId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to create the security");
+			});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Security</DialogTitle>
+					<DialogDescription>
+						Add security to your application
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-add-security"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="test1" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input placeholder="test" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-security"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

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

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

@@ -0,0 +1,82 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { LockKeyhole } from "lucide-react";
+import React from "react";
+import { AddSecurity } from "./add-security";
+import { DeleteSecurity } from "./delete-security";
+import { UpdateSecurity } from "./update-security";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowSecurity = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
+				<div>
+					<CardTitle className="text-xl">Security</CardTitle>
+					<CardDescription>Add basic auth to your application</CardDescription>
+				</div>
+
+				{data && data?.security.length > 0 && (
+					<AddSecurity applicationId={applicationId}>Add Security</AddSecurity>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data?.security.length === 0 ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<LockKeyhole className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No security configured
+						</span>
+						<AddSecurity applicationId={applicationId}>
+							Add Security
+						</AddSecurity>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2">
+						<div className="flex flex-col gap-6 ">
+							{data?.security.map((security) => (
+								<div key={security.securityId}>
+									<div className="flex w-full flex-col sm:flex-row justify-between sm:items-center gap-4 sm:gap-10 border rounded-lg p-4">
+										<div className="grid grid-cols-1 sm:grid-cols-2 flex-col gap-4 sm:gap-8">
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Username</span>
+												<span className="text-sm text-muted-foreground">
+													{security.username}
+												</span>
+											</div>
+											<div className="flex flex-col gap-1">
+												<span className="font-medium">Password</span>
+												<span className="text-sm text-muted-foreground">
+													{security.password}
+												</span>
+											</div>
+										</div>
+										<div className="flex flex-row gap-2">
+											<UpdateSecurity securityId={security.securityId} />
+											<DeleteSecurity securityId={security.securityId} />
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { CodeEditor } from "@/components/shared/code-editor";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { File } from "lucide-react";
+import React from "react";
+import { UpdateTraefikConfig } from "./update-traefik-config";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowTraefikConfig = ({ applicationId }: Props) => {
+	const { data } = api.application.readTraefikConfig.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Traefik</CardTitle>
+					<CardDescription>
+						Modify the traefik config, in rare cases you may need to add
+						specific config, be careful because modifying incorrectly can break
+						traefik and your application
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{data === null ? (
+					<div className="flex w-full flex-col items-center justify-center gap-3 pt-10">
+						<File className="size-8 text-muted-foreground" />
+						<span className="text-base text-muted-foreground">
+							No traefik config detected
+						</span>
+					</div>
+				) : (
+					<div className="flex flex-col pt-2 relative">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem] overflow-y-auto">
+							<CodeEditor
+								value={data || "Empty"}
+								disabled
+								className="font-mono"
+							/>
+							<div className="flex justify-end absolute z-50 right-6 top-6">
+								<UpdateTraefikConfig applicationId={applicationId} />
+							</div>
+						</div>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,184 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import jsyaml from "js-yaml";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const UpdateTraefikConfigSchema = z.object({
+	traefikConfig: z.string(),
+});
+
+type UpdateTraefikConfig = z.infer<typeof UpdateTraefikConfigSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const validateAndFormatYAML = (yamlText: string) => {
+	try {
+		const obj = jsyaml.load(yamlText);
+		const formattedYaml = jsyaml.dump(obj, { indent: 4 });
+		return { valid: true, formattedYaml, error: null };
+	} catch (error) {
+		if (error instanceof jsyaml.YAMLException) {
+			return {
+				valid: false,
+				formattedYaml: yamlText,
+				error: error.message,
+			};
+		}
+		return {
+			valid: false,
+			formattedYaml: yamlText,
+			error: "An unexpected error occurred while processing the YAML.",
+		};
+	}
+};
+
+export const UpdateTraefikConfig = ({ applicationId }: Props) => {
+	const [open, setOpen] = useState(false);
+	const { data, refetch } = api.application.readTraefikConfig.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.application.updateTraefikConfig.useMutation();
+
+	const form = useForm<UpdateTraefikConfig>({
+		defaultValues: {
+			traefikConfig: "",
+		},
+		resolver: zodResolver(UpdateTraefikConfigSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				traefikConfig: data || "",
+			});
+		}
+	}, [data]);
+
+	const onSubmit = async (data: UpdateTraefikConfig) => {
+		const { valid, error } = validateAndFormatYAML(data.traefikConfig);
+		if (!valid) {
+			form.setError("traefikConfig", {
+				type: "manual",
+				message: error || "Invalid YAML",
+			});
+			return;
+		}
+		form.clearErrors("traefikConfig");
+		await mutateAsync({
+			applicationId,
+			traefikConfig: data.traefikConfig,
+		})
+			.then(async () => {
+				toast.success("Traefik config Updated");
+				refetch();
+				setOpen(false);
+				form.reset();
+			})
+			.catch(() => {
+				toast.error("Error to update the traefik config");
+			});
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(open) => {
+				setOpen(open);
+				if (!open) {
+					form.reset();
+				}
+			}}
+		>
+			<DialogTrigger asChild>
+				<Button isLoading={isLoading}>Modify</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+				<DialogHeader>
+					<DialogTitle>Update traefik config</DialogTitle>
+					<DialogDescription>Update the traefik config</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-traefik-config"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="w-full space-y-4 overflow-auto"
+					>
+						<div className="flex flex-col">
+							<FormField
+								control={form.control}
+								name="traefikConfig"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Traefik config</FormLabel>
+										<FormControl>
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
+												placeholder={`http:
+routers:
+    router-name:
+        rule: Host('domain.com')
+        service: container-name
+        entryPoints:
+            - web
+        tls: false
+        middlewares: []
+                                                    `}
+												{...field}
+											/>
+										</FormControl>
+
+										<pre>
+											<FormMessage />
+										</pre>
+									</FormItem>
+								)}
+							/>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-update-traefik-config"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,366 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	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 { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import type React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+interface Props {
+	serviceId: string;
+	serviceType:
+		| "application"
+		| "postgres"
+		| "redis"
+		| "mongo"
+		| "redis"
+		| "mysql"
+		| "mariadb"
+		| "compose";
+	refetch: () => void;
+	children?: React.ReactNode;
+}
+
+const mountSchema = z.object({
+	mountPath: z.string().min(1, "Mount path required"),
+});
+
+const mySchema = z.discriminatedUnion("type", [
+	z
+		.object({
+			type: z.literal("bind"),
+			hostPath: z.string().min(1, "Host path required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("volume"),
+			volumeName: z.string().min(1, "Volume name required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("file"),
+			filePath: z.string().min(1, "File path required"),
+			content: z.string().optional(),
+		})
+		.merge(mountSchema),
+]);
+
+type AddMount = z.infer<typeof mySchema>;
+
+export const AddVolumes = ({
+	serviceId,
+	serviceType,
+	refetch,
+	children = <PlusIcon className="h-4 w-4" />,
+}: Props) => {
+	const { mutateAsync } = api.mounts.create.useMutation();
+	const form = useForm<AddMount>({
+		defaultValues: {
+			type: serviceType === "compose" ? "file" : "bind",
+			hostPath: "",
+			mountPath: serviceType === "compose" ? "/" : "",
+		},
+		resolver: zodResolver(mySchema),
+	});
+	const type = form.watch("type");
+
+	useEffect(() => {
+		form.reset();
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddMount) => {
+		if (data.type === "bind") {
+			await mutateAsync({
+				serviceId,
+				hostPath: data.hostPath,
+				mountPath: data.mountPath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the Bind mount");
+				});
+		} else if (data.type === "volume") {
+			await mutateAsync({
+				serviceId,
+				volumeName: data.volumeName,
+				mountPath: data.mountPath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the Volume mount");
+				});
+		} else if (data.type === "file") {
+			await mutateAsync({
+				serviceId,
+				content: data.content,
+				mountPath: data.mountPath,
+				filePath: data.filePath,
+				type: data.type,
+				serviceType,
+			})
+				.then(() => {
+					toast.success("Mount Created");
+				})
+				.catch(() => {
+					toast.error("Error to create the File mount");
+				});
+		}
+
+		refetch();
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button>{children}</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Volumes / Mounts</DialogTitle>
+				</DialogHeader>
+				{/* {isError && (
+        <div className="flex items-center flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+          <AlertTriangle className="text-red-600 dark:text-red-400" />
+          <span className="text-sm text-red-600 dark:text-red-400">
+            {error?.message}
+          </span>
+        </div>
+      )} */}
+
+				<Form {...form}>
+					<form
+						id="hook-form-volume"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<FormField
+							control={form.control}
+							defaultValue={form.control._defaultValues.type}
+							name="type"
+							render={({ field }) => (
+								<FormItem className="space-y-3">
+									<FormLabel className="text-muted-foreground">
+										Select the Mount Type
+									</FormLabel>
+									<FormControl>
+										<RadioGroup
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+											className="grid w-full grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+										>
+											{serviceType !== "compose" && (
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl className="w-full">
+														<div>
+															<RadioGroupItem
+																value="bind"
+																id="bind"
+																className="peer sr-only"
+															/>
+															<Label
+																htmlFor="bind"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+															>
+																Bind Mount
+															</Label>
+														</div>
+													</FormControl>
+												</FormItem>
+											)}
+
+											{serviceType !== "compose" && (
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl className="w-full">
+														<div>
+															<RadioGroupItem
+																value="volume"
+																id="volume"
+																className="peer sr-only"
+															/>
+															<Label
+																htmlFor="volume"
+																className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+															>
+																Volume Mount
+															</Label>
+														</div>
+													</FormControl>
+												</FormItem>
+											)}
+
+											<FormItem
+												className={cn(
+													serviceType === "compose" && "col-span-3",
+													"flex items-center space-x-3 space-y-0",
+												)}
+											>
+												<FormControl className="w-full">
+													<div>
+														<RadioGroupItem
+															value="file"
+															id="file"
+															className="peer sr-only"
+														/>
+														<Label
+															htmlFor="file"
+															className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
+														>
+															File Mount
+														</Label>
+													</div>
+												</FormControl>
+											</FormItem>
+										</RadioGroup>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="flex flex-col gap-4">
+							<FormLabel className="text-lg font-semibold leading-none tracking-tight">
+								Fill the next fields.
+							</FormLabel>
+							<div className="flex flex-col gap-2">
+								{type === "bind" && (
+									<FormField
+										control={form.control}
+										name="hostPath"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Host Path</FormLabel>
+												<FormControl>
+													<Input placeholder="Host Path" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								{type === "volume" && (
+									<FormField
+										control={form.control}
+										name="volumeName"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Volume Name</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="Volume Name"
+														{...field}
+														value={field.value || ""}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								{type === "file" && (
+									<>
+										<FormField
+											control={form.control}
+											name="content"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Content</FormLabel>
+													<FormControl>
+														<FormControl>
+															<Textarea
+																placeholder="Any content"
+																className="h-64"
+																{...field}
+															/>
+														</FormControl>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="filePath"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>File Path</FormLabel>
+													<FormControl>
+														<FormControl>
+															<Input
+																placeholder="Name of the file"
+																{...field}
+															/>
+														</FormControl>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
+								{serviceType !== "compose" && (
+									<FormField
+										control={form.control}
+										name="mountPath"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Mount Path (In the container)</FormLabel>
+												<FormControl>
+													<Input placeholder="Mount Path" {...field} />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form-volume"
+							type="submit"
+						>
+							Create
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

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

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

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

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

@@ -0,0 +1,307 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Pencil } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const mountSchema = z.object({
+	mountPath: z.string().min(1, "Mount path required"),
+});
+
+const mySchema = z.discriminatedUnion("type", [
+	z
+		.object({
+			type: z.literal("bind"),
+			hostPath: z.string().min(1, "Host path required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("volume"),
+			volumeName: z.string().min(1, "Volume name required"),
+		})
+		.merge(mountSchema),
+	z
+		.object({
+			type: z.literal("file"),
+			content: z.string().optional(),
+			filePath: z.string().min(1, "File path required"),
+		})
+		.merge(mountSchema),
+]);
+
+type UpdateMount = z.infer<typeof mySchema>;
+
+interface Props {
+	mountId: string;
+	type: "bind" | "volume" | "file";
+	refetch: () => void;
+	serviceType:
+		| "application"
+		| "postgres"
+		| "redis"
+		| "mongo"
+		| "redis"
+		| "mysql"
+		| "mariadb"
+		| "compose";
+}
+
+export const UpdateVolume = ({
+	mountId,
+	type,
+	refetch,
+	serviceType,
+}: Props) => {
+	const utils = api.useUtils();
+	const { data } = api.mounts.one.useQuery(
+		{
+			mountId,
+		},
+		{
+			enabled: !!mountId,
+		},
+	);
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.mounts.update.useMutation();
+
+	const form = useForm<UpdateMount>({
+		defaultValues: {
+			type,
+			hostPath: "",
+			mountPath: "",
+		},
+		resolver: zodResolver(mySchema),
+	});
+
+	const typeForm = form.watch("type");
+
+	useEffect(() => {
+		if (data) {
+			if (typeForm === "bind") {
+				form.reset({
+					hostPath: data.hostPath || "",
+					mountPath: data.mountPath,
+					type: "bind",
+				});
+			} else if (typeForm === "volume") {
+				form.reset({
+					volumeName: data.volumeName || "",
+					mountPath: data.mountPath,
+					type: "volume",
+				});
+			} else if (typeForm === "file") {
+				form.reset({
+					content: data.content || "",
+					mountPath: data.mountPath,
+					filePath: data.filePath || "",
+					type: "file",
+				});
+			}
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateMount) => {
+		if (data.type === "bind") {
+			await mutateAsync({
+				hostPath: data.hostPath,
+				mountPath: data.mountPath,
+				type: data.type,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the Bind mount");
+				});
+		} else if (data.type === "volume") {
+			await mutateAsync({
+				volumeName: data.volumeName,
+				mountPath: data.mountPath,
+				type: data.type,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the Volume mount");
+				});
+		} else if (data.type === "file") {
+			await mutateAsync({
+				content: data.content,
+				mountPath: data.mountPath,
+				type: data.type,
+				filePath: data.filePath,
+				mountId,
+			})
+				.then(() => {
+					toast.success("Mount Update");
+				})
+				.catch(() => {
+					toast.error("Error to update the File mount");
+				});
+		}
+		refetch();
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<Pencil className="size-4  text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Update</DialogTitle>
+					<DialogDescription>Update the mount</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				{type === "file" && (
+					<AlertBlock type="warning">
+						Updating the mount will recreate the file or directory.
+					</AlertBlock>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form-update-volume"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							{type === "bind" && (
+								<FormField
+									control={form.control}
+									name="hostPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Host Path</FormLabel>
+											<FormControl>
+												<Input placeholder="Host Path" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+							{type === "volume" && (
+								<FormField
+									control={form.control}
+									name="volumeName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Volume Name</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Volume Name"
+													{...field}
+													value={field.value || ""}
+												/>
+											</FormControl>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+
+							{type === "file" && (
+								<>
+									<FormField
+										control={form.control}
+										name="content"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Content</FormLabel>
+												<FormControl>
+													<FormControl>
+														<Textarea
+															placeholder="Any content"
+															className="h-64"
+															{...field}
+														/>
+													</FormControl>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="filePath"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>File Path</FormLabel>
+												<FormControl>
+													<Input
+														disabled
+														placeholder="Name of the file"
+														{...field}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</>
+							)}
+							{serviceType !== "compose" && (
+								<FormField
+									control={form.control}
+									name="mountPath"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Mount Path (In the container)</FormLabel>
+											<FormControl>
+												<Input placeholder="Mount Path" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+						</div>
+						<DialogFooter>
+							<Button
+								isLoading={isLoading}
+								form="hook-form-update-volume"
+								type="submit"
+							>
+								Update
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,213 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Cog } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+enum BuildType {
+	dockerfile = "dockerfile",
+	heroku_buildpacks = "heroku_buildpacks",
+	paketo_buildpacks = "paketo_buildpacks",
+	nixpacks = "nixpacks",
+}
+
+const mySchema = z.discriminatedUnion("buildType", [
+	z.object({
+		buildType: z.literal("dockerfile"),
+		dockerfile: z
+			.string({
+				required_error: "Dockerfile path is required",
+				invalid_type_error: "Dockerfile path is required",
+			})
+			.min(1, "Dockerfile required"),
+	}),
+	z.object({
+		buildType: z.literal("heroku_buildpacks"),
+	}),
+	z.object({
+		buildType: z.literal("paketo_buildpacks"),
+	}),
+	z.object({
+		buildType: z.literal("nixpacks"),
+	}),
+]);
+
+type AddTemplate = z.infer<typeof mySchema>;
+interface Props {
+	applicationId: string;
+}
+
+export const ShowBuildChooseForm = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } =
+		api.application.saveBuildType.useMutation();
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const form = useForm<AddTemplate>({
+		defaultValues: {
+			buildType: BuildType.nixpacks,
+		},
+		resolver: zodResolver(mySchema),
+	});
+
+	const buildType = form.watch("buildType");
+	useEffect(() => {
+		if (data) {
+			// TODO: refactor this
+			if (data.buildType === "dockerfile") {
+				form.reset({
+					buildType: data.buildType,
+					...(data.buildType && {
+						dockerfile: data.dockerfile || "",
+					}),
+				});
+			} else {
+				form.reset({
+					buildType: data.buildType,
+				});
+			}
+		}
+	}, [form.formState.isSubmitSuccessful, form.reset, data, form]);
+
+	const onSubmit = async (data: AddTemplate) => {
+		await mutateAsync({
+			applicationId,
+			buildType: data.buildType,
+			dockerfile: data.buildType === "dockerfile" ? data.dockerfile : null,
+		})
+			.then(async () => {
+				toast.success("Build type saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the build type");
+			});
+	};
+
+	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">Build Type</span>
+						<p className="flex items-center text-sm font-normal text-muted-foreground">
+							Select the way of building your code
+						</p>
+					</div>
+					<div className="hidden space-y-1 text-sm font-normal md:block">
+						<Cog className="size-6 text-muted-foreground" />
+					</div>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4 p-2"
+					>
+						<FormField
+							control={form.control}
+							name="buildType"
+							defaultValue={form.control._defaultValues.buildType}
+							render={({ field }) => {
+								return (
+									<FormItem className="space-y-3">
+										<FormLabel>Build Type</FormLabel>
+										<FormControl>
+											<RadioGroup
+												onValueChange={field.onChange}
+												value={field.value}
+												className="flex flex-col space-y-1"
+											>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="dockerfile" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Dockerfile
+													</FormLabel>
+												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="nixpacks" />
+													</FormControl>
+													<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>
+											</RadioGroup>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								);
+							}}
+						/>
+						{buildType === "dockerfile" && (
+							<FormField
+								control={form.control}
+								name="dockerfile"
+								render={({ field }) => {
+									return (
+										<FormItem>
+											<FormLabel>Docker File</FormLabel>
+											<FormControl>
+												<Input
+													placeholder={"Path of your docker file"}
+													{...field}
+													value={field.value ?? ""}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									);
+								}}
+							/>
+						)}
+						<div className="flex w-full justify-end">
+							<Button isLoading={isLoading} type="submit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,63 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { TrashIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const DeleteApplication = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.delete.useMutation();
+	const { push } = useRouter();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4 text-muted-foreground" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+
+									toast.success("Application delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete Application");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,61 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const CancelQueues = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.application.cleanQueues.useMutation();
+	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({
+								applicationId,
+							})
+								.then(() => {
+									toast.success("Queues are being cleaned");
+								})
+								.catch((err) => {
+									toast.error(err.message);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,60 @@
+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 React from "react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const RefreshToken = ({ applicationId }: Props) => {
+	const { mutateAsync } = api.application.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 change the refresh token and
+						other tokens will be invalidated.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then(() => {
+									utils.application.one.invalidate({
+										applicationId,
+									});
+									toast.success("Refresh updated");
+								})
+								.catch(() => {
+									toast.error("Error to update the refresh token");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,69 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+	logPath: string | null;
+	open: boolean;
+	onClose: () => void;
+}
+export const ShowDeployment = ({ logPath, open, onClose }: Props) => {
+	const [data, setData] = useState("");
+	const endOfLogsRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open || !logPath) return;
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}`;
+		const ws = new WebSocket(wsUrl);
+
+		ws.onmessage = (e) => {
+			setData((currentData) => currentData + e.data);
+		};
+
+		return () => ws.close();
+	}, [logPath, open]);
+
+	const scrollToBottom = () => {
+		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
+	};
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [data]);
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(e) => {
+				onClose();
+				if (!e) setData("");
+			}}
+		>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Deployment</DialogTitle>
+					<DialogDescription>
+						See all the details of this deployment
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
+					<code>
+						<pre className="whitespace-pre-wrap break-words">
+							{data || "Loading..."}
+						</pre>
+						<div ref={endOfLogsRef} />
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,120 @@
+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 { api } from "@/utils/api";
+import { RocketIcon } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { CancelQueues } from "./cancel-queues";
+import { RefreshToken } from "./refresh-token";
+import { ShowDeployment } from "./show-deployment";
+
+interface Props {
+	applicationId: string;
+}
+export const ShowDeployments = ({ applicationId }: Props) => {
+	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const { data } = api.application.one.useQuery({ applicationId });
+	const { data: deployments } = api.deployment.all.useQuery(
+		{ applicationId },
+		{
+			enabled: !!applicationId,
+			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 application
+					</CardDescription>
+				</div>
+				<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/${data?.refreshToken}`}
+							</span>
+							<RefreshToken applicationId={applicationId} />
+						</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.logPath);
+										}}
+									>
+										View
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+				<ShowDeployment
+					open={activeLog !== null}
+					onClose={() => setActiveLog(null)}
+					logPath={activeLog}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,259 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	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 { domain } from "@/server/db/validations";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 { mutateAsync, isError, error, isLoading } = domainId
+		? api.domain.update.useMutation()
+		: api.domain.create.useMutation();
+
+	const form = useForm<Domain>({
+		resolver: zodResolver(domain),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				...data,
+				/* Convert null to undefined */
+				path: data?.path || undefined,
+				port: data?.port || undefined,
+			});
+		}
+
+		if (!domainId) {
+			form.reset({});
+		}
+	}, [form, form.reset, data, isLoading]);
+
+	const dictionary = {
+		success: domainId ? "Domain Updated" : "Domain Created",
+		error: domainId
+			? "Error to update the domain"
+			: "Error to create the domain",
+		submit: domainId ? "Update" : "Create",
+		dialogDescription: domainId
+			? "In this section you can edit a domain"
+			: "In this section you can add domains",
+	};
+
+	const onSubmit = async (data: Domain) => {
+		await mutateAsync({
+			domainId,
+			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>
+											<FormControl>
+												<Input placeholder="api.dokploy.com" {...field} />
+											</FormControl>
+
+											<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>
+													<Input
+														placeholder={"3000"}
+														{...field}
+														onChange={(e) => {
+															field.onChange(Number.parseInt(e.target.value));
+														}}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										);
+									}}
+								/>
+								{form.getValues().https && (
+									<FormField
+										control={form.control}
+										name="certificateType"
+										render={({ field }) => (
+											<FormItem className="col-span-2">
+												<FormLabel>Certificate</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || ""}
+												>
+													<FormControl>
+														<SelectTrigger>
+															<SelectValue placeholder="Select a certificate" />
+														</SelectTrigger>
+													</FormControl>
+
+													<SelectContent>
+														<SelectItem value="none">None</SelectItem>
+														<SelectItem value={"letsencrypt"}>
+															Letsencrypt (Default)
+														</SelectItem>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								<FormField
+									control={form.control}
+									name="https"
+									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>HTTPS</FormLabel>
+												<FormDescription>
+													Automatically provision SSL Certificate.
+												</FormDescription>
+												<FormMessage />
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</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/application/domains/delete-domain.tsx

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

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

@@ -0,0 +1,79 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { RefreshCcw } from "lucide-react";
+import Link from "next/link";
+import { GenerateTraefikMe } from "./generate-traefikme";
+import { GenerateWildCard } from "./generate-wildcard";
+
+interface Props {
+	applicationId: string;
+}
+
+export const GenerateDomain = ({ applicationId }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button variant="secondary">
+					Generate Domain
+					<RefreshCcw className="size-4  text-muted-foreground " />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Generate Domain</DialogTitle>
+					<DialogDescription>
+						Generate Domains for your applications
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4 w-full">
+					<ul className="flex flex-col gap-4">
+						<li className="flex flex-row items-center gap-4">
+							<div className="flex flex-col gap-2">
+								<div className="text-base font-bold">
+									1. Generate TraefikMe Domain
+								</div>
+								<div className="text-sm text-muted-foreground">
+									This option generates a free domain provided by{" "}
+									<Link
+										href="https://traefik.me"
+										className="text-primary"
+										target="_blank"
+									>
+										TraefikMe
+									</Link>
+									. We recommend using this for quick domain testing or if you
+									don't have a domain yet.
+								</div>
+							</div>
+						</li>
+						{/* <li className="flex flex-row items-center gap-4">
+							<div className="flex flex-col gap-2">
+								<div className="text-base font-bold">
+									2. Use Wildcard Domain
+								</div>
+								<div className="text-sm text-muted-foreground">
+									To use this option, you need to set up an 'A' record in your
+									domain provider. For example, create a record for
+									*.yourdomain.com.
+								</div>
+							</div>
+						</li> */}
+					</ul>
+					<div className="flex flex-row gap-4 w-full">
+						<GenerateTraefikMe applicationId={applicationId} />
+						{/* <GenerateWildCard applicationId={applicationId} /> */}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/application/domains/generate-traefikme.tsx

@@ -0,0 +1,69 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { RefreshCcw } from "lucide-react";
+import React from "react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const GenerateTraefikMe = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.generateDomain.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Generate Domain
+					<RefreshCcw className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to generate a new domain?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will generate a new domain and will be used to access to the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									utils.domain.byApplicationId.invalidate({
+										applicationId: applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: applicationId,
+									});
+									toast.success("Generated Domain succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to generate Domain");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

apps/dokploy/components/dashboard/application/domains/generate-wildcard.tsx

@@ -0,0 +1,69 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { SquareAsterisk } from "lucide-react";
+import React from "react";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+export const GenerateWildCard = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } = api.domain.generateWildcard.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="secondary" isLoading={isLoading}>
+					Generate Wildcard Domain
+					<SquareAsterisk className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>
+						Are you sure to generate a new wildcard domain?
+					</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will generate a new domain and will be used to access to the
+						application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								applicationId,
+							})
+								.then((data) => {
+									utils.domain.byApplicationId.invalidate({
+										applicationId: applicationId,
+									});
+									utils.application.readTraefikConfig.invalidate({
+										applicationId: applicationId,
+									});
+									toast.success("Generated Domain succesfully");
+								})
+								.catch((e) => {
+									toast.error(`Error to generate Domain: ${e.message}`);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,114 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { ExternalLink, GlobeIcon, PenBoxIcon } from "lucide-react";
+import Link from "next/link";
+import { AddDomain } from "./add-domain";
+import { DeleteDomain } from "./delete-domain";
+import { GenerateDomain } from "./generate-domain";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowDomains = ({ applicationId }: Props) => {
+	const { data } = api.domain.byApplicationId.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+	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 && (
+							<AddDomain applicationId={applicationId}>
+								<Button>
+									<GlobeIcon className="size-4" /> Add Domain
+								</Button>
+							</AddDomain>
+						)}
+						{data && data?.length > 0 && (
+							<GenerateDomain applicationId={applicationId} />
+						)}
+					</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 is required to set at least 1
+								domain
+							</span>
+							<div className="flex flex-row gap-4 flex-wrap">
+								<AddDomain applicationId={applicationId}>
+									<Button>
+										<GlobeIcon className="size-4" /> Add Domain
+									</Button>
+								</AddDomain>
+
+								<GenerateDomain applicationId={applicationId} />
+							</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 gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+									>
+										<Link target="_blank" href={`http://${item.host}`}>
+											<ExternalLink className="size-5" />
+										</Link>
+
+										<Input disabled value={item.host} />
+										<Button variant="outline" disabled>
+											{item.path}
+										</Button>
+										<Button variant="outline" disabled>
+											{item.port}
+										</Button>
+										<Button variant="outline" disabled>
+											{item.https ? "HTTPS" : "HTTP"}
+										</Button>
+										<div className="flex flex-row gap-1">
+											<AddDomain
+												applicationId={applicationId}
+												domainId={item.domainId}
+											>
+												<Button variant="ghost">
+													<PenBoxIcon className="size-4 text-muted-foreground" />
+												</Button>
+											</AddDomain>
+											<DeleteDomain domainId={item.domainId} />
+										</div>
+									</div>
+								);
+							})}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,103 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Form } from "@/components/ui/form";
+import { Secrets } from "@/components/ui/secrets";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const addEnvironmentSchema = z.object({
+	env: z.string(),
+	buildArgs: z.string(),
+});
+
+type EnvironmentSchema = z.infer<typeof addEnvironmentSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowEnvironment = ({ applicationId }: Props) => {
+	const { mutateAsync, isLoading } =
+		api.application.saveEnvironment.useMutation();
+
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
+
+	const form = useForm<EnvironmentSchema>({
+		defaultValues: {
+			env: data?.env || "",
+			buildArgs: data?.buildArgs || "",
+		},
+		resolver: zodResolver(addEnvironmentSchema),
+	});
+
+	const onSubmit = async (data: EnvironmentSchema) => {
+		mutateAsync({
+			env: data.env,
+			buildArgs: data.buildArgs,
+			applicationId,
+		})
+			.then(async () => {
+				toast.success("Environments Added");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to add environment");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex w-full flex-col gap-5 "
+			>
+				<Card className="bg-background">
+					<Secrets
+						name="env"
+						title="Environment Settings"
+						description="You can add environment variables to your resource."
+						placeholder={["NODE_ENV=production", "PORT=3000"].join("\n")}
+					/>
+					{data?.buildType === "dockerfile" && (
+						<Secrets
+							name="buildArgs"
+							title="Build-time Variables"
+							description={
+								<span>
+									Available only at build-time. See documentation&nbsp;
+									<a
+										className="text-primary"
+										href="https://docs.docker.com/build/guide/build-args/"
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										here
+									</a>
+									.
+								</span>
+							}
+							placeholder="NPM_TOKEN=xyz"
+						/>
+					)}
+					<CardContent>
+						<div className="flex flex-row justify-end">
+							<Button isLoading={isLoading} className="w-fit" type="submit">
+								Save
+							</Button>
+						</div>
+					</CardContent>
+				</Card>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,66 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const DeployApplication = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
+	const { mutateAsync: deploy } = api.application.deploy.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button isLoading={data?.applicationStatus === "running"}>
+					Deploy
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will deploy the application
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							toast.success("Deploying Application....");
+
+							await refetch();
+							await deploy({
+								applicationId,
+							}).catch(() => {
+								toast.error("Error to deploy Application");
+							});
+
+							await refetch();
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,138 @@
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const DockerProviderSchema = z.object({
+	dockerImage: z.string().min(1, {
+		message: "Docker image is required",
+	}),
+	username: z.string().optional(),
+	password: z.string().optional(),
+});
+
+type DockerProvider = z.infer<typeof DockerProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveDockerProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync } = api.application.saveDockerProvider.useMutation();
+
+	const form = useForm<DockerProvider>({
+		defaultValues: {
+			dockerImage: "",
+			password: "",
+			username: "",
+		},
+		resolver: zodResolver(DockerProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dockerImage: data.dockerImage || "",
+				password: data.password || "",
+				username: data.username || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			dockerImage: values.dockerImage,
+			password: values.password || null,
+			applicationId,
+			username: values.username || null,
+		})
+			.then(async () => {
+				toast.success("Docker Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the Docker provider");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="dockerImage"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Docker Image</FormLabel>
+									<FormControl>
+										<Input placeholder="node:16" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username</FormLabel>
+									<FormControl>
+										<Input placeholder="username" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+					<div className="space-y-4">
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input placeholder="Password" {...field} />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button
+						type="submit"
+						className="w-fit"
+						isLoading={form.formState.isSubmitting}
+					>
+						Save{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,141 @@
+import { Button } from "@/components/ui/button";
+import { Dropzone } from "@/components/ui/dropzone";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { type UploadFile, uploadFileSchema } from "@/utils/schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { TrashIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveDragNDrop = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading } =
+		api.application.dropDeployment.useMutation();
+
+	const form = useForm<UploadFile>({
+		defaultValues: {},
+		resolver: zodResolver(uploadFileSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				dropBuildPath: data.dropBuildPath || "",
+			});
+		}
+	}, [data, form, form.reset, form.formState.isSubmitSuccessful]);
+	const zip = form.watch("zip");
+
+	const onSubmit = async (values: UploadFile) => {
+		const formData = new FormData();
+
+		formData.append("zip", values.zip);
+		formData.append("applicationId", applicationId);
+		if (values.dropBuildPath) {
+			formData.append("dropBuildPath", values.dropBuildPath);
+		}
+
+		await mutateAsync(formData)
+			.then(async () => {
+				toast.success("Deployment saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the deployment");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4 ">
+					<div className="md:col-span-2 space-y-4">
+						<FormField
+							control={form.control}
+							name="dropBuildPath"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Build Path</FormLabel>
+									<FormControl>
+										<Input {...field} placeholder="Build Path" />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="zip"
+							render={({ field }) => (
+								<FormItem className="w-full ">
+									<FormLabel>Zip file</FormLabel>
+									<FormControl>
+										<Dropzone
+											{...field}
+											dropMessage="Drop files or click here"
+											accept=".zip"
+											onChange={(e) => {
+												if (e instanceof FileList) {
+													field.onChange(e[0]);
+												} else {
+													field.onChange(e);
+												}
+											}}
+										/>
+									</FormControl>
+									<FormMessage />
+									{zip instanceof File && (
+										<div className="flex flex-row gap-4 items-center">
+											<span className="text-sm text-muted-foreground">
+												{zip.name} ({zip.size} bytes)
+											</span>
+											<Button
+												type="button"
+												className="w-fit"
+												variant="ghost"
+												onClick={() => {
+													field.onChange(null);
+												}}
+											>
+												<TrashIcon className="w-4 h-4 text-muted-foreground" />
+											</Button>
+										</div>
+									)}
+								</FormItem>
+							)}
+						/>
+					</div>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button
+						type="submit"
+						className="w-fit"
+						isLoading={isLoading}
+						disabled={!zip}
+					>
+						Deploy{" "}
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,199 @@
+import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { KeyRoundIcon, LockIcon } from "lucide-react";
+import { useRouter } from "next/router";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const GitProviderSchema = z.object({
+	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(),
+});
+
+type GitProvider = z.infer<typeof GitProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveGitProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+	const { data: sshKeys } = api.sshKey.all.useQuery();
+	const router = useRouter();
+
+	const { mutateAsync, isLoading } =
+		api.application.saveGitProdiver.useMutation();
+
+	const form = useForm<GitProvider>({
+		defaultValues: {
+			branch: "",
+			buildPath: "/",
+			repositoryURL: "",
+			sshKey: undefined,
+		},
+		resolver: zodResolver(GitProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				sshKey: data.customGitSSHKeyId || undefined,
+				branch: data.customGitBranch || "",
+				buildPath: data.customGitBuildPath || "/",
+				repositoryURL: data.customGitUrl || "",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: GitProvider) => {
+		await mutateAsync({
+			customGitBranch: values.branch,
+			customGitBuildPath: values.buildPath,
+			customGitUrl: values.repositoryURL,
+			customGitSSHKeyId: values.sshKey === "none" ? null : values.sshKey,
+			applicationId,
+		})
+			.then(async () => {
+				toast.success("Git Provider Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the Git provider");
+			});
+	};
+
+	return (
+		<Form {...form}>
+			<form
+				onSubmit={form.handleSubmit(onSubmit)}
+				className="flex flex-col gap-4"
+			>
+				<div className="grid md:grid-cols-2 gap-4">
+					<div className="flex items-end col-span-2 gap-4">
+						<div className="grow">
+							<FormField
+								control={form.control}
+								name="repositoryURL"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Repository URL</FormLabel>
+										<FormControl>
+											<Input placeholder="git@bitbucket.org" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						{sshKeys && sshKeys.length > 0 ? (
+							<FormField
+								control={form.control}
+								name="sshKey"
+								render={({ field }) => (
+									<FormItem className="basis-40">
+										<FormLabel className="w-full inline-flex justify-between">
+											SSH Key
+											<LockIcon className="size-4 text-muted-foreground" />
+										</FormLabel>
+										<FormControl>
+											<Select
+												key={field.value}
+												onValueChange={field.onChange}
+												defaultValue={field.value}
+												value={field.value}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a key" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{sshKeys?.map((sshKey) => (
+															<SelectItem
+																key={sshKey.sshKeyId}
+																value={sshKey.sshKeyId}
+															>
+																{sshKey.name}
+															</SelectItem>
+														))}
+														<SelectItem value="none">None</SelectItem>
+														<SelectLabel>Keys ({sshKeys?.length})</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						) : (
+							<Button
+								variant="secondary"
+								onClick={() => router.push("/dashboard/settings/ssh-keys")}
+								type="button"
+							>
+								<KeyRoundIcon className="size-4" /> Add SSH Key
+							</Button>
+						)}
+					</div>
+					<FormField
+						control={form.control}
+						name="branch"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Branch</FormLabel>
+								<FormControl>
+									<Input placeholder="Branch" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="buildPath"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Build Path</FormLabel>
+								<FormControl>
+									<Input placeholder="/" {...field} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+				</div>
+
+				<div className="flex flex-row justify-end">
+					<Button type="submit" className="w-fit" isLoading={isLoading}>
+						Save
+					</Button>
+				</div>
+			</form>
+		</Form>
+	);
+};

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

@@ -0,0 +1,307 @@
+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 { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+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 GithubProviderSchema = 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"),
+});
+
+type GithubProvider = z.infer<typeof GithubProviderSchema>;
+
+interface Props {
+	applicationId: string;
+}
+
+export const SaveGithubProvider = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery({ applicationId });
+
+	const { mutateAsync, isLoading: isSavingGithubProvider } =
+		api.application.saveGithubProvider.useMutation();
+
+	const form = useForm<GithubProvider>({
+		defaultValues: {
+			buildPath: "/",
+			repository: {
+				owner: "",
+				repo: "",
+			},
+			branch: "",
+		},
+		resolver: zodResolver(GithubProviderSchema),
+	});
+
+	const repository = form.watch("repository");
+
+	const { data: repositories, isLoading: isLoadingRepositories } =
+		api.admin.getRepositories.useQuery();
+
+	const {
+		data: branches,
+		fetchStatus,
+		status,
+	} = api.admin.getBranches.useQuery(
+		{
+			owner: repository?.owner,
+			repo: repository?.repo,
+		},
+		{ enabled: !!repository?.owner && !!repository?.repo },
+	);
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				branch: data.branch || "",
+				repository: {
+					repo: data.repository || "",
+					owner: data.owner || "",
+				},
+				buildPath: data.buildPath || "/",
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (data: GithubProvider) => {
+		await mutateAsync({
+			branch: data.branch,
+			repository: data.repository.repo,
+			applicationId,
+			owner: data.repository.owner,
+			buildPath: data.buildPath,
+		})
+			.then(async () => {
+				toast.success("Service Provided Saved");
+				await refetch();
+			})
+			.catch(() => {
+				toast.error("Error to save the github provider");
+			});
+	};
+
+	return (
+		<div>
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="grid w-full gap-4 py-3"
+				>
+					<div className="grid md:grid-cols-2 gap-4">
+						<FormField
+							control={form.control}
+							name="repository"
+							render={({ field }) => (
+								<FormItem className="md:col-span-2 flex flex-col">
+									<FormLabel>Repository</FormLabel>
+									<Popover>
+										<PopoverTrigger asChild>
+											<FormControl>
+												<Button
+													variant="outline"
+													role="combobox"
+													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
+																value={repo.url}
+																key={repo.url}
+																onSelect={() => {
+																	form.setValue("repository", {
+																		owner: repo.owner.login as string,
+																		repo: repo.name,
+																	});
+																	form.setValue("branch", "");
+																}}
+															>
+																{repo.name}
+																<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"
+													role="combobox"
+													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 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?.map((branch) => (
+															<CommandItem
+																value={branch.name}
+																key={branch.commit.sha}
+																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>
+							)}
+						/>
+					</div>
+					<div className="flex w-full justify-end">
+						<Button
+							isLoading={isSavingGithubProvider}
+							type="submit"
+							className="w-fit"
+						>
+							Save
+						</Button>
+					</div>
+				</form>
+			</Form>
+		</div>
+	);
+};

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

@@ -0,0 +1,106 @@
+import { SaveDockerProvider } from "@/components/dashboard/application/general/generic/save-docker-provider";
+import { SaveGitProvider } from "@/components/dashboard/application/general/generic/save-git-provider";
+import { SaveGithubProvider } from "@/components/dashboard/application/general/generic/save-github-provider";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/utils/api";
+import { GitBranch, LockIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { SaveDragNDrop } from "./save-drag-n-drop";
+
+type TabState = "github" | "docker" | "git" | "drop";
+
+interface Props {
+	applicationId: string;
+}
+
+export const ShowProviderForm = ({ applicationId }: Props) => {
+	const { data: haveGithubConfigured } =
+		api.admin.haveGithubConfigured.useQuery();
+
+	const { data: application } = api.application.one.useQuery({ applicationId });
+	const [tab, setSab] = useState<TabState>(application?.sourceType || "github");
+	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>
+				<Tabs
+					value={tab}
+					className="w-full"
+					onValueChange={(e) => {
+						setSab(e as TabState);
+					}}
+				>
+					<TabsList className="grid w-fit grid-cols-4 bg-transparent">
+						<TabsTrigger
+							value="github"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Github
+						</TabsTrigger>
+						<TabsTrigger
+							value="docker"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Docker
+						</TabsTrigger>
+						<TabsTrigger
+							value="git"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Git
+						</TabsTrigger>
+						<TabsTrigger
+							value="drop"
+							className="rounded-none border-b-2 border-b-transparent data-[state=active]:border-b-2 data-[state=active]:border-b-border"
+						>
+							Drop
+						</TabsTrigger>
+					</TabsList>
+					<TabsContent value="github" className="w-full p-2">
+						{haveGithubConfigured ? (
+							<SaveGithubProvider applicationId={applicationId} />
+						) : (
+							<div className="flex flex-col items-center gap-3">
+								<LockIcon className="size-8 text-muted-foreground" />
+								<span className="text-base text-muted-foreground">
+									To deploy using GitHub, you need to configure your account
+									first. Please, go to{" "}
+									<Link
+										href="/dashboard/settings/server"
+										className="text-foreground"
+									>
+										Settings
+									</Link>{" "}
+									to do so.
+								</span>
+							</div>
+						)}
+					</TabsContent>
+					<TabsContent value="docker" className="w-full p-2">
+						<SaveDockerProvider applicationId={applicationId} />
+					</TabsContent>
+					<TabsContent value="git" className="w-full p-2">
+						<SaveGitProvider applicationId={applicationId} />
+					</TabsContent>
+					<TabsContent value="drop" className="w-full p-2">
+						<SaveDragNDrop applicationId={applicationId} />
+					</TabsContent>
+				</Tabs>
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -0,0 +1,81 @@
+import { ShowBuildChooseForm } from "@/components/dashboard/application/build/show";
+import { ShowProviderForm } from "@/components/dashboard/application/general/generic/show";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Toggle } from "@/components/ui/toggle";
+import { api } from "@/utils/api";
+import { CheckCircle2, Terminal } from "lucide-react";
+import React from "react";
+import { toast } from "sonner";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { RedbuildApplication } from "../rebuild-application";
+import { StartApplication } from "../start-application";
+import { StopApplication } from "../stop-application";
+import { DeployApplication } from "./deploy-application";
+import { ResetApplication } from "./reset-application";
+interface Props {
+	applicationId: string;
+}
+
+export const ShowGeneralApplication = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+	const { mutateAsync: update } = api.application.update.useMutation();
+
+	return (
+		<>
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">Deploy Settings</CardTitle>
+				</CardHeader>
+				<CardContent className="flex flex-row gap-4 flex-wrap">
+					<DeployApplication applicationId={applicationId} />
+					<ResetApplication
+						applicationId={applicationId}
+						appName={data?.appName || ""}
+					/>
+
+					<Toggle
+						aria-label="Toggle italic"
+						pressed={data?.autoDeploy || false}
+						onPressedChange={async (enabled) => {
+							await update({
+								applicationId,
+								autoDeploy: enabled,
+							})
+								.then(async () => {
+									toast.success("Auto Deploy Updated");
+									await refetch();
+								})
+								.catch(() => {
+									toast.error("Error to update Auto Deploy");
+								});
+						}}
+						className="flex flex-row gap-2 items-center"
+					>
+						Autodeploy
+						{data?.autoDeploy && <CheckCircle2 className="size-4" />}
+					</Toggle>
+					<RedbuildApplication applicationId={applicationId} />
+					{data?.applicationStatus === "idle" ? (
+						<StartApplication applicationId={applicationId} />
+					) : (
+						<StopApplication applicationId={applicationId} />
+					)}
+					<DockerTerminalModal appName={data?.appName || ""}>
+						<Button variant="outline">
+							<Terminal />
+							Open Terminal
+						</Button>
+					</DockerTerminalModal>
+				</CardContent>
+			</Card>
+			<ShowProviderForm applicationId={applicationId} />
+			<ShowBuildChooseForm applicationId={applicationId} />
+		</>
+	);
+};

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

@@ -0,0 +1,88 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+export const DockerLogs = dynamic(
+	() =>
+		import("@/components/dashboard/docker/logs/docker-logs-id").then(
+			(e) => e.DockerLogsId,
+		),
+	{
+		ssr: false,
+	},
+);
+
+interface Props {
+	appName: string;
+}
+
+export const ShowDockerLogs = ({ appName }: Props) => {
+	const { data } = api.docker.getContainersByAppNameMatch.useQuery(
+		{
+			appName,
+		},
+		{
+			enabled: !!appName,
+		},
+	);
+	const [containerId, setContainerId] = useState<string | undefined>();
+
+	useEffect(() => {
+		if (data && data?.length > 0) {
+			setContainerId(data[0]?.containerId);
+		}
+	}, [data]);
+
+	return (
+		<Card className="bg-background">
+			<CardHeader>
+				<CardTitle className="text-xl">Logs</CardTitle>
+				<CardDescription>
+					Watch the logs of the application in real time
+				</CardDescription>
+			</CardHeader>
+
+			<CardContent className="flex flex-col gap-4">
+				<Label>Select a container to view logs</Label>
+				<Select onValueChange={setContainerId} value={containerId}>
+					<SelectTrigger>
+						<SelectValue placeholder="Select a container" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							{data?.map((container) => (
+								<SelectItem
+									key={container.containerId}
+									value={container.containerId}
+								>
+									{container.name} ({container.containerId}) {container.state}
+								</SelectItem>
+							))}
+							<SelectLabel>Containers ({data?.length})</SelectLabel>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+				<DockerLogs
+					id="terminal"
+					containerId={containerId || "select-a-container"}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,133 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+interface Props {
+	composeId: string;
+}
+
+const AddRedirectSchema = z.object({
+	command: z.string(),
+});
+
+type AddCommand = z.infer<typeof AddRedirectSchema>;
+
+export const AddCommandCompose = ({ composeId }: Props) => {
+	const { data } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+
+	const { data: defaultCommand, refetch } =
+		api.compose.getDefaultCommand.useQuery(
+			{
+				composeId,
+			},
+			{ enabled: !!composeId },
+		);
+
+	const utils = api.useUtils();
+
+	const { mutateAsync, isLoading } = api.compose.update.useMutation();
+
+	const form = useForm<AddCommand>({
+		defaultValues: {
+			command: "",
+		},
+		resolver: zodResolver(AddRedirectSchema),
+	});
+
+	useEffect(() => {
+		if (data?.command) {
+			form.reset({
+				command: data?.command || "",
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data?.command]);
+
+	const onSubmit = async (data: AddCommand) => {
+		await mutateAsync({
+			composeId,
+			command: data?.command,
+		})
+			.then(async () => {
+				toast.success("Command Updated");
+				refetch();
+				await utils.compose.one.invalidate({
+					composeId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error to update the command");
+			});
+	};
+
+	return (
+		<Card className="bg-background">
+			<CardHeader className="flex flex-row justify-between">
+				<div>
+					<CardTitle className="text-xl">Run Command</CardTitle>
+					<CardDescription>
+						Append a custom command to the compose file
+					</CardDescription>
+				</div>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="command"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Command</FormLabel>
+										<FormControl>
+											<Input placeholder="Custom command" {...field} />
+										</FormControl>
+
+										<FormDescription>
+											Default Command ({defaultCommand})
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex justify-end">
+							<Button isLoading={isLoading} type="submit" className="w-fit">
+								Save
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -0,0 +1,63 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { TrashIcon } from "lucide-react";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+
+export const DeleteCompose = ({ composeId }: Props) => {
+	const { mutateAsync, isLoading } = api.compose.delete.useMutation();
+	const { push } = useRouter();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4 text-muted-foreground" />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						compose and all its services.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								composeId,
+							})
+								.then((data) => {
+									push(`/dashboard/project/${data?.projectId}`);
+
+									toast.success("Compose delete succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the compose");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,61 @@
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { Paintbrush } from "lucide-react";
+import { toast } from "sonner";
+
+interface Props {
+	composeId: string;
+}
+
+export const CancelQueuesCompose = ({ composeId }: Props) => {
+	const { mutateAsync, isLoading } = api.compose.cleanQueues.useMutation();
+	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

@@ -0,0 +1,60 @@
+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 React from "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 to update the refresh token");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -0,0 +1,69 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+	logPath: string | null;
+	open: boolean;
+	onClose: () => void;
+}
+export const ShowDeploymentCompose = ({ logPath, open, onClose }: Props) => {
+	const [data, setData] = useState("");
+	const endOfLogsRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open || !logPath) return;
+
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const wsUrl = `${protocol}//${window.location.host}/listen-deployment?logPath=${logPath}`;
+		const ws = new WebSocket(wsUrl);
+
+		ws.onmessage = (e) => {
+			setData((currentData) => currentData + e.data);
+		};
+
+		return () => ws.close();
+	}, [logPath, open]);
+
+	const scrollToBottom = () => {
+		endOfLogsRef.current?.scrollIntoView({ behavior: "smooth" });
+	};
+
+	useEffect(() => {
+		scrollToBottom();
+	}, [data]);
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(e) => {
+				onClose();
+				if (!e) setData("");
+			}}
+		>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Deployment</DialogTitle>
+					<DialogDescription>
+						See all the details of this deployment
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem]">
+					<code>
+						<pre className="whitespace-pre-wrap break-words">
+							{data || "Loading..."}
+						</pre>
+						<div ref={endOfLogsRef} />
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -0,0 +1,121 @@
+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 { 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<string | 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.logPath);
+										}}
+									>
+										View
+									</Button>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+				<ShowDeploymentCompose
+					open={activeLog !== null}
+					onClose={() => setActiveLog(null)}
+					logPath={activeLog}
+				/>
+			</CardContent>
+		</Card>
+	);
+};

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

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

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

@@ -0,0 +1,121 @@
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Toggle } from "@/components/ui/toggle";
+import { api } from "@/utils/api";
+import { CheckCircle2, ExternalLink, Globe, Terminal } from "lucide-react";
+import Link from "next/link";
+import { toast } from "sonner";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+import { DeployCompose } from "./deploy-compose";
+import { RedbuildCompose } from "./rebuild-compose";
+import { StopCompose } from "./stop-compose";
+
+interface Props {
+	composeId: string;
+}
+export const ComposeActions = ({ composeId }: Props) => {
+	const { data, refetch } = api.compose.one.useQuery(
+		{
+			composeId,
+		},
+		{ enabled: !!composeId },
+	);
+	const { mutateAsync: update } = api.compose.update.useMutation();
+
+	const extractDomains = (env: string) => {
+		const lines = env.split("\n");
+		const hostLines = lines.filter((line) => {
+			const [key, value] = line.split("=");
+			return key?.trim().endsWith("_HOST");
+		});
+
+		const hosts = hostLines.map((line) => {
+			const [key, value] = line.split("=");
+			return value ? value.trim() : "";
+		});
+
+		return hosts;
+	};
+
+	const domains = extractDomains(data?.env || "");
+
+	return (
+		<div className="flex flex-row gap-4 w-full flex-wrap ">
+			<DeployCompose composeId={composeId} />
+			<Toggle
+				aria-label="Toggle italic"
+				pressed={data?.autoDeploy || false}
+				onPressedChange={async (enabled) => {
+					await update({
+						composeId,
+						autoDeploy: enabled,
+					})
+						.then(async () => {
+							toast.success("Auto Deploy Updated");
+							await refetch();
+						})
+						.catch(() => {
+							toast.error("Error to update Auto Deploy");
+						});
+				}}
+				className="flex flex-row gap-2 items-center"
+			>
+				Autodeploy {data?.autoDeploy && <CheckCircle2 className="size-4" />}
+			</Toggle>
+			<RedbuildCompose composeId={composeId} />
+			{data?.composeType === "docker-compose" && (
+				<StopCompose composeId={composeId} />
+			)}
+
+			<DockerTerminalModal appName={data?.appName || ""}>
+				<Button variant="outline">
+					<Terminal />
+					Open Terminal
+				</Button>
+			</DockerTerminalModal>
+			{domains.length > 0 && (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline">
+							Domains
+							<Globe className="text-xs size-4 text-muted-foreground" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent className="w-56">
+						<DropdownMenuLabel>Domains detected</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							{domains.map((host, index) => {
+								const url =
+									host.startsWith("http://") || host.startsWith("https://")
+										? host
+										: `http://${host}`;
+
+								return (
+									<DropdownMenuItem
+										key={`domain-${index}`}
+										className="cursor-pointer"
+										asChild
+									>
+										<Link href={url} target="_blank">
+											{host}
+											<ExternalLink className="ml-2 text-xs text-muted-foreground" />
+										</Link>
+									</DropdownMenuItem>
+								);
+							})}
+						</DropdownMenuGroup>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			)}
+		</div>
+	);
+};