refactor: simplify role management by removing unused role schema and related logic; update user role checks in context and procedures

- Replaced the existing invitation creation logic with a new mutation that integrates role and organization checks.
- Updated the invitation form to handle errors more effectively, displaying error messages directly from the API response.
- Introduced a new `member_role` table to manage user roles with associated permissions, ensuring better role management.
- Enhanced SQL migration scripts to create default roles for organizations and update existing member roles accordingly.
- Improved the user router to include a new `createInvitation` procedure for streamlined invitation management.

.github/pull_request_template.md

@@ -1,21 +0,0 @@
-## What is this PR about?
-
-Please describe in a short paragraph what this PR is about.
-
-## Checklist
-
-Before submitting this PR, please make sure that:
-
-- [ ] You created a dedicated branch based on the `canary` branch.
-- [ ] You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
-- [ ] You have tested this PR in your local instance.
-
-## Issues related (if applicable)
-
-Close automatically the related issues using the keywords: `closes #ISSUE_NUMBER`, `fixes #ISSUE_NUMBER`, `resolves #ISSUE_NUMBER`
-
-Example: `closes #123`
-
-## Screenshots (if applicable)
-
-If you include a video or screenshot, would be awesome so we can see the changes in action.

.github/workflows/create-pr.yml

@@ -19,14 +19,17 @@ jobs:
           fetch-depth: 0
 
       - name: Get version from package.json
+        id: package_version
         run: echo "VERSION=$(jq -r .version ./apps/dokploy/package.json)" >> $GITHUB_ENV
 
       - name: Get latest GitHub tag
+        id: latest_tag
         run: |
           LATEST_TAG=$(git ls-remote --tags origin | awk -F'/' '{print $3}' | sort -V | tail -n1)
           echo "LATEST_TAG=$LATEST_TAG" >> $GITHUB_ENV
           echo $LATEST_TAG
       - name: Compare versions
+        id: compare_versions
         run: |
           if [ "${{ env.VERSION }}" != "${{ env.LATEST_TAG }}" ]; then
             VERSION_CHANGED="true"
@@ -39,6 +42,7 @@ jobs:
           echo "Latest tag: ${{ env.LATEST_TAG }}"
           echo "Version changed: $VERSION_CHANGED"
       - name: Check if a PR already exists
+        id: check_pr
         run: |
           PR_EXISTS=$(gh pr list --state open --base main --head canary --json number --jq '. | length')
           echo "PR_EXISTS=$PR_EXISTS" >> $GITHUB_ENV

.github/workflows/deploy.yml

@@ -2,8 +2,7 @@ name: Build Docker images
 
 on:
   push:
-    branches: [main, canary]
-  workflow_dispatch:
+    branches: ["canary", "main", "feat/monitoring"]
 
 jobs:
   build-and-push-cloud-image:

.github/workflows/dokploy.yml

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

.github/workflows/format.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
 
       - name: Setup biomeJs
         uses: biomejs/setup-biome@v2  
 
       - name: Run Biome formatter
-        run:  biome format --write
+        run:  biome format . --write
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # v1.3.2
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef

.github/workflows/pull-request.yml

@@ -4,15 +4,9 @@ on:
   pull_request:
     branches: [main, canary]
 
-permissions:
-  contents: read
-
 jobs:
-  pr-check:
+  lint-and-typecheck:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        job: [build, test, typecheck]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
@@ -21,5 +15,32 @@ jobs:
           node-version: 20.16.0
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
-      - run: pnpm server:build
-      - run: pnpm ${{ matrix.job }}
+      - run: pnpm run server:build
+      - run: pnpm typecheck
+
+  build-and-test:
+    needs: lint-and-typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.16.0
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build
+      - run: pnpm build
+
+  parallel-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.16.0
+          cache: "pnpm"
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run server:build
+      - run: pnpm test

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-	"recommendations": ["biomejs.biome"]
-}

.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "biomejs.biome",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.biome": "explicit",
-		"source.organizeImports.biome": "explicit"
-	}
-}

CONTRIBUTING.md

@@ -87,8 +87,7 @@ pnpm run dokploy:dev
 
 Go to http://localhost:3000 to see the development server
 
-> [!NOTE]
-> This project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
+Note: this project uses Biome. If your editor is configured to use another formatter such as Prettier, it's recommended to either change it to use Biome or turn it off.
 
 ## Build
 
@@ -118,10 +117,10 @@ In the case you lost your password, you can reset it using the following command
 pnpm run reset-password
 ```
 
-If you want to test the webhooks on development mode using localtunnel, make sure to install [`localtunnel`](https://localtunnel.app/)
+If you want to test the webhooks on development mode using localtunnel, make sure to install `localtunnel`
 
 ```bash
-pnpm dlx localtunnel --port 3000
+bunx lt --port 3000
 ```
 
 If you run into permission issues of docker run the following command
@@ -153,7 +152,7 @@ curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.
 
 ## Pull Request
 
-- The `canary` branch is the source of truth and should always reflect the latest stable release.
+- 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.
@@ -162,12 +161,6 @@ curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.35.0/pack-v0.
 - 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.
 
-**Important Considerations for Pull Requests:**
-
-- **Focus and Scope:** Each Pull Request should ideally address a single, well-defined problem or introduce one new feature. This greatly facilitates review and reduces the chances of introducing unintended side effects.
-- **Avoid Unfocused Changes:** Please avoid submitting Pull Requests that contain only minor changes such as whitespace adjustments, IDE-generated formatting, or removal of unused variables, unless these are part of a larger, clearly defined refactor or a dedicated "cleanup" Pull Request that addresses a specific `good first issue` or maintenance task.
-- **Issue Association:** For any significant change, it's highly recommended to open an issue first to discuss the proposed solution with the community and maintainers. This ensures alignment and avoids duplicated effort. If your PR resolves an existing issue, please link it in the description (e.g., `Fixes #123`, `Closes #456`).
-
 Thank you for your contribution!
 
 ## Templates

Dockerfile

@@ -58,7 +58,7 @@ RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && pnpm install -g tsx
 
 # Install Railpack
-ARG RAILPACK_VERSION=0.2.2
+ARG RAILPACK_VERSION=0.0.64
 RUN curl -sSL https://railpack.com/install.sh | bash
 
 # Install buildpacks

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://dokploy.com">
-    <img src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." width="100%"  />
+    <img src=".github/sponsors/logo.png" alt="Dokploy - Open Source Alternative to Vercel, Heroku and Netlify." align="center" width="100%"  />
   </a>
   </br>
   </br>
@@ -13,7 +13,7 @@
 
 Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies the deployment and management of applications and databases.
 
-## ✨ Features
+### Features
 
 Dokploy includes multiple features to make your life easier.
 
@@ -43,7 +43,7 @@ curl -sSL https://dokploy.com/install.sh | sh
 
 For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
-## ♥️ Sponsors
+## Sponsors
 
 🙏 We're deeply grateful to all our sponsors who make Dokploy possible! Your support helps cover the costs of hosting, testing, and developing new features.
 
@@ -95,6 +95,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 
 ### Community Backers 🤝
 
+
 #### Organizations:
 
 [Sponsors on Open Collective](https://opencollective.com/dokploy)
@@ -106,15 +107,15 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 ### Contributors 🤝
 
 <a href="https://github.com/dokploy/dokploy/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=dokploy/dokploy" alt="Contributors" />
+  <img src="https://contrib.rocks/image?repo=dokploy/dokploy" />
 </a>
 
-## 📺 Video Tutorial
+## Video Tutorial
 
 <a href="https://youtu.be/mznYKPvhcfw">
   <img src="https://dokploy.com/banner.png" alt="Watch the video" width="400"/>
 </a>
 
-## 🤝 Contributing
+## Contributing
 
 Check out the [Contributing Guide](CONTRIBUTING.md) for more information.

apps/api/package.json

@@ -29,9 +29,5 @@
 		"tsx": "^4.16.2",
 		"typescript": "^5.8.3"
 	},
-	"packageManager": "pnpm@9.12.0",
-	"engines": {
-		"node": "^20.16.0",
-		"pnpm": ">=9.12.0"
-	}
+	"packageManager": "pnpm@9.5.0"
 }

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

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

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

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

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

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

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

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

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

@@ -108,136 +108,4 @@ describe("createDomainLabels", () => {
 			"traefik.http.services.test-app-1-web.loadbalancer.server.port=3000",
 		);
 	});
-
-	it("should add stripPath middleware when stripPath is enabled", async () => {
-		const stripPathDomain = {
-			...baseDomain,
-			path: "/api",
-			stripPath: true,
-		};
-		const labels = await createDomainLabels(appName, stripPathDomain, "web");
-
-		expect(labels).toContain(
-			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
-		);
-		expect(labels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=stripprefix-test-app-1",
-		);
-	});
-
-	it("should add internalPath middleware when internalPath is set", async () => {
-		const internalPathDomain = {
-			...baseDomain,
-			internalPath: "/hello",
-		};
-		const webLabels = await createDomainLabels(
-			appName,
-			internalPathDomain,
-			"web",
-		);
-		const websecureLabels = await createDomainLabels(
-			appName,
-			internalPathDomain,
-			"websecure",
-		);
-
-		// Middleware definition should only appear in web entrypoint
-		expect(webLabels).toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-		expect(websecureLabels).not.toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-
-		// Both routers should reference the middleware
-		expect(webLabels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=addprefix-test-app-1",
-		);
-		expect(websecureLabels).toContain(
-			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
-		);
-	});
-
-	it("should combine HTTPS redirect with internalPath middleware in correct order", async () => {
-		const combinedDomain = {
-			...baseDomain,
-			https: true,
-			internalPath: "/hello",
-		};
-		const webLabels = await createDomainLabels(appName, combinedDomain, "web");
-		const websecureLabels = await createDomainLabels(
-			appName,
-			combinedDomain,
-			"websecure",
-		);
-
-		// Web entrypoint should have both middlewares with redirect first
-		expect(webLabels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,addprefix-test-app-1",
-		);
-
-		// Websecure should only have the addprefix middleware
-		expect(websecureLabels).toContain(
-			"traefik.http.routers.test-app-1-websecure.middlewares=addprefix-test-app-1",
-		);
-
-		// Middleware definition should only appear once (in web)
-		expect(webLabels).toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-		expect(websecureLabels).not.toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-	});
-
-	it("should combine all middlewares in correct order", async () => {
-		const fullDomain = {
-			...baseDomain,
-			https: true,
-			path: "/api",
-			stripPath: true,
-			internalPath: "/hello",
-		};
-		const webLabels = await createDomainLabels(appName, fullDomain, "web");
-
-		// Should have all middleware definitions (only in web)
-		expect(webLabels).toContain(
-			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
-		);
-		expect(webLabels).toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-
-		// Should have middlewares in correct order: redirect, stripprefix, addprefix
-		expect(webLabels).toContain(
-			"traefik.http.routers.test-app-1-web.middlewares=redirect-to-https@file,stripprefix-test-app-1,addprefix-test-app-1",
-		);
-	});
-
-	it("should not add middleware definitions for websecure entrypoint", async () => {
-		const internalPathDomain = {
-			...baseDomain,
-			path: "/api",
-			stripPath: true,
-			internalPath: "/hello",
-		};
-		const websecureLabels = await createDomainLabels(
-			appName,
-			internalPathDomain,
-			"websecure",
-		);
-
-		// Should not contain any middleware definitions
-		expect(websecureLabels).not.toContain(
-			"traefik.http.middlewares.stripprefix-test-app-1.stripprefix.prefixes=/api",
-		);
-		expect(websecureLabels).not.toContain(
-			"traefik.http.middlewares.addprefix-test-app-1.addprefix.prefix=/hello",
-		);
-
-		// But should reference the middlewares
-		expect(websecureLabels).toContain(
-			"traefik.http.routers.test-app-1-websecure.middlewares=stripprefix-test-app-1,addprefix-test-app-1",
-		);
-	});
 });

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

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

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

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

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

@@ -1,10 +1,10 @@
-import type { ComposeSpecification } from "@dokploy/server";
+import { generateRandomHash } from "@dokploy/server";
 import {
 	addSuffixToAllNetworks,
-	addSuffixToNetworksRoot,
 	addSuffixToServiceNetworks,
-	generateRandomHash,
 } from "@dokploy/server";
+import { addSuffixToNetworksRoot } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-import type { ComposeSpecification } from "@dokploy/server";
 import {
 	addSuffixToAllServiceNames,
 	addSuffixToServiceNames,
 } from "@dokploy/server";
+import type { ComposeSpecification } from "@dokploy/server";
 import { load } from "js-yaml";
 import { expect, test } from "vitest";
 

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
 import { extractCommitMessage } from "@/pages/api/deploy/[refreshToken]";
+import { describe, expect, it } from "vitest";
 
 describe("GitHub Webhook Skip CI", () => {
 	const mockGithubHeaders = {

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

@@ -1,12 +1,12 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { paths } from "@dokploy/server/constants";
+const { APPLICATIONS_PATH } = paths();
 import type { ApplicationNested } from "@dokploy/server";
 import { unzipDrop } from "@dokploy/server";
-import { paths } from "@dokploy/server/constants";
 import AdmZip from "adm-zip";
 import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 
-const { APPLICATIONS_PATH } = paths();
 vi.mock("@dokploy/server/constants", async (importOriginal) => {
 	const actual = await importOriginal();
 	return {
@@ -25,12 +25,10 @@ if (typeof window === "undefined") {
 }
 
 const baseApp: ApplicationNested = {
-	railpackVersion: "0.2.2",
 	applicationId: "",
 	herokuVersion: "",
 	giteaBranch: "",
 	giteaBuildPath: "",
-	previewRequireCollaboratorPermissions: false,
 	giteaId: "",
 	giteaOwner: "",
 	giteaRepository: "",
@@ -143,7 +141,7 @@ describe("unzipDrop using real zip files", () => {
 			const outputPath = path.join(APPLICATIONS_PATH, baseApp.appName, "code");
 			const zip = new AdmZip("./__test__/drop/zips/single-file.zip");
 			console.log(`Output Path: ${outputPath}`);
-			const zipBuffer = zip.toBuffer() as Buffer<ArrayBuffer>;
+			const zipBuffer = zip.toBuffer();
 			const file = new File([zipBuffer], "single.zip");
 			await unzipDrop(file, baseApp);
 			const files = await fs.readdir(outputPath, { withFileTypes: true });

apps/dokploy/__test__/requests/request.test.ts

@@ -1,6 +1,5 @@
 import { parseRawConfig, processLogs } from "@dokploy/server";
 import { describe, expect, it } from "vitest";
-
 const sampleLogEntry = `{"ClientAddr":"172.19.0.1:56732","ClientHost":"172.19.0.1","ClientPort":"56732","ClientUsername":"-","DownstreamContentSize":0,"DownstreamStatus":304,"Duration":14729375,"OriginContentSize":0,"OriginDuration":14051833,"OriginStatus":304,"Overhead":677542,"RequestAddr":"s222-umami-c381af.traefik.me","RequestContentSize":0,"RequestCount":122,"RequestHost":"s222-umami-c381af.traefik.me","RequestMethod":"GET","RequestPath":"/dashboard?_rsc=1rugv","RequestPort":"-","RequestProtocol":"HTTP/1.1","RequestScheme":"http","RetryAttempts":0,"RouterName":"s222-umami-60e104-47-web@docker","ServiceAddr":"10.0.1.15:3000","ServiceName":"s222-umami-60e104-47-web@docker","ServiceURL":{"Scheme":"http","Opaque":"","User":null,"Host":"10.0.1.15:3000","Path":"","RawPath":"","ForceQuery":false,"RawQuery":"","Fragment":"","RawFragment":""},"StartLocal":"2024-08-25T04:34:37.306691884Z","StartUTC":"2024-08-25T04:34:37.306691884Z","entryPointName":"web","level":"info","msg":"","time":"2024-08-25T04:34:37Z"}`;
 
 describe("processLogs", () => {

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

@@ -5,7 +5,8 @@ vi.mock("node:fs", () => ({
 	default: fs,
 }));
 
-import type { FileConfig, User } from "@dokploy/server";
+import type { FileConfig } from "@dokploy/server";
+import type { WebServer } from "@dokploy/server/db/schema";
 import {
 	createDefaultServerTraefikConfig,
 	loadOrCreateConfig,
@@ -13,11 +14,8 @@ import {
 } from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
-const baseAdmin: User = {
+const baseAdmin: WebServer = {
 	https: false,
-	enablePaidFeatures: false,
-	allowImpersonation: false,
-	role: "user",
 	metricsConfig: {
 		containers: {
 			refreshRate: 20,
@@ -40,10 +38,6 @@ const baseAdmin: User = {
 			urlCallback: "",
 		},
 	},
-	cleanupCacheApplications: false,
-	cleanupCacheOnCompose: false,
-	cleanupCacheOnPreviews: false,
-	createdAt: new Date(),
 	serverIp: null,
 	certificateType: "none",
 	host: null,
@@ -51,22 +45,7 @@ const baseAdmin: User = {
 	sshPrivateKey: null,
 	enableDockerCleanup: false,
 	logCleanupCron: null,
-	serversQuantity: 0,
-	stripeCustomerId: "",
-	stripeSubscriptionId: "",
-	banExpires: new Date(),
-	banned: true,
-	banReason: "",
-	email: "",
-	expirationDate: "",
-	id: "",
-	isRegistered: false,
-	name: "",
-	createdAt2: new Date().toISOString(),
-	emailVerified: false,
-	image: "",
-	updatedAt: new Date(),
-	twoFactorEnabled: false,
+	webServerId: "1",
 };
 
 beforeEach(() => {
@@ -85,8 +64,6 @@ test("Should apply redirect-to-https", () => {
 	updateServerTraefik(
 		{
 			...baseAdmin,
-			https: true,
-			certificateType: "letsencrypt",
 		},
 		"example.com",
 	);

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

@@ -1,9 +1,10 @@
-import type { ApplicationNested, Domain, Redirect } from "@dokploy/server";
+import type { Domain } from "@dokploy/server";
+import type { Redirect } from "@dokploy/server";
+import type { ApplicationNested } from "@dokploy/server";
 import { createRouterConfig } from "@dokploy/server";
 import { expect, test } from "vitest";
 
 const baseApp: ApplicationNested = {
-	railpackVersion: "0.2.2",
 	rollbackActive: false,
 	applicationId: "",
 	herokuVersion: "",
@@ -17,7 +18,6 @@ const baseApp: ApplicationNested = {
 	appName: "",
 	autoDeploy: true,
 	enableSubmodules: false,
-	previewRequireCollaboratorPermissions: false,
 	serverId: "",
 	branch: null,
 	dockerBuildStage: "",

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

@@ -1,9 +1,3 @@
-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";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -32,6 +26,12 @@ import {
 	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({
@@ -181,38 +181,21 @@ const addSwarmSettings = z.object({
 type AddSwarmSettings = z.infer<typeof addSwarmSettings>;
 
 interface Props {
-	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	applicationId: string;
 }
 
-export const AddSwarmSettings = ({ id, type }: Props) => {
-	const queryMap = {
-		postgres: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-	};
-	const { data, refetch } = queryMap[type]
-		? queryMap[type]()
-		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+export const AddSwarmSettings = ({ applicationId }: Props) => {
+	const { data, refetch } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{
+			enabled: !!applicationId,
+		},
+	);
 
-	const mutationMap = {
-		postgres: () => api.postgres.update.useMutation(),
-		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
-	};
-
-	const { mutateAsync, isError, error, isLoading } = mutationMap[type]
-		? mutationMap[type]()
-		: api.mongo.update.useMutation();
+	const { mutateAsync, isError, error, isLoading } =
+		api.application.update.useMutation();
 
 	const form = useForm<AddSwarmSettings>({
 		defaultValues: {
@@ -261,12 +244,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 
 	const onSubmit = async (data: AddSwarmSettings) => {
 		await mutateAsync({
-			applicationId: id || "",
-			postgresId: id || "",
-			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			mongoId: id || "",
+			applicationId,
 			healthCheckSwarm: data.healthCheckSwarm,
 			restartPolicySwarm: data.restartPolicySwarm,
 			placementSwarm: data.placementSwarm,
@@ -292,7 +270,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 					Swarm Settings
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-5xl">
+			<DialogContent className="sm:max-w-5xl p-0">
 				<DialogHeader>
 					<DialogTitle>Swarm Settings</DialogTitle>
 					<DialogDescription>
@@ -300,10 +278,10 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-				<div>
+				<div className="px-4">
 					<AlertBlock type="info">
-						Changing settings such as placements may cause the logs/monitoring,
-						backups and other features to be unavailable.
+						Changing settings such as placements may cause the logs/monitoring
+						to be unavailable.
 					</AlertBlock>
 				</div>
 
@@ -311,13 +289,13 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 					<form
 						id="hook-form-add-permissions"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4 relative mt-4"
+						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 ">
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
 									<FormLabel>Health Check</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -373,7 +351,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="restartPolicySwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
 									<FormLabel>Restart Policy</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -427,7 +405,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="placementSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative   max-lg:px-4 lg:pl-6 ">
 									<FormLabel>Placement</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -493,7 +471,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="updateConfigSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
 									<FormLabel>Update Config</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -551,7 +529,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="rollbackConfigSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative  max-lg:px-4 lg:pl-6 ">
 									<FormLabel>Rollback Config</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -609,7 +587,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="modeSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative  max-lg:px-4 lg:pr-6 ">
 									<FormLabel>Mode</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -672,7 +650,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="networkSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative max-lg:px-4 lg:pl-6 ">
 									<FormLabel>Network</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>
@@ -731,7 +709,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
 							control={form.control}
 							name="labelsSwarm"
 							render={({ field }) => (
-								<FormItem className="relative ">
+								<FormItem className="relative max-lg:px-4 lg:pr-6 ">
 									<FormLabel>Labels</FormLabel>
 									<TooltipProvider delayDuration={0}>
 										<Tooltip>

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

@@ -1,10 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Server } from "lucide-react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -33,57 +26,43 @@ import {
 	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 { 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 {
-	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	applicationId: string;
 }
 
 const AddRedirectchema = z.object({
 	replicas: z.number().min(1, "Replicas must be at least 1"),
-	registryId: z.string().optional(),
+	registryId: z.string(),
 });
 
 type AddCommand = z.infer<typeof AddRedirectchema>;
 
-export const ShowClusterSettings = ({ id, type }: Props) => {
-	const queryMap = {
-		postgres: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-	};
-	const { data, refetch } = queryMap[type]
-		? queryMap[type]()
-		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+export const ShowClusterSettings = ({ applicationId }: Props) => {
+	const { data } = api.application.one.useQuery(
+		{
+			applicationId,
+		},
+		{ enabled: !!applicationId },
+	);
+
 	const { data: registries } = api.registry.all.useQuery();
 
-	const mutationMap = {
-		postgres: () => api.postgres.update.useMutation(),
-		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
-	};
+	const utils = api.useUtils();
 
-	const { mutateAsync, isLoading } = mutationMap[type]
-		? mutationMap[type]()
-		: api.mongo.update.useMutation();
+	const { mutateAsync, isLoading } = api.application.update.useMutation();
 
 	const form = useForm<AddCommand>({
 		defaultValues: {
-			...(type === "application" && data && "registryId" in data
-				? {
-						registryId: data?.registryId || "",
-					}
-				: {}),
+			registryId: data?.registryId || "",
 			replicas: data?.replicas || 1,
 		},
 		resolver: zodResolver(AddRedirectchema),
@@ -92,11 +71,7 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 	useEffect(() => {
 		if (data?.command) {
 			form.reset({
-				...(type === "application" && data && "registryId" in data
-					? {
-							registryId: data?.registryId || "",
-						}
-					: {}),
+				registryId: data?.registryId || "",
 				replicas: data?.replicas || 1,
 			});
 		}
@@ -104,25 +79,18 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 
 	const onSubmit = async (data: AddCommand) => {
 		await mutateAsync({
-			applicationId: id || "",
-			postgresId: id || "",
-			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			mongoId: id || "",
-			...(type === "application"
-				? {
-						registryId:
-							data?.registryId === "none" || !data?.registryId
-								? null
-								: data?.registryId,
-					}
-				: {}),
+			applicationId,
+			registryId:
+				data?.registryId === "none" || !data?.registryId
+					? null
+					: data?.registryId,
 			replicas: data?.replicas,
 		})
 			.then(async () => {
 				toast.success("Command Updated");
-				await refetch();
+				await utils.application.one.invalidate({
+					applicationId,
+				});
 			})
 			.catch(() => {
 				toast.error("Error updating the command");
@@ -135,10 +103,10 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Cluster Settings</CardTitle>
 					<CardDescription>
-						Modify swarm settings for the service.
+						Add the registry and the replicas of the application
 					</CardDescription>
 				</div>
-				<AddSwarmSettings id={id} type={type} />
+				<AddSwarmSettings applicationId={applicationId} />
 			</CardHeader>
 			<CardContent className="flex flex-col gap-4">
 				<AlertBlock type="info">
@@ -176,62 +144,58 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 							/>
 						</div>
 
-						{type === "application" && (
+						{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>
+						) : (
 							<>
-								{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>
-											)}
-										/>
-									</>
-								)}
+								<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>
+									)}
+								/>
 							</>
 						)}
 

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

@@ -1,9 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm, useWatch } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -32,6 +26,12 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useState } 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),
@@ -80,11 +80,6 @@ export const HandlePorts = ({
 		resolver: zodResolver(AddPortSchema),
 	});
 
-	const publishMode = useWatch({
-		control: form.control,
-		name: "publishMode",
-	});
-
 	useEffect(() => {
 		form.reset({
 			publishedPort: data?.publishedPort ?? 0,
@@ -258,16 +253,6 @@ export const HandlePorts = ({
 						</div>
 					</form>
 
-					{publishMode === "host" && (
-						<AlertBlock type="warning" className="mt-4">
-							<strong>Host Mode Limitation:</strong> When using Host publish
-							mode, Docker Swarm has limitations that prevent proper container
-							updates during deployments. Old containers may not be replaced
-							automatically. Consider using Ingress mode instead, or be prepared
-							to manually stop/start the application after deployments.
-						</AlertBlock>
-					)}
-
 					<DialogFooter>
 						<Button
 							isLoading={isLoading}

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

@@ -151,7 +151,7 @@ export const HandleSecurity = ({
 									<FormItem>
 										<FormLabel>Password</FormLabel>
 										<FormControl>
-											<Input placeholder="test" type="password" {...field} />
+											<Input placeholder="test" {...field} />
 										</FormControl>
 
 										<FormMessage />

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

@@ -7,9 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { LockKeyhole, Trash2 } from "lucide-react";
 import { toast } from "sonner";
@@ -61,18 +58,19 @@ export const ShowSecurity = ({ applicationId }: Props) => {
 						<div className="flex flex-col gap-6 ">
 							{data?.security.map((security) => (
 								<div key={security.securityId}>
-									<div className="flex w-full flex-col md:flex-row justify-between md:items-center gap-4 md:gap-10 border rounded-lg p-4">
-										<div className="grid grid-cols-1 md:grid-cols-2 flex-col gap-4 md:gap-8">
-											<div className="flex flex-col gap-2">
-												<Label>Username</Label>
-												<Input disabled value={security.username} />
+									<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-2">
-												<Label>Password</Label>
-												<ToggleVisibilityInput
-													value={security.password}
-													disabled
-												/>
+											<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">

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

@@ -48,7 +48,7 @@ export const ShowTraefikConfig = ({ applicationId }: Props) => {
 					</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">
+						<div className="flex flex-col gap-6 max-h-[35rem] min-h-[10rem]">
 							<CodeEditor
 								lineWrapping
 								value={data || "Empty"}

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

@@ -1,5 +1,3 @@
-import { Package, Trash2 } from "lucide-react";
-import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
@@ -11,10 +9,11 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
+import { Package, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
 import { UpdateVolume } from "./update-volume";
-
 interface Props {
 	id: string;
 	type: ServiceType | "compose";
@@ -81,7 +80,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 										className="flex w-full flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-10 border rounded-lg p-4"
 									>
 										{/* <Package className="size-8 self-center text-muted-foreground" /> */}
-										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 flex-col gap-4 sm:gap-8">
+										<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 flex-col gap-4 sm:gap-8">
 											<div className="flex flex-col gap-1">
 												<span className="font-medium">Mount Type</span>
 												<span className="text-sm text-muted-foreground">
@@ -113,21 +112,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 													</span>
 												</div>
 											)}
-											{mount.type === "file" && (
+											{mount.type === "file" ? (
 												<div className="flex flex-col gap-1">
 													<span className="font-medium">File Path</span>
 													<span className="text-sm text-muted-foreground">
 														{mount.filePath}
 													</span>
 												</div>
+											) : (
+												<div className="flex flex-col gap-1">
+													<span className="font-medium">Mount Path</span>
+													<span className="text-sm text-muted-foreground">
+														{mount.mountPath}
+													</span>
+												</div>
 											)}
-
-											<div className="flex flex-col gap-1">
-												<span className="font-medium">Mount Path</span>
-												<span className="text-sm text-muted-foreground">
-													{mount.mountPath}
-												</span>
-											</div>
 										</div>
 										<div className="flex flex-row gap-1">
 											<UpdateVolume

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

@@ -1,9 +1,3 @@
-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";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -21,6 +15,12 @@ import {
 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";
 
 export enum BuildType {
 	dockerfile = "dockerfile",
@@ -65,7 +65,6 @@ const mySchema = z.discriminatedUnion("buildType", [
 	}),
 	z.object({
 		buildType: z.literal(BuildType.railpack),
-		railpackVersion: z.string().nullable().default("0.2.2"),
 	}),
 	z.object({
 		buildType: z.literal(BuildType.static),
@@ -87,7 +86,6 @@ interface ApplicationData {
 	herokuVersion?: string | null;
 	publishDirectory?: string | null;
 	isStaticSpa?: boolean | null;
-	railpackVersion?: string | null | undefined;
 }
 
 function isValidBuildType(value: string): value is BuildType {
@@ -125,7 +123,6 @@ const resetData = (data: ApplicationData): AddTemplate => {
 		case BuildType.railpack:
 			return {
 				buildType: BuildType.railpack,
-				railpackVersion: data.railpackVersion || null,
 			};
 		default: {
 			const buildType = data.buildType as BuildType;
@@ -184,10 +181,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 					: null,
 			isStaticSpa:
 				data.buildType === BuildType.static ? data.isStaticSpa : null,
-			railpackVersion:
-				data.buildType === BuildType.railpack
-					? data.railpackVersion || "0.2.2"
-					: null,
 		})
 			.then(async () => {
 				toast.success("Build type saved");
@@ -402,25 +395,6 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 								)}
 							/>
 						)}
-						{buildType === BuildType.railpack && (
-							<FormField
-								control={form.control}
-								name="railpackVersion"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Railpack Version</FormLabel>
-										<FormControl>
-											<Input
-												placeholder="Railpack Version"
-												{...field}
-												value={field.value ?? ""}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
 						<div className="flex w-full justify-end">
 							<Button isLoading={isLoading} type="submit">
 								Save

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

@@ -158,7 +158,7 @@ export const ShowDeployment = ({
 				<div
 					ref={scrollRef}
 					onScroll={handleScroll}
-					className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+					className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 				>
 					{" "}
 					{filteredLogs.length > 0 ? (

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

@@ -1,5 +1,4 @@
 import { DateTooltip } from "@/components/shared/date-tooltip";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -11,13 +10,14 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { type RouterOutputs, api } from "@/utils/api";
-import { Clock, Loader2, RefreshCcw, RocketIcon, Settings } from "lucide-react";
+import { Clock, Loader2, RocketIcon, Settings, RefreshCcw } from "lucide-react";
 import React, { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
 import { CancelQueues } from "./cancel-queues";
 import { RefreshToken } from "./refresh-token";
 import { ShowDeployment } from "./show-deployment";
+import { ShowRollbackSettings } from "../rollbacks/show-rollback-settings";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { toast } from "sonner";
 
 interface Props {
 	id: string;

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

@@ -1,10 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import z from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -41,6 +34,14 @@ import {
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DatabaseZap, Dices, RefreshCw } from "lucide-react";
+import Link from "next/link";
+import z from "zod";
 
 export type CacheType = "fetch" | "cache";
 
@@ -122,7 +123,6 @@ interface Props {
 export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [cacheType, setCacheType] = useState<CacheType>("cache");
-	const [isManualInput, setIsManualInput] = useState(false);
 
 	const utils = api.useUtils();
 	const { data, refetch } = api.domain.one.useQuery(
@@ -325,126 +325,46 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 													<FormItem className="w-full">
 														<FormLabel>Service Name</FormLabel>
 														<div className="flex gap-2">
-															{isManualInput ? (
+															<Select
+																onValueChange={field.onChange}
+																defaultValue={field.value || ""}
+															>
 																<FormControl>
-																	<Input
-																		placeholder="Enter service name manually"
-																		{...field}
-																		className="w-full"
-																	/>
+																	<SelectTrigger>
+																		<SelectValue placeholder="Select a service name" />
+																	</SelectTrigger>
 																</FormControl>
-															) : (
-																<Select
-																	onValueChange={field.onChange}
-																	defaultValue={field.value || ""}
-																>
-																	<FormControl>
-																		<SelectTrigger>
-																			<SelectValue placeholder="Select a service name" />
-																		</SelectTrigger>
-																	</FormControl>
 
-																	<SelectContent>
-																		{services?.map((service, index) => (
-																			<SelectItem
-																				value={service}
-																				key={`${service}-${index}`}
-																			>
-																				{service}
-																			</SelectItem>
-																		))}
-																		<SelectItem value="none" disabled>
-																			Empty
+																<SelectContent>
+																	{services?.map((service, index) => (
+																		<SelectItem
+																			value={service}
+																			key={`${service}-${index}`}
+																		>
+																			{service}
 																		</SelectItem>
-																	</SelectContent>
-																</Select>
-															)}
-															{!isManualInput && (
-																<>
-																	<TooltipProvider delayDuration={0}>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="secondary"
-																					type="button"
-																					isLoading={isLoadingServices}
-																					onClick={() => {
-																						if (cacheType === "fetch") {
-																							refetchServices();
-																						} else {
-																							setCacheType("fetch");
-																						}
-																					}}
-																				>
-																					<RefreshCw className="size-4 text-muted-foreground" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent
-																				side="left"
-																				sideOffset={5}
-																				className="max-w-[10rem]"
-																			>
-																				<p>
-																					Fetch: Will clone the repository and
-																					load the services
-																				</p>
-																			</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																	<TooltipProvider delayDuration={0}>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="secondary"
-																					type="button"
-																					isLoading={isLoadingServices}
-																					onClick={() => {
-																						if (cacheType === "cache") {
-																							refetchServices();
-																						} else {
-																							setCacheType("cache");
-																						}
-																					}}
-																				>
-																					<DatabaseZap className="size-4 text-muted-foreground" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent
-																				side="left"
-																				sideOffset={5}
-																				className="max-w-[10rem]"
-																			>
-																				<p>
-																					Cache: If you previously deployed this
-																					compose, it will read the services
-																					from the last deployment/fetch from
-																					the repository
-																				</p>
-																			</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																</>
-															)}
+																	))}
+																	<SelectItem value="none" disabled>
+																		Empty
+																	</SelectItem>
+																</SelectContent>
+															</Select>
 															<TooltipProvider delayDuration={0}>
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<Button
 																			variant="secondary"
 																			type="button"
+																			isLoading={isLoadingServices}
 																			onClick={() => {
-																				setIsManualInput(!isManualInput);
-																				if (!isManualInput) {
-																					field.onChange("");
+																				if (cacheType === "fetch") {
+																					refetchServices();
+																				} else {
+																					setCacheType("fetch");
 																				}
 																			}}
 																		>
-																			{isManualInput ? (
-																				<RefreshCw className="size-4 text-muted-foreground" />
-																			) : (
-																				<span className="text-xs text-muted-foreground">
-																					Manual
-																				</span>
-																			)}
+																			<RefreshCw className="size-4 text-muted-foreground" />
 																		</Button>
 																	</TooltipTrigger>
 																	<TooltipContent
@@ -453,9 +373,40 @@ export const AddDomain = ({ id, type, domainId = "", children }: Props) => {
 																		className="max-w-[10rem]"
 																	>
 																		<p>
-																			{isManualInput
-																				? "Switch to service selection"
-																				: "Enter service name manually"}
+																			Fetch: Will clone the repository and load
+																			the services
+																		</p>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+															<TooltipProvider delayDuration={0}>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Button
+																			variant="secondary"
+																			type="button"
+																			isLoading={isLoadingServices}
+																			onClick={() => {
+																				if (cacheType === "cache") {
+																					refetchServices();
+																				} else {
+																					setCacheType("cache");
+																				}
+																			}}
+																		>
+																			<DatabaseZap className="size-4 text-muted-foreground" />
+																		</Button>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		side="left"
+																		sideOffset={5}
+																		className="max-w-[10rem]"
+																	>
+																		<p>
+																			Cache: If you previously deployed this
+																			compose, it will read the services from
+																			the last deployment/fetch from the
+																			repository
 																		</p>
 																	</TooltipContent>
 																</Tooltip>

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

@@ -71,7 +71,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 	const [validationStates, setValidationStates] = useState<ValidationStates>(
 		{},
 	);
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 
 	const {
 		data,
@@ -110,7 +110,9 @@ export const ShowDomains = ({ id, type }: Props) => {
 			const result = await validateDomain({
 				domain: host,
 				serverIp:
-					application?.server?.ipAddress?.toString() || ip?.toString() || "",
+					application?.server?.ipAddress?.toString() ||
+					webServer?.serverIp?.toString() ||
+					"",
 			});
 
 			setValidationStates((prev) => ({
@@ -210,7 +212,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 																}}
 																serverIp={
 																	application?.server?.ipAddress?.toString() ||
-																	ip?.toString()
+																	webServer?.serverIp?.toString()
 																}
 															/>
 														)}

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

@@ -1,5 +1,4 @@
 import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 import {
 	Dialog,
 	DialogContent,
@@ -28,15 +27,9 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { HelpCircle, Plus, Settings2, X } from "lucide-react";
+import { Settings2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -49,12 +42,10 @@ const schema = z
 		wildcardDomain: z.string(),
 		port: z.number(),
 		previewLimit: z.number(),
-		previewLabels: z.array(z.string()).optional(),
 		previewHttps: z.boolean(),
 		previewPath: z.string(),
 		previewCertificateType: z.enum(["letsencrypt", "none", "custom"]),
 		previewCustomCertResolver: z.string().optional(),
-		previewRequireCollaboratorPermissions: z.boolean(),
 	})
 	.superRefine((input, ctx) => {
 		if (
@@ -89,11 +80,9 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			wildcardDomain: "*.traefik.me",
 			port: 3000,
 			previewLimit: 3,
-			previewLabels: [],
 			previewHttps: false,
 			previewPath: "/",
 			previewCertificateType: "none",
-			previewRequireCollaboratorPermissions: true,
 		},
 		resolver: zodResolver(schema),
 	});
@@ -111,14 +100,11 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 				buildArgs: data.previewBuildArgs || "",
 				wildcardDomain: data.previewWildcard || "*.traefik.me",
 				port: data.previewPort || 3000,
-				previewLabels: data.previewLabels || [],
 				previewLimit: data.previewLimit || 3,
 				previewHttps: data.previewHttps || false,
 				previewPath: data.previewPath || "/",
 				previewCertificateType: data.previewCertificateType || "none",
 				previewCustomCertResolver: data.previewCustomCertResolver || "",
-				previewRequireCollaboratorPermissions:
-					data.previewRequireCollaboratorPermissions || true,
 			});
 		}
 	}, [data]);
@@ -129,15 +115,12 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 			previewBuildArgs: formData.buildArgs,
 			previewWildcard: formData.wildcardDomain,
 			previewPort: formData.port,
-			previewLabels: formData.previewLabels,
 			applicationId,
 			previewLimit: formData.previewLimit,
 			previewHttps: formData.previewHttps,
 			previewPath: formData.previewPath,
 			previewCertificateType: formData.previewCertificateType,
 			previewCustomCertResolver: formData.previewCustomCertResolver,
-			previewRequireCollaboratorPermissions:
-				formData.previewRequireCollaboratorPermissions,
 		})
 			.then(() => {
 				toast.success("Preview Deployments settings updated");
@@ -211,90 +194,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 											</FormItem>
 										)}
 									/>
-									<FormField
-										control={form.control}
-										name="previewLabels"
-										render={({ field }) => (
-											<FormItem className="md:col-span-2">
-												<div className="flex items-center gap-2">
-													<FormLabel>Preview Labels</FormLabel>
-													<TooltipProvider>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-															</TooltipTrigger>
-															<TooltipContent>
-																<p>
-																	Add a labels that will trigger a preview
-																	deployment for a pull request. If no labels
-																	are specified, all pull requests will trigger
-																	a preview deployment.
-																</p>
-															</TooltipContent>
-														</Tooltip>
-													</TooltipProvider>
-												</div>
-												<div className="flex flex-wrap gap-2 mb-2">
-													{field.value?.map((label, index) => (
-														<Badge
-															key={index}
-															variant="secondary"
-															className="flex items-center gap-1"
-														>
-															{label}
-															<X
-																className="size-3 cursor-pointer hover:text-destructive"
-																onClick={() => {
-																	const newLabels = [...(field.value || [])];
-																	newLabels.splice(index, 1);
-																	field.onChange(newLabels);
-																}}
-															/>
-														</Badge>
-													))}
-												</div>
-												<div className="flex gap-2">
-													<FormControl>
-														<Input
-															placeholder="Enter a label (e.g. enhancements, needs-review)"
-															onKeyDown={(e) => {
-																if (e.key === "Enter") {
-																	e.preventDefault();
-																	const input = e.currentTarget;
-																	const label = input.value.trim();
-																	if (label) {
-																		field.onChange([
-																			...(field.value || []),
-																			label,
-																		]);
-																		input.value = "";
-																	}
-																}
-															}}
-														/>
-													</FormControl>
-													<Button
-														type="button"
-														variant="outline"
-														size="icon"
-														onClick={() => {
-															const input = document.querySelector(
-																'input[placeholder*="Enter a label"]',
-															) as HTMLInputElement;
-															const label = input.value.trim();
-															if (label) {
-																field.onChange([...(field.value || []), label]);
-																input.value = "";
-															}
-														}}
-													>
-														<Plus className="size-4" />
-													</Button>
-												</div>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
 									<FormField
 										control={form.control}
 										name="previewLimit"
@@ -413,37 +312,6 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 									</div>
 								</div>
 
-								<div className="grid gap-4 lg:grid-cols-2">
-									<FormField
-										control={form.control}
-										name="previewRequireCollaboratorPermissions"
-										render={({ field }) => (
-											<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm col-span-2">
-												<div className="space-y-0.5">
-													<FormLabel>
-														Require Collaborator Permissions
-													</FormLabel>
-													<FormDescription>
-														Require collaborator permissions to preview
-														deployments, valid roles are:
-														<ul>
-															<li>Admin</li>
-															<li>Maintain</li>
-															<li>Write</li>
-														</ul>
-													</FormDescription>
-												</div>
-												<FormControl>
-													<Switch
-														checked={field.value}
-														onCheckedChange={field.onChange}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								</div>
-
 								<FormField
 									control={form.control}
 									name="env"

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

@@ -1,4 +1,3 @@
-import { AlertBlock } from "@/components/shared/alert-block";
 import { DrawerLogs } from "@/components/shared/drawer-logs";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -43,8 +42,9 @@ import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { formatBytes } from "../../database/backups/restore-backup";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
+import { formatBytes } from "../../database/backups/restore-backup";
+import { AlertBlock } from "@/components/shared/alert-block";
 
 interface Props {
 	id: string;

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

@@ -23,8 +23,8 @@ import {
 	Trash2,
 } from "lucide-react";
 import { toast } from "sonner";
-import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { HandleVolumeBackups } from "./handle-volume-backups";
+import { ShowDeploymentsModal } from "../deployments/show-deployments-modal";
 import { RestoreVolumeBackups } from "./restore-volume-backups";
 
 interface Props {

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

@@ -1,241 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { AlertBlock } from "@/components/shared/alert-block";
-import { CodeEditor } from "@/components/shared/code-editor";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-} from "@/components/ui/form";
-
-import { Switch } from "@/components/ui/switch";
-import { api } from "@/utils/api";
-
-interface Props {
-	composeId: string;
-}
-
-// Schema for Isolated Deployment
-const isolatedSchema = z.object({
-	isolatedDeployment: z.boolean().optional(),
-});
-
-type IsolatedSchema = z.infer<typeof isolatedSchema>;
-
-export const IsolatedDeploymentTab = ({ composeId }: Props) => {
-	const utils = api.useUtils();
-	const [compose, setCompose] = useState<string>("");
-	const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(false);
-	const { mutateAsync, error, isError } =
-		api.compose.isolatedDeployment.useMutation();
-
-	const [isOpenPreview, setIsOpenPreview] = useState<boolean>(false);
-
-	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
-
-	const { data, refetch } = api.compose.one.useQuery(
-		{ composeId },
-		{ enabled: !!composeId },
-	);
-
-	const form = useForm<IsolatedSchema>({
-		defaultValues: {
-			isolatedDeployment: false,
-		},
-		resolver: zodResolver(isolatedSchema),
-	});
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				isolatedDeployment: data?.isolatedDeployment || false,
-			});
-		}
-	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
-
-	const onSubmit = async (formData: IsolatedSchema) => {
-		await updateCompose({
-			composeId,
-			isolatedDeployment: formData?.isolatedDeployment || false,
-		})
-			.then(async (_data) => {
-				await refetch();
-				toast.success("Compose updated");
-			})
-			.catch(() => {
-				toast.error("Error updating the compose");
-			});
-	};
-
-	const generatePreview = async () => {
-		setIsOpenPreview(true);
-		setIsPreviewLoading(true);
-		try {
-			await mutateAsync({
-				composeId,
-				suffix: data?.appName || "",
-			}).then(async (data) => {
-				await utils.project.all.invalidate();
-				setCompose(data);
-			});
-		} catch {
-			toast.error("Error generating preview");
-			setIsOpenPreview(false);
-		} finally {
-			setIsPreviewLoading(false);
-		}
-	};
-
-	return (
-		<Card className="bg-background">
-			<CardHeader>
-				<CardTitle className="text-xl">Enable Isolated Deployment</CardTitle>
-				<CardDescription>
-					Configure isolated deployment to the compose file.
-					<div className="text-sm text-muted-foreground flex flex-col gap-2">
-						<span>
-							This feature creates an isolated environment for your deployment
-							by adding unique prefixes to all resources. It establishes a
-							dedicated network based on your compose file's name, ensuring your
-							services run in isolation. This prevents conflicts when running
-							multiple instances of the same template or services with identical
-							names.
-						</span>
-						<div className="space-y-4">
-							<div>
-								<h4 className="font-medium mb-2">
-									Resources that will be isolated:
-								</h4>
-								<ul className="list-disc list-inside">
-									<li>Docker networks</li>
-								</ul>
-							</div>
-						</div>
-					</div>
-				</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div className="space-y-4">
-					{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							id="isolated-deployment-form"
-							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>
-							)}
-
-							<div className="flex flex-col lg:flex-col gap-4 w-full">
-								<div>
-									<FormField
-										control={form.control}
-										name="isolatedDeployment"
-										render={({ field }) => (
-											<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-												<div className="space-y-0.5">
-													<FormLabel>
-														Enable Isolated Deployment ({data?.appName})
-													</FormLabel>
-													<FormDescription>
-														Enable isolated deployment to the compose file.
-													</FormDescription>
-												</div>
-												<FormControl>
-													<Switch
-														checked={field.value}
-														onCheckedChange={field.onChange}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								</div>
-
-								<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
-									<Button
-										form="isolated-deployment-form"
-										type="submit"
-										className="lg:w-fit"
-										isLoading={form.formState.isSubmitting}
-									>
-										Save
-									</Button>
-								</div>
-							</div>
-
-							<div className="flex flex-col lg:flex-row gap-4 w-full items-end justify-end">
-								<Button
-									onClick={generatePreview}
-									isLoading={isPreviewLoading}
-									variant="secondary"
-									className="lg:w-fit"
-								>
-									Preview Compose
-								</Button>
-								<Dialog open={isOpenPreview} onOpenChange={setIsOpenPreview}>
-									<DialogContent className="sm:max-w-6xl max-h-[80vh]">
-										<DialogHeader>
-											<DialogTitle>Isolated Deployment Preview</DialogTitle>
-											<DialogDescription>
-												Preview of the compose file with isolated deployment
-												configuration
-											</DialogDescription>
-										</DialogHeader>
-										<div className="flex flex-col gap-4 overflow-auto">
-											{isPreviewLoading ? (
-												<div className="flex flex-col items-center justify-center py-12 gap-4">
-													<Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
-													<p className="text-muted-foreground">
-														Generating compose preview...
-													</p>
-												</div>
-											) : (
-												<pre>
-													<CodeEditor
-														value={compose || ""}
-														language="yaml"
-														readOnly
-														height="60vh"
-													/>
-												</pre>
-											)}
-										</div>
-									</DialogContent>
-								</Dialog>
-							</div>
-						</form>
-					</Form>
-				</div>
-			</CardContent>
-		</Card>
-	);
-};

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

@@ -1,8 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,7 +8,13 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 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";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
+import { ShowUtilities } from "./show-utilities";
 
 interface Props {
 	composeId: string;
@@ -141,7 +142,9 @@ services:
 					</form>
 				</Form>
 				<div className="flex justify-between flex-col lg:flex-row gap-2">
-					<div className="w-full flex flex-col lg:flex-row gap-4 items-end"></div>
+					<div className="w-full flex flex-col lg:flex-row gap-4 items-end">
+						<ShowUtilities composeId={composeId} />
+					</div>
 					<Button
 						type="submit"
 						form="hook-form-save-compose-file"

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

@@ -1,4 +1,3 @@
-import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
 import {
 	BitbucketIcon,
 	GitIcon,
@@ -12,7 +11,6 @@ import { api } from "@/utils/api";
 import { CodeIcon, GitBranch, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { toast } from "sonner";
 import { ComposeFileEditor } from "../compose-file-editor";
 import { ShowConvertedCompose } from "../show-converted-compose";
 import { SaveBitbucketProviderCompose } from "./save-bitbucket-provider-compose";
@@ -20,6 +18,8 @@ import { SaveGitProviderCompose } from "./save-git-provider-compose";
 import { SaveGiteaProviderCompose } from "./save-gitea-provider-compose";
 import { SaveGithubProviderCompose } from "./save-github-provider-compose";
 import { SaveGitlabProviderCompose } from "./save-gitlab-provider-compose";
+import { UnauthorizedGitProvider } from "@/components/dashboard/application/general/generic/unauthorized-git-provider";
+import { toast } from "sonner";
 
 type TabState = "github" | "git" | "raw" | "gitlab" | "bitbucket" | "gitea";
 interface Props {

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

@@ -0,0 +1,188 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@/components/ui/form";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	composeId: string;
+}
+
+const schema = z.object({
+	isolatedDeployment: z.boolean().optional(),
+});
+
+type Schema = z.infer<typeof schema>;
+
+export const IsolatedDeployment = ({ composeId }: Props) => {
+	const utils = api.useUtils();
+	const [compose, setCompose] = useState<string>("");
+	const { mutateAsync, error, isError } =
+		api.compose.isolatedDeployment.useMutation();
+
+	const { mutateAsync: updateCompose } = api.compose.update.useMutation();
+
+	const { data, refetch } = api.compose.one.useQuery(
+		{ composeId },
+		{ enabled: !!composeId },
+	);
+
+	console.log(data);
+
+	const form = useForm<Schema>({
+		defaultValues: {
+			isolatedDeployment: false,
+		},
+		resolver: zodResolver(schema),
+	});
+
+	useEffect(() => {
+		randomizeCompose();
+		if (data) {
+			form.reset({
+				isolatedDeployment: data?.isolatedDeployment || false,
+			});
+		}
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+	const onSubmit = async (formData: Schema) => {
+		await updateCompose({
+			composeId,
+			isolatedDeployment: formData?.isolatedDeployment || false,
+		})
+			.then(async (_data) => {
+				await randomizeCompose();
+				await refetch();
+				toast.success("Compose updated");
+			})
+			.catch(() => {
+				toast.error("Error updating the compose");
+			});
+	};
+
+	const randomizeCompose = async () => {
+		await mutateAsync({
+			composeId,
+			suffix: data?.appName || "",
+		}).then(async (data) => {
+			await utils.project.all.invalidate();
+			setCompose(data);
+		});
+	};
+
+	return (
+		<>
+			<DialogHeader>
+				<DialogTitle>Isolate Deployment</DialogTitle>
+				<DialogDescription>
+					Use this option to isolate the deployment of this compose file.
+				</DialogDescription>
+			</DialogHeader>
+			<div className="text-sm text-muted-foreground flex flex-col gap-2">
+				<span>
+					This feature creates an isolated environment for your deployment by
+					adding unique prefixes to all resources. It establishes a dedicated
+					network based on your compose file's name, ensuring your services run
+					in isolation. This prevents conflicts when running multiple instances
+					of the same template or services with identical names.
+				</span>
+				<div className="space-y-4">
+					<div>
+						<h4 className="font-medium mb-2">
+							Resources that will be isolated:
+						</h4>
+						<ul className="list-disc list-inside">
+							<li>Docker volumes</li>
+							<li>Docker networks</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					id="hook-form-add-project"
+					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>
+					)}
+
+					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
+						<div>
+							<FormField
+								control={form.control}
+								name="isolatedDeployment"
+								render={({ field }) => (
+									<FormItem className="mt-4 flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+										<div className="space-y-0.5">
+											<FormLabel>
+												Enable Isolated Deployment ({data?.appName})
+											</FormLabel>
+											<FormDescription>
+												Enable isolated deployment to the compose file.
+											</FormDescription>
+										</div>
+										<FormControl>
+											<Switch
+												checked={field.value}
+												onCheckedChange={field.onChange}
+											/>
+										</FormControl>
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<div className="flex flex-col lg:flex-row  gap-4 w-full items-end justify-end">
+							<Button
+								form="hook-form-add-project"
+								type="submit"
+								className="lg:w-fit"
+							>
+								Save
+							</Button>
+						</div>
+					</div>
+					<div className="flex flex-col gap-4">
+						<Label>Preview</Label>
+						<pre>
+							<CodeEditor
+								value={compose || ""}
+								language="yaml"
+								readOnly
+								height="50rem"
+							/>
+						</pre>
+					</div>
+				</form>
+			</Form>
+		</>
+	);
+};

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

@@ -1,6 +1,3 @@
-import { Loader2, Puzzle, RefreshCw } from "lucide-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
@@ -13,6 +10,9 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
+import { Loader2, Puzzle, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 interface Props {
 	composeId: string;
@@ -62,7 +62,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
 
-				<AlertBlock type="info" className="mb-4">
+				<AlertBlock type="info">
 					Preview your docker-compose file with added domains. Note: At least
 					one domain must be specified for this conversion to take effect.
 				</AlertBlock>
@@ -79,7 +79,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 					</div>
 				) : (
 					<>
-						<div className="flex flex-row gap-2 justify-end my-4">
+						<div className="flex flex-row gap-2 justify-end">
 							<Button
 								variant="secondary"
 								isLoading={isLoading}

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

@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useState } from "react";
+import { IsolatedDeployment } from "./isolated-deployment";
+import { RandomizeCompose } from "./randomize-compose";
+
+interface Props {
+	composeId: string;
+}
+
+export const ShowUtilities = ({ composeId }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="ghost">Show Utilities</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-5xl">
+				<DialogHeader>
+					<DialogTitle>Utilities </DialogTitle>
+					<DialogDescription>Modify the application data</DialogDescription>
+				</DialogHeader>
+				<Tabs defaultValue="isolated">
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="isolated">Isolated Deployment</TabsTrigger>
+						<TabsTrigger value="randomize">Randomize Compose</TabsTrigger>
+					</TabsList>
+					<TabsContent value="randomize" className="pt-5">
+						<RandomizeCompose composeId={composeId} />
+					</TabsContent>
+					<TabsContent value="isolated" className="pt-5">
+						<IsolatedDeployment composeId={composeId} />
+					</TabsContent>
+				</Tabs>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

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

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

@@ -1,14 +1,13 @@
-import { Download as DownloadIcon, Loader2, Pause, Play } from "lucide-react";
-import React, { useEffect, useRef } from "react";
-import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import { Download as DownloadIcon, Loader2 } from "lucide-react";
+import React, { useEffect, useRef } from "react";
 import { LineCountFilter } from "./line-count-filter";
 import { SinceLogsFilter, type TimeFilter } from "./since-logs-filter";
 import { StatusLogsFilter } from "./status-logs-filter";
 import { TerminalLine } from "./terminal-line";
-import { getLogType, type LogLine, parseLogs } from "./utils";
+import { type LogLine, getLogType, parseLogs } from "./utils";
 
 interface Props {
 	containerId: string;
@@ -62,9 +61,6 @@ export const DockerLogsId: React.FC<Props> = ({
 	const [showTimestamp, setShowTimestamp] = React.useState(true);
 	const [since, setSince] = React.useState<TimeFilter>("all");
 	const [typeFilter, setTypeFilter] = React.useState<string[]>([]);
-	const [isPaused, setIsPaused] = React.useState(false);
-	const [messageBuffer, setMessageBuffer] = React.useState<string[]>([]);
-	const isPausedRef = useRef(false);
 	const scrollRef = useRef<HTMLDivElement>(null);
 	const [isLoading, setIsLoading] = React.useState(false);
 
@@ -89,38 +85,15 @@ export const DockerLogsId: React.FC<Props> = ({
 	const handleLines = (lines: number) => {
 		setRawLogs("");
 		setFilteredLogs([]);
-		setMessageBuffer([]);
 		setLines(lines);
 	};
 
 	const handleSince = (value: TimeFilter) => {
 		setRawLogs("");
 		setFilteredLogs([]);
-		setMessageBuffer([]);
 		setSince(value);
 	};
 
-	const handlePauseResume = () => {
-		if (isPaused) {
-			// Resume: Apply all buffered messages
-			if (messageBuffer.length > 0) {
-				const bufferedContent = messageBuffer.join("");
-				setRawLogs((prev) => {
-					const updated = prev + bufferedContent;
-					const splitLines = updated.split("\n");
-					if (splitLines.length > lines) {
-						return splitLines.slice(-lines).join("\n");
-					}
-					return updated;
-				});
-				setMessageBuffer([]);
-			}
-		}
-		const newPausedState = !isPaused;
-		setIsPaused(newPausedState);
-		isPausedRef.current = newPausedState;
-	};
-
 	useEffect(() => {
 		if (!containerId) return;
 
@@ -129,10 +102,6 @@ export const DockerLogsId: React.FC<Props> = ({
 		setIsLoading(true);
 		setRawLogs("");
 		setFilteredLogs([]);
-		setMessageBuffer([]);
-		// Reset pause state when container changes
-		setIsPaused(false);
-		isPausedRef.current = false;
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
 		const params = new globalThis.URLSearchParams({
@@ -171,22 +140,14 @@ export const DockerLogsId: React.FC<Props> = ({
 
 		ws.onmessage = (e) => {
 			if (!isCurrentConnection) return;
-
-			if (isPausedRef.current) {
-				// When paused, buffer the messages instead of displaying them
-				setMessageBuffer((prev) => [...prev, e.data]);
-			} else {
-				// When not paused, display messages normally
-				setRawLogs((prev) => {
-					const updated = prev + e.data;
-					const splitLines = updated.split("\n");
-					if (splitLines.length > lines) {
-						return splitLines.slice(-lines).join("\n");
-					}
-					return updated;
-				});
-			}
-
+			setRawLogs((prev) => {
+				const updated = prev + e.data;
+				const splitLines = updated.split("\n");
+				if (splitLines.length > lines) {
+					return splitLines.slice(-lines).join("\n");
+				}
+				return updated;
+			});
 			setIsLoading(false);
 			if (noDataTimeout) clearTimeout(noDataTimeout);
 		};
@@ -249,15 +210,9 @@ export const DockerLogsId: React.FC<Props> = ({
 		});
 	};
 
-	// Sync isPausedRef with isPaused state
-	useEffect(() => {
-		isPausedRef.current = isPaused;
-	}, [isPaused]);
-
 	useEffect(() => {
 		setRawLogs("");
 		setFilteredLogs([]);
-		setMessageBuffer([]);
 	}, [containerId]);
 
 	useEffect(() => {
@@ -305,52 +260,21 @@ export const DockerLogsId: React.FC<Props> = ({
 							/>
 						</div>
 
-						<div className="flex gap-2">
-							<Button
-								variant="outline"
-								size="sm"
-								className="h-9"
-								onClick={handlePauseResume}
-								title={isPaused ? "Resume logs" : "Pause logs"}
-							>
-								{isPaused ? (
-									<Play className="mr-2 h-4 w-4" />
-								) : (
-									<Pause className="mr-2 h-4 w-4" />
-								)}
-								{isPaused ? "Resume" : "Pause"}
-							</Button>
-							<Button
-								variant="outline"
-								size="sm"
-								className="h-9 sm:w-auto w-full"
-								onClick={handleDownload}
-								disabled={filteredLogs.length === 0 || !data?.Name}
-							>
-								<DownloadIcon className="mr-2 h-4 w-4" />
-								Download logs
-							</Button>
-						</div>
+						<Button
+							variant="outline"
+							size="sm"
+							className="h-9 sm:w-auto w-full"
+							onClick={handleDownload}
+							disabled={filteredLogs.length === 0 || !data?.Name}
+						>
+							<DownloadIcon className="mr-2 h-4 w-4" />
+							Download logs
+						</Button>
 					</div>
-					{isPaused && (
-						<AlertBlock type="warning">
-							<div className="flex items-center gap-2">
-								<Pause className="h-4 w-4" />
-								<span>
-									Logs paused
-									{messageBuffer.length > 0 && (
-										<span className="ml-1 font-medium">
-											({messageBuffer.length} messages buffered)
-										</span>
-									)}
-								</span>
-							</div>
-						</AlertBlock>
-					)}
 					<div
 						ref={scrollRef}
 						onScroll={handleScroll}
-						className="h-[720px] overflow-y-auto space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
+						className="h-[720px] space-y-0 border p-4 bg-[#fafafa] dark:bg-[#050506] rounded custom-logs-scrollbar"
 					>
 						{filteredLogs.length > 0 ? (
 							filteredLogs.map((filteredLog: LogLine, index: number) => (

apps/dokploy/components/dashboard/docker/logs/line-count-filter.tsx

@@ -138,7 +138,7 @@ export function LineCountFilter({
 							}}
 						/>
 					</div>
-					<CommandPrimitive.List className="max-h-[300px] overflow-y-auto overflow-x-hidden">
+					<CommandPrimitive.List className="max-h-[300px] overflow-x-hidden">
 						<CommandPrimitive.Group className="px-2 py-1.5">
 							{lineCountOptions.map((option) => {
 								const isSelected = value === option.value;

apps/dokploy/components/dashboard/mariadb/general/show-external-mariadb-credentials.tsx

@@ -46,11 +46,11 @@ interface Props {
 	mariadbId: string;
 }
 export const ShowExternalMariadbCredentials = ({ mariadbId }: Props) => {
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 	const { data, refetch } = api.mariadb.one.useQuery({ mariadbId });
 	const { mutateAsync, isLoading } = api.mariadb.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-	const getIp = data?.server?.ipAddress || ip;
+	const getIp = data?.server?.ipAddress || webServer?.serverIp;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),

apps/dokploy/components/dashboard/mongo/general/show-external-mongo-credentials.tsx

@@ -46,11 +46,11 @@ interface Props {
 	mongoId: string;
 }
 export const ShowExternalMongoCredentials = ({ mongoId }: Props) => {
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 	const { data, refetch } = api.mongo.one.useQuery({ mongoId });
 	const { mutateAsync, isLoading } = api.mongo.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-	const getIp = data?.server?.ipAddress || ip;
+	const getIp = data?.server?.ipAddress || webServer?.serverIp;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),

apps/dokploy/components/dashboard/mysql/general/show-external-mysql-credentials.tsx

@@ -46,11 +46,11 @@ interface Props {
 	mysqlId: string;
 }
 export const ShowExternalMysqlCredentials = ({ mysqlId }: Props) => {
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 	const { data, refetch } = api.mysql.one.useQuery({ mysqlId });
 	const { mutateAsync, isLoading } = api.mysql.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-	const getIp = data?.server?.ipAddress || ip;
+	const getIp = data?.server?.ipAddress || webServer?.serverIp;
 	const form = useForm<DockerProvider>({
 		defaultValues: {},
 		resolver: zodResolver(DockerProviderSchema),

apps/dokploy/components/dashboard/postgres/general/show-external-postgres-credentials.tsx

@@ -46,11 +46,11 @@ interface Props {
 	postgresId: string;
 }
 export const ShowExternalPostgresCredentials = ({ postgresId }: Props) => {
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 	const { data, refetch } = api.postgres.one.useQuery({ postgresId });
 	const { mutateAsync, isLoading } =
 		api.postgres.saveExternalPort.useMutation();
-	const getIp = data?.server?.ipAddress || ip;
+	const getIp = data?.server?.ipAddress || webServer?.serverIp;
 	const [connectionUrl, setConnectionUrl] = useState("");
 
 	const form = useForm<DockerProvider>({

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

@@ -1,9 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Folder, HelpCircle } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,6 +37,12 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Folder, HelpCircle } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const AddTemplateSchema = z.object({
 	name: z.string().min(1, {
@@ -75,8 +75,6 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
 
-	const hasServers = servers && servers.length > 0;
-
 	const { mutateAsync, isLoading, error, isError } =
 		api.application.create.useMutation();
 
@@ -157,84 +155,68 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 								</FormItem>
 							)}
 						/>
-						{hasServers && (
-							<FormField
-								control={form.control}
-								name="serverId"
-								render={({ field }) => (
-									<FormItem>
-										<TooltipProvider delayDuration={0}>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-														Select a Server {!isCloud ? "(Optional)" : ""}
-														<HelpCircle className="size-4 text-muted-foreground" />
-													</FormLabel>
-												</TooltipTrigger>
-												<TooltipContent
-													className="z-[999] w-[300px]"
-													align="start"
-													side="top"
-												>
-													<span>
-														If no server is selected, the application will be
-														deployed on the server where the user is logged in.
-													</span>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
+						<FormField
+							control={form.control}
+							name="serverId"
+							render={({ field }) => (
+								<FormItem>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+													Select a Server {!isCloud ? "(Optional)" : ""}
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormLabel>
+											</TooltipTrigger>
+											<TooltipContent
+												className="z-[999] w-[300px]"
+												align="start"
+												side="top"
+											>
+												<span>
+													If no server is selected, the application will be
+													deployed on the server where the user is logged in.
+												</span>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
 
-										<Select
-											onValueChange={field.onChange}
-											defaultValue={field.value}
-										>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a Server" />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectGroup>
-													{servers?.map((server) => (
-														<SelectItem
-															key={server.serverId}
-															value={server.serverId}
-														>
-															<span className="flex items-center gap-2 justify-between w-full">
-																<span>{server.name}</span>
-																<span className="text-muted-foreground text-xs self-center">
-																	{server.ipAddress}
-																</span>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a Server" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{servers?.map((server) => (
+													<SelectItem
+														key={server.serverId}
+														value={server.serverId}
+													>
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs self-center">
+																{server.ipAddress}
 															</span>
-														</SelectItem>
-													))}
-													<SelectLabel>Servers ({servers?.length})</SelectLabel>
-												</SelectGroup>
-											</SelectContent>
-										</Select>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
+														</span>
+													</SelectItem>
+												))}
+												<SelectLabel>Servers ({servers?.length})</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="appName"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2">
-										App Name
-										<TooltipProvider delayDuration={0}>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<HelpCircle className="size-4 text-muted-foreground" />
-												</TooltipTrigger>
-												<TooltipContent side="right">
-													<p>
-														This will be the name of the Docker Swarm service
-													</p>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</FormLabel>
+									<FormLabel>App Name</FormLabel>
 									<FormControl>
 										<Input placeholder="my-app" {...field} />
 									</FormControl>

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

@@ -1,9 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { CircuitBoard, HelpCircle } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,6 +37,12 @@ import {
 } from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { CircuitBoard, HelpCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const AddComposeSchema = z.object({
 	composeType: z.enum(["docker-compose", "stack"]).optional(),
@@ -78,8 +78,6 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.create.useMutation();
 
-	const hasServers = servers && servers.length > 0;
-
 	const form = useForm<AddCompose>({
 		defaultValues: {
 			name: "",
@@ -165,64 +163,62 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 								)}
 							/>
 						</div>
-						{hasServers && (
-							<FormField
-								control={form.control}
-								name="serverId"
-								render={({ field }) => (
-									<FormItem>
-										<TooltipProvider delayDuration={0}>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-														Select a Server {!isCloud ? "(Optional)" : ""}
-														<HelpCircle className="size-4 text-muted-foreground" />
-													</FormLabel>
-												</TooltipTrigger>
-												<TooltipContent
-													className="z-[999] w-[300px]"
-													align="start"
-													side="top"
-												>
-													<span>
-														If no server is selected, the application will be
-														deployed on the server where the user is logged in.
-													</span>
-												</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
+						<FormField
+							control={form.control}
+							name="serverId"
+							render={({ field }) => (
+								<FormItem>
+									<TooltipProvider delayDuration={0}>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
+													Select a Server {!isCloud ? "(Optional)" : ""}
+													<HelpCircle className="size-4 text-muted-foreground" />
+												</FormLabel>
+											</TooltipTrigger>
+											<TooltipContent
+												className="z-[999] w-[300px]"
+												align="start"
+												side="top"
+											>
+												<span>
+													If no server is selected, the application will be
+													deployed on the server where the user is logged in.
+												</span>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
 
-										<Select
-											onValueChange={field.onChange}
-											defaultValue={field.value}
-										>
-											<SelectTrigger>
-												<SelectValue placeholder="Select a Server" />
-											</SelectTrigger>
-											<SelectContent>
-												<SelectGroup>
-													{servers?.map((server) => (
-														<SelectItem
-															key={server.serverId}
-															value={server.serverId}
-														>
-															<span className="flex items-center gap-2 justify-between w-full">
-																<span>{server.name}</span>
-																<span className="text-muted-foreground text-xs self-center">
-																	{server.ipAddress}
-																</span>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+									>
+										<SelectTrigger>
+											<SelectValue placeholder="Select a Server" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectGroup>
+												{servers?.map((server) => (
+													<SelectItem
+														key={server.serverId}
+														value={server.serverId}
+													>
+														<span className="flex items-center gap-2 justify-between w-full">
+															<span>{server.name}</span>
+															<span className="text-muted-foreground text-xs self-center">
+																{server.ipAddress}
 															</span>
-														</SelectItem>
-													))}
-													<SelectLabel>Servers ({servers?.length})</SelectLabel>
-												</SelectGroup>
-											</SelectContent>
-										</Select>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-						)}
+														</span>
+													</SelectItem>
+												))}
+												<SelectLabel>Servers ({servers?.length})</SelectLabel>
+											</SelectGroup>
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
 						<FormField
 							control={form.control}
 							name="appName"

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

@@ -1,9 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Database, HelpCircle } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import {
 	MariadbIcon,
 	MongodbIcon,
@@ -43,14 +37,14 @@ import {
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { slugify } from "@/lib/slug";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Database } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 type DbType = typeof mySchema._type.type;
 
@@ -169,8 +163,6 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 	const mariadbMutation = api.mariadb.create.useMutation();
 	const mysqlMutation = api.mysql.create.useMutation();
 
-	const hasServers = servers && servers.length > 0;
-
 	const form = useForm<AddDatabase>({
 		defaultValues: {
 			type: "postgres",
@@ -382,62 +374,45 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 										</FormItem>
 									)}
 								/>
-								{hasServers && (
-									<FormField
-										control={form.control}
-										name="serverId"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Select a Server</FormLabel>
-												<Select
-													onValueChange={field.onChange}
-													defaultValue={field.value || ""}
-												>
-													<SelectTrigger>
-														<SelectValue placeholder="Select a Server" />
-													</SelectTrigger>
-													<SelectContent>
-														<SelectGroup>
-															{servers?.map((server) => (
-																<SelectItem
-																	key={server.serverId}
-																	value={server.serverId}
-																>
-																	{server.name}
-																</SelectItem>
-															))}
-															<SelectLabel>
-																Servers ({servers?.length})
-															</SelectLabel>
-														</SelectGroup>
-													</SelectContent>
-												</Select>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								)}
+								<FormField
+									control={form.control}
+									name="serverId"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Select a Server</FormLabel>
+											<Select
+												onValueChange={field.onChange}
+												defaultValue={field.value || ""}
+											>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a Server" />
+												</SelectTrigger>
+												<SelectContent>
+													<SelectGroup>
+														{servers?.map((server) => (
+															<SelectItem
+																key={server.serverId}
+																value={server.serverId}
+															>
+																{server.name}
+															</SelectItem>
+														))}
+														<SelectLabel>
+															Servers ({servers?.length})
+														</SelectLabel>
+													</SelectGroup>
+												</SelectContent>
+											</Select>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
 								<FormField
 									control={form.control}
 									name="appName"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel className="flex items-center gap-2">
-												App Name
-												<TooltipProvider delayDuration={0}>
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<HelpCircle className="size-4 text-muted-foreground" />
-														</TooltipTrigger>
-														<TooltipContent side="right">
-															<p>
-																This will be the name of the Docker Swarm
-																service
-															</p>
-														</TooltipContent>
-													</Tooltip>
-												</TooltipProvider>
-											</FormLabel>
+											<FormLabel>App Name</FormLabel>
 											<FormControl>
 												<Input placeholder="my-app" {...field} />
 											</FormControl>

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

@@ -1,18 +1,3 @@
-import {
-	BookText,
-	CheckIcon,
-	ChevronsUpDown,
-	Globe,
-	HelpCircle,
-	LayoutGrid,
-	List,
-	Loader2,
-	PuzzleIcon,
-	SearchIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import { GithubIcon } from "@/components/icons/data-tools-icons";
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
@@ -69,6 +54,21 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import {
+	BookText,
+	CheckIcon,
+	ChevronsUpDown,
+	Globe,
+	HelpCircle,
+	LayoutGrid,
+	List,
+	Loader2,
+	PuzzleIcon,
+	SearchIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 const TEMPLATE_BASE_URL_KEY = "dokploy_template_base_url";
 
@@ -137,8 +137,6 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 			return matchesTags && matchesQuery;
 		}) || [];
 
-	const hasServers = servers && servers.length > 0;
-
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="w-full">
@@ -427,62 +425,60 @@ export const AddTemplate = ({ projectId, baseUrl }: Props) => {
 															project.
 														</AlertDialogDescription>
 
-														{hasServers && (
-															<div>
-																<TooltipProvider delayDuration={0}>
-																	<Tooltip>
-																		<TooltipTrigger asChild>
-																			<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-																				Select a Server{" "}
-																				{!isCloud ? "(Optional)" : ""}
-																				<HelpCircle className="size-4 text-muted-foreground" />
-																			</Label>
-																		</TooltipTrigger>
-																		<TooltipContent
-																			className="z-[999] w-[300px]"
-																			align="start"
-																			side="top"
-																		>
-																			<span>
-																				If no server is selected, the
-																				application will be deployed on the
-																				server where the user is logged in.
-																			</span>
-																		</TooltipContent>
-																	</Tooltip>
-																</TooltipProvider>
+														<div>
+															<TooltipProvider delayDuration={0}>
+																<Tooltip>
+																	<TooltipTrigger asChild>
+																		<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
+																			Select a Server{" "}
+																			{!isCloud ? "(Optional)" : ""}
+																			<HelpCircle className="size-4 text-muted-foreground" />
+																		</Label>
+																	</TooltipTrigger>
+																	<TooltipContent
+																		className="z-[999] w-[300px]"
+																		align="start"
+																		side="top"
+																	>
+																		<span>
+																			If no server is selected, the application
+																			will be deployed on the server where the
+																			user is logged in.
+																		</span>
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
 
-																<Select
-																	onValueChange={(e) => {
-																		setServerId(e);
-																	}}
-																>
-																	<SelectTrigger>
-																		<SelectValue placeholder="Select a Server" />
-																	</SelectTrigger>
-																	<SelectContent>
-																		<SelectGroup>
-																			{servers?.map((server) => (
-																				<SelectItem
-																					key={server.serverId}
-																					value={server.serverId}
-																				>
-																					<span className="flex items-center gap-2 justify-between w-full">
-																						<span>{server.name}</span>
-																						<span className="text-muted-foreground text-xs self-center">
-																							{server.ipAddress}
-																						</span>
+															<Select
+																onValueChange={(e) => {
+																	setServerId(e);
+																}}
+															>
+																<SelectTrigger>
+																	<SelectValue placeholder="Select a Server" />
+																</SelectTrigger>
+																<SelectContent>
+																	<SelectGroup>
+																		{servers?.map((server) => (
+																			<SelectItem
+																				key={server.serverId}
+																				value={server.serverId}
+																			>
+																				<span className="flex items-center gap-2 justify-between w-full">
+																					<span>{server.name}</span>
+																					<span className="text-muted-foreground text-xs self-center">
+																						{server.ipAddress}
 																					</span>
-																				</SelectItem>
-																			))}
-																			<SelectLabel>
-																				Servers ({servers?.length})
-																			</SelectLabel>
-																		</SelectGroup>
-																	</SelectContent>
-																</Select>
-															</div>
-														)}
+																				</span>
+																			</SelectItem>
+																		))}
+																		<SelectLabel>
+																			Servers ({servers?.length})
+																		</SelectLabel>
+																	</SelectGroup>
+																</SelectContent>
+															</Select>
+														</div>
 													</AlertDialogHeader>
 													<AlertDialogFooter>
 														<AlertDialogCancel>Cancel</AlertDialogCancel>

apps/dokploy/components/dashboard/project/ai/step-one.tsx

@@ -25,7 +25,6 @@ const examples = [
 export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 	// Get servers from the API
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const hasServers = servers && servers.length > 0;
 
 	const handleExampleClick = (example: string) => {
 		setTemplateInfo({ ...templateInfo, userInput: example });
@@ -48,39 +47,37 @@ export const StepOne = ({ setTemplateInfo, templateInfo }: any) => {
 						/>
 					</div>
 
-					{hasServers && (
-						<div className="space-y-2">
-							<Label htmlFor="server-deploy">
-								Select the server where you want to deploy (optional)
-							</Label>
-							<Select
-								value={templateInfo.server?.serverId}
-								onValueChange={(value) => {
-									const server = servers?.find((s) => s.serverId === value);
-									if (server) {
-										setTemplateInfo({
-											...templateInfo,
-											server: server,
-										});
-									}
-								}}
-							>
-								<SelectTrigger className="w-full">
-									<SelectValue placeholder="Select a server" />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectGroup>
-										{servers?.map((server) => (
-											<SelectItem key={server.serverId} value={server.serverId}>
-												{server.name}
-											</SelectItem>
-										))}
-										<SelectLabel>Servers ({servers?.length})</SelectLabel>
-									</SelectGroup>
-								</SelectContent>
-							</Select>
-						</div>
-					)}
+					<div className="space-y-2">
+						<Label htmlFor="server-deploy">
+							Select the server where you want to deploy (optional)
+						</Label>
+						<Select
+							value={templateInfo.server?.serverId}
+							onValueChange={(value) => {
+								const server = servers?.find((s) => s.serverId === value);
+								if (server) {
+									setTemplateInfo({
+										...templateInfo,
+										server: server,
+									});
+								}
+							}}
+						>
+							<SelectTrigger className="w-full">
+								<SelectValue placeholder="Select a server" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectGroup>
+									{servers?.map((server) => (
+										<SelectItem key={server.serverId} value={server.serverId}>
+											{server.name}
+										</SelectItem>
+									))}
+									<SelectLabel>Servers ({servers?.length})</SelectLabel>
+								</SelectGroup>
+							</SelectContent>
+						</Select>
+					</div>
 
 					<div className="space-y-2">
 						<Label>Examples:</Label>

apps/dokploy/components/dashboard/project/ai/step-two.tsx

@@ -199,7 +199,7 @@ export const StepTwo = ({ templateInfo, setTemplateInfo }: StepProps) => {
 				<p className="text-muted-foreground">
 					Generating template suggestions based on your input...
 				</p>
-				<pre className="whitespace-normal">{templateInfo.userInput}</pre>
+				<pre>{templateInfo.userInput}</pre>
 			</div>
 		);
 	}

apps/dokploy/components/dashboard/project/duplicate-project.tsx

@@ -167,7 +167,7 @@ export const DuplicateProject = ({
 
 					<div className="grid gap-2">
 						<Label>Selected services to duplicate</Label>
-						<div className="space-y-2 max-h-[200px] overflow-y-auto border rounded-md p-4">
+						<div className="space-y-2 max-h-[200px] border rounded-md p-4">
 							{selectedServices.map((service) => (
 								<div key={service.id} className="flex items-center space-x-2">
 									<span className="text-sm">

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

@@ -1,17 +1,3 @@
-import {
-	AlertTriangle,
-	ArrowUpDown,
-	BookIcon,
-	ExternalLinkIcon,
-	FolderInput,
-	Loader2,
-	MoreHorizontalIcon,
-	Search,
-	TrashIcon,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -45,82 +31,39 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { api } from "@/utils/api";
+import {
+	AlertTriangle,
+	BookIcon,
+	ExternalLinkIcon,
+	FolderInput,
+	Loader2,
+	MoreHorizontalIcon,
+	Search,
+	TrashIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
 import { HandleProject } from "./handle-project";
 import { ProjectEnvironment } from "./project-environment";
+import { PERMISSIONS } from "@dokploy/server/lib/permissions";
+import { Permissions } from "../shared/Permissions";
 
 export const ShowProjects = () => {
 	const utils = api.useUtils();
 	const { data, isLoading } = api.project.all.useQuery();
-	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 	const [searchQuery, setSearchQuery] = useState("");
-	const [sortBy, setSortBy] = useState<string>(() => {
-		if (typeof window !== "undefined") {
-			return localStorage.getItem("projectsSort") || "createdAt-desc";
-		}
-		return "createdAt-desc";
-	});
-
-	useEffect(() => {
-		localStorage.setItem("projectsSort", sortBy);
-	}, [sortBy]);
 
 	const filteredProjects = useMemo(() => {
 		if (!data) return [];
-
-		// First filter by search query
-		const filtered = data.filter(
+		return data.filter(
 			(project) =>
 				project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
 				project.description?.toLowerCase().includes(searchQuery.toLowerCase()),
 		);
-
-		// Then sort the filtered results
-		const [field, direction] = sortBy.split("-");
-		return [...filtered].sort((a, b) => {
-			let comparison = 0;
-			switch (field) {
-				case "name":
-					comparison = a.name.localeCompare(b.name);
-					break;
-				case "createdAt":
-					comparison =
-						new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
-					break;
-				case "services": {
-					const aTotalServices =
-						a.mariadb.length +
-						a.mongo.length +
-						a.mysql.length +
-						a.postgres.length +
-						a.redis.length +
-						a.applications.length +
-						a.compose.length;
-					const bTotalServices =
-						b.mariadb.length +
-						b.mongo.length +
-						b.mysql.length +
-						b.postgres.length +
-						b.redis.length +
-						b.applications.length +
-						b.compose.length;
-					comparison = aTotalServices - bTotalServices;
-					break;
-				}
-				default:
-					comparison = 0;
-			}
-			return direction === "asc" ? comparison : -comparison;
-		});
-	}, [data, searchQuery, sortBy]);
+	}, [data, searchQuery]);
 
 	return (
 		<>
@@ -141,11 +84,11 @@ export const ShowProjects = () => {
 								</CardDescription>
 							</CardHeader>
 
-							{(auth?.role === "owner" || auth?.canCreateProjects) && (
+							<Permissions permissions={[PERMISSIONS.PROJECT.CREATE.name]}>
 								<div className="">
 									<HandleProject />
 								</div>
-							)}
+							</Permissions>
 						</div>
 
 						<CardContent className="space-y-2 py-8 border-t gap-4 flex flex-col min-h-[60vh]">
@@ -156,40 +99,14 @@ export const ShowProjects = () => {
 								</div>
 							) : (
 								<>
-									<div className="flex max-sm:flex-col gap-4 items-center w-full">
-										<div className="flex-1 relative max-sm:w-full">
-											<Input
-												placeholder="Filter projects..."
-												value={searchQuery}
-												onChange={(e) => setSearchQuery(e.target.value)}
-												className="pr-10"
-											/>
-											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
-										</div>
-										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
-											<ArrowUpDown className="size-4 text-muted-foreground" />
-											<Select value={sortBy} onValueChange={setSortBy}>
-												<SelectTrigger className="w-full">
-													<SelectValue placeholder="Sort by..." />
-												</SelectTrigger>
-												<SelectContent>
-													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
-													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
-													<SelectItem value="createdAt-desc">
-														Newest first
-													</SelectItem>
-													<SelectItem value="createdAt-asc">
-														Oldest first
-													</SelectItem>
-													<SelectItem value="services-desc">
-														Most services
-													</SelectItem>
-													<SelectItem value="services-asc">
-														Least services
-													</SelectItem>
-												</SelectContent>
-											</Select>
-										</div>
+									<div className="w-full relative">
+										<Input
+											placeholder="Filter projects..."
+											value={searchQuery}
+											onChange={(e) => setSearchQuery(e.target.value)}
+											className="pr-10"
+										/>
+										<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 									</div>
 									{filteredProjects?.length === 0 && (
 										<div className="mt-6 flex h-[50vh] w-full flex-col items-center justify-center space-y-4">
@@ -241,7 +158,7 @@ export const ShowProjects = () => {
 																		</Button>
 																	</DropdownMenuTrigger>
 																	<DropdownMenuContent
-																		className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
+																		className="w-[200px] space-y-2 max-h-[400px]"
 																		onClick={(e) => e.stopPropagation()}
 																	>
 																		{project.applications.length > 0 && (
@@ -349,7 +266,7 @@ export const ShowProjects = () => {
 																				</Button>
 																			</DropdownMenuTrigger>
 																			<DropdownMenuContent
-																				className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
+																				className="w-[200px] space-y-2 max-h-[280px]"
 																				onClick={(e) => e.stopPropagation()}
 																			>
 																				<DropdownMenuLabel className="font-normal">
@@ -373,8 +290,11 @@ export const ShowProjects = () => {
 																				<div
 																					onClick={(e) => e.stopPropagation()}
 																				>
-																					{(auth?.role === "owner" ||
-																						auth?.canDeleteProjects) && (
+																					<Permissions
+																						permissions={[
+																							PERMISSIONS.PROJECT.DELETE.name,
+																						]}
+																					>
 																						<AlertDialog>
 																							<AlertDialogTrigger className="w-full">
 																								<DropdownMenuItem
@@ -440,7 +360,7 @@ export const ShowProjects = () => {
 																								</AlertDialogFooter>
 																							</AlertDialogContent>
 																						</AlertDialog>
-																					)}
+																					</Permissions>
 																				</div>
 																			</DropdownMenuContent>
 																		</DropdownMenu>

apps/dokploy/components/dashboard/redis/general/show-external-redis-credentials.tsx

@@ -46,11 +46,11 @@ interface Props {
 	redisId: string;
 }
 export const ShowExternalRedisCredentials = ({ redisId }: Props) => {
-	const { data: ip } = api.settings.getIp.useQuery();
+	const { data: webServer } = api.webServer.get.useQuery();
 	const { data, refetch } = api.redis.one.useQuery({ redisId });
 	const { mutateAsync, isLoading } = api.redis.saveExternalPort.useMutation();
 	const [connectionUrl, setConnectionUrl] = useState("");
-	const getIp = data?.server?.ipAddress || ip;
+	const getIp = data?.server?.ipAddress || webServer?.serverIp;
 
 	const form = useForm<DockerProvider>({
 		defaultValues: {},

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

@@ -14,7 +14,7 @@ export const ShowWelcomeDokploy = () => {
 
 	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
 
-	if (!isCloud || data?.role !== "admin") {
+	if (!isCloud || data?.role?.name !== "admin") {
 		return null;
 	}
 
@@ -23,14 +23,14 @@ export const ShowWelcomeDokploy = () => {
 			!isLoading &&
 			isCloud &&
 			!localStorage.getItem("hasSeenCloudWelcomeModal") &&
-			data?.role === "owner"
+			data?.role?.name === "owner"
 		) {
 			setOpen(true);
 		}
 	}, [isCloud, isLoading]);
 
 	const handleClose = (isOpen: boolean) => {
-		if (data?.role === "owner") {
+		if (data?.role?.name === "owner") {
 			setOpen(isOpen);
 			if (!isOpen) {
 				localStorage.setItem("hasSeenCloudWelcomeModal", "true"); // Establece el flag al cerrar el modal

apps/dokploy/components/dashboard/settings/destination/handle-destinations.tsx

@@ -70,7 +70,6 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 		},
 		{
 			enabled: !!destinationId,
-			refetchOnWindowFocus: false,
 		},
 	);
 	const {

apps/dokploy/components/dashboard/settings/git/github/add-github-provider.tsx

@@ -24,14 +24,12 @@ export const AddGithubProvider = () => {
 	const [isOrganization, setIsOrganization] = useState(false);
 	const [organizationName, setOrganization] = useState("");
 
-	const randomString = () => Math.random().toString(36).slice(2, 8);
-
 	useEffect(() => {
 		const url = document.location.origin;
 		const manifest = JSON.stringify(
 			{
 				redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id}&userId=${session?.user?.id}`,
-				name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}-${randomString()}`,
+				name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}`,
 				url: origin,
 				hook_attributes: {
 					url: `${url}/api/deploy/github`,

apps/dokploy/components/dashboard/settings/git/show-git-providers.tsx

@@ -33,7 +33,6 @@ import { AddGithubProvider } from "./github/add-github-provider";
 import { EditGithubProvider } from "./github/edit-github-provider";
 import { AddGitlabProvider } from "./gitlab/add-gitlab-provider";
 import { EditGitlabProvider } from "./gitlab/edit-gitlab-provider";
-import { Badge } from "@/components/ui/badge";
 
 export const ShowGitProviders = () => {
 	const { data, isLoading, refetch } = api.gitProvider.getAll.useQuery();
@@ -159,13 +158,7 @@ export const ShowGitProviders = () => {
 
 															<div className="flex flex-row gap-1">
 																{!haveGithubRequirements && isGithub && (
-																	<div className="flex flex-row gap-1 items-center">
-																		<Badge
-																			variant="outline"
-																			className="text-xs"
-																		>
-																			Action Required
-																		</Badge>
+																	<div className="flex flex-col gap-1">
 																		<Link
 																			href={`${gitProvider?.github?.githubAppName}/installations/new?state=gh_setup:${gitProvider?.github.githubId}`}
 																			className={buttonVariants({
@@ -192,13 +185,7 @@ export const ShowGitProviders = () => {
 																	</div>
 																)}
 																{!haveGitlabRequirements && isGitlab && (
-																	<div className="flex flex-row gap-1 items-center">
-																		<Badge
-																			variant="outline"
-																			className="text-xs"
-																		>
-																			Action Required
-																		</Badge>
+																	<div className="flex flex-col gap-1">
 																		<Link
 																			href={getGitlabUrl(
 																				gitProvider.gitlab?.applicationId || "",

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

@@ -1,4 +1,3 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,7 +19,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
-import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
+import { generateSHA256Hash } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2, User } from "lucide-react";
@@ -33,11 +32,11 @@ import { Disable2FA } from "./disable-2fa";
 import { Enable2FA } from "./enable-2fa";
 
 const profileSchema = z.object({
+	name: z.string(),
 	email: z.string(),
 	password: z.string().nullable(),
 	currentPassword: z.string().nullable(),
 	image: z.string().optional(),
-	name: z.string().optional(),
 	allowImpersonation: z.boolean().optional().default(false),
 });
 
@@ -81,12 +80,12 @@ export const ProfileForm = () => {
 
 	const form = useForm<Profile>({
 		defaultValues: {
+			name: data?.user?.name || "",
 			email: data?.user?.email || "",
 			password: "",
 			image: data?.user?.image || "",
 			currentPassword: "",
 			allowImpersonation: data?.user?.allowImpersonation || false,
-			name: data?.user?.name || "",
 		},
 		resolver: zodResolver(profileSchema),
 	});
@@ -95,12 +94,12 @@ export const ProfileForm = () => {
 		if (data) {
 			form.reset(
 				{
+					name: data?.user?.name || "",
 					email: data?.user?.email || "",
 					password: form.getValues("password") || "",
 					image: data?.user?.image || "",
 					currentPassword: form.getValues("currentPassword") || "",
 					allowImpersonation: data?.user?.allowImpersonation,
-					name: data?.user?.name || "",
 				},
 				{
 					keepValues: true,
@@ -118,22 +117,22 @@ export const ProfileForm = () => {
 
 	const onSubmit = async (values: Profile) => {
 		await mutateAsync({
+			name: values.name,
 			email: values.email.toLowerCase(),
 			password: values.password || undefined,
 			image: values.image,
 			currentPassword: values.currentPassword || undefined,
 			allowImpersonation: values.allowImpersonation,
-			name: values.name || undefined,
 		})
 			.then(async () => {
 				await refetch();
 				toast.success("Profile Updated");
 				form.reset({
+					name: values.name,
 					email: values.email,
 					password: "",
 					image: values.image,
 					currentPassword: "",
-					name: values.name || "",
 				});
 			})
 			.catch(() => {
@@ -180,7 +179,7 @@ export const ProfileForm = () => {
 													<FormItem>
 														<FormLabel>Name</FormLabel>
 														<FormControl>
-															<Input placeholder="Name" {...field} />
+															<Input {...field} />
 														</FormControl>
 														<FormMessage />
 													</FormItem>
@@ -258,24 +257,6 @@ export const ProfileForm = () => {
 																value={field.value}
 																className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 															>
-																<FormItem key="no-avatar">
-																	<FormLabel className="[&:has([data-state=checked])>.default-avatar]:border-primary [&:has([data-state=checked])>.default-avatar]:border-1 [&:has([data-state=checked])>.default-avatar]:p-px cursor-pointer">
-																		<FormControl>
-																			<RadioGroupItem
-																				value=""
-																				className="sr-only"
-																			/>
-																		</FormControl>
-
-																		<Avatar className="default-avatar h-12 w-12 rounded-full border hover:p-px hover:border-primary transition-transform">
-																			<AvatarFallback className="rounded-lg">
-																				{getFallbackAvatarInitials(
-																					data?.user?.name,
-																				)}
-																			</AvatarFallback>
-																		</Avatar>
-																	</FormLabel>
-																</FormItem>
 																{availableAvatars.map((image) => (
 																	<FormItem key={image}>
 																		<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">

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

@@ -1,6 +1,5 @@
-import { useTranslation } from "next-i18next";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -11,6 +10,8 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { api } from "@/utils/api";
+import { useTranslation } from "next-i18next";
+import { toast } from "sonner";
 import { EditTraefikEnv } from "../../web-server/edit-traefik-env";
 import { ManageTraefikPorts } from "../../web-server/manage-traefik-ports";
 import { ShowModalLogs } from "../../web-server/show-modal-logs";

apps/dokploy/components/dashboard/settings/servers/actions/toggle-docker-cleanup.tsx

@@ -7,7 +7,7 @@ interface Props {
 	serverId?: string;
 }
 export const ToggleDockerCleanup = ({ serverId }: Props) => {
-	const { data, refetch } = api.user.get.useQuery(undefined, {
+	const { data, refetch } = api.webServer.get.useQuery(undefined, {
 		enabled: !serverId,
 	});
 
@@ -20,11 +20,9 @@ export const ToggleDockerCleanup = ({ serverId }: Props) => {
 		},
 	);
 
-	const enabled = serverId
-		? server?.enableDockerCleanup
-		: data?.user.enableDockerCleanup;
+	const enabled = data?.enableDockerCleanup || server?.enableDockerCleanup;
 
-	const { mutateAsync } = api.settings.updateDockerCleanup.useMutation();
+	const { mutateAsync } = api.webServer.updateDockerCleanup.useMutation();
 
 	const handleToggle = async (checked: boolean) => {
 		try {

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

@@ -1,11 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { PlusIcon } from "lucide-react";
-import Link from "next/link";
-import { useTranslation } from "next-i18next";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -38,6 +30,14 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { PlusIcon } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const Schema = z.object({
 	name: z.string().min(1, {
@@ -218,7 +218,7 @@ export const HandleServers = ({ serverId }: Props) => {
 					</AlertBlock>
 				</div>
 				{!canCreateMoreServers && (
-					<AlertBlock type="warning" className="mt-4">
+					<AlertBlock type="warning">
 						You cannot create more servers,{" "}
 						<Link href="/dashboard/settings/billing" className="text-primary">
 							Please upgrade your plan

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

@@ -89,7 +89,7 @@ export const SetupMonitoring = ({ serverId }: Props) => {
 					enabled: !!serverId,
 				},
 			)
-		: api.user.getServerMetrics.useQuery();
+		: api.webServer.get.useQuery();
 
 	const url = useUrl();
 

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

@@ -147,7 +147,7 @@ export const SetupServer = ({ serverId }: Props) => {
 										<li>2. Add The SSH Key to Server Manually</li>
 									</ul>
 									<div className="flex flex-col gap-4 w-full overflow-auto">
-										<div className="flex relative flex-col gap-2 overflow-y-auto">
+										<div className="flex relative flex-col gap-2">
 											<div className="text-sm text-primary flex flex-row gap-2 items-center">
 												Copy Public Key ({server?.sshKey?.name})
 												<button

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

@@ -1,9 +1,3 @@
-import { format } from "date-fns";
-import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useTranslation } from "next-i18next";
-import { toast } from "sonner";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
@@ -33,6 +27,12 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { api } from "@/utils/api";
+import { format } from "date-fns";
+import { KeyIcon, Loader2, MoreHorizontal, ServerIcon } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { toast } from "sonner";
 import { ShowNodesModal } from "../cluster/nodes/show-nodes-modal";
 import { TerminalModal } from "../web-server/terminal-modal";
 import { ShowServerActions } from "./actions/show-server-actions";
@@ -115,6 +115,24 @@ export const ShowServers = () => {
 											</div>
 										) : (
 											<div className="flex flex-col gap-4  min-h-[25vh]">
+												{!canCreateMoreServers && (
+													<AlertBlock type="warning">
+														<div className="flex flex-row items-center gap-3 justify-center">
+															<span>
+																<div>
+																	You cannot create more servers,{" "}
+																	<Link
+																		href="/dashboard/settings/billing"
+																		className="text-primary"
+																	>
+																		Please upgrade your plan
+																	</Link>
+																</div>
+															</span>
+														</div>
+													</AlertBlock>
+												)}
+
 												<Table>
 													<TableCaption>
 														<div className="flex flex-col  gap-4">

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-server.tsx

@@ -1,9 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -28,6 +22,12 @@ import {
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 const Schema = z.object({
 	name: z.string().min(1, {
@@ -108,7 +108,7 @@ export const CreateServer = ({ stepper }: Props) => {
 		<Card className="bg-background flex flex-col gap-4">
 			<div className="flex flex-col gap-2 pt-5 px-4">
 				{!canCreateMoreServers && (
-					<AlertBlock type="warning" className="mt-2">
+					<AlertBlock type="warning">
 						You cannot create more servers,{" "}
 						<Link href="/dashboard/settings/billing" className="text-primary">
 							Please upgrade your plan

apps/dokploy/components/dashboard/settings/servers/welcome-stripe/create-ssh-key.tsx

@@ -1,22 +1,18 @@
-import copy from "copy-to-clipboard";
-import { CopyIcon, ExternalLinkIcon, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Card, CardContent } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { api } from "@/utils/api";
+import copy from "copy-to-clipboard";
+import { ExternalLinkIcon, Loader2 } from "lucide-react";
+import { CopyIcon } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+import { toast } from "sonner";
 
 export const CreateSSHKey = () => {
 	const { data, refetch } = api.sshKey.all.useQuery();
 	const generateMutation = api.sshKey.generate.useMutation();
 	const { mutateAsync, isLoading } = api.sshKey.create.useMutation();
 	const hasCreatedKey = useRef(false);
-	const [selectedOption, setSelectedOption] = useState<"manual" | "provider">(
-		"manual",
-	);
 
 	const cloudSSHKey = data?.find(
 		(sshKey) => sshKey.name === "dokploy-cloud-ssh-key",
@@ -64,122 +60,89 @@ export const CreateSSHKey = () => {
 						</div>
 					) : (
 						<>
-							<div className="flex flex-col gap-4 text-sm text-muted-foreground">
+							<div className="flex flex-col gap-2 text-sm text-muted-foreground">
 								<p className="text-primary text-base font-semibold">
-									Choose how to add SSH Keys to your server:
+									You have two options to add SSH Keys to your server:
 								</p>
 
-								{/* Radio button options */}
-								<div className="grid gap-2">
-									<RadioGroup
-										value={selectedOption}
-										onValueChange={(value) => {
-											setSelectedOption(value as "manual" | "provider");
-										}}
-										className="grid gap-3"
-									>
-										<div className="flex items-center space-x-2">
-											<RadioGroupItem value="manual" id="manual" />
-											<Label
-												htmlFor="manual"
-												className="text-primary font-medium cursor-pointer"
-											>
-												Add SSH Key to Server Manually
-											</Label>
-										</div>
+								<ul>
+									<li>1. Add The SSH Key to Server Manually</li>
 
-										<div className="flex items-center space-x-2">
-											<RadioGroupItem value="provider" id="provider" />
-											<Label
-												htmlFor="provider"
-												className="text-primary font-medium cursor-pointer"
-											>
-												Add SSH Key when creating server in your provider
-											</Label>
-										</div>
-									</RadioGroup>
+									<li>
+										2. Add the public SSH Key when you create a server in your
+										preffered provider (Hostinger, Digital Ocean, Hetzner, etc){" "}
+									</li>
+								</ul>
+
+								<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 1
+									</span>
+									<ul>
+										<li className="items-center flex gap-1">
+											1. Login to your server{" "}
+										</li>
+										<li>
+											2. When you are logged in run the following command
+											<div className="flex  relative flex-col gap-4 w-full mt-2">
+												<CodeEditor
+													lineWrapping
+													language="properties"
+													value={`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`}
+													readOnly
+													className="font-mono opacity-60"
+												/>
+												<button
+													type="button"
+													className="absolute right-2 top-2"
+													onClick={() => {
+														copy(
+															`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`,
+														);
+														toast.success("Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4" />
+												</button>
+											</div>
+										</li>
+										<li className="mt-1">
+											3. You're done, follow the next step to insert the details
+											of your server.
+										</li>
+									</ul>
 								</div>
-
-								{/* Content based on selected option */}
-								{selectedOption === "manual" && (
-									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
-										<span className="text-base font-semibold text-primary">
-											Manual Setup Instructions
-										</span>
-										<ul className="space-y-2">
-											<li className="items-center flex gap-1">
-												1. Login to your server
-											</li>
-											<li>
-												2. When you are logged in run the following command
-												<div className="flex relative flex-col gap-4 w-full mt-2">
-													<CodeEditor
-														lineWrapping
-														language="properties"
-														value={`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`}
-														readOnly
-														className="font-mono opacity-60"
-													/>
-													<button
-														type="button"
-														className="absolute right-2 top-2"
-														onClick={() => {
-															copy(
-																`echo "${cloudSSHKey?.publicKey}" >> ~/.ssh/authorized_keys`,
-															);
-															toast.success("Copied to clipboard");
-														}}
-													>
-														<CopyIcon className="size-4" />
-													</button>
-												</div>
-											</li>
-											<li className="mt-1">
-												3. You're done, follow the next step to insert the
-												details of your server.
-											</li>
-										</ul>
-									</div>
-								)}
-
-								{selectedOption === "provider" && (
-									<div className="flex flex-col gap-2 w-full border rounded-lg p-4">
-										<span className="text-base font-semibold text-primary">
-											Provider Setup Instructions
-										</span>
-										<div className="flex flex-col gap-4 w-full overflow-auto">
-											<div className="flex relative flex-col gap-2 overflow-y-auto">
-												<div className="text-sm text-primary flex flex-row gap-2 items-center">
-													Copy Public Key
-													<button
-														type="button"
-														className="right-2 top-8"
-														onClick={() => {
-															copy(
-																cloudSSHKey?.publicKey || "Generate a SSH Key",
-															);
-															toast.success("SSH Copied to clipboard");
-														}}
-													>
-														<CopyIcon className="size-4 text-muted-foreground" />
-													</button>
-												</div>
+								<div className="flex flex-col gap-2 w-full mt-2 border rounded-lg p-4">
+									<span className="text-base font-semibold text-primary">
+										Option 2
+									</span>
+									<div className="flex flex-col gap-4 w-full overflow-auto">
+										<div className="flex relative flex-col gap-2">
+											<div className="text-sm text-primary flex flex-row gap-2 items-center">
+												Copy Public Key
+												<button
+													type="button"
+													className="right-2 top-8"
+													onClick={() => {
+														copy(
+															cloudSSHKey?.publicKey || "Generate a SSH Key",
+														);
+														toast.success("SSH Copied to clipboard");
+													}}
+												>
+													<CopyIcon className="size-4 text-muted-foreground" />
+												</button>
 											</div>
 										</div>
-										<p className="text-sm mt-2">
-											Use this public key when creating a server in your
-											preferred provider (Hostinger, Digital Ocean, Hetzner,
-											etc.)
-										</p>
-										<Link
-											href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
-											target="_blank"
-											className="text-primary flex flex-row gap-2 mt-2"
-										>
-											View Tutorial <ExternalLinkIcon className="size-4" />
-										</Link>
 									</div>
-								)}
+									<Link
+										href="https://docs.dokploy.com/docs/core/multi-server/instructions#requirements"
+										target="_blank"
+										className="text-primary flex flex-row gap-2"
+									>
+										View Tutorial <ExternalLinkIcon className="size-4" />
+									</Link>
+								</div>
 							</div>
 						</>
 					)}

apps/dokploy/components/dashboard/settings/users/add-invitation.tsx

@@ -49,12 +49,15 @@ type AddInvitation = z.infer<typeof addInvitation>;
 export const AddInvitation = () => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
-	const [isLoading, setIsLoading] = useState(false);
+	const { data: roles } = api.role.all.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: emailProviders } =
 		api.notification.getEmailProviders.useQuery();
-	const { mutateAsync: sendInvitation } = api.user.sendInvitation.useMutation();
-	const [error, setError] = useState<string | null>(null);
+	const {
+		mutateAsync: createInvitation,
+		isLoading,
+		error,
+	} = api.user.createInvitation.useMutation();
 	const { data: activeOrganization } = authClient.useActiveOrganization();
 
 	const form = useForm<AddInvitation>({
@@ -70,36 +73,20 @@ export const AddInvitation = () => {
 	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
 	const onSubmit = async (data: AddInvitation) => {
-		setIsLoading(true);
-		const result = await authClient.organization.inviteMember({
+		await createInvitation({
 			email: data.email.toLowerCase(),
 			role: data.role,
-			organizationId: activeOrganization?.id,
-		});
-
-		if (result.error) {
-			setError(result.error.message || "");
-		} else {
-			if (!isCloud && data.notificationId) {
-				await sendInvitation({
-					invitationId: result.data.id,
-					notificationId: data.notificationId || "",
-				})
-					.then(() => {
-						toast.success("Invitation created and email sent");
-					})
-					.catch((error: any) => {
-						toast.error(error.message);
-					});
-			} else {
+			organizationId: activeOrganization?.id || "",
+			notificationId: data.notificationId || "",
+		})
+			.then(() => {
 				toast.success("Invitation created");
-			}
-			setError(null);
-			setOpen(false);
-		}
+			})
+			.catch((error: any) => {
+				toast.error(error.message);
+			});
 
 		utils.organization.allInvitations.invalidate();
-		setIsLoading(false);
 	};
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
@@ -113,7 +100,7 @@ export const AddInvitation = () => {
 					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
 				</DialogHeader>
-				{error && <AlertBlock type="error">{error}</AlertBlock>}
+				{error && <AlertBlock type="error">{error.message}</AlertBlock>}
 
 				<Form {...form}>
 					<form
@@ -158,6 +145,12 @@ export const AddInvitation = () => {
 											</FormControl>
 											<SelectContent>
 												<SelectItem value="member">Member</SelectItem>
+												<SelectItem value="admin">Admin</SelectItem>
+												{roles?.map((role) => (
+													<SelectItem key={role.name} value={role.name}>
+														{role.name}
+													</SelectItem>
+												))}
 											</SelectContent>
 										</Select>
 										<FormDescription>

apps/dokploy/components/dashboard/settings/users/add-permissions-v2.tsx

@@ -0,0 +1,758 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	FormDescription,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { extractServices } from "@/pages/dashboard/project/[projectId]";
+import { PenBoxIcon, Trash2 } from "lucide-react";
+import { format } from "date-fns";
+import { DialogAction } from "@/components/shared/dialog-action";
+
+const assignRoleSchema = z.object({
+	roleId: z.string(),
+	accessedProjects: z.array(z.string()).optional(),
+	accessedServices: z.array(z.string()).optional(),
+});
+
+const createRoleSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	description: z.string().optional(),
+	permissions: z.array(z.string()).min(1, "Select at least one permission"),
+});
+
+type AssignRoleForm = z.infer<typeof assignRoleSchema>;
+type CreateRoleForm = z.infer<typeof createRoleSchema>;
+
+interface Props {
+	userId: string;
+}
+
+export const AddUserPermissionsV2 = ({ userId }: Props) => {
+	const utils = api.useUtils();
+	const { data: projects } = api.project.all.useQuery();
+	const [activeTab, setActiveTab] = useState<"assign" | "create">("assign");
+	const [editingRole, setEditingRole] = useState<{
+		roleId: string;
+		name: string;
+		description?: string;
+		permissions: string[];
+	} | null>(null);
+	const { data: roles, refetch: refetchRoles } = api.role.all.useQuery();
+	const { data: defaultRoles } = api.role.getDefaultRoles.useQuery();
+
+	const { data: userData, refetch: refetchUser } = api.user.one.useQuery(
+		{
+			userId,
+		},
+		{
+			enabled: !!userId,
+		},
+	);
+
+	const { mutateAsync: createRole, isLoading: isCreatingRole } =
+		api.role.create.useMutation();
+	const { mutateAsync: updateRole, isLoading: isUpdatingRole } =
+		api.role.update.useMutation();
+	const { mutateAsync: deleteRole, isLoading: isDeletingRole } =
+		api.role.delete.useMutation();
+	const { mutateAsync: updateMemberRole, isLoading: isAssigningRole } =
+		api.user.assignRole.useMutation();
+
+	const assignForm = useForm<AssignRoleForm>({
+		resolver: zodResolver(assignRoleSchema),
+		defaultValues: {
+			accessedProjects: [],
+			accessedServices: [],
+		},
+	});
+
+	const createForm = useForm<CreateRoleForm>({
+		resolver: zodResolver(createRoleSchema),
+		defaultValues: {
+			permissions: [],
+		},
+	});
+
+	useEffect(() => {
+		if (userData) {
+			assignForm.reset({
+				roleId: userData.roleId || "",
+				accessedProjects: userData.accessedProjects || [],
+				accessedServices: userData.accessedServices || [],
+			});
+		}
+	}, [userData, assignForm]);
+
+	// Reset form when switching between create and edit modes
+	useEffect(() => {
+		if (editingRole) {
+			createForm.reset({
+				name: editingRole.name,
+				description: editingRole.description || "",
+				permissions: editingRole.permissions,
+			});
+		} else {
+			createForm.reset({
+				name: "",
+				description: "",
+				permissions: [],
+			});
+		}
+	}, [editingRole, createForm]);
+
+	// Check if the selected role is owner or admin (has full access)
+	const selectedRoleId = assignForm.watch("roleId");
+	const selectedRole = defaultRoles?.roles?.find(
+		(role) => role.roleId === selectedRoleId,
+	);
+
+	const isFullAccessRole =
+		selectedRole &&
+		(selectedRole.name === "owner" || selectedRole.name === "admin");
+
+	const onAssignRole = async (data: AssignRoleForm) => {
+		try {
+			await updateMemberRole({
+				userId,
+				roleId: data.roleId,
+				accessedProjects: isFullAccessRole ? [] : data.accessedProjects || [],
+				accessedServices: isFullAccessRole ? [] : data.accessedServices || [],
+			});
+			toast.success("Role assigned successfully");
+			await refetchUser();
+			await utils.user.all.invalidate();
+		} catch (error) {
+			const message =
+				error instanceof Error ? error.message : "Failed to assign role";
+			toast.error(message);
+		}
+	};
+
+	const onCreateRole = async (data: CreateRoleForm) => {
+		try {
+			if (editingRole) {
+				// Update existing role
+				await updateRole({
+					roleId: editingRole.roleId,
+					...data,
+					permissions: data.permissions,
+				});
+				toast.success("Role updated successfully");
+			} else {
+				// Create new role
+				await createRole({
+					...data,
+					permissions: data.permissions,
+				});
+				toast.success("Role created successfully");
+			}
+			refetchRoles();
+			setActiveTab("assign");
+			setEditingRole(null);
+			createForm.reset();
+		} catch (error) {
+			const message =
+				error instanceof Error
+					? error.message
+					: editingRole
+						? "Failed to update role"
+						: "Failed to create role";
+			toast.error(message);
+		}
+	};
+
+	const onEditRole = (role: {
+		roleId: string;
+		name: string;
+		description?: string | null;
+		permissions: string[] | null;
+	}) => {
+		setEditingRole({
+			roleId: role.roleId,
+			name: role.name,
+			description: role.description || "",
+			permissions: role.permissions || [],
+		});
+		setActiveTab("create");
+	};
+
+	const cancelEdit = () => {
+		setEditingRole(null);
+		setActiveTab("assign");
+		createForm.reset();
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Manage Roles
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-4xl">
+				<DialogHeader>
+					<DialogTitle>Role Management</DialogTitle>
+					<DialogDescription>
+						Assign existing roles or create new ones. The Owner role has full
+						access to all features.
+					</DialogDescription>
+				</DialogHeader>
+
+				<Tabs
+					value={activeTab}
+					onValueChange={(v) => setActiveTab(v as "assign" | "create")}
+				>
+					<TabsList className="grid w-full grid-cols-2">
+						<TabsTrigger value="assign">Assign Role</TabsTrigger>
+						<TabsTrigger value="create">
+							{editingRole ? "Edit Role" : "Create Role"}
+						</TabsTrigger>
+					</TabsList>
+
+					<TabsContent value="assign">
+						<Form {...assignForm}>
+							<form onSubmit={assignForm.handleSubmit(onAssignRole)}>
+								<div className="space-y-4 py-4">
+									<FormField
+										control={assignForm.control}
+										name="roleId"
+										render={({ field }) => (
+											<FormItem className="space-y-3">
+												<FormLabel>Select Role</FormLabel>
+												<FormControl>
+													<RadioGroup
+														onValueChange={field.onChange}
+														defaultValue={field.value}
+														className="space-y-4"
+													>
+														<div className="space-y-4">
+															<h4 className="text-sm font-medium">
+																Default Roles
+															</h4>
+															{defaultRoles?.roles?.map((role) => {
+																const isOwner = role.name === "owner";
+																const isAdmin = role.name === "admin";
+																if (isOwner) {
+																	return null;
+																}
+																return (
+																	<FormItem
+																		key={role.roleId}
+																		className="flex items-center space-x-3 space-y-0"
+																	>
+																		<FormControl>
+																			<RadioGroupItem
+																				value={role.roleId || ""}
+																				disabled={isOwner}
+																			/>
+																		</FormControl>
+																		<FormLabel className="font-normal">
+																			<div className="flex items-center gap-2">
+																				<span className="font-medium capitalize">
+																					{role.name}
+																				</span>
+																				{isAdmin && (
+																					<Badge
+																						variant="default"
+																						className="text-xs"
+																					>
+																						Full Access
+																					</Badge>
+																				)}
+																			</div>
+																			<div className="text-xs text-muted-foreground">
+																				{role.description}
+																			</div>
+																			{!isOwner && (
+																				<div className="flex flex-wrap gap-1 mt-1">
+																					{role.permissions?.map(
+																						(permission) => (
+																							<Badge
+																								key={permission.name}
+																								variant={
+																									isOwner
+																										? "default"
+																										: "secondary"
+																								}
+																								className="text-xs"
+																							>
+																								{permission.description}
+																							</Badge>
+																						),
+																					)}
+																				</div>
+																			)}
+																		</FormLabel>
+																	</FormItem>
+																);
+															})}
+														</div>
+
+														<Separator />
+
+														{/* Custom Roles Section */}
+														{roles &&
+															roles.filter((r) => !r.isSystem).length > 0 && (
+																<div className="space-y-4">
+																	<h4 className="text-sm font-medium">
+																		Custom Roles
+																	</h4>
+																	{roles
+																		?.filter((r) => !r.isSystem)
+																		.map((role) => (
+																			<FormItem
+																				key={role.roleId}
+																				className="flex items-center justify-between space-x-3 space-y-0"
+																			>
+																				<div className="flex items-center space-x-3">
+																					<FormControl>
+																						<RadioGroupItem
+																							value={role.roleId}
+																						/>
+																					</FormControl>
+																					<FormLabel className="font-normal">
+																						<span className="font-medium">
+																							{role.name}
+																						</span>
+																						<div className="text-xs text-muted-foreground">
+																							{role.description}
+																						</div>
+																						<p className="text-xs text-muted-foreground">
+																							{format(
+																								role.createdAt,
+																								"MMM d, yyyy",
+																							)}
+																						</p>
+																						<div className="flex flex-wrap gap-1 mt-1">
+																							{role.permissions?.map(
+																								(permission) => {
+																									const permissionInfo =
+																										defaultRoles?.permissions?.find(
+																											(p) =>
+																												p.name === permission,
+																										);
+																									return (
+																										<Badge
+																											key={permission}
+																											variant="secondary"
+																											className="text-xs"
+																										>
+																											{
+																												permissionInfo?.description
+																											}
+																										</Badge>
+																									);
+																								},
+																							)}
+																						</div>
+																					</FormLabel>
+																				</div>
+																				<div className="flex space-x-2">
+																					<Button
+																						variant="ghost"
+																						size="icon"
+																						onClick={() => onEditRole(role)}
+																						title="Edit role"
+																					>
+																						<PenBoxIcon className="h-4 w-4" />
+																					</Button>
+																					<DialogAction
+																						title="Delete Role"
+																						description="Are you sure you want to delete this role?"
+																						type="destructive"
+																						onClick={async () => {
+																							await deleteRole({
+																								roleId: role.roleId,
+																							})
+																								.then(() => {
+																									refetchRoles();
+																									toast.success(
+																										"Role deleted successfully",
+																									);
+																								})
+																								.catch((error) => {
+																									const message =
+																										error instanceof Error
+																											? error.message
+																											: "Error deleting role";
+																									toast.error(message);
+																								});
+																						}}
+																					>
+																						<Button
+																							variant="ghost"
+																							size="icon"
+																							className="text-destructive hover:text-destructive"
+																							isLoading={isDeletingRole}
+																						>
+																							<Trash2 className="h-4 w-4" />
+																						</Button>
+																					</DialogAction>
+																				</div>
+																			</FormItem>
+																		))}
+																</div>
+															)}
+													</RadioGroup>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									{/* Project Access Section - Only show if not full access role */}
+									{!isFullAccessRole && selectedRoleId && (
+										<>
+											<Separator />
+											<FormField
+												control={assignForm.control}
+												name="accessedProjects"
+												render={() => (
+													<FormItem className="space-y-4">
+														<div>
+															<FormLabel className="text-base">
+																Projects Access
+															</FormLabel>
+															<FormDescription>
+																Select the projects that the user can access
+															</FormDescription>
+														</div>
+														{projects?.length === 0 && (
+															<p className="text-sm text-muted-foreground">
+																No projects found
+															</p>
+														)}
+														<div className="grid md:grid-cols-2 gap-4">
+															{projects?.map((project, index) => {
+																const services = extractServices(project);
+																return (
+																	<FormField
+																		key={`project-${index}`}
+																		control={assignForm.control}
+																		name="accessedProjects"
+																		render={({ field }) => {
+																			return (
+																				<FormItem
+																					key={project.projectId}
+																					className="flex flex-col items-start space-x-4 rounded-lg p-4 border"
+																				>
+																					<div className="flex flex-row gap-4">
+																						<FormControl>
+																							<Checkbox
+																								checked={field.value?.includes(
+																									project.projectId,
+																								)}
+																								onCheckedChange={(checked) => {
+																									return checked
+																										? field.onChange([
+																												...(field.value || []),
+																												project.projectId,
+																											])
+																										: field.onChange(
+																												field.value?.filter(
+																													(value) =>
+																														value !==
+																														project.projectId,
+																												),
+																											);
+																								}}
+																							/>
+																						</FormControl>
+																						<FormLabel className="text-sm font-medium text-primary">
+																							{project.name}
+																						</FormLabel>
+																					</div>
+																					{services.length === 0 && (
+																						<p className="text-sm text-muted-foreground ml-6">
+																							No services found
+																						</p>
+																					)}
+																					{services?.map(
+																						(service, serviceIndex) => (
+																							<FormField
+																								key={`service-${serviceIndex}`}
+																								control={assignForm.control}
+																								name="accessedServices"
+																								render={({ field }) => {
+																									return (
+																										<FormItem
+																											key={service.id}
+																											className="flex flex-row items-start space-x-3 space-y-0 ml-6"
+																										>
+																											<FormControl>
+																												<Checkbox
+																													checked={field.value?.includes(
+																														service.id,
+																													)}
+																													onCheckedChange={(
+																														checked,
+																													) => {
+																														const currentProjects =
+																															assignForm.getValues(
+																																"accessedProjects",
+																															) || [];
+																														const currentServices =
+																															field.value || [];
+
+																														if (checked) {
+																															// Add service
+																															const newServices =
+																																[
+																																	...currentServices,
+																																	service.id,
+																																];
+																															field.onChange(
+																																newServices,
+																															);
+
+																															// Auto-select project if not already selected
+																															if (
+																																!currentProjects.includes(
+																																	project.projectId,
+																																)
+																															) {
+																																assignForm.setValue(
+																																	"accessedProjects",
+																																	[
+																																		...currentProjects,
+																																		project.projectId,
+																																	],
+																																);
+																															}
+																														} else {
+																															// Remove service
+																															const newServices =
+																																currentServices.filter(
+																																	(value) =>
+																																		value !==
+																																		service.id,
+																																);
+																															field.onChange(
+																																newServices,
+																															);
+
+																															// Check if any other services from this project are still selected
+																															const otherServicesFromProject =
+																																services.filter(
+																																	(s) =>
+																																		s.id !==
+																																			service.id &&
+																																		newServices.includes(
+																																			s.id,
+																																		),
+																																);
+
+																															// If no other services from this project, unselect the project
+																															if (
+																																otherServicesFromProject.length ===
+																																0
+																															) {
+																																assignForm.setValue(
+																																	"accessedProjects",
+																																	currentProjects.filter(
+																																		(p) =>
+																																			p !==
+																																			project.projectId,
+																																	),
+																																);
+																															}
+																														}
+																													}}
+																												/>
+																											</FormControl>
+																											<FormLabel className="text-sm text-muted-foreground">
+																												{service.name}
+																											</FormLabel>
+																										</FormItem>
+																									);
+																								}}
+																							/>
+																						),
+																					)}
+																				</FormItem>
+																			);
+																		}}
+																	/>
+																);
+															})}
+														</div>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</>
+									)}
+								</div>
+
+								<DialogFooter>
+									<Button type="submit" disabled={isAssigningRole}>
+										{isAssigningRole ? "Assigning..." : "Save Role"}
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</TabsContent>
+
+					{/* Create Role Tab Content */}
+					<TabsContent value="create">
+						<Form {...createForm}>
+							<form onSubmit={createForm.handleSubmit(onCreateRole)}>
+								<div className="space-y-4 py-4">
+									<FormField
+										control={createForm.control}
+										name="name"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Role Name</FormLabel>
+												<FormControl>
+													<Input placeholder="e.g. Developer" {...field} />
+												</FormControl>
+												<FormDescription>
+													Role name must be unique
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={createForm.control}
+										name="description"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Description</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="e.g. Role for development team members"
+														{...field}
+													/>
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={createForm.control}
+										name="permissions"
+										render={() => (
+											<FormItem>
+												<FormLabel>Permissions</FormLabel>
+												<Card className=" bg-transparent">
+													<CardHeader>
+														<CardTitle className="text-sm">
+															Available Permissions
+														</CardTitle>
+														<CardDescription>
+															Select the permissions for this role
+														</CardDescription>
+													</CardHeader>
+													<CardContent className="grid grid-cols-2 gap-4">
+														{defaultRoles?.permissions?.map((permission) => (
+															<FormField
+																key={permission.name}
+																control={createForm.control}
+																name="permissions"
+																render={({ field }) => (
+																	<FormItem
+																		key={permission.name}
+																		className="flex flex-row items-start space-x-3 space-y-0"
+																	>
+																		<FormControl>
+																			<Checkbox
+																				checked={field.value?.includes(
+																					permission.name,
+																				)}
+																				onCheckedChange={(checked) => {
+																					return checked
+																						? field.onChange([
+																								...(field.value || []),
+																								permission.name,
+																							])
+																						: field.onChange(
+																								field.value?.filter(
+																									(value) =>
+																										value !== permission.name,
+																								),
+																							);
+																				}}
+																			/>
+																		</FormControl>
+																		<FormLabel className="text-sm font-normal">
+																			{permission.description}
+																		</FormLabel>
+																	</FormItem>
+																)}
+															/>
+														))}
+													</CardContent>
+												</Card>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+								<DialogFooter>
+									<Button
+										type="submit"
+										disabled={isCreatingRole || isUpdatingRole}
+									>
+										{isCreatingRole || isUpdatingRole
+											? "Saving..."
+											: "Save Role"}
+									</Button>
+									{editingRole && (
+										<Button
+											variant="outline"
+											onClick={cancelEdit}
+											disabled={isUpdatingRole}
+										>
+											Cancel
+										</Button>
+									)}
+								</DialogFooter>
+							</form>
+						</Form>
+					</TabsContent>
+				</Tabs>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/users/add-permissions.tsx

@@ -1,444 +0,0 @@
-import { AlertBlock } from "@/components/shared/alert-block";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Switch } from "@/components/ui/switch";
-import { extractServices } from "@/pages/dashboard/project/[projectId]";
-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 addPermissions = z.object({
-	accessedProjects: z.array(z.string()).optional(),
-	accessedServices: z.array(z.string()).optional(),
-	canCreateProjects: z.boolean().optional().default(false),
-	canCreateServices: z.boolean().optional().default(false),
-	canDeleteProjects: z.boolean().optional().default(false),
-	canDeleteServices: z.boolean().optional().default(false),
-	canAccessToTraefikFiles: z.boolean().optional().default(false),
-	canAccessToDocker: z.boolean().optional().default(false),
-	canAccessToAPI: z.boolean().optional().default(false),
-	canAccessToSSHKeys: z.boolean().optional().default(false),
-	canAccessToGitProviders: z.boolean().optional().default(false),
-});
-
-type AddPermissions = z.infer<typeof addPermissions>;
-
-interface Props {
-	userId: string;
-}
-
-export const AddUserPermissions = ({ userId }: Props) => {
-	const { data: projects } = api.project.all.useQuery();
-
-	const { data, refetch } = api.user.one.useQuery(
-		{
-			userId,
-		},
-		{
-			enabled: !!userId,
-		},
-	);
-
-	const { mutateAsync, isError, error, isLoading } =
-		api.user.assignPermissions.useMutation();
-
-	const form = useForm<AddPermissions>({
-		defaultValues: {
-			accessedProjects: [],
-			accessedServices: [],
-		},
-		resolver: zodResolver(addPermissions),
-	});
-
-	useEffect(() => {
-		if (data) {
-			form.reset({
-				accessedProjects: data.accessedProjects || [],
-				accessedServices: data.accessedServices || [],
-				canCreateProjects: data.canCreateProjects,
-				canCreateServices: data.canCreateServices,
-				canDeleteProjects: data.canDeleteProjects,
-				canDeleteServices: data.canDeleteServices,
-				canAccessToTraefikFiles: data.canAccessToTraefikFiles,
-				canAccessToDocker: data.canAccessToDocker,
-				canAccessToAPI: data.canAccessToAPI,
-				canAccessToSSHKeys: data.canAccessToSSHKeys,
-				canAccessToGitProviders: data.canAccessToGitProviders,
-			});
-		}
-	}, [form, form.formState.isSubmitSuccessful, form.reset, data]);
-
-	const onSubmit = async (data: AddPermissions) => {
-		await mutateAsync({
-			id: userId,
-			canCreateServices: data.canCreateServices,
-			canCreateProjects: data.canCreateProjects,
-			canDeleteServices: data.canDeleteServices,
-			canDeleteProjects: data.canDeleteProjects,
-			canAccessToTraefikFiles: data.canAccessToTraefikFiles,
-			accessedProjects: data.accessedProjects || [],
-			accessedServices: data.accessedServices || [],
-			canAccessToDocker: data.canAccessToDocker,
-			canAccessToAPI: data.canAccessToAPI,
-			canAccessToSSHKeys: data.canAccessToSSHKeys,
-			canAccessToGitProviders: data.canAccessToGitProviders,
-		})
-			.then(async () => {
-				toast.success("Permissions updated");
-				refetch();
-			})
-			.catch(() => {
-				toast.error("Error updating the permissions");
-			});
-	};
-	return (
-		<Dialog>
-			<DialogTrigger className="" asChild>
-				<DropdownMenuItem
-					className="w-full cursor-pointer"
-					onSelect={(e) => e.preventDefault()}
-				>
-					Add Permissions
-				</DropdownMenuItem>
-			</DialogTrigger>
-			<DialogContent className="max-h-[85vh]  sm:max-w-4xl">
-				<DialogHeader>
-					<DialogTitle>Permissions</DialogTitle>
-					<DialogDescription>Add or remove permissions</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"
-					>
-						<FormField
-							control={form.control}
-							name="canCreateProjects"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Create Projects</FormLabel>
-										<FormDescription>
-											Allow the user to create projects
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canDeleteProjects"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Delete Projects</FormLabel>
-										<FormDescription>
-											Allow the user to delete projects
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canCreateServices"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Create Services</FormLabel>
-										<FormDescription>
-											Allow the user to create services
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canDeleteServices"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Delete Services</FormLabel>
-										<FormDescription>
-											Allow the user to delete services
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToTraefikFiles"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Traefik Files</FormLabel>
-										<FormDescription>
-											Allow the user to access to the Traefik Tab Files
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToDocker"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Docker</FormLabel>
-										<FormDescription>
-											Allow the user to access to the Docker Tab
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToAPI"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to API/CLI</FormLabel>
-										<FormDescription>
-											Allow the user to access to the API/CLI
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToSSHKeys"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to SSH Keys</FormLabel>
-										<FormDescription>
-											Allow to users to access to the SSH Keys section
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToGitProviders"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Git Providers</FormLabel>
-										<FormDescription>
-											Allow to users to access to the Git Providers section
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="accessedProjects"
-							render={() => (
-								<FormItem className="md:col-span-2">
-									<div className="mb-4">
-										<FormLabel className="text-base">Projects</FormLabel>
-										<FormDescription>
-											Select the Projects that the user can access
-										</FormDescription>
-									</div>
-									{projects?.length === 0 && (
-										<p className="text-sm text-muted-foreground">
-											No projects found
-										</p>
-									)}
-									<div className="grid md:grid-cols-2  gap-4">
-										{projects?.map((item, index) => {
-											const applications = extractServices(item);
-											return (
-												<FormField
-													key={`project-${index}`}
-													control={form.control}
-													name="accessedProjects"
-													render={({ field }) => {
-														return (
-															<FormItem
-																key={item.projectId}
-																className="flex flex-col items-start space-x-4 rounded-lg p-4 border"
-															>
-																<div className="flex flex-row gap-4">
-																	<FormControl>
-																		<Checkbox
-																			checked={field.value?.includes(
-																				item.projectId,
-																			)}
-																			onCheckedChange={(checked) => {
-																				return checked
-																					? field.onChange([
-																							...(field.value || []),
-																							item.projectId,
-																						])
-																					: field.onChange(
-																							field.value?.filter(
-																								(value) =>
-																									value !== item.projectId,
-																							),
-																						);
-																			}}
-																		/>
-																	</FormControl>
-																	<FormLabel className="text-sm font-medium text-primary">
-																		{item.name}
-																	</FormLabel>
-																</div>
-																{applications.length === 0 && (
-																	<p className="text-sm text-muted-foreground">
-																		No services found
-																	</p>
-																)}
-																{applications?.map((item, index) => (
-																	<FormField
-																		key={`project-${index}`}
-																		control={form.control}
-																		name="accessedServices"
-																		render={({ field }) => {
-																			return (
-																				<FormItem
-																					key={item.id}
-																					className="flex flex-row items-start space-x-3 space-y-0"
-																				>
-																					<FormControl>
-																						<Checkbox
-																							checked={field.value?.includes(
-																								item.id,
-																							)}
-																							onCheckedChange={(checked) => {
-																								return checked
-																									? field.onChange([
-																											...(field.value || []),
-																											item.id,
-																										])
-																									: field.onChange(
-																											field.value?.filter(
-																												(value) =>
-																													value !== item.id,
-																											),
-																										);
-																							}}
-																						/>
-																					</FormControl>
-																					<FormLabel className="text-sm text-muted-foreground">
-																						{item.name}
-																					</FormLabel>
-																				</FormItem>
-																			);
-																		}}
-																	/>
-																))}
-															</FormItem>
-														);
-													}}
-												/>
-											);
-										})}
-									</div>
-
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-						<DialogFooter className="flex w-full flex-row justify-end md:col-span-2">
-							<Button
-								isLoading={isLoading}
-								form="hook-form-add-permissions"
-								type="submit"
-							>
-								Update
-							</Button>
-						</DialogFooter>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
-	);
-};

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

@@ -30,9 +30,10 @@ import { format } from "date-fns";
 import { MoreHorizontal, Users } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
-import { AddUserPermissions } from "./add-permissions";
+import { AddUserPermissionsV2 } from "./add-permissions-v2";
 
 export const ShowUsers = () => {
+	const { data: user } = api.user.get.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data, isLoading, refetch } = api.user.all.useQuery();
 	const { mutateAsync } = api.user.remove.useMutation();
@@ -84,20 +85,22 @@ export const ShowUsers = () => {
 											</TableHeader>
 											<TableBody>
 												{data?.map((member) => {
+													const isSameUser = member.user.id === user?.user.id;
+
 													return (
 														<TableRow key={member.id}>
-															<TableCell className="w-[100px]">
-																{member.user.email}
+															<TableCell className="w-[250px]">
+																{member.user.email} {isSameUser && "(You)"}
 															</TableCell>
 															<TableCell className="text-center">
 																<Badge
 																	variant={
-																		member.role === "owner"
+																		member?.role?.name === "owner"
 																			? "default"
 																			: "secondary"
 																	}
 																>
-																	{member.role}
+																	{member?.role?.name}
 																</Badge>
 															</TableCell>
 															<TableCell className="text-center">
@@ -112,35 +115,77 @@ export const ShowUsers = () => {
 															</TableCell>
 
 															<TableCell className="text-right flex justify-end">
-																<DropdownMenu>
-																	<DropdownMenuTrigger asChild>
-																		<Button
-																			variant="ghost"
-																			className="h-8 w-8 p-0"
-																		>
-																			<span className="sr-only">Open menu</span>
-																			<MoreHorizontal className="h-4 w-4" />
-																		</Button>
-																	</DropdownMenuTrigger>
-																	<DropdownMenuContent align="end">
-																		<DropdownMenuLabel>
-																			Actions
-																		</DropdownMenuLabel>
+																{member.role !== "owner" && !isSameUser && (
+																	<DropdownMenu>
+																		<DropdownMenuTrigger asChild>
+																			<Button
+																				variant="ghost"
+																				className="h-8 w-8 p-0"
+																			>
+																				<span className="sr-only">
+																					Open menu
+																				</span>
+																				<MoreHorizontal className="h-4 w-4" />
+																			</Button>
+																		</DropdownMenuTrigger>
+																		<DropdownMenuContent align="end">
+																			<DropdownMenuLabel>
+																				Actions
+																			</DropdownMenuLabel>
 
-																		{member.role !== "owner" && (
-																			<AddUserPermissions
-																				userId={member.user.id}
-																			/>
-																		)}
-
-																		{member.role !== "owner" && (
 																			<>
-																				{!isCloud && (
-																					<DialogAction
-																						title="Delete User"
-																						description="Are you sure you want to delete this user?"
-																						type="destructive"
-																						onClick={async () => {
+																				<AddUserPermissionsV2
+																					userId={member.user.id}
+																				/>
+																			</>
+
+																			{!isCloud && (
+																				<DialogAction
+																					title="Delete User"
+																					description="Are you sure you want to delete this user?"
+																					type="destructive"
+																					onClick={async () => {
+																						await mutateAsync({
+																							userId: member.user.id,
+																						})
+																							.then(() => {
+																								toast.success(
+																									"User deleted successfully",
+																								);
+																								refetch();
+																							})
+																							.catch(() => {
+																								toast.error(
+																									"Error deleting destination",
+																								);
+																							});
+																					}}
+																				>
+																					<DropdownMenuItem
+																						className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+																						onSelect={(e) => e.preventDefault()}
+																					>
+																						Delete User
+																					</DropdownMenuItem>
+																				</DialogAction>
+																			)}
+
+																			<DialogAction
+																				title="Unlink User"
+																				description="Are you sure you want to unlink this user?"
+																				type="destructive"
+																				onClick={async () => {
+																					if (!isCloud) {
+																						const orgCount =
+																							await utils.user.checkUserOrganizations.fetch(
+																								{
+																									userId: member.user.id,
+																								},
+																							);
+
+																						console.log(orgCount);
+
+																						if (orgCount === 1) {
 																							await mutateAsync({
 																								userId: member.user.id,
 																							})
@@ -152,86 +197,40 @@ export const ShowUsers = () => {
 																								})
 																								.catch(() => {
 																									toast.error(
-																										"Error deleting destination",
+																										"Error deleting user",
 																									);
 																								});
-																						}}
-																					>
-																						<DropdownMenuItem
-																							className="w-full cursor-pointer text-red-500 hover:!text-red-600"
-																							onSelect={(e) =>
-																								e.preventDefault()
-																							}
-																						>
-																							Delete User
-																						</DropdownMenuItem>
-																					</DialogAction>
-																				)}
-
-																				<DialogAction
-																					title="Unlink User"
-																					description="Are you sure you want to unlink this user?"
-																					type="destructive"
-																					onClick={async () => {
-																						if (!isCloud) {
-																							const orgCount =
-																								await utils.user.checkUserOrganizations.fetch(
-																									{
-																										userId: member.user.id,
-																									},
-																								);
-
-																							console.log(orgCount);
-
-																							if (orgCount === 1) {
-																								await mutateAsync({
-																									userId: member.user.id,
-																								})
-																									.then(() => {
-																										toast.success(
-																											"User deleted successfully",
-																										);
-																										refetch();
-																									})
-																									.catch(() => {
-																										toast.error(
-																											"Error deleting user",
-																										);
-																									});
-																								return;
-																							}
+																							return;
 																						}
+																					}
 
-																						const { error } =
-																							await authClient.organization.removeMember(
-																								{
-																									memberIdOrEmail: member.id,
-																								},
-																							);
+																					const { error } =
+																						await authClient.organization.removeMember(
+																							{
+																								memberIdOrEmail: member.id,
+																							},
+																						);
 
-																						if (!error) {
-																							toast.success(
-																								"User unlinked successfully",
-																							);
-																							refetch();
-																						} else {
-																							toast.error(
-																								"Error unlinking user",
-																							);
-																						}
-																					}}
+																					if (!error) {
+																						toast.success(
+																							"User unlinked successfully",
+																						);
+																						refetch();
+																					} else {
+																						toast.error("Error unlinking user");
+																					}
+																				}}
+																			>
+																				<DropdownMenuItem
+																					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+																					onSelect={(e) => e.preventDefault()}
 																				>
-																					<DropdownMenuItem
-																						className="w-full cursor-pointer text-red-500 hover:!text-red-600"
-																						onSelect={(e) => e.preventDefault()}
-																					>
-																						Unlink User
-																					</DropdownMenuItem>
-																				</DialogAction>
-																			</>
-																		)}
-																	</DropdownMenuContent>
-																</DropdownMenu>
+																					Unlink User
+																				</DropdownMenuItem>
+																			</DialogAction>
+																		</DropdownMenuContent>
+																	</DropdownMenu>
+																)}
 															</TableCell>
 														</TableRow>
 													);

apps/dokploy/components/dashboard/settings/web-domain.tsx

@@ -62,9 +62,9 @@ type AddServerDomain = z.infer<typeof addServerDomain>;
 
 export const WebDomain = () => {
 	const { t } = useTranslation("settings");
-	const { data, refetch } = api.user.get.useQuery();
+	const { data, refetch } = api.webServer.get.useQuery();
 	const { mutateAsync, isLoading } =
-		api.settings.assignDomainServer.useMutation();
+		api.webServer.assignDomainServer.useMutation();
 
 	const form = useForm<AddServerDomain>({
 		defaultValues: {
@@ -79,10 +79,10 @@ export const WebDomain = () => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
-				domain: data?.user?.host || "",
-				certificateType: data?.user?.certificateType,
-				letsEncryptEmail: data?.user?.letsEncryptEmail || "",
-				https: data?.user?.https || false,
+				domain: data?.host || "",
+				certificateType: data?.certificateType,
+				letsEncryptEmail: data?.letsEncryptEmail || "",
+				https: data?.https || false,
 			});
 		}
 	}, [form, form.reset, data]);

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

@@ -16,13 +16,12 @@ import { UpdateServer } from "./web-server/update-server";
 
 export const WebServer = () => {
 	const { t } = useTranslation("settings");
-	const { data } = api.user.get.useQuery();
+	const { data } = api.webServer.get.useQuery();
 
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 
 	return (
 		<div className="w-full">
-			{/* <Card className={cn("rounded-lg w-full bg-transparent p-0", className)}></Card> */}
 			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
@@ -34,14 +33,6 @@ export const WebServer = () => {
 							{t("settings.server.webServer.description")}
 						</CardDescription>
 					</CardHeader>
-					{/* <CardHeader>
-						<CardTitle className="text-xl">
-							{t("settings.server.webServer.title")}
-						</CardTitle>
-						<CardDescription>
-							{t("settings.server.webServer.description")}
-						</CardDescription>
-					</CardHeader> */}
 					<CardContent className="space-y-6 py-6 border-t">
 						<div className="grid md:grid-cols-2 gap-4">
 							<ShowDokployActions />
@@ -53,7 +44,7 @@ export const WebServer = () => {
 
 						<div className="flex items-center flex-wrap justify-between gap-4">
 							<span className="text-sm text-muted-foreground">
-								Server IP: {data?.user.serverIp}
+								Server IP: {data?.serverIp}
 							</span>
 							<span className="text-sm text-muted-foreground">
 								Version: {dokployVersion}

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -1,11 +1,3 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
-import { useTranslation } from "next-i18next";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { useFieldArray, useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -27,15 +19,15 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-	Select,
-	SelectContent,
-	SelectGroup,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
+import { useTranslation } from "next-i18next";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
 
 interface Props {
 	children: React.ReactNode;
@@ -45,7 +37,6 @@ interface Props {
 const PortSchema = z.object({
 	targetPort: z.number().min(1, "Target port is required"),
 	publishedPort: z.number().min(1, "Published port is required"),
-	protocol: z.enum(["tcp", "udp", "sctp"]),
 });
 
 const TraefikPortsSchema = z.object({
@@ -84,17 +75,12 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 
 	useEffect(() => {
 		if (currentPorts) {
-			form.reset({
-				ports: currentPorts.map((port) => ({
-					...port,
-					protocol: port.protocol as "tcp" | "udp" | "sctp",
-				})),
-			});
+			form.reset({ ports: currentPorts });
 		}
 	}, [currentPorts, form]);
 
 	const handleAddPort = () => {
-		append({ targetPort: 0, publishedPort: 0, protocol: "tcp" });
+		append({ targetPort: 0, publishedPort: 0 });
 	};
 
 	const onSubmit = async (data: TraefikPortsForm) => {
@@ -110,9 +96,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 
 	return (
 		<>
-			<button type="button" onClick={() => setOpen(true)}>
-				{children}
-			</button>
+			<div onClick={() => setOpen(true)}>{children}</div>
 			<Dialog open={open} onOpenChange={setOpen}>
 				<DialogContent className="sm:max-w-3xl">
 					<DialogHeader>
@@ -159,8 +143,8 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 									<ScrollArea className="h-[400px] pr-4">
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
-												<Card key={field.id} className="bg-transparent">
-													<CardContent className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 transparent">
+												<Card key={field.id}>
+													<CardContent className="grid grid-cols-[1fr_1fr_auto] gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -184,6 +168,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																				);
 																			}}
 																			value={field.value || ""}
+																			className="w-full dark:bg-black"
 																			placeholder="e.g. 8080"
 																		/>
 																	</FormControl>
@@ -215,6 +200,7 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																				);
 																			}}
 																			value={field.value || ""}
+																			className="w-full dark:bg-black"
 																			placeholder="e.g. 80"
 																		/>
 																	</FormControl>
@@ -222,42 +208,6 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 																</FormItem>
 															)}
 														/>
-														<FormField
-															control={form.control}
-															name={`ports.${index}.protocol`}
-															render={({ field }) => (
-																<FormItem>
-																	<FormLabel className="text-sm font-medium text-muted-foreground">
-																		Protocol
-																	</FormLabel>
-																	<FormControl>
-																		<Select
-																			onValueChange={field.onChange}
-																			defaultValue={field.value}
-																		>
-																			<SelectTrigger>
-																				<SelectValue placeholder="Select a protocol" />
-																			</SelectTrigger>
-																			<SelectContent>
-																				<SelectGroup>
-																					{["tcp", "udp", "sctp"].map(
-																						(protocol) => (
-																							<SelectItem
-																								key={protocol}
-																								value={protocol}
-																							>
-																								{protocol}
-																							</SelectItem>
-																						),
-																					)}
-																				</SelectGroup>
-																			</SelectContent>
-																		</Select>
-																	</FormControl>
-																	<FormMessage />
-																</FormItem>
-															)}
-														/>
 
 														<div className="flex items-end">
 															<Button

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

@@ -46,15 +46,15 @@ interface Props {
 export const UpdateServerIp = ({ children }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 
-	const { data } = api.user.get.useQuery();
+	const { data } = api.webServer.get.useQuery();
 	const { data: ip } = api.server.publicIp.useQuery();
 
 	const { mutateAsync, isLoading, error, isError } =
-		api.user.update.useMutation();
+		api.webServer.update.useMutation();
 
 	const form = useForm<Schema>({
 		defaultValues: {
-			serverIp: data?.user.serverIp || "",
+			serverIp: data?.serverIp || "",
 		},
 		resolver: zodResolver(schema),
 	});
@@ -62,7 +62,7 @@ export const UpdateServerIp = ({ children }: Props) => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
-				serverIp: data.user.serverIp || "",
+				serverIp: data.serverIp || "",
 			});
 		}
 	}, [form, form.reset, data]);
@@ -80,7 +80,7 @@ export const UpdateServerIp = ({ children }: Props) => {
 		})
 			.then(async () => {
 				toast.success("Server IP Updated");
-				await utils.user.get.invalidate();
+				await utils.webServer.get.invalidate();
 				setIsOpen(false);
 			})
 			.catch(() => {

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

@@ -126,7 +126,7 @@ export const UpdateServer = ({
 					</TooltipProvider>
 				)}
 			</DialogTrigger>
-			<DialogContent className="max-w-lg">
+			<DialogContent className="max-w-lg p-6">
 				<div className="flex items-center justify-between mb-8">
 					<DialogTitle className="text-2xl font-semibold">
 						Web Server Update
@@ -253,7 +253,7 @@ export const UpdateServer = ({
 					<ToggleAutoCheckUpdates disabled={isLoading} />
 				</div>
 
-				<div className="space-y-4 flex items-center justify-end mt-4	">
+				<div className="space-y-4 flex items-center justify-end">
 					<div className="flex items-center gap-2">
 						<Button variant="outline" onClick={() => onOpenChange?.(false)}>
 							Cancel

apps/dokploy/components/dashboard/shared/Permissions.tsx

@@ -0,0 +1,28 @@
+import { api } from "@/utils/api";
+import type { PermissionName } from "@dokploy/server/lib/permissions";
+import { useMemo } from "react";
+
+interface Props {
+	permissions: PermissionName[];
+	children: React.ReactNode;
+}
+
+export const Permissions = ({ permissions, children }: Props) => {
+	const { data: auth } = api.user.get.useQuery();
+
+	const hasPermission = useMemo(() => {
+		if (auth?.role?.name === "owner" || auth?.role?.name === "admin") {
+			return true;
+		}
+
+		return permissions.some((permission) =>
+			auth?.role?.permissions?.includes(permission),
+		);
+	}, [permissions, auth]);
+
+	if (!hasPermission) {
+		return null;
+	}
+
+	return <>{children}</>;
+};

apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx

@@ -1,7 +1,6 @@
 import { ShowResources } from "@/components/dashboard/application/advanced/show-resources";
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
-import { ShowClusterSettings } from "../application/advanced/cluster/show-cluster-settings";
 import { RebuildDatabase } from "./rebuild-database";
 
 interface Props {
@@ -13,7 +12,6 @@ export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5">
 			<ShowCustomCommand id={id} type={type} />
-			<ShowClusterSettings id={id} type={type} />
 			<ShowVolumes id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />