refactor: migrate admin API calls to user router

feat: added bulk actions for services start and stop and added service status for domain dropdown

.circleci/config.yml

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

.github/workflows/create-pr.yml

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

.github/workflows/deploy.yml

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

.github/workflows/dokploy.yml

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

.github/workflows/monitoring.yml

@@ -0,0 +1,118 @@
+name: Dokploy Monitoring Build
+
+on:
+  push:
+    branches: [main, canary]
+
+env:
+  IMAGE_NAME: dokploy/monitoring
+
+jobs:
+  docker-amd:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set tag
+        id: meta
+        run: |
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            TAG="latest"
+          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
+            TAG="canary"
+          else
+            TAG="feature"
+          fi
+          echo "tags=${IMAGE_NAME}:${TAG}-amd64" >> $GITHUB_OUTPUT
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile.monitoring
+          platforms: linux/amd64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+  docker-arm:
+    runs-on: ubuntu-24.04-arm
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set
+        id: meta
+        run: |
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            TAG="latest"
+          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
+            TAG="canary"
+          else
+            TAG="feature"
+          fi
+          echo "tags=${IMAGE_NAME}:${TAG}-arm64" >> $GITHUB_OUTPUT
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile.monitoring
+          platforms: linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+
+  combine-manifests:
+    needs: [docker-amd, docker-arm]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Create and push manifests
+        run: |
+          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
+            TAG="latest"
+
+            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
+              ${IMAGE_NAME}:${TAG}-amd64 \
+              ${IMAGE_NAME}:${TAG}-arm64
+
+          elif [ "${{ github.ref }}" = "refs/heads/canary" ]; then
+            TAG="canary"
+            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
+              ${IMAGE_NAME}:${TAG}-amd64 \
+              ${IMAGE_NAME}:${TAG}-arm64
+
+          else
+            TAG="feature"
+            docker buildx imagetools create -t ${IMAGE_NAME}:${TAG} \
+              ${IMAGE_NAME}:${TAG}-amd64 \
+              ${IMAGE_NAME}:${TAG}-arm64
+          fi

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+
+.db

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:20.9-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

Dockerfile.cloud

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:20.9-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

Dockerfile.monitoring

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

Dockerfile.schedule

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:20.9-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

Dockerfile.server

@@ -1,4 +1,4 @@
-FROM node:20-slim AS base
+FROM node:20.9-slim AS base
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable

README.md

@@ -93,6 +93,7 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
 <a href="https://cloudblast.io/?ref=dokploy "><img src="https://cloudblast.io/img/logo-icon.193cf13e.svg" width="250px" alt="Cloudblast.io"/></a>
 <a href="https://startupfa.me/?ref=dokploy "><img src=".github/sponsors/startupfame.png" width="65px" alt="Startupfame"/></a>
 <a href="https://itsdb-center.com?ref=dokploy "><img src=".github/sponsors/its.png" width="65px" alt="Itsdb-center"/></a>
+<a href="https://openalternative.co/?ref=dokploy "><img src=".github/sponsors/openalternative.png" width="65px" alt="Openalternative"/></a>
 </div>
 
 ### Community Backers 🤝

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

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

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

@@ -45,7 +45,7 @@ const baseApp: ApplicationNested = {
 	previewWildcard: "",
 	project: {
 		env: "",
-		adminId: "",
+		organizationId: "",
 		name: "",
 		description: "",
 		createdAt: "",

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

@@ -5,7 +5,7 @@ vi.mock("node:fs", () => ({
 	default: fs,
 }));
 
-import type { Admin, FileConfig } from "@dokploy/server";
+import type { FileConfig, User } from "@dokploy/server";
 import {
 	createDefaultServerTraefikConfig,
 	loadOrCreateConfig,
@@ -13,10 +13,34 @@ import {
 } from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
-const baseAdmin: Admin = {
-	createdAt: "",
-	authId: "",
-	adminId: "string",
+const baseAdmin: User = {
+	enablePaidFeatures: false,
+	metricsConfig: {
+		containers: {
+			refreshRate: 20,
+			services: {
+				include: [],
+				exclude: [],
+			},
+		},
+		server: {
+			type: "Dokploy",
+			cronJob: "",
+			port: 4500,
+			refreshRate: 20,
+			retentionDays: 2,
+			token: "",
+			thresholds: {
+				cpu: 0,
+				memory: 0,
+			},
+			urlCallback: "",
+		},
+	},
+	cleanupCacheApplications: false,
+	cleanupCacheOnCompose: false,
+	cleanupCacheOnPreviews: false,
+	createdAt: new Date(),
 	serverIp: null,
 	certificateType: "none",
 	host: null,
@@ -27,6 +51,31 @@ const baseAdmin: Admin = {
 	serversQuantity: 0,
 	stripeCustomerId: "",
 	stripeSubscriptionId: "",
+	accessedProjects: [],
+	accessedServices: [],
+	banExpires: new Date(),
+	banned: true,
+	banReason: "",
+	canAccessToAPI: false,
+	canCreateProjects: false,
+	canDeleteProjects: false,
+	canDeleteServices: false,
+	canAccessToDocker: false,
+	canAccessToSSHKeys: false,
+	canCreateServices: false,
+	canAccessToTraefikFiles: false,
+	canAccessToGitProviders: false,
+	email: "",
+	expirationDate: "",
+	id: "",
+	isRegistered: false,
+	name: "",
+	createdAt2: new Date().toISOString(),
+	emailVerified: false,
+	image: "",
+	token: "",
+	updatedAt: new Date(),
+	twoFactorEnabled: false,
 };
 
 beforeEach(() => {

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

@@ -26,7 +26,7 @@ const baseApp: ApplicationNested = {
 	previewWildcard: "",
 	project: {
 		env: "",
-		adminId: "",
+		organizationId: "",
 		name: "",
 		description: "",
 		createdAt: "",

apps/dokploy/__test__/vitest.config.ts

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

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

@@ -144,38 +144,6 @@ export const ShowResources = ({ id, type }: Props) => {
 						className="grid w-full gap-8 "
 					>
 						<div className="grid w-full md:grid-cols-2 gap-4">
-							<FormField
-								control={form.control}
-								name="memoryReservation"
-								render={({ field }) => (
-									<FormItem>
-										<div className="flex items-center gap-2">
-											<FormLabel>Memory Reservation</FormLabel>
-											<TooltipProvider>
-												<Tooltip delayDuration={0}>
-													<TooltipTrigger>
-														<InfoIcon className="h-4 w-4 text-muted-foreground" />
-													</TooltipTrigger>
-													<TooltipContent>
-														<p>
-															Memory soft limit in bytes. Example: 256MB =
-															268435456 bytes
-														</p>
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
-										</div>
-										<FormControl>
-											<Input
-												placeholder="268435456 (256MB in bytes)"
-												{...field}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
 							<FormField
 								control={form.control}
 								name="memoryLimit"
@@ -209,6 +177,37 @@ export const ShowResources = ({ id, type }: Props) => {
 									);
 								}}
 							/>
+							<FormField
+								control={form.control}
+								name="memoryReservation"
+								render={({ field }) => (
+									<FormItem>
+										<div className="flex items-center gap-2">
+											<FormLabel>Memory Reservation</FormLabel>
+											<TooltipProvider>
+												<Tooltip delayDuration={0}>
+													<TooltipTrigger>
+														<InfoIcon className="h-4 w-4 text-muted-foreground" />
+													</TooltipTrigger>
+													<TooltipContent>
+														<p>
+															Memory soft limit in bytes. Example: 256MB =
+															268435456 bytes
+														</p>
+													</TooltipContent>
+												</Tooltip>
+											</TooltipProvider>
+										</div>
+										<FormControl>
+											<Input
+												placeholder="268435456 (256MB in bytes)"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 
 							<FormField
 								control={form.control}

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

@@ -45,8 +45,8 @@ export const ShowVolumes = ({ id, type }: Props) => {
 				<div>
 					<CardTitle className="text-xl">Volumes</CardTitle>
 					<CardDescription>
-						If you want to persist data in this postgres database use the
-						following config to setup the volumes
+						If you want to persist data in this service use the following config
+						to setup the volumes
 					</CardDescription>
 				</div>
 
@@ -100,7 +100,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 											{mount.type === "file" && (
 												<div className="flex flex-col gap-1">
 													<span className="font-medium">Content</span>
-													<span className="text-sm text-muted-foreground">
+													<span className="text-sm text-muted-foreground line-clamp-[10] whitespace-break-spaces">
 														{mount.content}
 													</span>
 												</div>
@@ -113,12 +113,21 @@ export const ShowVolumes = ({ id, type }: Props) => {
 													</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>
+											{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>
 										<div className="flex flex-row gap-1">
 											<UpdateVolume

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

@@ -17,8 +17,15 @@ interface Props {
 	open: boolean;
 	onClose: () => void;
 	serverId?: string;
+	errorMessage?: string;
 }
-export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
+export const ShowDeployment = ({
+	logPath,
+	open,
+	onClose,
+	serverId,
+	errorMessage,
+}: Props) => {
 	const [data, setData] = useState("");
 	const [showExtraLogs, setShowExtraLogs] = useState(false);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
@@ -99,6 +106,8 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 		}
 	}, [filteredLogs, autoScroll]);
 
+	const optionalErrors = parseLogs(errorMessage || "");
+
 	return (
 		<Dialog
 			open={open}
@@ -157,9 +166,17 @@ export const ShowDeployment = ({ logPath, open, onClose, serverId }: Props) => {
 							<TerminalLine key={index} log={log} noTimestamp />
 						))
 					) : (
-						<div className="flex justify-center items-center h-full text-muted-foreground">
-							<Loader2 className="h-6 w-6 animate-spin" />
-						</div>
+						<>
+							{optionalErrors.length > 0 ? (
+								optionalErrors.map((log: LogLine, index: number) => (
+									<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
+								))
+							) : (
+								<div className="flex justify-center items-center h-full text-muted-foreground">
+									<Loader2 className="h-6 w-6 animate-spin" />
+								</div>
+							)}
+						</>
 					)}
 				</div>
 			</DialogContent>

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

@@ -8,7 +8,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
+import { type RouterOutputs, api } from "@/utils/api";
 import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueues } from "./cancel-queues";
@@ -18,8 +18,11 @@ import { ShowDeployment } from "./show-deployment";
 interface Props {
 	applicationId: string;
 }
+
 export const ShowDeployments = ({ applicationId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
 	const { data } = api.application.one.useQuery({ applicationId });
 	const { data: deployments } = api.deployment.all.useQuery(
 		{ applicationId },
@@ -100,7 +103,7 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 
 									<Button
 										onClick={() => {
-											setActiveLog(deployment.logPath);
+											setActiveLog(deployment);
 										}}
 									>
 										View
@@ -112,9 +115,10 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 				)}
 				<ShowDeployment
 					serverId={data?.serverId || ""}
-					open={activeLog !== null}
+					open={Boolean(activeLog && activeLog.logPath !== null)}
 					onClose={() => setActiveLog(null)}
-					logPath={activeLog}
+					logPath={activeLog?.logPath || ""}
+					errorMessage={activeLog?.errorMessage || ""}
 				/>
 			</CardContent>
 		</Card>

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

@@ -7,7 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
@@ -74,60 +73,66 @@ export const ShowDomains = ({ applicationId }: Props) => {
 								return (
 									<div
 										key={item.domainId}
-										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
 										<Link
+											className="md:basis-1/2 flex gap-2  items-center hover:underline transition-all w-full"
 											target="_blank"
 											href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 										>
-											<ExternalLink className="size-5" />
+											<span className="truncate max-w-full text-sm">
+												{item.host}
+											</span>
+											<ExternalLink className="size-4 min-w-4" />
 										</Link>
 
-										<Input disabled value={item.host} />
-										<Button variant="outline" disabled>
-											{item.path}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.port}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.https ? "HTTPS" : "HTTP"}
-										</Button>
-										<div className="flex flex-row gap-1">
-											<AddDomain
-												applicationId={applicationId}
-												domainId={item.domainId}
-											>
-												<Button variant="ghost">
-													<PenBoxIcon className="size-4 text-muted-foreground" />
-												</Button>
-											</AddDomain>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+											</div>
+
+											<div className="flex gap-2">
+												<AddDomain
+													applicationId={applicationId}
+													domainId={item.domainId}
 												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomain>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
+														})
+															.then(() => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-red-500/10"
+														isLoading={isRemoving}
+													>
+														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													</Button>
+												</DialogAction>
+											</div>
 										</div>
 									</div>
 								);

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

@@ -235,7 +235,7 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -245,7 +245,12 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.username}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",

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

@@ -226,7 +226,7 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -236,7 +236,12 @@ export const SaveGithubProvider = ({ applicationId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.login}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",

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

@@ -248,7 +248,7 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 														{repositories?.map((repo) => {
 															return (
 																<CommandItem
-																	value={repo.url}
+																	value={repo.name}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -260,7 +260,12 @@ export const SaveGitlabProvider = ({ applicationId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	{repo.name}
+																	<span className="flex items-center gap-2">
+																		<span>{repo.name}</span>
+																		<span className="text-muted-foreground text-xs">
+																			{repo.owner.username}
+																		</span>
+																	</span>
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",

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

@@ -26,7 +26,9 @@ export const ShowPreviewBuilds = ({
 	serverId,
 	trigger,
 }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
 	const [isOpen, setIsOpen] = useState(false);
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -77,7 +79,7 @@ export const ShowPreviewBuilds = ({
 
 								<Button
 									onClick={() => {
-										setActiveLog(deployment.logPath);
+										setActiveLog(deployment);
 									}}
 								>
 									View
@@ -89,9 +91,10 @@ export const ShowPreviewBuilds = ({
 			</DialogContent>
 			<ShowDeployment
 				serverId={serverId || ""}
-				open={activeLog !== null}
+				open={Boolean(activeLog && activeLog.logPath !== null)}
 				onClose={() => setActiveLog(null)}
-				logPath={activeLog}
+				logPath={activeLog?.logPath || ""}
+				errorMessage={activeLog?.errorMessage || ""}
 			/>
 		</Dialog>
 	);

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

@@ -20,9 +20,10 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
+import type { ServiceType } from "@dokploy/server/db/schema";
 import { zodResolver } from "@hookform/resolvers/zod";
+import copy from "copy-to-clipboard";
 import { Copy, Trash2 } from "lucide-react";
-import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -39,16 +40,42 @@ const deleteComposeSchema = z.object({
 type DeleteCompose = z.infer<typeof deleteComposeSchema>;
 
 interface Props {
-	composeId: string;
+	id: string;
+	type: ServiceType | "application";
 }
 
-export const DeleteCompose = ({ composeId }: Props) => {
+export const DeleteService = ({ id, type }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
-	const { mutateAsync, isLoading } = api.compose.delete.useMutation();
-	const { data } = api.compose.one.useQuery(
-		{ composeId },
-		{ enabled: !!composeId },
-	);
+
+	const queryMap = {
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		compose: () =>
+			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
+	};
+	const { data, refetch } = queryMap[type]
+		? queryMap[type]()
+		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
+
+	const mutationMap = {
+		postgres: () => api.postgres.remove.useMutation(),
+		redis: () => api.redis.remove.useMutation(),
+		mysql: () => api.mysql.remove.useMutation(),
+		mariadb: () => api.mariadb.remove.useMutation(),
+		application: () => api.application.delete.useMutation(),
+		mongo: () => api.mongo.remove.useMutation(),
+		compose: () => api.compose.delete.useMutation(),
+	};
+	const { mutateAsync, isLoading } = mutationMap[type]
+		? mutationMap[type]()
+		: api.mongo.remove.useMutation();
 	const { push } = useRouter();
 	const form = useForm<DeleteCompose>({
 		defaultValues: {
@@ -62,14 +89,23 @@ export const DeleteCompose = ({ composeId }: Props) => {
 		const expectedName = `${data?.name}/${data?.appName}`;
 		if (formData.projectName === expectedName) {
 			const { deleteVolumes } = formData;
-			await mutateAsync({ composeId, deleteVolumes })
+			await mutateAsync({
+				mongoId: id || "",
+				postgresId: id || "",
+				redisId: id || "",
+				mysqlId: id || "",
+				mariadbId: id || "",
+				applicationId: id || "",
+				composeId: id || "",
+				deleteVolumes,
+			})
 				.then((result) => {
 					push(`/dashboard/project/${result?.projectId}`);
-					toast.success("Compose deleted successfully");
+					toast.success("deleted successfully");
 					setIsOpen(false);
 				})
 				.catch(() => {
-					toast.error("Error deleting the compose");
+					toast.error("Error deleting the service");
 				});
 		} else {
 			form.setError("projectName", {
@@ -95,8 +131,8 @@ export const DeleteCompose = ({ composeId }: Props) => {
 					<DialogTitle>Are you absolutely sure?</DialogTitle>
 					<DialogDescription>
 						This action cannot be undone. This will permanently delete the
-						compose. If you are sure please enter the compose name to delete
-						this compose.
+						service. If you are sure please enter the service name to delete
+						this service.
 					</DialogDescription>
 				</DialogHeader>
 				<div className="grid gap-4">
@@ -119,9 +155,7 @@ export const DeleteCompose = ({ composeId }: Props) => {
 													variant="outline"
 													onClick={() => {
 														if (data?.name && data?.appName) {
-															navigator.clipboard.writeText(
-																`${data.name}/${data.appName}`,
-															);
+															copy(`${data.name}/${data.appName}`);
 															toast.success("Copied to clipboard. Be careful!");
 														}
 													}}
@@ -142,27 +176,29 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
-							<FormField
-								control={form.control}
-								name="deleteVolumes"
-								render={({ field }) => (
-									<FormItem>
-										<div className="flex items-center">
-											<FormControl>
-												<Checkbox
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
+							{type === "compose" && (
+								<FormField
+									control={form.control}
+									name="deleteVolumes"
+									render={({ field }) => (
+										<FormItem>
+											<div className="flex items-center">
+												<FormControl>
+													<Checkbox
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
 
-											<FormLabel className="ml-2">
-												Delete volumes associated with this compose
-											</FormLabel>
-										</div>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
+												<FormLabel className="ml-2">
+													Delete volumes associated with this compose
+												</FormLabel>
+											</div>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
 						</form>
 					</Form>
 				</div>

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

@@ -17,12 +17,14 @@ interface Props {
 	serverId?: string;
 	open: boolean;
 	onClose: () => void;
+	errorMessage?: string;
 }
 export const ShowDeploymentCompose = ({
 	logPath,
 	open,
 	onClose,
 	serverId,
+	errorMessage,
 }: Props) => {
 	const [data, setData] = useState("");
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
@@ -105,6 +107,8 @@ export const ShowDeploymentCompose = ({
 		}
 	}, [filteredLogs, autoScroll]);
 
+	const optionalErrors = parseLogs(errorMessage || "");
+
 	return (
 		<Dialog
 			open={open}
@@ -161,9 +165,17 @@ export const ShowDeploymentCompose = ({
 							<TerminalLine key={index} log={log} noTimestamp />
 						))
 					) : (
-						<div className="flex justify-center items-center h-full text-muted-foreground">
-							<Loader2 className="h-6 w-6 animate-spin" />
-						</div>
+						<>
+							{optionalErrors.length > 0 ? (
+								optionalErrors.map((log: LogLine, index: number) => (
+									<TerminalLine key={`extra-${index}`} log={log} noTimestamp />
+								))
+							) : (
+								<div className="flex justify-center items-center h-full text-muted-foreground">
+									<Loader2 className="h-6 w-6 animate-spin" />
+								</div>
+							)}
+						</>
 					)}
 				</div>
 			</DialogContent>

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

@@ -8,7 +8,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { api } from "@/utils/api";
+import { type RouterOutputs, api } from "@/utils/api";
 import { RocketIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { CancelQueuesCompose } from "./cancel-queues-compose";
@@ -19,7 +19,9 @@ interface Props {
 	composeId: string;
 }
 export const ShowDeploymentsCompose = ({ composeId }: Props) => {
-	const [activeLog, setActiveLog] = useState<string | null>(null);
+	const [activeLog, setActiveLog] = useState<
+		RouterOutputs["deployment"]["all"][number] | null
+	>(null);
 	const { data } = api.compose.one.useQuery({ composeId });
 	const { data: deployments } = api.deployment.allByCompose.useQuery(
 		{ composeId },
@@ -100,7 +102,7 @@ export const ShowDeploymentsCompose = ({ composeId }: Props) => {
 
 									<Button
 										onClick={() => {
-											setActiveLog(deployment.logPath);
+											setActiveLog(deployment);
 										}}
 									>
 										View
@@ -112,9 +114,10 @@ export const ShowDeploymentsCompose = ({ composeId }: Props) => {
 				)}
 				<ShowDeploymentCompose
 					serverId={data?.serverId || ""}
-					open={activeLog !== null}
+					open={Boolean(activeLog && activeLog.logPath !== null)}
 					onClose={() => setActiveLog(null)}
-					logPath={activeLog}
+					logPath={activeLog?.logPath || ""}
+					errorMessage={activeLog?.errorMessage || ""}
 				/>
 			</CardContent>
 		</Card>

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

@@ -7,7 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
@@ -74,59 +73,70 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 								return (
 									<div
 										key={item.domainId}
-										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
-										<Link target="_blank" href={`http://${item.host}`}>
-											<ExternalLink className="size-5" />
-										</Link>
-										<Button variant="outline" disabled>
-											{item.serviceName}
-										</Button>
-										<Input disabled value={item.host} />
-										<Button variant="outline" disabled>
-											{item.path}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.port}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.https ? "HTTPS" : "HTTP"}
-										</Button>
-										<div className="flex flex-row gap-1">
-											<AddDomainCompose
-												composeId={composeId}
-												domainId={item.domainId}
+										<div className="md:basis-1/2 flex gap-6 w-full items-center">
+											<span className="opacity-50 text-center font-medium text-sm whitespace-nowrap">
+												{item.serviceName}
+											</span>
+
+											<Link
+												className="flex gap-2 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
+												target="_blank"
+												href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 											>
-												<Button variant="ghost">
-													<PenBoxIcon className="size-4 text-muted-foreground" />
-												</Button>
-											</AddDomainCompose>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
+												<span className="truncate  text-sm">{item.host}</span>
+												<ExternalLink className="size-4 min-w-4" />
+											</Link>
+										</div>
+
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+											</div>
+
+											<div className="flex gap-2">
+												<AddDomainCompose
+													composeId={composeId}
+													domainId={item.domainId}
 												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomainCompose>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
+														})
+															.then((data) => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
+												>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-red-500/10"
+														isLoading={isRemoving}
+													>
+														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													</Button>
+												</DialogAction>
+											</div>
 										</div>
 									</div>
 								);

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

@@ -14,7 +14,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
-import { RandomizeCompose } from "./randomize-compose";
+import { ShowUtilities } from "./show-utilities";
 
 interface Props {
 	composeId: string;
@@ -125,7 +125,7 @@ services:
 				</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">
-						<RandomizeCompose composeId={composeId} />
+						<ShowUtilities composeId={composeId} />
 					</div>
 					<Button
 						type="submit"

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

@@ -237,7 +237,7 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -247,7 +247,12 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.username}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",

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

@@ -228,7 +228,7 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 													<CommandGroup>
 														{repositories?.map((repo) => (
 															<CommandItem
-																value={repo.url}
+																value={repo.name}
 																key={repo.url}
 																onSelect={() => {
 																	form.setValue("repository", {
@@ -238,7 +238,12 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
 																	form.setValue("branch", "");
 																}}
 															>
-																{repo.name}
+																<span className="flex items-center gap-2">
+																	<span>{repo.name}</span>
+																	<span className="text-muted-foreground text-xs">
+																		{repo.owner.login}
+																	</span>
+																</span>
 																<CheckIcon
 																	className={cn(
 																		"ml-auto h-4 w-4",

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

@@ -250,7 +250,7 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 														{repositories?.map((repo) => {
 															return (
 																<CommandItem
-																	value={repo.url}
+																	value={repo.name}
 																	key={repo.url}
 																	onSelect={() => {
 																		form.setValue("repository", {
@@ -262,7 +262,12 @@ export const SaveGitlabProviderCompose = ({ composeId }: Props) => {
 																		form.setValue("branch", "");
 																	}}
 																>
-																	{repo.name}
+																	<span className="flex items-center gap-2">
+																		<span>{repo.name}</span>
+																		<span className="text-muted-foreground text-xs">
+																			{repo.owner.username}
+																		</span>
+																	</span>
 																	<CheckIcon
 																		className={cn(
 																			"ml-auto h-4 w-4",

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

@@ -0,0 +1,191 @@
+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) => {
+				randomizeCompose();
+				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);
+				toast.success("Compose Isolated");
+			})
+			.catch(() => {
+				toast.error("Error isolating the compose");
+			});
+	};
+
+	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 Randomize ({data?.appName})</FormLabel>
+											<FormDescription>
+												Enable randomize 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/randomize-compose.tsx

@@ -1,14 +1,10 @@
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
-import { CardTitle } from "@/components/ui/card";
 import {
-	Dialog,
-	DialogContent,
 	DialogDescription,
 	DialogHeader,
 	DialogTitle,
-	DialogTrigger,
 } from "@/components/ui/dialog";
 import {
 	Form,
@@ -20,11 +16,6 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import {
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSlot,
-} from "@/components/ui/input-otp";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -70,6 +61,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	const suffix = form.watch("suffix");
 
 	useEffect(() => {
+		randomizeCompose();
 		if (data) {
 			form.reset({
 				suffix: data?.suffix || "",
@@ -110,126 +102,117 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	};
 
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
-			<DialogTrigger asChild onClick={() => randomizeCompose()}>
-				<Button className="max-lg:w-full" variant="outline">
-					<Dices className="h-4 w-4" />
-					Randomize Compose
-				</Button>
-			</DialogTrigger>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
-				<DialogHeader>
-					<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
-					<DialogDescription>
-						Use this in case you want to deploy the same compose file and you
-						have conflicts with some property like volumes, networks, etc.
-					</DialogDescription>
-				</DialogHeader>
-				<div className="text-sm text-muted-foreground flex flex-col gap-2">
-					<span>
-						This will randomize the compose file and will add a suffix to the
-						property to avoid conflicts
-					</span>
-					<ul className="list-disc list-inside">
-						<li>volumes</li>
-						<li>networks</li>
-						<li>services</li>
-						<li>configs</li>
-						<li>secrets</li>
-					</ul>
-					<AlertBlock type="info">
-						When you activate this option, we will include a env
-						`COMPOSE_PREFIX` variable to the compose file so you can use it in
-						your compose file.
-					</AlertBlock>
-				</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="suffix"
-									render={({ field }) => (
-										<FormItem className="flex flex-col justify-center max-sm:items-center w-full">
-											<FormLabel>Suffix</FormLabel>
-											<FormControl>
-												<Input
-													placeholder="Enter a suffix (Optional, example: prod)"
-													{...field}
-												/>
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="randomize"
-									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>Apply Randomize</FormLabel>
-												<FormDescription>
-													Apply randomize 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>
-								<Button
-									type="button"
-									variant="secondary"
-									onClick={async () => {
-										await randomizeCompose();
-									}}
-									className="lg:w-fit"
-								>
-									Random
-								</Button>
-							</div>
+		<div className="w-full">
+			<DialogHeader>
+				<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
+				<DialogDescription>
+					Use this in case you want to deploy the same compose file and you have
+					conflicts with some property like volumes, networks, etc.
+				</DialogDescription>
+			</DialogHeader>
+			<div className="text-sm text-muted-foreground flex flex-col gap-2">
+				<span>
+					This will randomize the compose file and will add a suffix to the
+					property to avoid conflicts
+				</span>
+				<ul className="list-disc list-inside">
+					<li>volumes</li>
+					<li>networks</li>
+					<li>services</li>
+					<li>configs</li>
+					<li>secrets</li>
+				</ul>
+				<AlertBlock type="info">
+					When you activate this option, we will include a env `COMPOSE_PREFIX`
+					variable to the compose file so you can use it in your compose file.
+				</AlertBlock>
+			</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>
-						<pre>
-							<CodeEditor
-								value={compose || ""}
-								language="yaml"
-								readOnly
-								height="50rem"
+					)}
+
+					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
+						<div>
+							<FormField
+								control={form.control}
+								name="suffix"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center max-sm:items-center w-full mt-4">
+										<FormLabel>Suffix</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Enter a suffix (Optional, example: prod)"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
 							/>
-						</pre>
-					</form>
-				</Form>
-			</DialogContent>
-		</Dialog>
+							<FormField
+								control={form.control}
+								name="randomize"
+								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>Apply Randomize</FormLabel>
+											<FormDescription>
+												Apply randomize 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>
+							<Button
+								type="button"
+								variant="secondary"
+								onClick={async () => {
+									await randomizeCompose();
+								}}
+								className="lg:w-fit"
+							>
+								Random
+							</Button>
+						</div>
+					</div>
+					<pre>
+						<CodeEditor
+							value={compose || ""}
+							language="yaml"
+							readOnly
+							height="50rem"
+						/>
+					</pre>
+				</form>
+			</Form>
+		</div>
 	);
 };

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="max-h-screen overflow-y-auto 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/database/backups/show-backups.tsx

@@ -75,14 +75,14 @@ export const ShowBackups = ({ id, type }: Props) => {
 				{data?.length === 0 ? (
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
+						<span className="text-base text-muted-foreground text-center">
 							To create a backup it is required to set at least 1 provider.
 							Please, go to{" "}
 							<Link
-								href="/dashboard/settings/server"
+								href="/dashboard/settings/destinations"
 								className="text-foreground"
 							>
-								Settings
+								S3 Destinations
 							</Link>{" "}
 							to do so.
 						</span>

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

@@ -43,7 +43,7 @@ const LOG_STYLES: Record<LogType, LogStyle> = {
 
 export function parseLogs(logString: string): LogLine[] {
 	// Regex to match the log line format
-	// Exemple of return :
+	// Example of return :
 	// 1 2024-12-10T10:00:00.000Z The server is running on port 8080
 	// Should return :
 	// { timestamp: new Date("2024-12-10T10:00:00.000Z"),
@@ -63,18 +63,10 @@ export function parseLogs(logString: string): LogLine[] {
 
 			if (!message?.trim()) return null;
 
-			// Delete other timestamps and keep only the one from --timestamps
-			const cleanedMessage = message
-				?.replace(
-					/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?Z|\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3} UTC/g,
-					"",
-				)
-				.trim();
-
 			return {
 				rawTimestamp: timestamp ?? null,
 				timestamp: timestamp ? new Date(timestamp.replace(" UTC", "Z")) : null,
-				message: cleanedMessage,
+				message: message.trim(),
 			};
 		})
 		.filter((log) => log !== null);

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

@@ -80,7 +80,7 @@ export const ShowContainers = ({ serverId }: Props) => {
 
 	return (
 		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-8xl mx-auto">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
 						<CardTitle className="text-xl flex flex-row gap-2">

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

@@ -35,7 +35,7 @@ export const ShowTraefikSystem = ({ serverId }: Props) => {
 
 	return (
 		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-8xl mx-auto">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
 				<div className="rounded-xl bg-background shadow-md ">
 					<CardHeader className="">
 						<CardTitle className="text-xl flex flex-row gap-2">

apps/dokploy/components/dashboard/monitoring/docker/show.tsx

@@ -1,314 +0,0 @@
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
-import { api } from "@/utils/api";
-import React, { useEffect, useState } from "react";
-import { DockerBlockChart } from "./docker-block-chart";
-import { DockerCpuChart } from "./docker-cpu-chart";
-import { DockerDiskChart } from "./docker-disk-chart";
-import { DockerMemoryChart } from "./docker-memory-chart";
-import { DockerNetworkChart } from "./docker-network-chart";
-
-const defaultData = {
-	cpu: {
-		value: 0,
-		time: "",
-	},
-	memory: {
-		value: {
-			used: 0,
-			free: 0,
-			usedPercentage: 0,
-			total: 0,
-		},
-		time: "",
-	},
-	block: {
-		value: {
-			readMb: 0,
-			writeMb: 0,
-		},
-		time: "",
-	},
-	network: {
-		value: {
-			inputMb: 0,
-			outputMb: 0,
-		},
-		time: "",
-	},
-	disk: {
-		value: { diskTotal: 0, diskUsage: 0, diskUsedPercentage: 0, diskFree: 0 },
-		time: "",
-	},
-};
-
-interface Props {
-	appName: string;
-	appType?: "application" | "stack" | "docker-compose";
-}
-export interface DockerStats {
-	cpu: {
-		value: number;
-		time: string;
-	};
-	memory: {
-		value: {
-			used: number;
-			free: number;
-			usedPercentage: number;
-			total: number;
-		};
-		time: string;
-	};
-	block: {
-		value: {
-			readMb: number;
-			writeMb: number;
-		};
-		time: string;
-	};
-	network: {
-		value: {
-			inputMb: number;
-			outputMb: number;
-		};
-		time: string;
-	};
-	disk: {
-		value: {
-			diskTotal: number;
-			diskUsage: number;
-			diskUsedPercentage: number;
-			diskFree: number;
-		};
-
-		time: string;
-	};
-}
-
-export type DockerStatsJSON = {
-	cpu: DockerStats["cpu"][];
-	memory: DockerStats["memory"][];
-	block: DockerStats["block"][];
-	network: DockerStats["network"][];
-	disk: DockerStats["disk"][];
-};
-
-export const DockerMonitoring = ({
-	appName,
-	appType = "application",
-}: Props) => {
-	const { data } = api.application.readAppMonitoring.useQuery(
-		{ appName },
-		{
-			refetchOnWindowFocus: false,
-		},
-	);
-	const [acummulativeData, setAcummulativeData] = useState<DockerStatsJSON>({
-		cpu: [],
-		memory: [],
-		block: [],
-		network: [],
-		disk: [],
-	});
-	const [currentData, setCurrentData] = useState<DockerStats>(defaultData);
-
-	useEffect(() => {
-		setCurrentData(defaultData);
-
-		setAcummulativeData({
-			cpu: [],
-			memory: [],
-			block: [],
-			network: [],
-			disk: [],
-		});
-	}, [appName]);
-
-	useEffect(() => {
-		if (!data) return;
-
-		setCurrentData({
-			cpu: data.cpu[data.cpu.length - 1] ?? currentData.cpu,
-			memory: data.memory[data.memory.length - 1] ?? currentData.memory,
-			block: data.block[data.block.length - 1] ?? currentData.block,
-			network: data.network[data.network.length - 1] ?? currentData.network,
-			disk: data.disk[data.disk.length - 1] ?? currentData.disk,
-		});
-		setAcummulativeData({
-			block: data?.block || [],
-			cpu: data?.cpu || [],
-			disk: data?.disk || [],
-			memory: data?.memory || [],
-			network: data?.network || [],
-		});
-	}, [data]);
-
-	useEffect(() => {
-		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-		const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`;
-		const ws = new WebSocket(wsUrl);
-
-		ws.onmessage = (e) => {
-			const value = JSON.parse(e.data);
-			if (!value) return;
-
-			const data = {
-				cpu: value.data.cpu ?? currentData.cpu,
-				memory: value.data.memory ?? currentData.memory,
-				block: value.data.block ?? currentData.block,
-				disk: value.data.disk ?? currentData.disk,
-				network: value.data.network ?? currentData.network,
-			};
-
-			setCurrentData(data);
-
-			setAcummulativeData((prevData) => ({
-				cpu: [...prevData.cpu, data.cpu],
-				memory: [...prevData.memory, data.memory],
-				block: [...prevData.block, data.block],
-				network: [...prevData.network, data.network],
-				disk: [...prevData.disk, data.disk],
-			}));
-		};
-
-		ws.onclose = (e) => {
-			console.log(e.reason);
-		};
-
-		return () => ws.close();
-	}, [appName]);
-
-	return (
-		<div>
-			<Card className="h-full bg-sidebar p-2.5 rounded-xl  mx-auto w-full">
-				<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
-					<header className="flex items-center justify-between">
-						<div className="space-y-1">
-							<h1 className="text-2xl font-semibold tracking-tight">
-								Monitoring
-							</h1>
-							<p className="text-sm text-muted-foreground">
-								Watch the usage of your server in the current app
-							</p>
-						</div>
-					</header>
-
-					<div className="grid gap-6 md:grid-cols-2">
-						<Card className="bg-background">
-							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-								<CardTitle className="text-sm font-medium">CPU Usage</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<div className="flex flex-col gap-2 w-full">
-									<span className="text-sm text-muted-foreground">
-										Used: {currentData.cpu.value.toFixed(2)}%
-									</span>
-									<Progress
-										value={currentData.cpu.value}
-										className="w-[100%]"
-									/>
-									<DockerCpuChart acummulativeData={acummulativeData.cpu} />
-								</div>
-							</CardContent>
-						</Card>
-
-						<Card className="bg-background">
-							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-								<CardTitle className="text-sm font-medium">
-									Memory Usage
-								</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<div className="flex flex-col gap-2 w-full">
-									<span className="text-sm text-muted-foreground">
-										{`Used:  ${(currentData.memory.value.used / 1024 ** 3).toFixed(2)} GB / Limit: ${(currentData.memory.value.total / 1024 ** 3).toFixed(2)} GB`}
-									</span>
-									<Progress
-										value={currentData.memory.value.usedPercentage}
-										className="w-[100%]"
-									/>
-									<DockerMemoryChart
-										acummulativeData={acummulativeData.memory}
-										memoryLimitGB={currentData.memory.value.total / 1024 ** 3}
-									/>
-								</div>
-							</CardContent>
-						</Card>
-
-						{appName === "dokploy" && (
-							<Card className="bg-background">
-								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-									<CardTitle className="text-sm font-medium">
-										Disk Space
-									</CardTitle>
-								</CardHeader>
-								<CardContent>
-									<div className="flex flex-col gap-2 w-full">
-										<span className="text-sm text-muted-foreground">
-											{`Used:  ${currentData.disk.value.diskUsage} GB / Limit: ${currentData.disk.value.diskTotal} GB`}
-										</span>
-										<Progress
-											value={currentData.disk.value.diskUsedPercentage}
-											className="w-[100%]"
-										/>
-										<DockerDiskChart
-											acummulativeData={acummulativeData.disk}
-											diskTotal={currentData.disk.value.diskTotal}
-										/>
-									</div>
-								</CardContent>
-							</Card>
-						)}
-
-						<Card className="bg-background">
-							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-								<CardTitle className="text-sm font-medium">Block I/O</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<div className="flex flex-col gap-2 w-full">
-									<span className="text-sm text-muted-foreground">
-										{`Read:  ${currentData.block.value.readMb.toFixed(
-											2,
-										)} MB / Write: ${currentData.block.value.writeMb.toFixed(
-											3,
-										)} MB`}
-									</span>
-									<DockerBlockChart acummulativeData={acummulativeData.block} />
-								</div>
-							</CardContent>
-						</Card>
-
-						<Card className="bg-background">
-							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-								<CardTitle className="text-sm font-medium">
-									Network I/O
-								</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<div className="flex flex-col gap-2 w-full">
-									<span className="text-sm text-muted-foreground">
-										{`In MB: ${currentData.network.value.inputMb.toFixed(
-											2,
-										)} MB / Out MB: ${currentData.network.value.outputMb.toFixed(
-											2,
-										)} MB`}
-									</span>
-									<DockerNetworkChart
-										acummulativeData={acummulativeData.network}
-									/>
-								</div>
-							</CardContent>
-						</Card>
-					</div>
-				</div>
-			</Card>
-		</div>
-	);
-};

apps/dokploy/components/dashboard/monitoring/free/container/docker-block-chart.tsx

@@ -8,7 +8,7 @@ import {
 	Tooltip,
 	YAxis,
 } from "recharts";
-import type { DockerStatsJSON } from "./show";
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["block"];
@@ -90,9 +90,11 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
 	if (active && payload && payload.length && payload[0]) {
 		return (
 			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				<p>{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}</p>
-				<p>{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}</p>
+				{payload[0].payload.time && (
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				)}
+				<p>{`Read ${payload[0].payload.readMb} `}</p>
+				<p>{`Write: ${payload[0].payload.writeMb} `}</p>
 			</div>
 		);
 	}

apps/dokploy/components/dashboard/monitoring/free/container/docker-cpu-chart.tsx

@@ -8,7 +8,7 @@ import {
 	Tooltip,
 	YAxis,
 } from "recharts";
-import type { DockerStatsJSON } from "./show";
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["cpu"];
@@ -19,7 +19,7 @@ export const DockerCpuChart = ({ acummulativeData }: Props) => {
 		return {
 			name: `Point ${index + 1}`,
 			time: item.time,
-			usage: item.value.toFixed(2),
+			usage: item.value.toString().split("%")[0],
 		};
 	});
 	return (
@@ -75,7 +75,9 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
 	if (active && payload && payload.length && payload[0]) {
 		return (
 			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				{payload[0].payload.time && (
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				)}
 				<p>{`CPU Usage: ${payload[0].payload.usage}%`}</p>
 			</div>
 		);

apps/dokploy/components/dashboard/monitoring/free/container/docker-disk-chart.tsx

@@ -8,7 +8,7 @@ import {
 	Tooltip,
 	YAxis,
 } from "recharts";
-import type { DockerStatsJSON } from "./show";
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
 
 interface Props {
 	acummulativeData: DockerStatsJSON["disk"];

apps/dokploy/components/dashboard/monitoring/free/container/docker-memory-chart.tsx

@@ -8,8 +8,8 @@ import {
 	Tooltip,
 	YAxis,
 } from "recharts";
-import type { DockerStatsJSON } from "./show";
-
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
+import { convertMemoryToBytes } from "./show-free-container-monitoring";
 interface Props {
 	acummulativeData: DockerStatsJSON["memory"];
 	memoryLimitGB: number;
@@ -23,7 +23,8 @@ export const DockerMemoryChart = ({
 		return {
 			time: item.time,
 			name: `Point ${index + 1}`,
-			usage: (item.value.used / 1024 ** 3).toFixed(2),
+			// @ts-ignore
+			usage: (convertMemoryToBytes(item.value.used) / 1024 ** 3).toFixed(2),
 		};
 	});
 	return (
@@ -75,10 +76,13 @@ interface CustomTooltipProps {
 }
 
 const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
-	if (active && payload && payload.length && payload[0]) {
+	if (active && payload && payload.length && payload[0] && payload[0].payload) {
 		return (
 			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				{payload[0].payload.time && (
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				)}
+
 				<p>{`Memory usage: ${payload[0].payload.usage} GB`}</p>
 			</div>
 		);

apps/dokploy/components/dashboard/monitoring/free/container/docker-network-chart.tsx

@@ -8,8 +8,7 @@ import {
 	Tooltip,
 	YAxis,
 } from "recharts";
-import type { DockerStatsJSON } from "./show";
-1;
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
 interface Props {
 	acummulativeData: DockerStatsJSON["network"];
 }
@@ -19,8 +18,8 @@ export const DockerNetworkChart = ({ acummulativeData }: Props) => {
 		return {
 			time: item.time,
 			name: `Point ${index + 1}`,
-			inMB: item.value.inputMb.toFixed(2),
-			outMB: item.value.outputMb.toFixed(2),
+			inMB: item.value.inputMb,
+			outMB: item.value.outputMb,
 		};
 	});
 	return (
@@ -86,9 +85,11 @@ const CustomTooltip = ({ active, payload }: CustomTooltipProps) => {
 	if (active && payload && payload.length && payload[0]) {
 		return (
 			<div className="custom-tooltip bg-background p-2 shadow-lg rounded-md text-primary border">
-				<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				<p>{`In MB Usage: ${payload[0].payload.inMB} MB`}</p>
-				<p>{`Out MB Usage: ${payload[0].payload.outMB} MB`}</p>
+				{payload[0].payload.time && (
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
+				)}
+				<p>{`In  Usage: ${payload[0].payload.inMB} `}</p>
+				<p>{`Out  Usage: ${payload[0].payload.outMB} `}</p>
 			</div>
 		);
 	}

apps/dokploy/components/dashboard/monitoring/free/container/show-free-compose-monitoring.tsx

@@ -0,0 +1,126 @@
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ContainerFreeMonitoring } from "./show-free-container-monitoring";
+
+interface Props {
+	appName: string;
+	serverId?: string;
+	appType: "stack" | "docker-compose";
+}
+
+export const ComposeFreeMonitoring = ({
+	appName,
+	appType = "stack",
+	serverId,
+}: Props) => {
+	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
+		{
+			appName: appName,
+			appType,
+			serverId,
+		},
+		{
+			enabled: !!appName,
+		},
+	);
+
+	const [containerAppName, setContainerAppName] = useState<
+		string | undefined
+	>();
+
+	const [containerId, setContainerId] = useState<string | undefined>();
+
+	const { mutateAsync: restart, isLoading: isRestarting } =
+		api.docker.restartContainer.useMutation();
+
+	useEffect(() => {
+		if (data && data?.length > 0) {
+			setContainerAppName(data[0]?.name);
+			setContainerId(data[0]?.containerId);
+		}
+	}, [data]);
+
+	return (
+		<>
+			<CardHeader>
+				<CardTitle className="text-xl">Monitoring</CardTitle>
+				<CardDescription>Watch the usage of your compose</CardDescription>
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				<Label>Select a container to watch the monitoring</Label>
+				<div className="flex flex-row gap-4">
+					<Select
+						onValueChange={(value) => {
+							setContainerAppName(value);
+							setContainerId(
+								data?.find((container) => container.name === value)
+									?.containerId,
+							);
+						}}
+						value={containerAppName}
+					>
+						<SelectTrigger>
+							{isLoading ? (
+								<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground">
+									<span>Loading...</span>
+									<Loader2 className="animate-spin size-4" />
+								</div>
+							) : (
+								<SelectValue placeholder="Select a container" />
+							)}
+						</SelectTrigger>
+						<SelectContent>
+							<SelectGroup>
+								{data?.map((container) => (
+									<SelectItem
+										key={container.containerId}
+										value={container.name}
+									>
+										{container.name} ({container.containerId}) {container.state}
+									</SelectItem>
+								))}
+								<SelectLabel>Containers ({data?.length})</SelectLabel>
+							</SelectGroup>
+						</SelectContent>
+					</Select>
+					<Button
+						isLoading={isRestarting}
+						onClick={async () => {
+							if (!containerId) return;
+							toast.success(`Restarting container ${containerAppName}`);
+							await restart({ containerId }).then(() => {
+								toast.success("Container restarted");
+							});
+						}}
+					>
+						Restart
+					</Button>
+				</div>
+				<ContainerFreeMonitoring
+					appName={containerAppName || ""}
+					appType={appType}
+				/>
+			</CardContent>
+		</>
+	);
+};

apps/dokploy/components/dashboard/monitoring/free/container/show-free-container-monitoring.tsx

@@ -0,0 +1,316 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { api } from "@/utils/api";
+import React, { useEffect, useState } from "react";
+import { DockerBlockChart } from "./docker-block-chart";
+import { DockerCpuChart } from "./docker-cpu-chart";
+import { DockerDiskChart } from "./docker-disk-chart";
+import { DockerMemoryChart } from "./docker-memory-chart";
+import { DockerNetworkChart } from "./docker-network-chart";
+
+const defaultData = {
+	cpu: {
+		value: 0,
+		time: "",
+	},
+	memory: {
+		value: {
+			used: 0,
+			total: 0,
+		},
+		time: "",
+	},
+	block: {
+		value: {
+			readMb: 0,
+			writeMb: 0,
+		},
+		time: "",
+	},
+	network: {
+		value: {
+			inputMb: 0,
+			outputMb: 0,
+		},
+		time: "",
+	},
+	disk: {
+		value: { diskTotal: 0, diskUsage: 0, diskUsedPercentage: 0, diskFree: 0 },
+		time: "",
+	},
+};
+
+interface Props {
+	appName: string;
+	appType?: "application" | "stack" | "docker-compose";
+}
+export interface DockerStats {
+	cpu: {
+		value: number;
+		time: string;
+	};
+	memory: {
+		value: {
+			used: number;
+			total: number;
+		};
+		time: string;
+	};
+	block: {
+		value: {
+			readMb: number;
+			writeMb: number;
+		};
+		time: string;
+	};
+	network: {
+		value: {
+			inputMb: number;
+			outputMb: number;
+		};
+		time: string;
+	};
+	disk: {
+		value: {
+			diskTotal: number;
+			diskUsage: number;
+			diskUsedPercentage: number;
+			diskFree: number;
+		};
+
+		time: string;
+	};
+}
+
+export type DockerStatsJSON = {
+	cpu: DockerStats["cpu"][];
+	memory: DockerStats["memory"][];
+	block: DockerStats["block"][];
+	network: DockerStats["network"][];
+	disk: DockerStats["disk"][];
+};
+
+export const convertMemoryToBytes = (
+	memoryString: string | undefined,
+): number => {
+	if (!memoryString || typeof memoryString !== "string") {
+		return 0;
+	}
+
+	const value = Number.parseFloat(memoryString) || 0;
+	const unit = memoryString.replace(/[0-9.]/g, "").trim();
+
+	switch (unit) {
+		case "KiB":
+			return value * 1024;
+		case "MiB":
+			return value * 1024 * 1024;
+		case "GiB":
+			return value * 1024 * 1024 * 1024;
+		case "TiB":
+			return value * 1024 * 1024 * 1024 * 1024;
+		default:
+			return value;
+	}
+};
+
+export const ContainerFreeMonitoring = ({
+	appName,
+	appType = "application",
+}: Props) => {
+	const { data } = api.application.readAppMonitoring.useQuery(
+		{ appName },
+		{
+			refetchOnWindowFocus: false,
+		},
+	);
+	const [acummulativeData, setAcummulativeData] = useState<DockerStatsJSON>({
+		cpu: [],
+		memory: [],
+		block: [],
+		network: [],
+		disk: [],
+	});
+	const [currentData, setCurrentData] = useState<DockerStats>(defaultData);
+
+	useEffect(() => {
+		setCurrentData(defaultData);
+
+		setAcummulativeData({
+			cpu: [],
+			memory: [],
+			block: [],
+			network: [],
+			disk: [],
+		});
+	}, [appName]);
+
+	useEffect(() => {
+		if (!data) return;
+
+		setCurrentData({
+			cpu: data.cpu[data.cpu.length - 1] ?? currentData.cpu,
+			memory: data.memory[data.memory.length - 1] ?? currentData.memory,
+			block: data.block[data.block.length - 1] ?? currentData.block,
+			network: data.network[data.network.length - 1] ?? currentData.network,
+			disk: data.disk[data.disk.length - 1] ?? currentData.disk,
+		});
+		setAcummulativeData({
+			block: data?.block || [],
+			cpu: data?.cpu || [],
+			disk: data?.disk || [],
+			memory: data?.memory || [],
+			network: data?.network || [],
+		});
+	}, [data]);
+
+	useEffect(() => {
+		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+		const wsUrl = `${protocol}//${window.location.host}/listen-docker-stats-monitoring?appName=${appName}&appType=${appType}`;
+		const ws = new WebSocket(wsUrl);
+
+		ws.onmessage = (e) => {
+			const value = JSON.parse(e.data);
+			if (!value) return;
+
+			const data = {
+				cpu: value.data.cpu ?? currentData.cpu,
+				memory: value.data.memory ?? currentData.memory,
+				block: value.data.block ?? currentData.block,
+				disk: value.data.disk ?? currentData.disk,
+				network: value.data.network ?? currentData.network,
+			};
+
+			setCurrentData(data);
+
+			setAcummulativeData((prevData) => ({
+				cpu: [...prevData.cpu, data.cpu],
+				memory: [...prevData.memory, data.memory],
+				block: [...prevData.block, data.block],
+				network: [...prevData.network, data.network],
+				disk: [...prevData.disk, data.disk],
+			}));
+		};
+
+		ws.onclose = (e) => {
+			console.log(e.reason);
+		};
+
+		return () => ws.close();
+	}, [appName]);
+
+	return (
+		<div className="rounded-xl bg-background shadow-md flex flex-col gap-4">
+			<header className="flex items-center justify-between">
+				<div className="space-y-1">
+					<h1 className="text-2xl font-semibold tracking-tight">Monitoring</h1>
+					<p className="text-sm text-muted-foreground">
+						Watch the usage of your server in the current app
+					</p>
+				</div>
+			</header>
+
+			<div className="grid gap-6 lg:grid-cols-2">
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">CPU Usage</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col gap-2 w-full">
+							<span className="text-sm text-muted-foreground">
+								Used: {currentData.cpu.value}%
+							</span>
+							<Progress value={currentData.cpu.value} className="w-[100%]" />
+							<DockerCpuChart acummulativeData={acummulativeData.cpu} />
+						</div>
+					</CardContent>
+				</Card>
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">Memory Usage</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col gap-2 w-full">
+							<span className="text-sm text-muted-foreground">
+								{`Used:  ${currentData.memory.value.used} / Limit: ${currentData.memory.value.total} `}
+							</span>
+							<Progress
+								value={
+									// @ts-ignore
+									(convertMemoryToBytes(currentData.memory.value.used) /
+										// @ts-ignore
+										convertMemoryToBytes(currentData.memory.value.total)) *
+									100
+								}
+								className="w-[100%]"
+							/>
+							<DockerMemoryChart
+								acummulativeData={acummulativeData.memory}
+								memoryLimitGB={
+									// @ts-ignore
+									convertMemoryToBytes(currentData.memory.value.total) /
+									1024 ** 3
+								}
+							/>
+						</div>
+					</CardContent>
+				</Card>
+				{appName === "dokploy" && (
+					<Card className="bg-background">
+						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+							<CardTitle className="text-sm font-medium">Disk Space</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<div className="flex flex-col gap-2 w-full">
+								<span className="text-sm text-muted-foreground">
+									{`Used:  ${currentData.disk.value.diskUsage} GB / Limit: ${currentData.disk.value.diskTotal} GB`}
+								</span>
+								<Progress
+									value={currentData.disk.value.diskUsedPercentage}
+									className="w-[100%]"
+								/>
+								<DockerDiskChart
+									acummulativeData={acummulativeData.disk}
+									diskTotal={currentData.disk.value.diskTotal}
+								/>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">Block I/O</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col gap-2 w-full">
+							<span className="text-sm text-muted-foreground">
+								{`Read:  ${currentData.block.value.readMb}  / Write: ${currentData.block.value.writeMb} `}
+							</span>
+							<DockerBlockChart acummulativeData={acummulativeData.block} />
+						</div>
+					</CardContent>
+				</Card>
+				<Card className="bg-background">
+					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+						<CardTitle className="text-sm font-medium">Network I/O</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col gap-2 w-full">
+							<span className="text-sm text-muted-foreground">
+								{`In MB: ${currentData.network.value.inputMb}  / Out MB: ${currentData.network.value.outputMb} `}
+							</span>
+							<DockerNetworkChart acummulativeData={acummulativeData.network} />
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/container/container-block-chart.tsx

@@ -0,0 +1,189 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface ContainerMetric {
+	timestamp: string;
+	BlockIO: {
+		read: number;
+		write: number;
+		readUnit: string;
+		writeUnit: string;
+	};
+}
+
+interface Props {
+	data: ContainerMetric[];
+}
+
+interface FormattedMetric {
+	timestamp: string;
+	read: number;
+	write: number;
+	readUnit: string;
+	writeUnit: string;
+}
+
+const chartConfig = {
+	read: {
+		label: "Read",
+		color: "hsl(217, 91%, 60%)", // Azul brillante
+	},
+	write: {
+		label: "Write",
+		color: "hsl(142, 71%, 45%)", // Verde brillante
+	},
+} satisfies ChartConfig;
+
+export const ContainerBlockChart = ({ data }: Props) => {
+	const formattedData = data.map((metric) => ({
+		timestamp: metric.timestamp,
+		read: metric.BlockIO.read,
+		write: metric.BlockIO.write,
+		readUnit: metric.BlockIO.readUnit,
+		writeUnit: metric.BlockIO.writeUnit,
+	}));
+
+	const latestData = formattedData[formattedData.length - 1] || {
+		timestamp: "",
+		read: 0,
+		write: 0,
+		readUnit: "B",
+		writeUnit: "B",
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>Block I/O</CardTitle>
+				<CardDescription>
+					Read: {latestData.read}
+					{latestData.readUnit} / Write: {latestData.write}
+					{latestData.writeUnit}
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={formattedData}>
+						<defs>
+							<linearGradient id="fillRead" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(217, 91%, 60%)"
+									stopOpacity={0.3}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(217, 91%, 60%)"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+							<linearGradient id="fillWrite" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(142, 71%, 45%)"
+									stopOpacity={0.3}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(142, 71%, 45%)"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Read
+													</span>
+													<span className="font-bold">
+														{data.read}
+														{data.readUnit}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Write
+													</span>
+													<span className="font-bold">
+														{data.write}
+														{data.writeUnit}
+													</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="Write"
+							dataKey="write"
+							type="monotone"
+							fill="url(#fillWrite)"
+							stroke="hsl(142, 71%, 45%)"
+							strokeWidth={2}
+							fillOpacity={0.3}
+						/>
+						<Area
+							name="Read"
+							dataKey="read"
+							type="monotone"
+							fill="url(#fillRead)"
+							stroke="hsl(217, 91%, 60%)"
+							strokeWidth={2}
+							fillOpacity={0.3}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/container/container-cpu-chart.tsx

@@ -0,0 +1,128 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface ContainerMetric {
+	timestamp: string;
+	CPU: number;
+}
+
+interface Props {
+	data: ContainerMetric[];
+}
+
+const chartConfig = {
+	cpu: {
+		label: "CPU",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
+export const ContainerCPUChart = ({ data }: Props) => {
+	const formattedData = data.map((metric) => ({
+		timestamp: metric.timestamp,
+		cpu: metric.CPU,
+	}));
+
+	const latestData = formattedData[formattedData.length - 1] || {
+		timestamp: "",
+		cpu: 0,
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>CPU</CardTitle>
+				<CardDescription>CPU Usage: {latestData.cpu}%</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={formattedData}>
+						<defs>
+							<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-1))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-1))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis tickFormatter={(value) => `${value}%`} domain={[0, 100]} />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														CPU
+													</span>
+													<span className="font-bold">{data.cpu}%</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="CPU"
+							dataKey="cpu"
+							type="monotone"
+							fill="url(#fillCPU)"
+							stroke="hsl(var(--chart-1))"
+							strokeWidth={2}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/container/container-memory-chart.tsx

@@ -0,0 +1,149 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface ContainerMetric {
+	timestamp: string;
+	Memory: {
+		percentage: number;
+		used: number;
+		total: number;
+		usedUnit: string;
+		totalUnit: string;
+	};
+}
+
+interface Props {
+	data: ContainerMetric[];
+}
+
+const chartConfig = {
+	memory: {
+		label: "Memory",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
+const formatMemoryValue = (value: number) => {
+	return value.toLocaleString("en-US", {
+		minimumFractionDigits: 1,
+		maximumFractionDigits: 2,
+	});
+};
+
+export const ContainerMemoryChart = ({ data }: Props) => {
+	const formattedData = data.map((metric) => ({
+		timestamp: metric.timestamp,
+		memory: metric.Memory.percentage,
+		usage: `${formatMemoryValue(metric.Memory.used)}${metric.Memory.usedUnit} / ${formatMemoryValue(metric.Memory.total)}${metric.Memory.totalUnit}`,
+	}));
+
+	const latestData = formattedData[formattedData.length - 1] || {
+		timestamp: "",
+		memory: 0,
+		usage: "0 / 0 B",
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>Memory</CardTitle>
+				<CardDescription>Memory Usage: {latestData.usage}</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={formattedData}>
+						<defs>
+							<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-2))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-2))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis tickFormatter={(value) => `${value}%`} domain={[0, 100]} />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Memory
+													</span>
+													<span className="font-bold">{data.memory}%</span>
+												</div>
+												<div className="flex flex-col col-span-2">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Usage
+													</span>
+													<span className="font-bold">{data.usage}</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="Memory"
+							dataKey="memory"
+							type="monotone"
+							fill="url(#fillMemory)"
+							stroke="hsl(var(--chart-2))"
+							strokeWidth={2}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/container/container-network-chart.tsx

@@ -0,0 +1,186 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface ContainerMetric {
+	timestamp: string;
+	Network: {
+		input: number;
+		output: number;
+		inputUnit: string;
+		outputUnit: string;
+	};
+}
+
+interface Props {
+	data: ContainerMetric[];
+}
+
+interface FormattedMetric {
+	timestamp: string;
+	input: number;
+	output: number;
+	inputUnit: string;
+	outputUnit: string;
+}
+
+const chartConfig = {
+	input: {
+		label: "Input",
+		color: "hsl(var(--chart-3))",
+	},
+	output: {
+		label: "Output",
+		color: "hsl(var(--chart-4))",
+	},
+} satisfies ChartConfig;
+
+export const ContainerNetworkChart = ({ data }: Props) => {
+	const formattedData: FormattedMetric[] = data.map((metric) => ({
+		timestamp: metric.timestamp,
+		input: metric.Network.input,
+		output: metric.Network.output,
+		inputUnit: metric.Network.inputUnit,
+		outputUnit: metric.Network.outputUnit,
+	}));
+
+	const latestData = formattedData[formattedData.length - 1] || {
+		input: 0,
+		output: 0,
+		inputUnit: "B",
+		outputUnit: "B",
+	};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>Network I/O</CardTitle>
+				<CardDescription>
+					Input: {latestData.input}
+					{latestData.inputUnit} / Output: {latestData.output}
+					{latestData.outputUnit}
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={formattedData}>
+						<defs>
+							<linearGradient id="fillInput" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-3))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-3))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+							<linearGradient id="fillOutput" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-4))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-4))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Input
+													</span>
+													<span className="font-bold">
+														{data.input}
+														{data.inputUnit}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Output
+													</span>
+													<span className="font-bold">
+														{data.output}
+														{data.outputUnit}
+													</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="Input"
+							dataKey="input"
+							type="monotone"
+							fill="url(#fillInput)"
+							stroke="hsl(var(--chart-3))"
+							strokeWidth={2}
+						/>
+						<Area
+							name="Output"
+							dataKey="output"
+							type="monotone"
+							fill="url(#fillOutput)"
+							stroke="hsl(var(--chart-4))"
+							strokeWidth={2}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring.tsx

@@ -20,18 +20,22 @@ import { api } from "@/utils/api";
 import { Loader2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { DockerMonitoring } from "../../monitoring/docker/show";
+import { ContainerPaidMonitoring } from "./show-paid-container-monitoring";
 
 interface Props {
 	appName: string;
 	serverId?: string;
 	appType: "stack" | "docker-compose";
+	baseUrl: string;
+	token: string;
 }
 
-export const ShowMonitoringCompose = ({
+export const ComposePaidMonitoring = ({
 	appName,
 	appType = "stack",
 	serverId,
+	baseUrl,
+	token,
 }: Props) => {
 	const { data, isLoading } = api.docker.getContainersByAppNameMatch.useQuery(
 		{
@@ -44,9 +48,9 @@ export const ShowMonitoringCompose = ({
 		},
 	);
 
-	const [containerAppName, setContainerAppName] = useState<
-		string | undefined
-	>();
+	const [containerAppName, setContainerAppName] = useState<string | undefined>(
+		"",
+	);
 
 	const [containerId, setContainerId] = useState<string | undefined>();
 
@@ -62,7 +66,7 @@ export const ShowMonitoringCompose = ({
 
 	return (
 		<div>
-			<Card className="bg-background">
+			<Card className="bg-background border-0">
 				<CardHeader>
 					<CardTitle className="text-xl">Monitoring</CardTitle>
 					<CardDescription>Watch the usage of your compose</CardDescription>
@@ -118,10 +122,13 @@ export const ShowMonitoringCompose = ({
 							Restart
 						</Button>
 					</div>
-					<DockerMonitoring
-						appName={containerAppName || ""}
-						appType={appType}
-					/>
+					<div className="flex flex-col gap-4">
+						<ContainerPaidMonitoring
+							appName={containerAppName || ""}
+							baseUrl={baseUrl}
+							token={token}
+						/>
+					</div>
 				</CardContent>
 			</Card>
 		</div>

apps/dokploy/components/dashboard/monitoring/paid/container/show-paid-container-monitoring.tsx

@@ -0,0 +1,258 @@
+import { Card } from "@/components/ui/card";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Cpu, HardDrive, Loader2, MemoryStick, Network } from "lucide-react";
+import { useEffect, useState } from "react";
+import { ContainerBlockChart } from "./container-block-chart";
+import { ContainerCPUChart } from "./container-cpu-chart";
+import { ContainerMemoryChart } from "./container-memory-chart";
+import { ContainerNetworkChart } from "./container-network-chart";
+
+const REFRESH_INTERVALS = {
+	"5000": "5 Seconds",
+	"10000": "10 Seconds",
+	"20000": "20 Seconds",
+	"30000": "30 Seconds",
+} as const;
+
+const DATA_POINTS_OPTIONS = {
+	"50": "50 points",
+	"200": "200 points",
+	"500": "500 points",
+	"800": "800 points",
+	"1200": "1200 points",
+	"1600": "1600 points",
+	"2000": "2000 points",
+	all: "All points",
+} as const;
+
+interface ContainerMetric {
+	timestamp: string;
+	CPU: number;
+	Memory: {
+		percentage: number;
+		used: number;
+		total: number;
+		unit: string;
+		usedUnit: string;
+		totalUnit: string;
+	};
+	Network: {
+		input: number;
+		output: number;
+		inputUnit: string;
+		outputUnit: string;
+	};
+	BlockIO: {
+		read: number;
+		write: number;
+		readUnit: string;
+		writeUnit: string;
+	};
+	Container: string;
+	ID: string;
+	Name: string;
+}
+
+interface Props {
+	appName: string;
+	baseUrl: string;
+	token: string;
+}
+
+export const ContainerPaidMonitoring = ({ appName, baseUrl, token }: Props) => {
+	const [historicalData, setHistoricalData] = useState<ContainerMetric[]>([]);
+	const [metrics, setMetrics] = useState<ContainerMetric>(
+		{} as ContainerMetric,
+	);
+	const [dataPoints, setDataPoints] =
+		useState<keyof typeof DATA_POINTS_OPTIONS>("50");
+	const [refreshInterval, setRefreshInterval] = useState<string>("5000");
+
+	const {
+		data,
+		isLoading,
+		error: queryError,
+	} = api.user.getContainerMetrics.useQuery(
+		{
+			url: baseUrl,
+			token,
+			dataPoints,
+			appName,
+		},
+		{
+			refetchInterval:
+				dataPoints === "all" ? undefined : Number.parseInt(refreshInterval),
+			enabled: !!appName,
+		},
+	);
+
+	useEffect(() => {
+		if (!data) return;
+
+		// @ts-ignore
+		setHistoricalData(data);
+		// @ts-ignore
+		setMetrics(data[data.length - 1]);
+	}, [data]);
+
+	if (isLoading) {
+		return (
+			<div className="flex h-[400px] w-full items-center justify-center">
+				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (queryError) {
+		return (
+			<div className="mt-5 flex min-h-[55vh] w-full items-center justify-center p-4">
+				<div className="max-w-xl text-center">
+					<p className="mb-2 text-base font-medium leading-none text-muted-foreground">
+						Error fetching metrics for{" "}
+						<strong className="text-primary">{appName}</strong>
+					</p>
+					<p className="whitespace-pre-line text-sm text-destructive">
+						{queryError instanceof Error
+							? queryError.message
+							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
+					</p>
+					<p className=" text-sm text-muted-foreground">URL: {baseUrl}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<>
+			<div className="flex items-center justify-between flex-wrap	 gap-2">
+				<h2 className="text-2xl font-bold tracking-tight">
+					Container Monitoring
+				</h2>
+				<div className="flex items-center gap-4 flex-wrap">
+					<div>
+						<span className="text-sm text-muted-foreground">Data points:</span>
+						<Select
+							value={dataPoints}
+							onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
+								setDataPoints(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select points" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div>
+						<span className="text-sm text-muted-foreground">
+							Refresh interval:
+						</span>
+						<Select
+							value={refreshInterval}
+							onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
+								setRefreshInterval(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select interval" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			</div>
+
+			{/* Stats Cards */}
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+				<Card className="p-6 bg-transparent">
+					<div className="flex items-center gap-2">
+						<Cpu className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">CPU Usage</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">{metrics.CPU}%</p>
+				</Card>
+
+				<Card className="p-6 bg-transparent">
+					<div className="flex items-center gap-2">
+						<MemoryStick className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Memory Usage</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">
+						{metrics?.Memory?.percentage}%
+					</p>
+					<p className="mt-1 text-sm text-muted-foreground">
+						{metrics?.Memory?.used} {metrics?.Memory?.unit} /{" "}
+						{metrics?.Memory?.total} {metrics?.Memory?.unit}
+					</p>
+				</Card>
+
+				<Card className="p-6 bg-transparent">
+					<div className="flex items-center gap-2">
+						<Network className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Network I/O</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">
+						{metrics?.Network?.input} {metrics?.Network?.inputUnit} /{" "}
+						{metrics?.Network?.output} {metrics?.Network?.outputUnit}
+					</p>
+				</Card>
+
+				<Card className="p-6 bg-transparent">
+					<div className="flex items-center gap-2">
+						<HardDrive className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Block I/O</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">
+						{metrics?.BlockIO?.read} {metrics?.BlockIO?.readUnit} /{" "}
+						{metrics?.BlockIO?.write} {metrics?.BlockIO?.writeUnit}
+					</p>
+				</Card>
+			</div>
+
+			{/* Container Information */}
+			<Card className="p-6 bg-transparent">
+				<h3 className="text-lg font-medium mb-4">Container Information</h3>
+				<div className="grid gap-4 md:grid-cols-2">
+					<div>
+						<h4 className="text-sm font-medium text-muted-foreground">
+							Container ID
+						</h4>
+						<p className="mt-1">{metrics.ID}</p>
+					</div>
+					<div>
+						<h4 className="text-sm font-medium text-muted-foreground">Name</h4>
+						<p className="mt-1 truncate">{metrics.Name}</p>
+					</div>
+				</div>
+			</Card>
+
+			{/* Charts Grid */}
+			<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
+				<ContainerCPUChart data={historicalData} />
+				<ContainerMemoryChart data={historicalData} />
+				<ContainerBlockChart data={historicalData} />
+				<ContainerNetworkChart data={historicalData} />
+			</div>
+		</>
+	);
+};

apps/dokploy/components/dashboard/monitoring/paid/servers/cpu-chart.tsx

@@ -0,0 +1,115 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface CPUChartProps {
+	data: any[];
+}
+
+const chartConfig = {
+	cpu: {
+		label: "CPU",
+		color: "hsl(var(--chart-1))",
+	},
+} satisfies ChartConfig;
+
+export function CPUChart({ data }: CPUChartProps) {
+	const latestData = data[data.length - 1] || {};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>CPU</CardTitle>
+				<CardDescription>CPU Usage: {latestData.cpu}%</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={data}>
+						<defs>
+							<linearGradient id="fillCPU" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-1))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-1))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis tickFormatter={(value) => `${value}%`} domain={[0, 100]} />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														CPU
+													</span>
+													<span className="font-bold">{data.cpu}%</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="CPU"
+							dataKey="cpu"
+							type="monotone"
+							fill="url(#fillCPU)"
+							stroke="hsl(var(--chart-1))"
+							strokeWidth={2}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/dashboard/monitoring/paid/servers/disk-chart.tsx

@@ -0,0 +1,120 @@
+import { HardDrive } from "lucide-react";
+import {
+	Label,
+	PolarGrid,
+	PolarRadiusAxis,
+	RadialBar,
+	RadialBarChart,
+} from "recharts";
+
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
+
+interface RadialChartProps {
+	data: any;
+}
+
+export function DiskChart({ data }: RadialChartProps) {
+	const diskUsed = Number.parseFloat(data.diskUsed || 0);
+	const totalDiskGB = Number.parseFloat(data.totalDisk || 0);
+	const usedDiskGB = (totalDiskGB * diskUsed) / 100;
+
+	const chartData = [
+		{
+			disk: 25,
+			fill: "hsl(var(--chart-2))",
+		},
+	];
+
+	const chartConfig = {
+		disk: {
+			label: "Disk",
+			color: "hsl(var(--chart-2))",
+		},
+	} satisfies ChartConfig;
+
+	const endAngle = (diskUsed * 360) / 100;
+
+	return (
+		<Card className="flex flex-col bg-transparent">
+			<CardHeader className="items-center border-b pb-5">
+				<CardTitle>Disk</CardTitle>
+				<CardDescription>Storage Space</CardDescription>
+			</CardHeader>
+			<CardContent className="flex-1 pb-0">
+				<ChartContainer
+					config={chartConfig}
+					className="mx-auto aspect-square max-h-[250px]"
+				>
+					<RadialBarChart
+						data={chartData}
+						startAngle={0}
+						endAngle={endAngle}
+						innerRadius={80}
+						outerRadius={110}
+					>
+						<PolarGrid
+							gridType="circle"
+							radialLines={false}
+							stroke="none"
+							className="first:fill-muted last:fill-background"
+							polarRadius={[86, 74]}
+						/>
+						<RadialBar
+							dataKey="disk"
+							background
+							cornerRadius={10}
+							fill="hsl(var(--chart-2))"
+						/>
+						<PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+							<Label
+								content={({ viewBox }) => {
+									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+										return (
+											<text
+												x={viewBox.cx}
+												y={viewBox.cy}
+												textAnchor="middle"
+												dominantBaseline="middle"
+											>
+												<tspan
+													x={viewBox.cx}
+													y={viewBox.cy}
+													className="fill-foreground text-4xl font-bold"
+												>
+													{diskUsed.toFixed(1)}%
+												</tspan>
+												<tspan
+													x={viewBox.cx}
+													y={(viewBox.cy || 0) + 24}
+													className="fill-muted-foreground text-sm"
+												>
+													Used
+												</tspan>
+											</text>
+										);
+									}
+								}}
+							/>
+						</PolarRadiusAxis>
+					</RadialBarChart>
+				</ChartContainer>
+			</CardContent>
+			<CardFooter className="flex-col gap-2 text-sm">
+				<div className="flex items-center gap-2 font-medium leading-none">
+					<HardDrive className="h-4 w-4" /> {usedDiskGB.toFixed(1)} GB used
+				</div>
+				<div className="leading-none text-muted-foreground">
+					Of {totalDiskGB.toFixed(1)} GB total
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}

apps/dokploy/components/dashboard/monitoring/paid/servers/memory-chart.tsx

@@ -0,0 +1,128 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface MemoryChartProps {
+	data: any[];
+}
+
+const chartConfig = {
+	Memory: {
+		label: "Memory",
+		color: "hsl(var(--chart-2))",
+	},
+} satisfies ChartConfig;
+
+export function MemoryChart({ data }: MemoryChartProps) {
+	const latestData = data[data.length - 1] || {};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>Memory</CardTitle>
+				<CardDescription>
+					Memory Usage: {latestData.memUsedGB} GB of {latestData.memTotal} GB (
+					{latestData.memUsed}%)
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={data}>
+						<defs>
+							<linearGradient id="fillMemory" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-2))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-2))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis
+							yAxisId="left"
+							orientation="left"
+							tickFormatter={(value) => `${value}%`}
+							domain={[0, 100]}
+						/>
+						<YAxis
+							yAxisId="right"
+							orientation="right"
+							tickFormatter={(value) => `${value.toFixed(1)} GB`}
+							domain={[
+								0,
+								Math.ceil(Number.parseFloat(latestData.memTotal || "0")),
+							]}
+						/>
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Memory
+													</span>
+													<span className="font-bold">
+														{data.memUsed}% ({data.memUsedGB} GB)
+													</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							yAxisId="left"
+							dataKey="memUsed"
+							type="monotone"
+							fill="url(#fillMemory)"
+							stroke="hsl(var(--chart-2))"
+							strokeWidth={2}
+							name="Memory"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/dashboard/monitoring/paid/servers/network-chart.tsx

@@ -0,0 +1,145 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	type ChartConfig,
+	ChartContainer,
+	ChartLegend,
+	ChartLegendContent,
+	ChartTooltip,
+} from "@/components/ui/chart";
+import { formatTimestamp } from "@/lib/utils";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+interface NetworkChartProps {
+	data: any[];
+}
+
+const chartConfig = {
+	networkIn: {
+		label: "Network In",
+		color: "hsl(var(--chart-3))",
+	},
+	networkOut: {
+		label: "Network Out",
+		color: "hsl(var(--chart-4))",
+	},
+} satisfies ChartConfig;
+
+export function NetworkChart({ data }: NetworkChartProps) {
+	const latestData = data[data.length - 1] || {};
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader className="border-b py-5">
+				<CardTitle>Network</CardTitle>
+				<CardDescription>
+					Network Traffic: ↑ {latestData.networkOut} KB/s ↓{" "}
+					{latestData.networkIn} KB/s
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
+				<ChartContainer
+					config={chartConfig}
+					className="aspect-auto h-[250px] w-full"
+				>
+					<AreaChart data={data}>
+						<defs>
+							<linearGradient id="fillNetworkIn" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-3))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-3))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+							<linearGradient id="fillNetworkOut" x1="0" y1="0" x2="0" y2="1">
+								<stop
+									offset="5%"
+									stopColor="hsl(var(--chart-4))"
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="95%"
+									stopColor="hsl(var(--chart-4))"
+									stopOpacity={0.1}
+								/>
+							</linearGradient>
+						</defs>
+						<CartesianGrid vertical={false} />
+						<XAxis
+							dataKey="timestamp"
+							tickLine={false}
+							axisLine={false}
+							tickMargin={8}
+							minTickGap={32}
+							tickFormatter={(value) => formatTimestamp(value)}
+						/>
+						<YAxis tickFormatter={(value) => `${value} KB/s`} />
+						<ChartTooltip
+							cursor={false}
+							content={({ active, payload, label }) => {
+								if (active && payload && payload.length) {
+									const data = payload?.[0]?.payload;
+									return (
+										<div className="rounded-lg border bg-background p-2 shadow-sm">
+											<div className="grid grid-cols-2 gap-2">
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Time
+													</span>
+													<span className="font-bold">
+														{formatTimestamp(label)}
+													</span>
+												</div>
+												<div className="flex flex-col">
+													<span className="text-[0.70rem] uppercase text-muted-foreground">
+														Network
+													</span>
+													<span className="font-bold">
+														↑ {data.networkOut} KB/s
+														<br />↓ {data.networkIn} KB/s
+													</span>
+												</div>
+											</div>
+										</div>
+									);
+								}
+								return null;
+							}}
+						/>
+						<Area
+							name="Network In"
+							dataKey="networkIn"
+							type="monotone"
+							fill="url(#fillNetworkIn)"
+							stroke="hsl(var(--chart-3))"
+							strokeWidth={2}
+						/>
+						<Area
+							name="Network Out"
+							dataKey="networkOut"
+							type="monotone"
+							fill="url(#fillNetworkOut)"
+							stroke="hsl(var(--chart-4))"
+							strokeWidth={2}
+						/>
+						<ChartLegend
+							content={<ChartLegendContent />}
+							verticalAlign="bottom"
+							align="center"
+						/>
+					</AreaChart>
+				</ChartContainer>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/dashboard/monitoring/paid/servers/show-paid-monitoring.tsx

@@ -0,0 +1,276 @@
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+import { Clock, Cpu, HardDrive, Loader2, MemoryStick } from "lucide-react";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { CPUChart } from "./cpu-chart";
+import { DiskChart } from "./disk-chart";
+import { MemoryChart } from "./memory-chart";
+import { NetworkChart } from "./network-chart";
+
+const REFRESH_INTERVALS = {
+	"5000": "5 Seconds",
+	"10000": "10 Seconds",
+	"20000": "20 Seconds",
+	"30000": "30 Seconds",
+} as const;
+
+const DATA_POINTS_OPTIONS = {
+	"50": "50 points",
+	"200": "200 points",
+	"500": "500 points",
+	"800": "800 points",
+	"1200": "1200 points",
+	"1600": "1600 points",
+	"2000": "2000 points",
+	all: "All points",
+} as const;
+
+interface SystemMetrics {
+	cpu: string;
+	cpuModel: string;
+	cpuCores: number;
+	cpuPhysicalCores: number;
+	cpuSpeed: number;
+	os: string;
+	distro: string;
+	kernel: string;
+	arch: string;
+	memUsed: string;
+	memUsedGB: string;
+	memTotal: string;
+	uptime: number;
+	diskUsed: string;
+	totalDisk: string;
+	networkIn: string;
+	networkOut: string;
+	timestamp: string;
+}
+
+interface Props {
+	BASE_URL?: string;
+	token?: string;
+}
+
+export const ShowPaidMonitoring = ({
+	BASE_URL = process.env.NEXT_PUBLIC_METRICS_URL ||
+		"http://localhost:3001/metrics",
+	token = process.env.NEXT_PUBLIC_METRICS_TOKEN || "my-token",
+}: Props) => {
+	const [historicalData, setHistoricalData] = useState<SystemMetrics[]>([]);
+	const [metrics, setMetrics] = useState<SystemMetrics>({} as SystemMetrics);
+	const [dataPoints, setDataPoints] =
+		useState<keyof typeof DATA_POINTS_OPTIONS>("50");
+	const [refreshInterval, setRefreshInterval] = useState<string>("5000");
+
+	const {
+		data,
+		isLoading,
+		error: queryError,
+	} = api.user.getServerMetrics.useQuery(
+		{
+			url: BASE_URL,
+			token,
+			dataPoints,
+		},
+		{
+			refetchInterval:
+				dataPoints === "all" ? undefined : Number.parseInt(refreshInterval),
+			enabled: true,
+		},
+	);
+
+	useEffect(() => {
+		if (!data) return;
+
+		const formattedData = data.map((metric: SystemMetrics) => ({
+			timestamp: metric.timestamp,
+			cpu: Number.parseFloat(metric.cpu),
+			cpuModel: metric.cpuModel,
+			cpuCores: metric.cpuCores,
+			cpuPhysicalCores: metric.cpuPhysicalCores,
+			cpuSpeed: metric.cpuSpeed,
+			os: metric.os,
+			distro: metric.distro,
+			kernel: metric.kernel,
+			arch: metric.arch,
+			memUsed: Number.parseFloat(metric.memUsed),
+			memUsedGB: Number.parseFloat(metric.memUsedGB),
+			memTotal: Number.parseFloat(metric.memTotal),
+			networkIn: Number.parseFloat(metric.networkIn),
+			networkOut: Number.parseFloat(metric.networkOut),
+			diskUsed: Number.parseFloat(metric.diskUsed),
+			totalDisk: Number.parseFloat(metric.totalDisk),
+			uptime: metric.uptime,
+		}));
+
+		// @ts-ignore
+		setHistoricalData(formattedData);
+		// @ts-ignore
+		setMetrics(formattedData[formattedData.length - 1] || {});
+	}, [data]);
+
+	const formatUptime = (seconds: number): string => {
+		const days = Math.floor(seconds / (24 * 60 * 60));
+		const hours = Math.floor((seconds % (24 * 60 * 60)) / (60 * 60));
+		const minutes = Math.floor((seconds % (60 * 60)) / 60);
+
+		return `${days}d ${hours}h ${minutes}m`;
+	};
+
+	if (isLoading) {
+		return (
+			<div className="flex h-[400px] w-full items-center justify-center">
+				<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+			</div>
+		);
+	}
+
+	if (queryError) {
+		return (
+			<div className="flex min-h-[55vh] w-full items-center justify-center p-4">
+				<div className="max-w-xl text-center">
+					<p className="mb-2 text-base font-medium leading-none text-muted-foreground">
+						Error fetching metrics{" "}
+					</p>
+					<p className="whitespace-pre-line text-sm text-destructive">
+						{queryError instanceof Error
+							? queryError.message
+							: "Failed to fetch metrics, Please check your monitoring Instance is Configured correctly."}
+					</p>
+					<p className=" text-sm text-muted-foreground">URL: {BASE_URL}</p>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-4 pt-5 pb-10 w-full md:px-4">
+			<div className="flex items-center justify-between flex-wrap	 gap-2">
+				<h2 className="text-2xl font-bold tracking-tight">System Monitoring</h2>
+				<div className="flex items-center gap-4 flex-wrap">
+					<div>
+						<span className="text-sm text-muted-foreground">Data points:</span>
+						<Select
+							value={dataPoints}
+							onValueChange={(value: keyof typeof DATA_POINTS_OPTIONS) =>
+								setDataPoints(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select points" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(DATA_POINTS_OPTIONS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+
+					<div>
+						<span className="text-sm text-muted-foreground">
+							Refresh interval:
+						</span>
+						<Select
+							value={refreshInterval}
+							onValueChange={(value: keyof typeof REFRESH_INTERVALS) =>
+								setRefreshInterval(value)
+							}
+						>
+							<SelectTrigger className="w-[180px]">
+								<SelectValue placeholder="Select interval" />
+							</SelectTrigger>
+							<SelectContent>
+								{Object.entries(REFRESH_INTERVALS).map(([value, label]) => (
+									<SelectItem key={value} value={value}>
+										{label}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			</div>
+
+			{/* Stats Cards */}
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
+				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+					<div className="flex items-center gap-2">
+						<Clock className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Uptime</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">
+						{formatUptime(metrics.uptime || 0)}
+					</p>
+				</div>
+
+				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+					<div className="flex items-center gap-2">
+						<Cpu className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">CPU Usage</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">{metrics.cpu}%</p>
+				</div>
+
+				<div className="rounded-lg border text-card-foreground bg-transparent shadow-sm p-6">
+					<div className="flex items-center gap-2">
+						<MemoryStick className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Memory Usage</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">
+						{metrics.memUsedGB} GB / {metrics.memTotal} GB
+					</p>
+				</div>
+
+				<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+					<div className="flex items-center gap-2">
+						<HardDrive className="h-4 w-4 text-muted-foreground" />
+						<h3 className="text-sm font-medium">Disk Usage</h3>
+					</div>
+					<p className="mt-2 text-2xl font-bold">{metrics.diskUsed}%</p>
+				</div>
+			</div>
+
+			{/* System Information */}
+			<div className="rounded-lg border text-card-foreground shadow-sm p-6">
+				<h3 className="text-lg font-medium mb-4">System Information</h3>
+				<div className="grid gap-4 md:grid-cols-2">
+					<div>
+						<h4 className="text-sm font-medium text-muted-foreground">CPU</h4>
+						<p className="mt-1">{metrics.cpuModel}</p>
+						<p className="text-sm text-muted-foreground mt-1">
+							{metrics.cpuPhysicalCores} Physical Cores ({metrics.cpuCores}{" "}
+							Threads) @ {metrics.cpuSpeed}GHz
+						</p>
+					</div>
+					<div>
+						<h4 className="text-sm font-medium text-muted-foreground">
+							Operating System
+						</h4>
+						<p className="mt-1">{metrics.distro}</p>
+						<p className="text-sm text-muted-foreground mt-1">
+							Kernel: {metrics.kernel} ({metrics.arch})
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Charts Grid */}
+			<div className="grid gap-4 grid-cols-1 md:grid-cols-1 xl:grid-cols-2">
+				<CPUChart data={historicalData} />
+				<MemoryChart data={historicalData} />
+				<DiskChart data={metrics} />
+				<NetworkChart data={historicalData} />
+			</div>
+		</div>
+	);
+};

apps/dokploy/components/dashboard/monitoring/web-server/show.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { DockerMonitoring } from "../docker/show";
-
-export const ShowMonitoring = () => {
-	return (
-		<div className="my-6 w-full ">
-			<DockerMonitoring appName="dokploy" />
-		</div>
-	);
-};

apps/dokploy/components/dashboard/organization/handle-organization.tsx

@@ -0,0 +1,119 @@
+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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+import { PenBoxIcon, Plus, SquarePen } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+interface Props {
+	organizationId?: string;
+	children?: React.ReactNode;
+}
+export function AddOrganization({ organizationId, children }: Props) {
+	const utils = api.useUtils();
+	const { data: organization } = api.organization.one.useQuery(
+		{
+			organizationId: organizationId ?? "",
+		},
+		{
+			enabled: !!organizationId,
+		},
+	);
+	const { mutateAsync, isLoading } = organizationId
+		? api.organization.update.useMutation()
+		: api.organization.create.useMutation();
+	const [open, setOpen] = useState(false);
+	const [name, setName] = useState("");
+
+	useEffect(() => {
+		if (organization) {
+			setName(organization.name);
+		}
+	}, [organization]);
+	const handleSubmit = async () => {
+		await mutateAsync({ name, organizationId: organizationId ?? "" })
+			.then(() => {
+				setOpen(false);
+				toast.success(
+					`Organization ${organizationId ? "updated" : "created"} successfully`,
+				);
+				utils.organization.all.invalidate();
+			})
+			.catch((error) => {
+				console.error(error);
+				toast.error(
+					`Failed to ${organizationId ? "update" : "create"} organization`,
+				);
+			});
+	};
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				{organizationId ? (
+					<DropdownMenuItem
+						className="group cursor-pointer hover:bg-blue-500/10"
+						onSelect={(e) => e.preventDefault()}
+					>
+						<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+					</DropdownMenuItem>
+				) : (
+					<DropdownMenuItem
+						className="gap-2 p-2"
+						onClick={() => {
+							setOpen(true);
+						}}
+						onSelect={(e) => e.preventDefault()}
+					>
+						<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+							<Plus className="size-4" />
+						</div>
+						<div className="font-medium text-muted-foreground">
+							Add organization
+						</div>
+					</DropdownMenuItem>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>
+						{organizationId ? "Update organization" : "Add organization"}
+					</DialogTitle>
+					<DialogDescription>
+						{organizationId
+							? "Update the organization name"
+							: "Create a new organization to manage your projects."}
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="name" className="text-right">
+							Name
+						</Label>
+						<Input
+							id="name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							className="col-span-3"
+						/>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button type="submit" onClick={handleSubmit} isLoading={isLoading}>
+						{organizationId ? "Update organization" : "Create organization"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

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

@@ -70,7 +70,7 @@ interface Props {
 
 export const AddApplication = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
-
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
 	const { data: servers } = api.server.withSSHKey.useQuery();
@@ -166,7 +166,7 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud ? "(Optional)" : ""}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -197,7 +197,12 @@ export const AddApplication = ({ projectId, projectName }: Props) => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<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>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>

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

@@ -73,6 +73,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 	const utils = api.useUtils();
 	const [visible, setVisible] = useState(false);
 	const slug = slugify(projectName);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { mutateAsync, isLoading, error, isError } =
 		api.compose.create.useMutation();
@@ -173,7 +174,7 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud ? "(Optional)" : ""}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -204,7 +205,12 @@ export const AddCompose = ({ projectId, projectName }: Props) => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<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>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>

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

@@ -89,7 +89,7 @@ const mySchema = z.discriminatedUnion("type", [
 	z
 		.object({
 			type: z.literal("postgres"),
-			databaseName: z.string().min(1, "Database name required"),
+			databaseName: z.string().default("postgres"),
 			databaseUser: z.string().default("postgres"),
 		})
 		.merge(baseDatabaseSchema),
@@ -110,7 +110,7 @@ const mySchema = z.discriminatedUnion("type", [
 			type: z.literal("mysql"),
 			databaseRootPassword: z.string().default(""),
 			databaseUser: z.string().default("mysql"),
-			databaseName: z.string().min(1, "Database name required"),
+			databaseName: z.string().default("mysql"),
 		})
 		.merge(baseDatabaseSchema),
 	z
@@ -119,7 +119,7 @@ const mySchema = z.discriminatedUnion("type", [
 			dockerImage: z.string().default("mariadb:4"),
 			databaseRootPassword: z.string().default(""),
 			databaseUser: z.string().default("mariadb"),
-			databaseName: z.string().min(1, "Database name required"),
+			databaseName: z.string().default("mariadb"),
 		})
 		.merge(baseDatabaseSchema),
 ]);
@@ -206,7 +206,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 			promise = postgresMutation.mutateAsync({
 				...commonParams,
 				databasePassword: data.databasePassword,
-				databaseName: data.databaseName,
+				databaseName: data.databaseName || "postgres",
 
 				databaseUser:
 					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
@@ -233,7 +233,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 				...commonParams,
 				databasePassword: data.databasePassword,
 				databaseRootPassword: data.databaseRootPassword,
-				databaseName: data.databaseName,
+				databaseName: data.databaseName || "mariadb",
 				databaseUser:
 					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
 				serverId: data.serverId,
@@ -242,7 +242,7 @@ export const AddDatabase = ({ projectId, projectName }: Props) => {
 			promise = mysqlMutation.mutateAsync({
 				...commonParams,
 				databasePassword: data.databasePassword,
-				databaseName: data.databaseName,
+				databaseName: data.databaseName || "mysql",
 				databaseUser:
 					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
 				databaseRootPassword: data.databaseRootPassword,

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

@@ -80,6 +80,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 	const [viewMode, setViewMode] = useState<"detailed" | "icon">("detailed");
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const { data } = api.compose.templates.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
 	const { data: tags, isLoading: isLoadingTags } =
 		api.compose.getTags.useQuery();
@@ -114,26 +115,28 @@ export const AddTemplate = ({ projectId }: Props) => {
 			</DialogTrigger>
 			<DialogContent className="max-h-screen sm:max-w-[90vw] p-0">
 				<DialogHeader className="sticky top-0 z-10 bg-background p-6 border-b">
-					<div className="flex flex-col space-y-4">
-						<div className="flex items-center justify-between">
+					<div className="flex flex-col space-y-6">
+						<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
 							<div>
 								<DialogTitle>Create from Template</DialogTitle>
 								<DialogDescription>
 									Create an open source application from a template
 								</DialogDescription>
 							</div>
-							<div className="flex items-center gap-4">
+							<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
 								<Input
 									placeholder="Search Template"
 									onChange={(e) => setQuery(e.target.value)}
-									className="w-[200px]"
+									className="w-full sm:w-[200px]"
 									value={query}
 								/>
 								<Popover modal={true}>
 									<PopoverTrigger asChild>
 										<Button
 											variant="outline"
-											className={cn("w-[200px] justify-between !bg-input")}
+											className={cn(
+												"w-full sm:w-[200px] justify-between !bg-input",
+											)}
 										>
 											{isLoadingTags
 												? "Loading...."
@@ -224,7 +227,11 @@ export const AddTemplate = ({ projectId }: Props) => {
 
 				<ScrollArea className="h-[calc(98vh-8rem)]">
 					<div className="p-6">
-						{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+						{isError && (
+							<AlertBlock type="error" className="mb-4">
+								{error?.message}
+							</AlertBlock>
+						)}
 
 						{templates.length === 0 ? (
 							<div className="flex justify-center items-center w-full gap-2 min-h-[50vh]">
@@ -238,8 +245,8 @@ export const AddTemplate = ({ projectId }: Props) => {
 								className={cn(
 									"grid gap-6",
 									viewMode === "detailed"
-										? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-6"
-										: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8",
+										? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+										: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6",
 								)}
 							>
 								{templates?.map((template, index) => (
@@ -302,7 +309,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 										{/* Create Button */}
 										<div
 											className={cn(
-												"flex-none px-6 pb-6 pt-3 mt-auto",
+												"flex-none px-6 py-3 mt-auto",
 												viewMode === "detailed"
 													? "flex items-center justify-between bg-muted/30 border-t"
 													: "flex justify-center",
@@ -340,6 +347,7 @@ export const AddTemplate = ({ projectId }: Props) => {
 											<AlertDialog>
 												<AlertDialogTrigger asChild>
 													<Button
+														variant="secondary"
 														size="sm"
 														className={cn(
 															"w-auto",
@@ -365,7 +373,8 @@ export const AddTemplate = ({ projectId }: Props) => {
 																<Tooltip>
 																	<TooltipTrigger asChild>
 																		<Label className="break-all w-fit flex flex-row gap-1 items-center pb-2 pt-3.5">
-																			Select a Server (Optional)
+																			Select a Server{" "}
+																			{!isCloud ? "(Optional)" : ""}
 																			<HelpCircle className="size-4 text-muted-foreground" />
 																		</Label>
 																	</TooltipTrigger>
@@ -398,7 +407,12 @@ export const AddTemplate = ({ projectId }: Props) => {
 																				key={server.serverId}
 																				value={server.serverId}
 																			>
-																				{server.name}
+																				<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>
+																				</span>
 																			</SelectItem>
 																		))}
 																		<SelectLabel>

apps/dokploy/components/dashboard/projects/handle-project.tsx

@@ -21,6 +21,7 @@ import {
 
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon, SquarePen } from "lucide-react";
@@ -97,6 +98,18 @@ export const HandleProject = ({ projectId }: Props) => {
 				);
 			});
 	};
+	// useEffect(() => {
+	// 	const getUsers = async () => {
+	// 		const users = await authClient.admin.listUsers({
+	// 			query: {
+	// 				limit: 100,
+	// 			},
+	// 		});
+	// 		console.log(users);
+	// 	};
+
+	// 	getUsers();
+	// });
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -118,7 +131,7 @@ export const HandleProject = ({ projectId }: Props) => {
 			</DialogTrigger>
 			<DialogContent className="sm:m:max-w-lg ">
 				<DialogHeader>
-					<DialogTitle>Add a project</DialogTitle>
+					<DialogTitle>{projectId ? "Update" : "Add a"} project</DialogTitle>
 					<DialogDescription>The home of something big!</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}

apps/dokploy/components/dashboard/projects/project-environment.tsx

@@ -99,8 +99,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 					<DialogTitle>Project Environment</DialogTitle>
 					<DialogDescription>
 						Update the env Environment variables that are accessible to all
-						services of this project. Use this syntax to reference project-level
-						variables in your service environments:
+						services of this project.
 					</DialogDescription>
 				</DialogHeader>
 				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}

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

@@ -1,5 +1,6 @@
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { StatusTooltip } from "@/components/shared/status-tooltip";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -23,8 +24,10 @@ import {
 import {
 	DropdownMenu,
 	DropdownMenuContent,
+	DropdownMenuGroup,
 	DropdownMenuItem,
 	DropdownMenuLabel,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
@@ -48,15 +51,7 @@ import { ProjectEnvironment } from "./project-environment";
 export const ShowProjects = () => {
 	const utils = api.useUtils();
 	const { data, isLoading } = api.project.all.useQuery();
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 	const [searchQuery, setSearchQuery] = useState("");
 
@@ -75,10 +70,10 @@ export const ShowProjects = () => {
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
 			<div className="w-full">
-				<Card className="h-full bg-sidebar  p-2.5 rounded-xl  ">
+				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
-						<div className="flex justify-between gap-4 w-full items-center">
-							<CardHeader className="">
+						<div className="flex justify-between gap-4 w-full items-center flex-wrap p-6">
+							<CardHeader className="p-0">
 								<CardTitle className="text-xl flex flex-row gap-2">
 									<FolderInput className="size-6 text-muted-foreground self-center" />
 									Projects
@@ -87,9 +82,12 @@ export const ShowProjects = () => {
 									Create and manage your projects
 								</CardDescription>
 							</CardHeader>
-							<div className=" px-4 ">
-								<HandleProject />
-							</div>
+
+							{(auth?.role === "owner" || auth?.user?.canCreateProjects) && (
+								<div className="">
+									<HandleProject />
+								</div>
+							)}
 						</div>
 
 						<CardContent className="space-y-2 py-8 border-t gap-4 flex flex-col min-h-[60vh]">
@@ -146,14 +144,97 @@ export const ShowProjects = () => {
 														href={`/dashboard/project/${project.projectId}`}
 													>
 														<Card className="group relative w-full h-full bg-transparent transition-colors hover:bg-border">
-															<Button
-																className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
-																size="sm"
-																variant="default"
-															>
-																<ExternalLinkIcon className="size-3.5" />
-															</Button>
-
+															{project.applications.length > 0 ||
+															project.compose.length > 0 ? (
+																<DropdownMenu>
+																	<DropdownMenuTrigger asChild>
+																		<Button
+																			className="absolute -right-3 -top-3 size-9 translate-y-1 rounded-full p-0 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100"
+																			size="sm"
+																			variant="default"
+																		>
+																			<ExternalLinkIcon className="size-3.5" />
+																		</Button>
+																	</DropdownMenuTrigger>
+																	<DropdownMenuContent
+																		className="w-[200px] space-y-2 overflow-y-auto max-h-[400px]"
+																		onClick={(e) => e.stopPropagation()}
+																	>
+																		{project.applications.length > 0 && (
+																			<DropdownMenuGroup>
+																				<DropdownMenuLabel>
+																					Applications
+																				</DropdownMenuLabel>
+																				{project.applications.map((app) => (
+																					<div key={app.applicationId}>
+																						<DropdownMenuSeparator />
+																						<DropdownMenuGroup>
+																							<DropdownMenuLabel className="font-normal capitalize text-xs flex items-center justify-between">
+																								{app.name}
+																								<StatusTooltip
+																									status={app.applicationStatus}
+																								/>
+																							</DropdownMenuLabel>
+																							<DropdownMenuSeparator />
+																							{app.domains.map((domain) => (
+																								<DropdownMenuItem
+																									key={domain.domainId}
+																									asChild
+																								>
+																									<Link
+																										className="space-x-4 text-xs cursor-pointer justify-between"
+																										target="_blank"
+																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																									>
+																										<span>{domain.host}</span>
+																										<ExternalLinkIcon className="size-4 shrink-0" />
+																									</Link>
+																								</DropdownMenuItem>
+																							))}
+																						</DropdownMenuGroup>
+																					</div>
+																				))}
+																			</DropdownMenuGroup>
+																		)}
+																		{project.compose.length > 0 && (
+																			<DropdownMenuGroup>
+																				<DropdownMenuLabel>
+																					Compose
+																				</DropdownMenuLabel>
+																				{project.compose.map((comp) => (
+																					<div key={comp.composeId}>
+																						<DropdownMenuSeparator />
+																						<DropdownMenuGroup>
+																							<DropdownMenuLabel className="font-normal capitalize text-xs flex items-center justify-between">
+																								{comp.name}
+																								<StatusTooltip
+																									status={comp.composeStatus}
+																								/>
+																							</DropdownMenuLabel>
+																							<DropdownMenuSeparator />
+																							{comp.domains.map((domain) => (
+																								<DropdownMenuItem
+																									key={domain.domainId}
+																									asChild
+																								>
+																									<Link
+																										className="space-x-4 text-xs cursor-pointer justify-between"
+																										target="_blank"
+																										href={`${domain.https ? "https" : "http"}://${domain.host}${domain.path}`}
+																									>
+																										<span>{domain.host}</span>
+																										<ExternalLinkIcon className="size-4 shrink-0" />
+																									</Link>
+																								</DropdownMenuItem>
+																							))}
+																						</DropdownMenuGroup>
+																					</div>
+																				))}
+																			</DropdownMenuGroup>
+																		)}
+																	</DropdownMenuContent>
+																</DropdownMenu>
+															) : null}
 															<CardHeader>
 																<CardTitle className="flex items-center justify-between gap-2">
 																	<span className="flex flex-col gap-1.5">
@@ -179,7 +260,10 @@ export const ShowProjects = () => {
 																					<MoreHorizontalIcon className="size-5" />
 																				</Button>
 																			</DropdownMenuTrigger>
-																			<DropdownMenuContent className="w-[200px] space-y-2">
+																			<DropdownMenuContent
+																				className="w-[200px] space-y-2 overflow-y-auto max-h-[280px]"
+																				onClick={(e) => e.stopPropagation()}
+																			>
 																				<DropdownMenuLabel className="font-normal">
 																					Actions
 																				</DropdownMenuLabel>
@@ -201,8 +285,8 @@ export const ShowProjects = () => {
 																				<div
 																					onClick={(e) => e.stopPropagation()}
 																				>
-																					{(auth?.rol === "admin" ||
-																						user?.canDeleteProjects) && (
+																					{(auth?.role === "owner" ||
+																						auth?.user?.canDeleteProjects) && (
 																						<AlertDialog>
 																							<AlertDialogTrigger className="w-full">
 																								<DropdownMenuItem

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

@@ -168,6 +168,7 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 						setIsDrawerOpen(false);
 						setFilteredLogs([]);
 						setIsDeploying(false);
+						refetch();
 					}}
 					filteredLogs={filteredLogs}
 				/>

apps/dokploy/components/dashboard/search-command.tsx

@@ -18,6 +18,7 @@ import {
 	CommandList,
 	CommandSeparator,
 } from "@/components/ui/command";
+import { authClient } from "@/lib/auth-client";
 import {
 	type Services,
 	extractServices,
@@ -35,8 +36,10 @@ export const SearchCommand = () => {
 	const router = useRouter();
 	const [open, setOpen] = React.useState(false);
 	const [search, setSearch] = React.useState("");
-
-	const { data } = api.project.all.useQuery();
+	const { data: session } = authClient.useSession();
+	const { data } = api.project.all.useQuery(undefined, {
+		enabled: !!session,
+	});
 	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
 
 	React.useEffect(() => {

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

@@ -39,7 +39,7 @@ export const calculatePrice = (count: number, isAnnual = false) => {
 };
 export const ShowBilling = () => {
 	const { data: servers } = api.server.all.useQuery(undefined);
-	const { data: admin } = api.admin.one.useQuery();
+	const { data: admin } = api.user.get.useQuery();
 	const { data, isLoading } = api.stripe.getProducts.useQuery();
 	const { mutateAsync: createCheckoutSession } =
 		api.stripe.createCheckoutSession.useMutation();
@@ -70,7 +70,7 @@ export const ShowBilling = () => {
 		return isAnnual ? interval === "year" : interval === "month";
 	});
 
-	const maxServers = admin?.serversQuantity ?? 1;
+	const maxServers = admin?.user.serversQuantity ?? 1;
 	const percentage = ((servers?.length ?? 0) / maxServers) * 100;
 	const safePercentage = Math.min(percentage, 100);
 
@@ -98,17 +98,17 @@ export const ShowBilling = () => {
 									<TabsTrigger value="annual">Annual</TabsTrigger>
 								</TabsList>
 							</Tabs>
-							{admin?.stripeSubscriptionId && (
+							{admin?.user.stripeSubscriptionId && (
 								<div className="space-y-2 flex flex-col">
 									<h3 className="text-lg font-medium">Servers Plan</h3>
 									<p className="text-sm text-muted-foreground">
 										You have {servers?.length} server on your plan of{" "}
-										{admin?.serversQuantity} servers
+										{admin?.user.serversQuantity} servers
 									</p>
 									<div>
 										<Progress value={safePercentage} className="max-w-lg" />
 									</div>
-									{admin && admin.serversQuantity! <= servers?.length! && (
+									{admin && admin.user.serversQuantity! <= servers?.length! && (
 										<div className="flex flex-row gap-4 p-2 bg-yellow-50 dark:bg-yellow-950 rounded-lg items-center">
 											<AlertTriangle className="text-yellow-600 dark:text-yellow-400" />
 											<span className="text-sm text-yellow-600 dark:text-yellow-400">
@@ -279,7 +279,7 @@ export const ShowBilling = () => {
 																"flex flex-row  items-center gap-2 mt-4",
 															)}
 														>
-															{admin?.stripeCustomerId && (
+															{admin?.user.stripeCustomerId && (
 																<Button
 																	variant="secondary"
 																	className="w-full"

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

@@ -10,12 +10,12 @@ import type React from "react";
 import { useEffect, useState } from "react";
 
 export const ShowWelcomeDokploy = () => {
-	const { data } = api.auth.get.useQuery();
+	const { data } = api.user.get.useQuery();
 	const [open, setOpen] = useState(false);
 
 	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
 
-	if (!isCloud || data?.rol !== "admin") {
+	if (!isCloud || data?.role !== "admin") {
 		return null;
 	}
 
@@ -24,14 +24,14 @@ export const ShowWelcomeDokploy = () => {
 			!isLoading &&
 			isCloud &&
 			!localStorage.getItem("hasSeenCloudWelcomeModal") &&
-			data?.rol === "admin"
+			data?.role === "owner"
 		) {
 			setOpen(true);
 		}
 	}, [isCloud, isLoading]);
 
 	const handleClose = (isOpen: boolean) => {
-		if (data?.rol === "admin") {
+		if (data?.role === "owner") {
 			setOpen(isOpen);
 			if (!isOpen) {
 				localStorage.setItem("hasSeenCloudWelcomeModal", "true"); // Establece el flag al cerrar el modal

apps/dokploy/components/dashboard/settings/certificates/add-certificate.tsx

@@ -61,6 +61,7 @@ export const AddCertificate = () => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
 
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { mutateAsync, isError, error, isLoading } =
 		api.certificates.create.useMutation();
 	const { data: servers } = api.server.withSSHKey.useQuery();
@@ -85,6 +86,7 @@ export const AddCertificate = () => {
 			privateKey: data.privateKey,
 			autoRenew: data.autoRenew,
 			serverId: data.serverId,
+			organizationId: "",
 		})
 			.then(async () => {
 				toast.success("Certificate Created");
@@ -181,7 +183,7 @@ export const AddCertificate = () => {
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<FormLabel className="break-all w-fit flex flex-row gap-1 items-center">
-													Select a Server (Optional)
+													Select a Server {!isCloud && "(Optional)"}
 													<HelpCircle className="size-4 text-muted-foreground" />
 												</FormLabel>
 											</TooltipTrigger>
@@ -202,7 +204,12 @@ export const AddCertificate = () => {
 														key={server.serverId}
 														value={server.serverId}
 													>
-														{server.name}
+														<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>
+														</span>
 													</SelectItem>
 												))}
 												<SelectLabel>Servers ({servers?.length})</SelectLabel>

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

@@ -50,7 +50,7 @@ export const ShowCertificates = () => {
 								{data?.length === 0 ? (
 									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
 										<ShieldCheck className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground">
+										<span className="text-base text-muted-foreground text-center">
 											You don't have any certificates created
 										</span>
 										<AddCertificate />

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

@@ -53,7 +53,7 @@ export const AddBitbucketProvider = () => {
 	const [isOpen, setIsOpen] = useState(false);
 	const url = useUrl();
 	const { mutateAsync, error, isError } = api.bitbucket.create.useMutation();
-	const { data: auth } = api.auth.get.useQuery();
+	const { data: auth } = api.user.get.useQuery();
 	const router = useRouter();
 	const form = useForm<Schema>({
 		defaultValues: {

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

@@ -10,13 +10,15 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { format } from "date-fns";
 import { useEffect, useState } from "react";
 
 export const AddGithubProvider = () => {
 	const [isOpen, setIsOpen] = useState(false);
-	const { data } = api.auth.get.useQuery();
+	const { data: activeOrganization } = authClient.useActiveOrganization();
+	const { data } = api.user.get.useQuery();
 	const [manifest, setManifest] = useState("");
 	const [isOrganization, setIsOrganization] = useState(false);
 	const [organizationName, setOrganization] = useState("");
@@ -25,7 +27,7 @@ export const AddGithubProvider = () => {
 		const url = document.location.origin;
 		const manifest = JSON.stringify(
 			{
-				redirect_url: `${origin}/api/providers/github/setup?authId=${data?.id}`,
+				redirect_url: `${origin}/api/providers/github/setup?organizationId=${activeOrganization?.id}`,
 				name: `Dokploy-${format(new Date(), "yyyy-MM-dd")}`,
 				url: origin,
 				hook_attributes: {
@@ -93,8 +95,8 @@ export const AddGithubProvider = () => {
 							<form
 								action={
 									isOrganization
-										? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${data?.id}`
-										: `https://github.com/settings/apps/new?state=gh_init:${data?.id}`
+										? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}`
+										: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.id}`
 								}
 								method="post"
 							>

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

@@ -55,7 +55,7 @@ export const AddGitlabProvider = () => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
 	const url = useUrl();
-	const { data: auth } = api.auth.get.useQuery();
+	const { data: auth } = api.user.get.useQuery();
 	const { mutateAsync, error, isError } = api.gitlab.create.useMutation();
 	const webhookUrl = `${url}/api/providers/gitlab/callback`;
 

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

@@ -28,7 +28,13 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Mail, PenBoxIcon, PlusIcon } from "lucide-react";
+import {
+	AlertTriangle,
+	Mail,
+	MessageCircleMore,
+	PenBoxIcon,
+	PlusIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -43,6 +49,7 @@ const notificationBaseSchema = z.object({
 	databaseBackup: z.boolean().default(false),
 	dokployRestart: z.boolean().default(false),
 	dockerCleanup: z.boolean().default(false),
+	serverThreshold: z.boolean().default(false),
 });
 
 export const notificationSchema = z.discriminatedUnion("type", [
@@ -84,6 +91,15 @@ export const notificationSchema = z.discriminatedUnion("type", [
 				.min(1, { message: "At least one email is required" }),
 		})
 		.merge(notificationBaseSchema),
+	z
+		.object({
+			type: z.literal("gotify"),
+			serverUrl: z.string().min(1, { message: "Server URL is required" }),
+			appToken: z.string().min(1, { message: "App Token is required" }),
+			priority: z.number().min(1).max(10).default(5),
+			decoration: z.boolean().default(true),
+		})
+		.merge(notificationBaseSchema),
 ]);
 
 export const notificationsMap = {
@@ -103,6 +119,10 @@ export const notificationsMap = {
 		icon: <Mail size={29} className="text-muted-foreground" />,
 		label: "Email",
 	},
+	gotify: {
+		icon: <MessageCircleMore size={29} className="text-muted-foreground" />,
+		label: "Gotify",
+	},
 };
 
 export type NotificationSchema = z.infer<typeof notificationSchema>;
@@ -126,13 +146,14 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 	);
 	const { mutateAsync: testSlackConnection, isLoading: isLoadingSlack } =
 		api.notification.testSlackConnection.useMutation();
-
 	const { mutateAsync: testTelegramConnection, isLoading: isLoadingTelegram } =
 		api.notification.testTelegramConnection.useMutation();
 	const { mutateAsync: testDiscordConnection, isLoading: isLoadingDiscord } =
 		api.notification.testDiscordConnection.useMutation();
 	const { mutateAsync: testEmailConnection, isLoading: isLoadingEmail } =
 		api.notification.testEmailConnection.useMutation();
+	const { mutateAsync: testGotifyConnection, isLoading: isLoadingGotify } =
+		api.notification.testGotifyConnection.useMutation();
 	const slackMutation = notificationId
 		? api.notification.updateSlack.useMutation()
 		: api.notification.createSlack.useMutation();
@@ -145,6 +166,9 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 	const emailMutation = notificationId
 		? api.notification.updateEmail.useMutation()
 		: api.notification.createEmail.useMutation();
+	const gotifyMutation = notificationId
+		? api.notification.updateGotify.useMutation()
+		: api.notification.createGotify.useMutation();
 
 	const form = useForm<NotificationSchema>({
 		defaultValues: {
@@ -181,6 +205,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					channel: notification.slack?.channel || "",
 					name: notification.name,
 					type: notification.notificationType,
+					serverThreshold: notification.serverThreshold,
 				});
 			} else if (notification.notificationType === "telegram") {
 				form.reset({
@@ -193,6 +218,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					type: notification.notificationType,
 					name: notification.name,
 					dockerCleanup: notification.dockerCleanup,
+					serverThreshold: notification.serverThreshold,
 				});
 			} else if (notification.notificationType === "discord") {
 				form.reset({
@@ -205,6 +231,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					decoration: notification.discord?.decoration || undefined,
 					name: notification.name,
 					dockerCleanup: notification.dockerCleanup,
+					serverThreshold: notification.serverThreshold,
 				});
 			} else if (notification.notificationType === "email") {
 				form.reset({
@@ -221,6 +248,21 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					fromAddress: notification.email?.fromAddress,
 					name: notification.name,
 					dockerCleanup: notification.dockerCleanup,
+					serverThreshold: notification.serverThreshold,
+				});
+			} else if (notification.notificationType === "gotify") {
+				form.reset({
+					appBuildError: notification.appBuildError,
+					appDeploy: notification.appDeploy,
+					dokployRestart: notification.dokployRestart,
+					databaseBackup: notification.databaseBackup,
+					type: notification.notificationType,
+					appToken: notification.gotify?.appToken,
+					decoration: notification.gotify?.decoration || undefined,
+					priority: notification.gotify?.priority,
+					serverUrl: notification.gotify?.serverUrl,
+					name: notification.name,
+					dockerCleanup: notification.dockerCleanup,
 				});
 			}
 		} else {
@@ -233,6 +275,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 		telegram: telegramMutation,
 		discord: discordMutation,
 		email: emailMutation,
+		gotify: gotifyMutation,
 	};
 
 	const onSubmit = async (data: NotificationSchema) => {
@@ -242,6 +285,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 			dokployRestart,
 			databaseBackup,
 			dockerCleanup,
+			serverThreshold,
 		} = data;
 		let promise: Promise<unknown> | null = null;
 		if (data.type === "slack") {
@@ -256,6 +300,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 				dockerCleanup: dockerCleanup,
 				slackId: notification?.slackId || "",
 				notificationId: notificationId || "",
+				serverThreshold: serverThreshold,
 			});
 		} else if (data.type === "telegram") {
 			promise = telegramMutation.mutateAsync({
@@ -269,6 +314,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 				dockerCleanup: dockerCleanup,
 				notificationId: notificationId || "",
 				telegramId: notification?.telegramId || "",
+				serverThreshold: serverThreshold,
 			});
 		} else if (data.type === "discord") {
 			promise = discordMutation.mutateAsync({
@@ -282,6 +328,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 				dockerCleanup: dockerCleanup,
 				notificationId: notificationId || "",
 				discordId: notification?.discordId || "",
+				serverThreshold: serverThreshold,
 			});
 		} else if (data.type === "email") {
 			promise = emailMutation.mutateAsync({
@@ -299,6 +346,22 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 				dockerCleanup: dockerCleanup,
 				notificationId: notificationId || "",
 				emailId: notification?.emailId || "",
+				serverThreshold: serverThreshold,
+			});
+		} else if (data.type === "gotify") {
+			promise = gotifyMutation.mutateAsync({
+				appBuildError: appBuildError,
+				appDeploy: appDeploy,
+				dokployRestart: dokployRestart,
+				databaseBackup: databaseBackup,
+				serverUrl: data.serverUrl,
+				appToken: data.appToken,
+				priority: data.priority,
+				name: data.name,
+				dockerCleanup: dockerCleanup,
+				decoration: data.decoration,
+				notificationId: notificationId || "",
+				gotifyId: notification?.gotifyId || "",
 			});
 		}
 
@@ -700,6 +763,94 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										</Button>
 									</>
 								)}
+
+								{type === "gotify" && (
+									<>
+										<FormField
+											control={form.control}
+											name="serverUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Server URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://gotify.example.com"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="appToken"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>App Token</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="AzxcvbnmKjhgfdsa..."
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="priority"
+											defaultValue={5}
+											render={({ field }) => (
+												<FormItem className="w-full">
+													<FormLabel>Priority</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="5"
+															{...field}
+															onChange={(e) => {
+																const value = e.target.value;
+																if (value) {
+																	const port = Number.parseInt(value);
+																	if (port > 0 && port < 10) {
+																		field.onChange(port);
+																	}
+																}
+															}}
+															type="number"
+														/>
+													</FormControl>
+													<FormDescription>
+														Message priority (1-10, default: 5)
+													</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="decoration"
+											defaultValue={true}
+											render={({ field }) => (
+												<FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+													<div className="space-y-0.5">
+														<FormLabel>Decoration</FormLabel>
+														<FormDescription>
+															Decorate the notification with emojis.
+														</FormDescription>
+													</div>
+													<FormControl>
+														<Switch
+															checked={field.value}
+															onCheckedChange={field.onChange}
+														/>
+													</FormControl>
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
 							</div>
 						</div>
 						<div className="flex flex-col gap-4">
@@ -814,6 +965,30 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										)}
 									/>
 								)}
+
+								{isCloud && (
+									<FormField
+										control={form.control}
+										name="serverThreshold"
+										render={({ field }) => (
+											<FormItem className=" flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-2">
+												<div className="space-y-0.5">
+													<FormLabel>Server Threshold</FormLabel>
+													<FormDescription>
+														Trigger the action when the server threshold is
+														reached.
+													</FormDescription>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+								)}
 							</div>
 						</div>
 					</form>
@@ -824,7 +999,8 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 								isLoadingSlack ||
 								isLoadingTelegram ||
 								isLoadingDiscord ||
-								isLoadingEmail
+								isLoadingEmail ||
+								isLoadingGotify
 							}
 							variant="secondary"
 							onClick={async () => {
@@ -853,6 +1029,13 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											toAddresses: form.getValues("toAddresses"),
 											fromAddress: form.getValues("fromAddress"),
 										});
+									} else if (type === "gotify") {
+										await testGotifyConnection({
+											serverUrl: form.getValues("serverUrl"),
+											appToken: form.getValues("appToken"),
+											priority: form.getValues("priority"),
+											decoration: form.getValues("decoration"),
+										});
 									}
 									toast.success("Connection Success");
 								} catch (err) {

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

@@ -13,7 +13,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { Bell, Loader2, Mail, Trash2 } from "lucide-react";
+import { Bell, Loader2, Mail, MessageCircleMore, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { HandleNotifications } from "./handle-notifications";
 
@@ -47,7 +47,7 @@ export const ShowNotifications = () => {
 								{data?.length === 0 ? (
 									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
 										<Bell />
-										<span className="text-base text-muted-foreground">
+										<span className="text-base text-muted-foreground text-center">
 											To send notifications it is required to set at least 1
 											provider.
 										</span>
@@ -83,6 +83,11 @@ export const ShowNotifications = () => {
 																	<Mail className="size-6 text-muted-foreground" />
 																</div>
 															)}
+															{notification.notificationType === "gotify" && (
+																<div className="flex  items-center justify-center rounded-lg ">
+																	<MessageCircleMore className="size-6 text-muted-foreground" />
+																</div>
+															)}
 
 															{notification.name}
 														</span>

apps/dokploy/components/dashboard/settings/profile/disable-2fa.tsx

@@ -1,52 +1,134 @@
 import {
 	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
 	AlertDialogContent,
 	AlertDialogDescription,
-	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+const PasswordSchema = z.object({
+	password: z.string().min(8, {
+		message: "Password is required",
+	}),
+});
+
+type PasswordForm = z.infer<typeof PasswordSchema>;
 
 export const Disable2FA = () => {
 	const utils = api.useUtils();
-	const { mutateAsync, isLoading } = api.auth.disable2FA.useMutation();
+	const [isOpen, setIsOpen] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+
+	const form = useForm<PasswordForm>({
+		resolver: zodResolver(PasswordSchema),
+		defaultValues: {
+			password: "",
+		},
+	});
+
+	const handleSubmit = async (formData: PasswordForm) => {
+		setIsLoading(true);
+		try {
+			const result = await authClient.twoFactor.disable({
+				password: formData.password,
+			});
+
+			if (result.error) {
+				form.setError("password", {
+					message: result.error.message,
+				});
+				toast.error(result.error.message);
+				return;
+			}
+
+			toast.success("2FA disabled successfully");
+			utils.auth.get.invalidate();
+			setIsOpen(false);
+		} catch (error) {
+			form.setError("password", {
+				message: "Connection error. Please try again.",
+			});
+			toast.error("Connection error. Please try again.");
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
 	return (
-		<AlertDialog>
+		<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
 			<AlertDialogTrigger asChild>
-				<Button variant="destructive" isLoading={isLoading}>
-					Disable 2FA
-				</Button>
+				<Button variant="destructive">Disable 2FA</Button>
 			</AlertDialogTrigger>
 			<AlertDialogContent>
 				<AlertDialogHeader>
 					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
 					<AlertDialogDescription>
-						This action cannot be undone. This will permanently delete the 2FA
+						This action cannot be undone. This will permanently disable
+						Two-Factor Authentication for your account.
 					</AlertDialogDescription>
 				</AlertDialogHeader>
-				<AlertDialogFooter>
-					<AlertDialogCancel>Cancel</AlertDialogCancel>
-					<AlertDialogAction
-						onClick={async () => {
-							await mutateAsync()
-								.then(() => {
-									utils.auth.get.invalidate();
-									toast.success("2FA Disabled");
-								})
-								.catch(() => {
-									toast.error("Error disabling 2FA");
-								});
-						}}
+
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(handleSubmit)}
+						className="space-y-4"
 					>
-						Confirm
-					</AlertDialogAction>
-				</AlertDialogFooter>
+						<FormField
+							control={form.control}
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input
+											type="password"
+											placeholder="Enter your password"
+											{...field}
+										/>
+									</FormControl>
+									<FormDescription>
+										Enter your password to disable 2FA
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="flex justify-end gap-4">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => {
+									form.reset();
+									setIsOpen(false);
+								}}
+							>
+								Cancel
+							</Button>
+							<Button type="submit" variant="destructive" isLoading={isLoading}>
+								Disable 2FA
+							</Button>
+						</div>
+					</form>
+				</Form>
 			</AlertDialogContent>
 		</AlertDialog>
 	);

apps/dokploy/components/dashboard/settings/profile/enable-2fa.tsx

@@ -17,144 +17,315 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
 	InputOTP,
 	InputOTPGroup,
 	InputOTPSlot,
 } from "@/components/ui/input-otp";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, Fingerprint } from "lucide-react";
-import { useEffect } from "react";
+import { Fingerprint, QrCode } from "lucide-react";
+import QRCode from "qrcode";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-const Enable2FASchema = z.object({
+const PasswordSchema = z.object({
+	password: z.string().min(8, {
+		message: "Password is required",
+	}),
+});
+
+const PinSchema = z.object({
 	pin: z.string().min(6, {
 		message: "Pin is required",
 	}),
 });
 
-type Enable2FA = z.infer<typeof Enable2FASchema>;
+type PasswordForm = z.infer<typeof PasswordSchema>;
+type PinForm = z.infer<typeof PinSchema>;
+
+type TwoFactorEnableResponse = {
+	totpURI: string;
+	backupCodes: string[];
+};
+
+type TwoFactorSetupData = {
+	qrCodeUrl: string;
+	secret: string;
+	totpURI: string;
+};
 
 export const Enable2FA = () => {
 	const utils = api.useUtils();
+	const { data: session } = authClient.useSession();
+	const [data, setData] = useState<TwoFactorSetupData | null>(null);
+	const [backupCodes, setBackupCodes] = useState<string[]>([]);
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const [step, setStep] = useState<"password" | "verify">("password");
+	const [isPasswordLoading, setIsPasswordLoading] = useState(false);
 
-	const { data } = api.auth.generate2FASecret.useQuery(undefined, {
-		refetchOnWindowFocus: false,
+	const handlePasswordSubmit = async (formData: PasswordForm) => {
+		setIsPasswordLoading(true);
+		try {
+			const { data: enableData } = await authClient.twoFactor.enable({
+				password: formData.password,
+			});
+
+			if (!enableData) {
+				throw new Error("No data received from server");
+			}
+
+			if (enableData.backupCodes) {
+				setBackupCodes(enableData.backupCodes);
+			}
+
+			if (enableData.totpURI) {
+				const qrCodeUrl = await QRCode.toDataURL(enableData.totpURI);
+
+				setData({
+					qrCodeUrl,
+					secret: enableData.totpURI.split("secret=")[1]?.split("&")[0] || "",
+					totpURI: enableData.totpURI,
+				});
+
+				setStep("verify");
+				toast.success("Scan the QR code with your authenticator app");
+			} else {
+				throw new Error("No TOTP URI received from server");
+			}
+		} catch (error) {
+			toast.error(
+				error instanceof Error ? error.message : "Error setting up 2FA",
+			);
+			passwordForm.setError("password", {
+				message: "Error verifying password",
+			});
+		} finally {
+			setIsPasswordLoading(false);
+		}
+	};
+
+	const handleVerifySubmit = async (formData: PinForm) => {
+		try {
+			const result = await authClient.twoFactor.verifyTotp({
+				code: formData.pin,
+			});
+
+			if (result.error) {
+				if (result.error.code === "INVALID_TWO_FACTOR_AUTHENTICATION") {
+					pinForm.setError("pin", {
+						message: "Invalid code. Please try again.",
+					});
+					toast.error("Invalid verification code");
+					return;
+				}
+
+				throw result.error;
+			}
+
+			if (!result.data) {
+				throw new Error("No response received from server");
+			}
+
+			toast.success("2FA configured successfully");
+			utils.auth.get.invalidate();
+			setIsDialogOpen(false);
+		} catch (error) {
+			if (error instanceof Error) {
+				const errorMessage =
+					error.message === "Failed to fetch"
+						? "Connection error. Please check your internet connection."
+						: error.message;
+
+				pinForm.setError("pin", {
+					message: errorMessage,
+				});
+				toast.error(errorMessage);
+			} else {
+				pinForm.setError("pin", {
+					message: "Error verifying code",
+				});
+				toast.error("Error verifying 2FA code");
+			}
+		}
+	};
+
+	const passwordForm = useForm<PasswordForm>({
+		resolver: zodResolver(PasswordSchema),
+		defaultValues: {
+			password: "",
+		},
 	});
 
-	const { mutateAsync, isLoading, error, isError } =
-		api.auth.verify2FASetup.useMutation();
-
-	const form = useForm<Enable2FA>({
+	const pinForm = useForm<PinForm>({
+		resolver: zodResolver(PinSchema),
 		defaultValues: {
 			pin: "",
 		},
-		resolver: zodResolver(Enable2FASchema),
 	});
 
 	useEffect(() => {
-		form.reset({
-			pin: "",
-		});
-	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+		if (!isDialogOpen) {
+			setStep("password");
+			setData(null);
+			setBackupCodes([]);
+			passwordForm.reset();
+			pinForm.reset();
+		}
+	}, [isDialogOpen, passwordForm, pinForm]);
 
-	const onSubmit = async (formData: Enable2FA) => {
-		await mutateAsync({
-			pin: formData.pin,
-			secret: data?.secret || "",
-		})
-			.then(async () => {
-				toast.success("2FA Verified");
-				utils.auth.get.invalidate();
-			})
-			.catch(() => {
-				toast.error("Error verifying the 2FA");
-			});
-	};
 	return (
-		<Dialog>
+		<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
 			<DialogTrigger asChild>
 				<Button variant="ghost">
 					<Fingerprint className="size-4 text-muted-foreground" />
 					Enable 2FA
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="max-h-screen max-sm:overflow-y-auto sm:max-w-xl ">
+			<DialogContent className="max-h-screen overflow-y-auto sm:max-w-xl">
 				<DialogHeader>
 					<DialogTitle>2FA Setup</DialogTitle>
-					<DialogDescription>Add a 2FA to your account</DialogDescription>
+					<DialogDescription>
+						{step === "password"
+							? "Enter your password to begin 2FA setup"
+							: "Scan the QR code and verify with your authenticator app"}
+					</DialogDescription>
 				</DialogHeader>
-				{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>
-				)}
-				<Form {...form}>
-					<form
-						id="hook-form-add-2FA"
-						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid sm:grid-cols-2 w-full gap-4"
-					>
-						<div className="flex flex-col gap-4 justify-center items-center">
-							<span className="text-sm text-muted-foreground">
-								{data?.qrCodeUrl ? "Scan the QR code to add 2FA" : ""}
-							</span>
-							<img
-								src={data?.qrCodeUrl}
-								alt="qrCode"
-								className="rounded-lg w-fit"
-							/>
-							<div className="flex flex-col gap-2">
-								<span className="text-sm text-muted-foreground text-center">
-									{data?.secret ? `Secret: ${data?.secret}` : ""}
-								</span>
-							</div>
-						</div>
 
-						<FormField
-							control={form.control}
-							name="pin"
-							render={({ field }) => (
-								<FormItem className="flex flex-col justify-center max-sm:items-center">
-									<FormLabel>Pin</FormLabel>
-									<FormControl>
-										<InputOTP maxLength={6} {...field}>
-											<InputOTPGroup>
-												<InputOTPSlot index={0} />
-												<InputOTPSlot index={1} />
-												<InputOTPSlot index={2} />
-												<InputOTPSlot index={3} />
-												<InputOTPSlot index={4} />
-												<InputOTPSlot index={5} />
-											</InputOTPGroup>
-										</InputOTP>
-									</FormControl>
-									<FormDescription className="max-md:text-center">
-										Please enter the 6 digits code provided by your
-										authenticator app.
-									</FormDescription>
-									<FormMessage />
-								</FormItem>
-							)}
-						/>
-					</form>
-
-					<DialogFooter>
-						<Button
-							isLoading={isLoading}
-							form="hook-form-add-2FA"
-							type="submit"
+				{step === "password" ? (
+					<Form {...passwordForm}>
+						<form
+							id="password-form"
+							onSubmit={passwordForm.handleSubmit(handlePasswordSubmit)}
+							className="space-y-4"
 						>
-							Submit 2FA
-						</Button>
-					</DialogFooter>
-				</Form>
+							<FormField
+								control={passwordForm.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												type="password"
+												placeholder="Enter your password"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Enter your password to enable 2FA
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<Button
+								type="submit"
+								className="w-full"
+								isLoading={isPasswordLoading}
+							>
+								Continue
+							</Button>
+						</form>
+					</Form>
+				) : (
+					<Form {...pinForm}>
+						<form
+							id="pin-form"
+							onSubmit={pinForm.handleSubmit(handleVerifySubmit)}
+							className="space-y-6"
+						>
+							<div className="flex flex-col gap-6 justify-center items-center">
+								{data?.qrCodeUrl ? (
+									<>
+										<div className="flex flex-col items-center gap-4 p-6 border rounded-lg">
+											<QrCode className="size-5 text-muted-foreground" />
+											<span className="text-sm font-medium">
+												Scan this QR code with your authenticator app
+											</span>
+											<img
+												src={data.qrCodeUrl}
+												alt="2FA QR Code"
+												className="rounded-lg w-48 h-48"
+											/>
+											<div className="flex flex-col gap-2 text-center">
+												<span className="text-sm text-muted-foreground">
+													Can't scan the QR code?
+												</span>
+												<span className="text-xs font-mono bg-muted p-2 rounded">
+													{data.secret}
+												</span>
+											</div>
+										</div>
+
+										{backupCodes && backupCodes.length > 0 && (
+											<div className="w-full space-y-3 border rounded-lg p-4">
+												<h4 className="font-medium">Backup Codes</h4>
+												<div className="grid grid-cols-2 gap-2">
+													{backupCodes.map((code, index) => (
+														<code
+															key={index}
+															className="bg-muted p-2 rounded text-sm font-mono"
+														>
+															{code}
+														</code>
+													))}
+												</div>
+												<p className="text-sm text-muted-foreground">
+													Save these backup codes in a secure place. You can use
+													them to access your account if you lose access to your
+													authenticator device.
+												</p>
+											</div>
+										)}
+									</>
+								) : (
+									<div className="flex items-center justify-center w-full h-48 bg-muted rounded-lg">
+										<QrCode className="size-8 text-muted-foreground animate-pulse" />
+									</div>
+								)}
+							</div>
+
+							<FormField
+								control={pinForm.control}
+								name="pin"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center items-center">
+										<FormLabel>Verification Code</FormLabel>
+										<FormControl>
+											<InputOTP maxLength={6} {...field}>
+												<InputOTPGroup>
+													<InputOTPSlot index={0} />
+													<InputOTPSlot index={1} />
+													<InputOTPSlot index={2} />
+													<InputOTPSlot index={3} />
+													<InputOTPSlot index={4} />
+													<InputOTPSlot index={5} />
+												</InputOTPGroup>
+											</InputOTP>
+										</FormControl>
+										<FormDescription>
+											Enter the 6-digit code from your authenticator app
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<Button
+								type="submit"
+								className="w-full"
+								isLoading={isPasswordLoading}
+							>
+								Enable 2FA
+							</Button>
+						</form>
+					</Form>
+				)}
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/settings/profile/generate-token.tsx

@@ -14,7 +14,7 @@ import Link from "next/link";
 import { toast } from "sonner";
 
 export const GenerateToken = () => {
-	const { data, refetch } = api.auth.get.useQuery();
+	const { data, refetch } = api.user.get.useQuery();
 
 	const { mutateAsync: generateToken, isLoading: isLoadingToken } =
 		api.auth.generateToken.useMutation();
@@ -51,7 +51,7 @@ export const GenerateToken = () => {
 									<Label>Token</Label>
 									<ToggleVisibilityInput
 										placeholder="Token"
-										value={data?.token || ""}
+										value={data?.user?.token || ""}
 										disabled
 									/>
 								</div>

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

@@ -1,4 +1,5 @@
 import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -17,6 +18,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { authClient } from "@/lib/auth-client";
 import { generateSHA256Hash } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -54,7 +56,10 @@ const randomImages = [
 ];
 
 export const ProfileForm = () => {
-	const { data, refetch, isLoading } = api.auth.get.useQuery();
+	const utils = api.useUtils();
+	const { mutateAsync: disable2FA, isLoading: isDisabling } =
+		api.auth.disable2FA.useMutation();
+	const { data, refetch, isLoading } = api.user.get.useQuery();
 	const {
 		mutateAsync,
 		isLoading: isUpdating,
@@ -73,9 +78,9 @@ export const ProfileForm = () => {
 
 	const form = useForm<Profile>({
 		defaultValues: {
-			email: data?.email || "",
+			email: data?.user?.email || "",
 			password: "",
-			image: data?.image || "",
+			image: data?.user?.image || "",
 			currentPassword: "",
 		},
 		resolver: zodResolver(profileSchema),
@@ -84,14 +89,14 @@ export const ProfileForm = () => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
-				email: data?.email || "",
+				email: data?.user?.email || "",
 				password: "",
-				image: data?.image || "",
+				image: data?.user?.image || "",
 				currentPassword: "",
 			});
 
-			if (data.email) {
-				generateSHA256Hash(data.email).then((hash) => {
+			if (data.user.email) {
+				generateSHA256Hash(data.user.email).then((hash) => {
 					setGravatarHash(hash);
 				});
 			}
@@ -130,7 +135,7 @@ export const ProfileForm = () => {
 								{t("settings.profile.description")}
 							</CardDescription>
 						</div>
-						{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
+						{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Disable2FA />}
 					</CardHeader>
 
 					<CardContent className="space-y-2 py-8 border-t">

apps/dokploy/components/dashboard/settings/profile/remove-self-account.tsx

@@ -35,7 +35,7 @@ const profileSchema = z.object({
 type Profile = z.infer<typeof profileSchema>;
 
 export const RemoveSelfAccount = () => {
-	const { data } = api.auth.get.useQuery();
+	const { data } = api.user.get.useQuery();
 	const { mutateAsync, isLoading, error, isError } =
 		api.auth.removeSelfAccount.useMutation();
 	const { t } = useTranslation("settings");

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.admin.one.useQuery(undefined, {
+	const { data, refetch } = api.user.get.useQuery(undefined, {
 		enabled: !serverId,
 	});
 
@@ -20,7 +20,7 @@ export const ToggleDockerCleanup = ({ serverId }: Props) => {
 		},
 	);
 
-	const enabled = data?.enableDockerCleanup || server?.enableDockerCleanup;
+	const enabled = data?.user.enableDockerCleanup || server?.enableDockerCleanup;
 
 	const { mutateAsync } = api.settings.updateDockerCleanup.useMutation();
 

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

@@ -0,0 +1,636 @@
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+} from "@/components/ui/command";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input, NumberInput } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { extractServices } from "@/pages/dashboard/project/[projectId]";
+import { api } from "@/utils/api";
+import { useUrl } from "@/utils/hooks/use-url";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Eye, EyeOff, LayoutDashboardIcon, RefreshCw } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+interface Props {
+	serverId?: string;
+}
+
+const Schema = z.object({
+	metricsConfig: z.object({
+		server: z.object({
+			refreshRate: z.number().min(2, {
+				message: "Server Refresh Rate is required",
+			}),
+			port: z.number().min(1, {
+				message: "Port is required",
+			}),
+			token: z.string(),
+			urlCallback: z.string(),
+			retentionDays: z.number().min(1, {
+				message: "Retention days must be at least 1",
+			}),
+			thresholds: z.object({
+				cpu: z.number().min(0),
+				memory: z.number().min(0),
+			}),
+			cronJob: z.string().min(1, {
+				message: "Cron Job is required",
+			}),
+		}),
+		containers: z.object({
+			refreshRate: z.number().min(2, {
+				message: "Container Refresh Rate is required",
+			}),
+			services: z.object({
+				include: z.array(z.string()).optional(),
+				exclude: z.array(z.string()).optional(),
+			}),
+		}),
+	}),
+});
+
+type Schema = z.infer<typeof Schema>;
+
+export const SetupMonitoring = ({ serverId }: Props) => {
+	const { data, isLoading } = serverId
+		? api.server.one.useQuery(
+				{
+					serverId: serverId || "",
+				},
+				{
+					enabled: !!serverId,
+				},
+			)
+		: api.user.get.useQuery();
+
+	const url = useUrl();
+
+	const { data: projects } = api.project.all.useQuery();
+
+	const extractServicesFromProjects = (projects: any[] | undefined) => {
+		if (!projects) return [];
+
+		const allServices = projects.flatMap((project) => {
+			const services = extractServices(project);
+			return serverId
+				? services
+						.filter((service) => service.serverId === serverId)
+						.map((service) => service.appName)
+				: services.map((service) => service.appName);
+		});
+
+		return [...new Set(allServices)];
+	};
+
+	const services = extractServicesFromProjects(projects);
+
+	const form = useForm<Schema>({
+		resolver: zodResolver(Schema),
+		defaultValues: {
+			metricsConfig: {
+				server: {
+					refreshRate: 20,
+					port: 4500,
+					token: "",
+					urlCallback: `${url}/api/trpc/notification.receiveNotification`,
+					retentionDays: 7,
+					thresholds: {
+						cpu: 0,
+						memory: 0,
+					},
+					cronJob: "",
+				},
+				containers: {
+					refreshRate: 20,
+					services: {
+						include: [],
+						exclude: [],
+					},
+				},
+			},
+		},
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				metricsConfig: {
+					server: {
+						refreshRate: data?.metricsConfig?.server?.refreshRate,
+						port: data?.metricsConfig?.server?.port,
+						token: data?.metricsConfig?.server?.token || generateToken(),
+						urlCallback:
+							data?.metricsConfig?.server?.urlCallback ||
+							`${url}/api/trpc/notification.receiveNotification`,
+						retentionDays: data?.metricsConfig?.server?.retentionDays || 5,
+						thresholds: {
+							cpu: data?.metricsConfig?.server?.thresholds?.cpu,
+							memory: data?.metricsConfig?.server?.thresholds?.memory,
+						},
+						cronJob: data?.metricsConfig?.server?.cronJob || "0 0 * * *",
+					},
+					containers: {
+						refreshRate: data?.metricsConfig?.containers?.refreshRate,
+						services: {
+							include: data?.metricsConfig?.containers?.services?.include,
+							exclude: data?.metricsConfig?.containers?.services?.exclude,
+						},
+					},
+				},
+			});
+		}
+	}, [data, url]);
+
+	const [search, setSearch] = useState("");
+	const [searchExclude, setSearchExclude] = useState("");
+	const [showToken, setShowToken] = useState(false);
+
+	const availableServices = services?.filter(
+		(service) =>
+			!form
+				.watch("metricsConfig.containers.services.include")
+				?.some((s) => s === service) &&
+			!form
+				.watch("metricsConfig.containers.services.exclude")
+				?.includes(service) &&
+			service.toLowerCase().includes(search.toLowerCase()),
+	);
+
+	const availableServicesToExclude = [
+		...(services?.filter(
+			(service) =>
+				!form
+					.watch("metricsConfig.containers.services.exclude")
+					?.includes(service) &&
+				!form
+					.watch("metricsConfig.containers.services.include")
+					?.some((s) => s === service) &&
+				service.toLowerCase().includes(searchExclude.toLowerCase()),
+		) ?? []),
+		...(!form.watch("metricsConfig.containers.services.exclude")?.includes("*")
+			? ["*"]
+			: []),
+	];
+
+	const { mutateAsync } = serverId
+		? api.server.setupMonitoring.useMutation()
+		: api.admin.setupMonitoring.useMutation();
+
+	const generateToken = () => {
+		const array = new Uint8Array(64);
+		crypto.getRandomValues(array);
+		return Array.from(array, (byte) => byte.toString(16).padStart(2, "0")).join(
+			"",
+		);
+	};
+
+	const onSubmit = async (values: Schema) => {
+		await mutateAsync({
+			serverId: serverId || "",
+			metricsConfig: values.metricsConfig,
+		})
+			.then(() => {
+				toast.success("Server updated successfully");
+			})
+			.catch(() => {
+				toast.error("Error updating the server");
+			});
+	};
+
+	return (
+		<>
+			<CardHeader className="">
+				<CardTitle className="text-xl flex flex-row gap-2">
+					<LayoutDashboardIcon className="size-6 text-muted-foreground self-center" />
+					Monitoring
+				</CardTitle>
+				<CardDescription>
+					Monitor your servers and containers in realtime with notifications
+					when they reach their thresholds.
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="space-y-6 py-6 border-t">
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="flex w-full flex-col gap-4"
+					>
+						<AlertBlock>
+							Using a lower refresh rate will make your CPU and memory usage
+							higher, we recommend 30-60 seconds
+						</AlertBlock>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.refreshRate"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center max-sm:items-center">
+										<FormLabel>Server Refresh Rate</FormLabel>
+										<FormControl>
+											<NumberInput placeholder="10" {...field} />
+										</FormControl>
+										<FormDescription>
+											Please set the refresh rate for the server in seconds
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.containers.refreshRate"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center max-sm:items-center">
+										<FormLabel>Container Refresh Rate</FormLabel>
+										<FormControl>
+											<NumberInput placeholder="10" {...field} />
+										</FormControl>
+										<FormDescription>
+											Please set the refresh rate for the containers in seconds
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.cronJob"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Cron Job</FormLabel>
+										<FormControl>
+											<Input {...field} placeholder="0 0 * * *" />
+										</FormControl>
+										<FormDescription>
+											Cron job for cleaning up metrics
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.retentionDays"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Server Retention Days</FormLabel>
+										<FormControl>
+											<NumberInput {...field} />
+										</FormControl>
+										<FormDescription>
+											Number of days to retain server metrics data
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.port"
+								render={({ field }) => (
+									<FormItem className="flex flex-col justify-center max-sm:items-center">
+										<FormLabel>Port</FormLabel>
+										<FormControl>
+											<NumberInput placeholder="4500" {...field} />
+										</FormControl>
+										<FormDescription>
+											Please set the port for the metrics server
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="metricsConfig.containers.services.include"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Include Services</FormLabel>
+										<FormControl>
+											<div className="flex flex-col gap-4">
+												<div className="flex gap-2">
+													<Popover>
+														<PopoverTrigger asChild>
+															<Button variant="outline">Add Service</Button>
+														</PopoverTrigger>
+														<PopoverContent
+															className="w-[300px] p-0"
+															align="start"
+														>
+															<Command>
+																<CommandInput
+																	placeholder="Search service..."
+																	value={search}
+																	onValueChange={setSearch}
+																/>
+																{availableServices?.length === 0 ? (
+																	<div className="p-4 text-sm text-muted-foreground">
+																		No services available.
+																	</div>
+																) : (
+																	<>
+																		<CommandEmpty>
+																			No service found.
+																		</CommandEmpty>
+																		<CommandGroup>
+																			{availableServices?.map((service) => (
+																				<CommandItem
+																					key={service}
+																					value={service}
+																					onSelect={() => {
+																						field.onChange([
+																							...(field.value ?? []),
+																							service,
+																						]);
+																						setSearch("");
+																					}}
+																				>
+																					{service}
+																				</CommandItem>
+																			))}
+																		</CommandGroup>
+																	</>
+																)}
+															</Command>
+														</PopoverContent>
+													</Popover>
+												</div>
+												<div className="flex flex-wrap gap-2">
+													{field.value?.map((service) => (
+														<Badge
+															key={service}
+															variant="secondary"
+															className="flex items-center gap-2"
+														>
+															{service}
+															<Button
+																type="button"
+																variant="ghost"
+																size="icon"
+																className="h-4 w-4 p-0"
+																onClick={() => {
+																	field.onChange(
+																		field.value?.filter((s) => s !== service),
+																	);
+																}}
+															>
+																×
+															</Button>
+														</Badge>
+													))}
+													<FormDescription>
+														Services to monitor.
+													</FormDescription>
+												</div>
+											</div>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.containers.services.exclude"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Exclude Services</FormLabel>
+										<FormControl>
+											<div className="flex flex-col gap-4">
+												<div className="flex gap-2">
+													<Popover>
+														<PopoverTrigger asChild>
+															<Button variant="outline">Add Service</Button>
+														</PopoverTrigger>
+														<PopoverContent
+															className="w-[300px] p-0"
+															align="start"
+														>
+															<Command>
+																<CommandInput
+																	placeholder="Search service..."
+																	value={searchExclude}
+																	onValueChange={setSearchExclude}
+																/>
+																{availableServicesToExclude?.length === 0 ? (
+																	<div className="p-4 text-sm text-muted-foreground">
+																		No services available.
+																	</div>
+																) : (
+																	<>
+																		<CommandEmpty>
+																			No service found.
+																		</CommandEmpty>
+																		<CommandGroup>
+																			{availableServicesToExclude.map(
+																				(service) => (
+																					<CommandItem
+																						key={service}
+																						value={service}
+																						onSelect={() => {
+																							field.onChange([
+																								...(field.value ?? []),
+																								service,
+																							]);
+																							setSearchExclude("");
+																						}}
+																					>
+																						{service}
+																					</CommandItem>
+																				),
+																			)}
+																		</CommandGroup>
+																	</>
+																)}
+															</Command>
+														</PopoverContent>
+													</Popover>
+												</div>
+												<div className="flex flex-wrap gap-2">
+													{field.value?.map((service, index) => (
+														<Badge
+															key={service}
+															variant="secondary"
+															className="flex items-center gap-2"
+														>
+															{service}
+															<Button
+																type="button"
+																variant="ghost"
+																size="icon"
+																className="h-4 w-4 p-0"
+																onClick={() => {
+																	field.onChange(
+																		field.value?.filter((_, i) => i !== index),
+																	);
+																}}
+															>
+																×
+															</Button>
+														</Badge>
+													))}
+													<FormDescription>
+														Services to exclude from monitoring
+													</FormDescription>
+												</div>
+											</div>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.thresholds.cpu"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>CPU Threshold (%)</FormLabel>
+										<FormControl>
+											<NumberInput {...field} />
+										</FormControl>
+										<FormDescription>
+											Alert when CPU usage exceeds this percentage
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.thresholds.memory"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Memory Threshold (%)</FormLabel>
+										<FormControl>
+											<NumberInput {...field} />
+										</FormControl>
+										<FormDescription>
+											Alert when memory usage exceeds this percentage
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.token"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Metrics Token</FormLabel>
+										<FormControl>
+											<div className="flex gap-2">
+												<div className="relative flex-1">
+													<Input
+														type={showToken ? "text" : "password"}
+														placeholder="Enter your metrics token"
+														{...field}
+													/>
+													<Button
+														type="button"
+														variant="secondary"
+														size="icon"
+														className="absolute right-0 top-1/2 -translate-y-1/2"
+														onClick={() => setShowToken(!showToken)}
+														title={showToken ? "Hide token" : "Show token"}
+													>
+														{showToken ? (
+															<EyeOff className="h-4 w-4" />
+														) : (
+															<Eye className="h-4 w-4" />
+														)}
+													</Button>
+												</div>
+												<Button
+													type="button"
+													variant="outline"
+													size="icon"
+													onClick={() => {
+														const newToken = generateToken();
+														form.setValue(
+															"metricsConfig.server.token",
+															newToken,
+														);
+														toast.success("Token generated successfully");
+													}}
+													title="Generate new token"
+												>
+													<RefreshCw className="h-4 w-4" />
+												</Button>
+											</div>
+										</FormControl>
+										<FormDescription>
+											Token for authenticating metrics requests
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="metricsConfig.server.urlCallback"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Metrics Callback URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://your-callback-url.com"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											URL where metrics will be sent
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex items-center justify-end gap-2">
+							<Button type="submit" isLoading={form.formState.isSubmitting}>
+								Save changes
+							</Button>
+						</div>
+					</form>
+				</Form>
+			</CardContent>
+		</>
+	);
+};

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

@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
 import { CopyIcon, ExternalLinkIcon, ServerIcon } from "lucide-react";
@@ -30,6 +31,7 @@ import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { EditScript } from "./edit-script";
 import { GPUSupport } from "./gpu-support";
 import { SecurityAudit } from "./security-audit";
+import { SetupMonitoring } from "./setup-monitoring";
 import { ValidateServer } from "./validate-server";
 
 interface Props {
@@ -48,7 +50,7 @@ export const SetupServer = ({ serverId }: Props) => {
 	);
 
 	const [activeLog, setActiveLog] = useState<string | null>(null);
-
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
 	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
 	const [isDeploying, setIsDeploying] = useState(false);
@@ -112,11 +114,19 @@ export const SetupServer = ({ serverId }: Props) => {
 						</AlertBlock>
 
 						<Tabs defaultValue="ssh-keys">
-							<TabsList className="grid grid-cols-5 w-[700px]">
+							<TabsList
+								className={cn(
+									"grid  w-[700px]",
+									isCloud ? "grid-cols-6" : "grid-cols-5",
+								)}
+							>
 								<TabsTrigger value="ssh-keys">SSH Keys</TabsTrigger>
 								<TabsTrigger value="deployments">Deployments</TabsTrigger>
 								<TabsTrigger value="validate">Validate</TabsTrigger>
 								<TabsTrigger value="audit">Security</TabsTrigger>
+								{isCloud && (
+									<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+								)}
 								<TabsTrigger value="gpu-setup">GPU Setup</TabsTrigger>
 							</TabsList>
 							<TabsContent
@@ -309,6 +319,16 @@ export const SetupServer = ({ serverId }: Props) => {
 									<SecurityAudit serverId={serverId} />
 								</div>
 							</TabsContent>
+							<TabsContent
+								value="monitoring"
+								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+							>
+								<div className="flex flex-col gap-2 text-sm pt-3">
+									<div className="rounded-xl bg-background shadow-md border">
+										<SetupMonitoring serverId={serverId} />
+									</div>
+								</div>
+							</TabsContent>
 							<TabsContent
 								value="gpu-setup"
 								className="outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"

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

@@ -0,0 +1,31 @@
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { useState } from "react";
+import { ShowPaidMonitoring } from "../../monitoring/paid/servers/show-paid-monitoring";
+
+interface Props {
+	url: string;
+	token: string;
+}
+
+export const ShowMonitoringModal = ({ url, token }: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer "
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Monitoring
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-7xl  overflow-y-auto max-h-screen ">
+				<div className="flex gap-4 py-4 w-full">
+					<ShowPaidMonitoring BASE_URL={url} token={token} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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

@@ -38,6 +38,7 @@ import { ShowServerActions } from "./actions/show-server-actions";
 import { HandleServers } from "./handle-servers";
 import { SetupServer } from "./setup-server";
 import { ShowDockerContainersModal } from "./show-docker-containers-modal";
+import { ShowMonitoringModal } from "./show-monitoring-modal";
 import { ShowSwarmOverviewModal } from "./show-swarm-overview-modal";
 import { ShowTraefikFileSystemModal } from "./show-traefik-file-system-modal";
 import { WelcomeSuscription } from "./welcome-stripe/welcome-suscription";
@@ -314,6 +315,16 @@ export const ShowServers = () => {
 																						<ShowDockerContainersModal
 																							serverId={server.serverId}
 																						/>
+																						{isCloud && (
+																							<ShowMonitoringModal
+																								url={`http://${server.ipAddress}:${server?.metricsConfig?.server?.port}/metrics`}
+																								token={
+																									server?.metricsConfig?.server
+																										?.token
+																								}
+																							/>
+																						)}
+
 																						<ShowSwarmOverviewModal
 																							serverId={server.serverId}
 																						/>

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

@@ -35,6 +35,7 @@ export const CreateSSHKey = () => {
 					description: "Used on Dokploy Cloud",
 					privateKey: keys.privateKey,
 					publicKey: keys.publicKey,
+					organizationId: "",
 				});
 				await refetch();
 			} catch (error) {

apps/dokploy/components/dashboard/settings/ssh-keys/handle-ssh-keys.tsx

@@ -22,7 +22,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { sshKeyCreate, type sshKeyType } from "@/server/db/validations";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { DownloadIcon, PenBoxIcon, PlusIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -78,6 +78,7 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 	const onSubmit = async (data: SSHKey) => {
 		await mutateAsync({
 			...data,
+			organizationId: "",
 			sshKeyId: sshKeyId || "",
 		})
 			.then(async () => {
@@ -111,6 +112,26 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 				toast.error("Error generating the SSH Key");
 			});
 
+	const downloadKey = (
+		content: string,
+		defaultFilename: string,
+		keyType: "private" | "public",
+	) => {
+		const keyName = form.watch("name");
+		const filename = keyName
+			? `${keyName}${sshKeyId ? `_${sshKeyId}` : ""}_${keyType}_${defaultFilename}`
+			: `${keyType}_${defaultFilename}`;
+		const blob = new Blob([content], { type: "text/plain" });
+		const url = window.URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = filename;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		window.URL.revokeObjectURL(url);
+	};
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger className="" asChild>
@@ -245,7 +266,41 @@ export const HandleSSHKeys = ({ sshKeyId }: Props) => {
 								</FormItem>
 							)}
 						/>
-						<DialogFooter>
+						<DialogFooter className="flex items-center justify-between">
+							<div className="flex items-center gap-4">
+								{form.watch("privateKey") && (
+									<Button
+										type="button"
+										variant="outline"
+										size="default"
+										onClick={() =>
+											downloadKey(form.watch("privateKey"), "id_rsa", "private")
+										}
+										className="flex items-center gap-2"
+									>
+										<DownloadIcon className="h-4 w-4" />
+										Private Key
+									</Button>
+								)}
+								{form.watch("publicKey") && (
+									<Button
+										type="button"
+										variant="outline"
+										size="default"
+										onClick={() =>
+											downloadKey(
+												form.watch("publicKey"),
+												"id_rsa.pub",
+												"public",
+											)
+										}
+										className="flex items-center gap-2"
+									>
+										<DownloadIcon className="h-4 w-4" />
+										Public Key
+									</Button>
+								)}
+							</div>
 							<Button isLoading={isLoading} type="submit">
 								{sshKeyId ? "Update" : "Create"}
 							</Button>

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

@@ -19,6 +19,14 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { PlusIcon } from "lucide-react";
@@ -27,62 +35,70 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 
-const addUser = z.object({
+const addInvitation = z.object({
 	email: z
 		.string()
 		.min(1, "Email is required")
 		.email({ message: "Invalid email" }),
+	role: z.enum(["member", "admin"]),
 });
 
-type AddUser = z.infer<typeof addUser>;
+type AddInvitation = z.infer<typeof addInvitation>;
 
-export const AddUser = () => {
+export const AddInvitation = () => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const { data: activeOrganization } = authClient.useActiveOrganization();
 
-	const { mutateAsync, isError, error, isLoading } =
-		api.admin.createUserInvitation.useMutation();
-
-	const form = useForm<AddUser>({
+	const form = useForm<AddInvitation>({
 		defaultValues: {
 			email: "",
+			role: "member",
 		},
-		resolver: zodResolver(addUser),
+		resolver: zodResolver(addInvitation),
 	});
 	useEffect(() => {
 		form.reset();
 	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
-	const onSubmit = async (data: AddUser) => {
-		await mutateAsync({
+	const onSubmit = async (data: AddInvitation) => {
+		setIsLoading(true);
+		const result = await authClient.organization.inviteMember({
 			email: data.email.toLowerCase(),
-		})
-			.then(async () => {
-				toast.success("Invitation created");
-				await utils.user.all.invalidate();
-				setOpen(false);
-			})
-			.catch(() => {
-				toast.error("Error creating the invitation");
-			});
+			role: data.role,
+			organizationId: activeOrganization?.id,
+		});
+
+		if (result.error) {
+			setError(result.error.message || "");
+		} else {
+			toast.success("Invitation created");
+			setError(null);
+			setOpen(false);
+		}
+
+		utils.organization.allInvitations.invalidate();
+		setIsLoading(false);
 	};
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger className="" asChild>
 				<Button>
-					<PlusIcon className="h-4 w-4" /> Add User
+					<PlusIcon className="h-4 w-4" /> Add Invitation
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>
-					<DialogTitle>Add User</DialogTitle>
+					<DialogTitle>Add Invitation</DialogTitle>
 					<DialogDescription>Invite a new user</DialogDescription>
 				</DialogHeader>
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				{error && <AlertBlock type="error">{error}</AlertBlock>}
 
 				<Form {...form}>
 					<form
-						id="hook-form-add-user"
+						id="hook-form-add-invitation"
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid w-full gap-4 "
 					>
@@ -104,10 +120,39 @@ export const AddUser = () => {
 								);
 							}}
 						/>
+
+						<FormField
+							control={form.control}
+							name="role"
+							render={({ field }) => {
+								return (
+									<FormItem>
+										<FormLabel>Role</FormLabel>
+										<Select
+											onValueChange={field.onChange}
+											defaultValue={field.value}
+										>
+											<FormControl>
+												<SelectTrigger>
+													<SelectValue placeholder="Select a role" />
+												</SelectTrigger>
+											</FormControl>
+											<SelectContent>
+												<SelectItem value="member">Member</SelectItem>
+											</SelectContent>
+										</Select>
+										<FormDescription>
+											Select the role for the new user
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								);
+							}}
+						/>
 						<DialogFooter className="flex w-full flex-row">
 							<Button
 								isLoading={isLoading}
-								form="hook-form-add-user"
+								form="hook-form-add-invitation"
 								type="submit"
 							>
 								Create

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

@@ -30,8 +30,8 @@ import { toast } from "sonner";
 import { z } from "zod";
 
 const addPermissions = z.object({
-	accesedProjects: z.array(z.string()).optional(),
-	accesedServices: z.array(z.string()).optional(),
+	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),
@@ -52,7 +52,7 @@ interface Props {
 export const AddUserPermissions = ({ userId }: Props) => {
 	const { data: projects } = api.project.all.useQuery();
 
-	const { data, refetch } = api.user.byUserId.useQuery(
+	const { data, refetch } = api.auth.one.useQuery(
 		{
 			userId,
 		},
@@ -62,12 +62,12 @@ export const AddUserPermissions = ({ userId }: Props) => {
 	);
 
 	const { mutateAsync, isError, error, isLoading } =
-		api.admin.assignPermissions.useMutation();
+		api.user.assignPermissions.useMutation();
 
 	const form = useForm<AddPermissions>({
 		defaultValues: {
-			accesedProjects: [],
-			accesedServices: [],
+			accessedProjects: [],
+			accessedServices: [],
 		},
 		resolver: zodResolver(addPermissions),
 	});
@@ -75,8 +75,8 @@ export const AddUserPermissions = ({ userId }: Props) => {
 	useEffect(() => {
 		if (data) {
 			form.reset({
-				accesedProjects: data.accesedProjects || [],
-				accesedServices: data.accesedServices || [],
+				accessedProjects: data.accessedProjects || [],
+				accessedServices: data.accessedServices || [],
 				canCreateProjects: data.canCreateProjects,
 				canCreateServices: data.canCreateServices,
 				canDeleteProjects: data.canDeleteProjects,
@@ -92,14 +92,14 @@ export const AddUserPermissions = ({ userId }: Props) => {
 
 	const onSubmit = async (data: AddPermissions) => {
 		await mutateAsync({
-			userId,
+			id: userId,
 			canCreateServices: data.canCreateServices,
 			canCreateProjects: data.canCreateProjects,
 			canDeleteServices: data.canDeleteServices,
 			canDeleteProjects: data.canDeleteProjects,
 			canAccessToTraefikFiles: data.canAccessToTraefikFiles,
-			accesedProjects: data.accesedProjects || [],
-			accesedServices: data.accesedServices || [],
+			accessedProjects: data.accessedProjects || [],
+			accessedServices: data.accessedServices || [],
 			canAccessToDocker: data.canAccessToDocker,
 			canAccessToAPI: data.canAccessToAPI,
 			canAccessToSSHKeys: data.canAccessToSSHKeys,
@@ -318,7 +318,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 						/>
 						<FormField
 							control={form.control}
-							name="accesedProjects"
+							name="accessedProjects"
 							render={() => (
 								<FormItem className="md:col-span-2">
 									<div className="mb-4">
@@ -339,7 +339,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 												<FormField
 													key={`project-${index}`}
 													control={form.control}
-													name="accesedProjects"
+													name="accessedProjects"
 													render={({ field }) => {
 														return (
 															<FormItem
@@ -380,7 +380,7 @@ export const AddUserPermissions = ({ userId }: Props) => {
 																	<FormField
 																		key={`project-${index}`}
 																		control={form.control}
-																		name="accesedServices"
+																		name="accessedServices"
 																		render={({ field }) => {
 																			return (
 																				<FormItem

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

@@ -0,0 +1,208 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { authClient } from "@/lib/auth-client";
+import { api } from "@/utils/api";
+import copy from "copy-to-clipboard";
+import { format, isPast } from "date-fns";
+import { Mail, MoreHorizontal, Users } from "lucide-react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { AddInvitation } from "./add-invitation";
+
+export const ShowInvitations = () => {
+	const { data, isLoading, refetch } =
+		api.organization.allInvitations.useQuery();
+
+	return (
+		<div className="w-full">
+			<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="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Mail className="size-6 text-muted-foreground self-center" />
+							Invitations
+						</CardTitle>
+						<CardDescription>
+							Create invitations to your organization.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<>
+								{data?.length === 0 ? (
+									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
+										<Users className="size-8 self-center text-muted-foreground" />
+										<span className="text-base text-muted-foreground">
+											Invite users to your organization
+										</span>
+										<AddInvitation />
+									</div>
+								) : (
+									<div className="flex flex-col gap-4  min-h-[25vh]">
+										<Table>
+											<TableCaption>See all invitations</TableCaption>
+											<TableHeader>
+												<TableRow>
+													<TableHead className="w-[100px]">Email</TableHead>
+													<TableHead className="text-center">Role</TableHead>
+													<TableHead className="text-center">Status</TableHead>
+													<TableHead className="text-center">
+														Expires At
+													</TableHead>
+													<TableHead className="text-right">Actions</TableHead>
+												</TableRow>
+											</TableHeader>
+											<TableBody>
+												{data?.map((invitation) => {
+													const isExpired = isPast(
+														new Date(invitation.expiresAt),
+													);
+													return (
+														<TableRow key={invitation.id}>
+															<TableCell className="w-[100px]">
+																{invitation.email}
+															</TableCell>
+															<TableCell className="text-center">
+																<Badge
+																	variant={
+																		invitation.role === "owner"
+																			? "default"
+																			: "secondary"
+																	}
+																>
+																	{invitation.role}
+																</Badge>
+															</TableCell>
+															<TableCell className="text-center">
+																<Badge
+																	variant={
+																		invitation.status === "pending"
+																			? "secondary"
+																			: invitation.status === "canceled"
+																				? "destructive"
+																				: "default"
+																	}
+																>
+																	{invitation.status}
+																</Badge>
+															</TableCell>
+															<TableCell className="text-center">
+																{format(new Date(invitation.expiresAt), "PPpp")}{" "}
+																{isExpired ? (
+																	<span className="text-muted-foreground">
+																		(Expired)
+																	</span>
+																) : null}
+															</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>
+																		{!isExpired && (
+																			<>
+																				{invitation.status === "pending" && (
+																					<DropdownMenuItem
+																						className="w-full cursor-pointer"
+																						onSelect={(e) => {
+																							copy(
+																								`${origin}/invitation?token=${invitation.id}`,
+																							);
+																							toast.success(
+																								"Invitation Copied to clipboard",
+																							);
+																						}}
+																					>
+																						Copy Invitation
+																					</DropdownMenuItem>
+																				)}
+
+																				{invitation.status === "pending" && (
+																					<DropdownMenuItem
+																						className="w-full cursor-pointer"
+																						onSelect={async (e) => {
+																							const result =
+																								await authClient.organization.cancelInvitation(
+																									{
+																										invitationId: invitation.id,
+																									},
+																								);
+
+																							if (result.error) {
+																								toast.error(
+																									result.error.message,
+																								);
+																							} else {
+																								toast.success(
+																									"Invitation deleted",
+																								);
+																								refetch();
+																							}
+																						}}
+																					>
+																						Cancel Invitation
+																					</DropdownMenuItem>
+																				)}
+																			</>
+																		)}
+																	</DropdownMenuContent>
+																</DropdownMenu>
+															</TableCell>
+														</TableRow>
+													);
+												})}
+											</TableBody>
+										</Table>
+
+										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+											<AddInvitation />
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};

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

@@ -1,3 +1,4 @@
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,22 +24,19 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import copy from "copy-to-clipboard";
 import { format } from "date-fns";
 import { MoreHorizontal, Users } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { AddUserPermissions } from "./add-permissions";
-import { AddUser } from "./add-user";
-
-import { DialogAction } from "@/components/shared/dialog-action";
-import { Loader2 } from "lucide-react";
 
 export const ShowUsers = () => {
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data, isLoading, refetch } = api.user.all.useQuery();
-	const { mutateAsync, isLoading: isRemoving } =
-		api.admin.removeUser.useMutation();
+	const { mutateAsync, isLoading: isRemoving } = api.user.remove.useMutation();
 
 	return (
 		<div className="w-full">
@@ -67,7 +65,6 @@ export const ShowUsers = () => {
 										<span className="text-base text-muted-foreground">
 											Invite users to your Dokploy account
 										</span>
-										<AddUser />
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -76,43 +73,41 @@ export const ShowUsers = () => {
 											<TableHeader>
 												<TableRow>
 													<TableHead className="w-[100px]">Email</TableHead>
-													<TableHead className="text-center">Status</TableHead>
+													<TableHead className="text-center">Role</TableHead>
 													<TableHead className="text-center">2FA</TableHead>
+
 													<TableHead className="text-center">
-														Expiration
+														Created At
 													</TableHead>
 													<TableHead className="text-right">Actions</TableHead>
 												</TableRow>
 											</TableHeader>
 											<TableBody>
-												{data?.map((user) => {
+												{data?.map((member) => {
 													return (
-														<TableRow key={user.userId}>
+														<TableRow key={member.id}>
 															<TableCell className="w-[100px]">
-																{user.auth.email}
+																{member.user.email}
 															</TableCell>
 															<TableCell className="text-center">
 																<Badge
 																	variant={
-																		user.isRegistered ? "default" : "secondary"
+																		member.role === "owner"
+																			? "default"
+																			: "secondary"
 																	}
 																>
-																	{user.isRegistered
-																		? "Registered"
-																		: "Not Registered"}
+																	{member.role}
 																</Badge>
 															</TableCell>
 															<TableCell className="text-center">
-																{user.auth.is2FAEnabled
-																	? "2FA Enabled"
-																	: "2FA Not Enabled"}
+																{member.user.twoFactorEnabled
+																	? "Enabled"
+																	: "Disabled"}
 															</TableCell>
-															<TableCell className="text-right">
+															<TableCell className="text-center">
 																<span className="text-sm text-muted-foreground">
-																	{format(
-																		new Date(user.expirationDate),
-																		"PPpp",
-																	)}
+																	{format(new Date(member.createdAt), "PPpp")}
 																</span>
 															</TableCell>
 
@@ -131,56 +126,63 @@ export const ShowUsers = () => {
 																		<DropdownMenuLabel>
 																			Actions
 																		</DropdownMenuLabel>
-																		{!user.isRegistered && (
-																			<DropdownMenuItem
-																				className="w-full cursor-pointer"
-																				onSelect={(e) => {
-																					copy(
-																						`${origin}/invitation?token=${user.token}`,
-																					);
-																					toast.success(
-																						"Invitation Copied to clipboard",
-																					);
-																				}}
-																			>
-																				Copy Invitation
-																			</DropdownMenuItem>
-																		)}
 
-																		{user.isRegistered && (
+																		{member.role !== "owner" && (
 																			<AddUserPermissions
-																				userId={user.userId}
+																				userId={member.user.id}
 																			/>
 																		)}
 
-																		<DialogAction
-																			title="Delete User"
-																			description="Are you sure you want to delete this user?"
-																			type="destructive"
-																			onClick={async () => {
-																				await mutateAsync({
-																					authId: user.authId,
-																				})
-																					.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()}
+																		{member.role !== "owner" && (
+																			<DialogAction
+																				title="Delete User"
+																				description="Are you sure you want to delete this user?"
+																				type="destructive"
+																				onClick={async () => {
+																					if (isCloud) {
+																						const { error } =
+																							await authClient.organization.removeMember(
+																								{
+																									memberIdOrEmail: member.id,
+																								},
+																							);
+
+																						if (!error) {
+																							toast.success(
+																								"User deleted successfully",
+																							);
+																							refetch();
+																						} else {
+																							toast.error(
+																								"Error deleting user",
+																							);
+																						}
+																					} else {
+																						await mutateAsync({
+																							userId: member.user.id,
+																						})
+																							.then(() => {
+																								toast.success(
+																									"User deleted successfully",
+																								);
+																								refetch();
+																							})
+																							.catch(() => {
+																								toast.error(
+																									"Error deleting destination",
+																								);
+																							});
+																					}
+																				}}
 																			>
-																				Delete User
-																			</DropdownMenuItem>
-																		</DialogAction>
+																				<DropdownMenuItem
+																					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+																					onSelect={(e) => e.preventDefault()}
+																				>
+																					Delete User
+																				</DropdownMenuItem>
+																			</DialogAction>
+																		)}
 																	</DropdownMenuContent>
 																</DropdownMenu>
 															</TableCell>
@@ -189,10 +191,6 @@ export const ShowUsers = () => {
 												})}
 											</TableBody>
 										</Table>
-
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<AddUser />
-										</div>
 									</div>
 								)}
 							</>

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

@@ -52,7 +52,7 @@ type AddServerDomain = z.infer<typeof addServerDomain>;
 
 export const WebDomain = () => {
 	const { t } = useTranslation("settings");
-	const { data: user, refetch } = api.admin.one.useQuery();
+	const { data, refetch } = api.user.get.useQuery();
 	const { mutateAsync, isLoading } =
 		api.settings.assignDomainServer.useMutation();
 
@@ -65,14 +65,14 @@ export const WebDomain = () => {
 		resolver: zodResolver(addServerDomain),
 	});
 	useEffect(() => {
-		if (user) {
+		if (data) {
 			form.reset({
-				domain: user?.host || "",
-				certificateType: user?.certificateType,
-				letsEncryptEmail: user?.letsEncryptEmail || "",
+				domain: data?.user?.host || "",
+				certificateType: data?.user?.certificateType,
+				letsEncryptEmail: data?.user?.letsEncryptEmail || "",
 			});
 		}
-	}, [form, form.reset, user]);
+	}, [form, form.reset, data]);
 
 	const onSubmit = async (data: AddServerDomain) => {
 		await mutateAsync({

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

@@ -21,7 +21,7 @@ interface Props {
 }
 export const WebServer = ({ className }: Props) => {
 	const { t } = useTranslation("settings");
-	const { data } = api.admin.one.useQuery();
+	const { data } = api.user.get.useQuery();
 
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
 
@@ -58,7 +58,7 @@ export const WebServer = ({ className }: Props) => {
 
 						<div className="flex items-center flex-wrap justify-between gap-4">
 							<span className="text-sm text-muted-foreground">
-								Server IP: {data?.serverIp}
+								Server IP: {data?.user.serverIp}
 							</span>
 							<span className="text-sm text-muted-foreground">
 								Version: {dokployVersion}

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

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import { FitAddon } from "xterm-addon-fit";
 import "@xterm/xterm/css/xterm.css";
 import { AttachAddon } from "@xterm/addon-attach";
+import { ClipboardAddon } from "@xterm/addon-clipboard";
 import { useTheme } from "next-themes";
 import { getLocalServerData } from "./local-server-config";
 
@@ -37,6 +38,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 				foreground: "currentColor",
 			},
 		});
+
 		const addonFit = new FitAddon();
 
 		const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
@@ -54,6 +56,8 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 		const ws = new WebSocket(wsUrl);
 		const addonAttach = new AttachAddon(ws);
+		const clipboardAddon = new ClipboardAddon();
+		term.loadAddon(clipboardAddon);
 
 		// @ts-ignore
 		term.open(termRef.current);
@@ -68,7 +72,7 @@ export const Terminal: React.FC<Props> = ({ id, serverId }) => {
 
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="w-full h-full bg-transparent border rounded-lg p-2 ">
+			<div className="w-full h-full bg-transparent border rounded-lg p-2">
 				<div id={id} ref={termRef} className="rounded-xl" />
 			</div>
 		</div>