fix(2fa): improve error handling and display for two-factor authentication setup

- Handle potential errors when enabling two-factor authentication
- Provide more detailed error messages for password verification
- Update client-side error handling to display specific error messages
- Add base URL configuration for non-cloud environments

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug Report
 description: Create a bug report
-labels: ["bug"]
+labels: ["needs-triage🔍"]
 body:
   - type: markdown
     attributes:
@@ -62,6 +62,7 @@ body:
         - "Docker"
         - "Remote server"
         - "Local Development"
+        - "Cloud Version"
     validations:
       required: true
   - type: dropdown

.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

@@ -2,7 +2,7 @@ name: Dokploy Docker Build
 
 on:
   push:
-    branches: [main, canary, feat/github-runners]
+    branches: [main, canary, "feat/better-auth-2"]
 
 env:
   IMAGE_NAME: dokploy/dokploy

.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

CONTRIBUTING.md

@@ -138,11 +138,18 @@ curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && ./install.sh
 ```
 
+```bash
+# Install Railpack
+curl -sSL https://railpack.com/install.sh | sh
+```
+
 ```bash
 # Install Buildpacks
 curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.32.1/pack-v0.32.1-linux.tgz" | tar -C /usr/local/bin/ --no-same-owner -xzv pack
 ```
 
+
+
 ## Pull Request
 
 - The `main` branch is the source of truth and should always reflect the latest stable release.

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
@@ -55,6 +55,10 @@ RUN curl -sSL https://nixpacks.com/install.sh -o install.sh \
     && ./install.sh \
     && pnpm install -g tsx
 
+# Install Railpack
+ARG RAILPACK_VERSION=0.0.37
+RUN curl -sSL https://railpack.com/install.sh | bash
+
 # Install buildpacks
 COPY --from=buildpacksio/pack:0.35.0 /usr/local/bin/pack /usr/local/bin/pack
 

Dockerfile.cloud

@@ -1,4 +1,4 @@
-FROM node: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

@@ -74,6 +74,8 @@ For detailed documentation, visit [docs.dokploy.com](https://docs.dokploy.com).
     <a href="https://lightnode.com/?ref=dokploy" target="_blank" style="display: inline-block;">
     <img src=".github/sponsors/light-node.webp" alt="Lightnode" height="70"/>
   </a>
+
+  
 </div>
 
 ### Premium Supporters 🥇
@@ -93,8 +95,11 @@ 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>
+<a href="https://synexa.ai/?ref=dokploy"><img src=".github/sponsors/synexa.png" width="65px" alt="Synexa"/></a>
 </div>
 
+
 ### Community Backers 🤝
 
 <div style="display: flex; gap: 30px; flex-wrap: wrap;">

apps/api/src/index.ts

@@ -28,7 +28,7 @@ app.use(async (c, next) => {
 
 app.post("/deploy", zValidator("json", deployJobSchema), (c) => {
 	const data = c.req.valid("json");
-	const res = queue.add(data, { groupName: data.serverId });
+	queue.add(data, { groupName: data.serverId });
 	return c.json(
 		{
 			message: "Deployment Added",

apps/api/src/utils.ts

@@ -64,7 +64,7 @@ export const deploy = async (job: DeployJob) => {
 				}
 			}
 		}
-	} catch (error) {
+	} catch (_) {
 		if (job.applicationType === "application") {
 			await updateApplicationStatus(job.applicationId, "error");
 		} else if (job.applicationType === "compose") {

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

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

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

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

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

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

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

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

apps/dokploy/__test__/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,13 +13,34 @@ import {
 } from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";
 
-const baseAdmin: Admin = {
+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: "",
+	createdAt: new Date(),
-	authId: "",
-	adminId: "string",
 	serverIp: null,
 	certificateType: "none",
 	host: null,
@@ -30,6 +51,19 @@ const baseAdmin: Admin = {
 	serversQuantity: 0,
 	stripeCustomerId: "",
 	stripeSubscriptionId: "",
+	banExpires: new Date(),
+	banned: true,
+	banReason: "",
+	email: "",
+	expirationDate: "",
+	id: "",
+	isRegistered: false,
+	name: "",
+	createdAt2: new Date().toISOString(),
+	emailVerified: false,
+	image: "",
+	updatedAt: new Date(),
+	twoFactorEnabled: false,
 };
 
 beforeEach(() => {
@@ -80,8 +114,6 @@ test("Should not touch config without host", () => {
 });
 
 test("Should remove websecure if https rollback to http", () => {
-	const originalConfig: FileConfig = loadOrCreateConfig("dokploy");
-
 	updateServerTraefik(
 		{ ...baseAdmin, certificateType: "letsencrypt" },
 		"example.com",

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

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

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

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

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

@@ -130,7 +130,7 @@ const createStringToJSONSchema = (schema: z.ZodTypeAny) => {
 			}
 			try {
 				return JSON.parse(str);
-			} catch (e) {
+			} catch (_e) {
 				ctx.addIssue({ code: "custom", message: "Invalid JSON format" });
 				return z.NEVER;
 			}

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

@@ -29,7 +29,6 @@ import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Server } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -17,7 +17,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Rss, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandlePorts } from "./handle-ports";
 interface Props {

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

@@ -9,7 +9,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Split, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandleRedirect } from "./handle-redirect";
 

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

@@ -9,7 +9,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { LockKeyhole, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { HandleSecurity } from "./handle-security";
 

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

@@ -25,7 +25,7 @@ import {
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { InfoIcon } from "lucide-react";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -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/traefik/show-traefik-config.tsx

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

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

@@ -10,7 +10,6 @@ import {
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Package, Trash2 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../show-resources";
 import { AddVolumes } from "./add-volumes";
@@ -45,8 +44,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
+						If you want to persist data in this service use the following config
-						following config to setup the volumes
+						to setup the volumes
 					</CardDescription>
 				</div>
 

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

@@ -21,7 +21,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { PenBoxIcon, Pencil } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -77,7 +77,7 @@ export const UpdateVolume = ({
 	serviceType,
 }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
-	const utils = api.useUtils();
+	const _utils = api.useUtils();
 	const { data } = api.mounts.one.useQuery(
 		{
 			mountId,

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

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
@@ -25,6 +26,7 @@ enum BuildType {
 	paketo_buildpacks = "paketo_buildpacks",
 	nixpacks = "nixpacks",
 	static = "static",
+	railpack = "railpack",
 }
 
 const mySchema = z.discriminatedUnion("buildType", [
@@ -53,6 +55,9 @@ const mySchema = z.discriminatedUnion("buildType", [
 	z.object({
 		buildType: z.literal("static"),
 	}),
+	z.object({
+		buildType: z.literal("railpack"),
+	}),
 ]);
 
 type AddTemplate = z.infer<typeof mySchema>;
@@ -173,6 +178,15 @@ export const ShowBuildChooseForm = ({ applicationId }: Props) => {
 														Dockerfile
 													</FormLabel>
 												</FormItem>
+												<FormItem className="flex items-center space-x-3 space-y-0">
+													<FormControl>
+														<RadioGroupItem value="railpack" />
+													</FormControl>
+													<FormLabel className="font-normal">
+														Railpack{" "}
+														<Badge className="ml-1 text-xs px-1">New</Badge>
+													</FormLabel>
+												</FormItem>
 												<FormItem className="flex items-center space-x-3 space-y-0">
 													<FormControl>
 														<RadioGroupItem value="nixpacks" />

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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 
 interface Props {

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

@@ -73,15 +73,14 @@ export const ShowDeployments = ({ applicationId }: Props) => {
 					</div>
 				) : (
 					<div className="flex flex-col gap-4">
-						{deployments?.map((deployment) => (
+						{deployments?.map((deployment, index) => (
 							<div
 								key={deployment.deploymentId}
 								className="flex items-center justify-between rounded-lg border p-4 gap-2"
 							>
 								<div className="flex flex-col">
 									<span className="flex items-center gap-4 font-medium capitalize text-foreground">
-										{deployment.status}
+										{index + 1}. {deployment.status}
-
 										<StatusTooltip
 											status={deployment?.status}
 											className="size-2.5"

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} />
+										<div className="flex gap-8">
-										<Button variant="outline" disabled>
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
-											{item.path}
+												<span>{item.path}</span>
-										</Button>
+												<span>{item.port}</span>
-										<Button variant="outline" disabled>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
-											{item.port}
+											</div>
-										</Button>
+
-										<Button variant="outline" disabled>
+											<div className="flex gap-2">
-											{item.https ? "HTTPS" : "HTTP"}
+												<AddDomain
-										</Button>
+													applicationId={applicationId}
-										<div className="flex flex-row gap-1">
+													domainId={item.domainId}
-											<AddDomain
-												applicationId={applicationId}
-												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}
 												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													<Button
-												</Button>
+														variant="ghost"
-											</DialogAction>
+														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/environment/show-enviroment.tsx

@@ -18,7 +18,7 @@ import { Toggle } from "@/components/ui/toggle";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
-import React, { type CSSProperties, useEffect, useState } from "react";
+import { type CSSProperties, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
 import { Secrets } from "@/components/ui/secrets";
 import { api } from "@/utils/api";

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

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

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/general/generic/show.tsx

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

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

@@ -7,7 +7,6 @@ import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, Hammer, RefreshCcw, Terminal } from "lucide-react";
 import { useRouter } from "next/router";
-import React from "react";
 import { toast } from "sonner";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
 interface Props {
@@ -28,8 +27,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 	const { mutateAsync: stop, isLoading: isStopping } =
 		api.application.stop.useMutation();
 
-	const { mutateAsync: deploy, isLoading: isDeploying } =
+	const { mutateAsync: deploy } = api.application.deploy.useMutation();
-		api.application.deploy.useMutation();
 
 	const { mutateAsync: reload, isLoading: isReloading } =
 		api.application.reload.useMutation();

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

@@ -5,7 +5,6 @@ import {
 	Dialog,
 	DialogContent,
 	DialogDescription,
-	DialogFooter,
 	DialogHeader,
 	DialogTitle,
 	DialogTrigger,

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

@@ -22,7 +22,6 @@ import {
 	RocketIcon,
 	Trash2,
 } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 import { ShowModalLogs } from "../../settings/web-server/show-modal-logs";
 import { AddPreviewDomain } from "./add-preview-domain";

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

@@ -279,7 +279,7 @@ export const ShowPreviewSettings = ({ applicationId }: Props) => {
 								<FormField
 									control={form.control}
 									name="env"
-									render={({ field }) => (
+									render={() => (
 										<FormItem>
 											<FormControl>
 												<Secrets

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -19,7 +19,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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(
+	const queryMap = {
-		{ composeId },
+		postgres: () =>
-		{ enabled: !!composeId },
+			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 } = 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
+						service. If you are sure please enter the service name to delete
-						this compose.
+						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(
+															copy(`${data.name}/${data.appName}`);
-																`${data.name}/${data.appName}`,
-															);
 															toast.success("Copied to clipboard. Be careful!");
 														}
 													}}
@@ -142,27 +176,29 @@ export const DeleteCompose = ({ composeId }: Props) => {
 									</FormItem>
 								)}
 							/>
-							<FormField
+							{type === "compose" && (
-								control={form.control}
+								<FormField
-								name="deleteVolumes"
+									control={form.control}
-								render={({ field }) => (
+									name="deleteVolumes"
-									<FormItem>
+									render={({ field }) => (
-										<div className="flex items-center">
+										<FormItem>
-											<FormControl>
+											<div className="flex items-center">
-												<Checkbox
+												<FormControl>
-													checked={field.value}
+													<Checkbox
-													onCheckedChange={field.onChange}
+														checked={field.value}
-												/>
+														onCheckedChange={field.onChange}
-											</FormControl>
+													/>
+												</FormControl>
 
-											<FormLabel className="ml-2">
+												<FormLabel className="ml-2">
-												Delete volumes associated with this compose
+													Delete volumes associated with this compose
-											</FormLabel>
+												</FormLabel>
-										</div>
+											</div>
-										<FormMessage />
+											<FormMessage />
-									</FormItem>
+										</FormItem>
-								)}
+									)}
-							/>
+								/>
+							)}
 						</form>
 					</Form>
 				</div>

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

@@ -11,7 +11,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { api } from "@/utils/api";
 import { RefreshCcw } from "lucide-react";
-import React from "react";
 import { toast } from "sonner";
 
 interface Props {

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}`}>
+										<div className="md:basis-1/2 flex gap-6 w-full items-center">
-											<ExternalLink className="size-5" />
+											<span className="opacity-50 text-center font-medium text-sm whitespace-nowrap">
-										</Link>
+												{item.serviceName}
-										<Button variant="outline" disabled>
+											</span>
-											{item.serviceName}
+
-										</Button>
+											<Link
-										<Input disabled value={item.host} />
+												className="flex gap-2 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
-										<Button variant="outline" disabled>
+												target="_blank"
-											{item.path}
+												href={`${item.https ? "https" : "http"}://${item.host}${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}
 											>
-												<Button variant="ghost">
+												<span className="truncate  text-sm">{item.host}</span>
-													<PenBoxIcon className="size-4 text-muted-foreground" />
+												<ExternalLink className="size-4 min-w-4" />
-												</Button>
+											</Link>
-											</AddDomainCompose>
+										</div>
-											<DialogAction
+
-												title="Delete Domain"
+										<div className="flex gap-8">
-												description="Are you sure you want to delete this domain?"
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
-												type="destructive"
+												<span>{item.path}</span>
-												onClick={async () => {
+												<span>{item.port}</span>
-													await deleteDomain({
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
-														domainId: item.domainId,
+											</div>
-													})
+
-														.then((data) => {
+											<div className="flex gap-2">
-															refetch();
+												<AddDomainCompose
-															toast.success("Domain deleted successfully");
+													composeId={composeId}
-														})
+													domainId={item.domainId}
-														.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
-												</Button>
+														variant="ghost"
-											</DialogAction>
+														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;
@@ -35,8 +35,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 		{ enabled: !!composeId },
 	);
 
-	const { mutateAsync, isLoading, error, isError } =
+	const { mutateAsync, isLoading } = api.compose.update.useMutation();
-		api.compose.update.useMutation();
 
 	const form = useForm<AddComposeFile>({
 		defaultValues: {
@@ -76,7 +75,7 @@ export const ComposeFileEditor = ({ composeId }: Props) => {
 					composeId,
 				});
 			})
-			.catch((e) => {
+			.catch((_e) => {
 				toast.error("Error updating the Compose config");
 			});
 	};
@@ -125,7 +124,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

@@ -84,7 +84,6 @@ export const SaveBitbucketProviderCompose = ({ composeId }: Props) => {
 		data: repositories,
 		isLoading: isLoadingRepositories,
 		error,
-		isError,
 	} = api.bitbucket.getBitbucketRepositories.useQuery(
 		{
 			bitbucketId,
@@ -237,7 +236,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 +246,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/generic/show.tsx

@@ -7,7 +7,7 @@ import {
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/utils/api";
-import { CodeIcon, GitBranch, LockIcon } from "lucide-react";
+import { CodeIcon, GitBranch } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { ComposeFileEditor } from "../compose-file-editor";

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,15 +16,10 @@ 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";
-import { AlertTriangle, Dices } from "lucide-react";
+import { AlertTriangle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -48,7 +39,7 @@ type Schema = z.infer<typeof schema>;
 export const RandomizeCompose = ({ composeId }: Props) => {
 	const utils = api.useUtils();
 	const [compose, setCompose] = useState<string>("");
-	const [isOpen, setIsOpen] = useState(false);
+	const [_isOpen, _setIsOpen] = useState(false);
 	const { mutateAsync, error, isError } =
 		api.compose.randomizeCompose.useMutation();
 
@@ -70,6 +61,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	const suffix = form.watch("suffix");
 
 	useEffect(() => {
+		randomizeCompose();
 		if (data) {
 			form.reset({
 				suffix: data?.suffix || "",
@@ -84,7 +76,7 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 			suffix: formData?.suffix || "",
 			randomize: formData?.randomize || false,
 		})
-			.then(async (data) => {
+			.then(async (_data) => {
 				randomizeCompose();
 				refetch();
 				toast.success("Compose updated");
@@ -110,126 +102,117 @@ export const RandomizeCompose = ({ composeId }: Props) => {
 	};
 
 	return (
-		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+		<div className="w-full">
-			<DialogTrigger asChild onClick={() => randomizeCompose()}>
+			<DialogHeader>
-				<Button className="max-lg:w-full" variant="outline">
+				<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
-					<Dices className="h-4 w-4" />
+				<DialogDescription>
-					Randomize Compose
+					Use this in case you want to deploy the same compose file and you have
-				</Button>
+					conflicts with some property like volumes, networks, etc.
-			</DialogTrigger>
+				</DialogDescription>
-			<DialogContent className="sm:max-w-6xl max-h-[50rem] overflow-y-auto">
+			</DialogHeader>
-				<DialogHeader>
+			<div className="text-sm text-muted-foreground flex flex-col gap-2">
-					<DialogTitle>Randomize Compose (Experimental)</DialogTitle>
+				<span>
-					<DialogDescription>
+					This will randomize the compose file and will add a suffix to the
-						Use this in case you want to deploy the same compose file and you
+					property to avoid conflicts
-						have conflicts with some property like volumes, networks, etc.
+				</span>
-					</DialogDescription>
+				<ul className="list-disc list-inside">
-				</DialogHeader>
+					<li>volumes</li>
-				<div className="text-sm text-muted-foreground flex flex-col gap-2">
+					<li>networks</li>
-					<span>
+					<li>services</li>
-						This will randomize the compose file and will add a suffix to the
+					<li>configs</li>
-						property to avoid conflicts
+					<li>secrets</li>
-					</span>
+				</ul>
-					<ul className="list-disc list-inside">
+				<AlertBlock type="info">
-						<li>volumes</li>
+					When you activate this option, we will include a env `COMPOSE_PREFIX`
-						<li>networks</li>
+					variable to the compose file so you can use it in your compose file.
-						<li>services</li>
+				</AlertBlock>
-						<li>configs</li>
+			</div>
-						<li>secrets</li>
+			{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
-					</ul>
+			<Form {...form}>
-					<AlertBlock type="info">
+				<form
-						When you activate this option, we will include a env
+					onSubmit={form.handleSubmit(onSubmit)}
-						`COMPOSE_PREFIX` variable to the compose file so you can use it in
+					id="hook-form-add-project"
-						your compose file.
+					className="grid w-full gap-4"
-					</AlertBlock>
+				>
-				</div>
+					{isError && (
-				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+						<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
-				<Form {...form}>
+							<AlertTriangle className="text-red-600 dark:text-red-400" />
-					<form
+							<span className="text-sm text-red-600 dark:text-red-400">
-						onSubmit={form.handleSubmit(onSubmit)}
+								{error?.message}
-						id="hook-form-add-project"
+							</span>
-						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>
-						<pre>
+					)}
-							<CodeEditor
+
-								value={compose || ""}
+					<div className="flex flex-col lg:flex-col  gap-4 w-full ">
-								language="yaml"
+						<div>
-								readOnly
+							<FormField
-								height="50rem"
+								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>
+							<FormField
-					</form>
+								control={form.control}
-				</Form>
+								name="randomize"
-			</DialogContent>
+								render={({ field }) => (
-		</Dialog>
+									<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-converted-compose.tsx

@@ -40,7 +40,7 @@ export const ShowConvertedCompose = ({ composeId }: Props) => {
 				.then(() => {
 					refetch();
 				})
-				.catch((err) => {});
+				.catch((_err) => {});
 		}
 	}, [isOpen]);
 

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/compose/general/show.tsx

@@ -7,7 +7,6 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import React from "react";
 import { ComposeActions } from "./actions";
 import { ShowProviderFormCompose } from "./generic/show";
 interface Props {

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

@@ -18,7 +18,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { api } from "@/utils/api";
-import { Loader, Loader2 } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
 export const DockerLogs = dynamic(

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

@@ -16,7 +16,6 @@ import {
 import { api } from "@/utils/api";
 import { DatabaseBackup, Play, Trash2 } from "lucide-react";
 import Link from "next/link";
-import React from "react";
 import { toast } from "sonner";
 import type { ServiceType } from "../../application/advanced/show-resources";
 import { AddBackup } from "./add-backup";

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

@@ -35,7 +35,7 @@ import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CheckIcon, ChevronsUpDown, PenBoxIcon, Pencil } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, PenBoxIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

apps/dokploy/components/dashboard/docker/logs/since-logs-filter.tsx

@@ -15,7 +15,6 @@ import { Separator } from "@/components/ui/separator";
 import { Switch } from "@/components/ui/switch";
 import { cn } from "@/lib/utils";
 import { CheckIcon } from "lucide-react";
-import React from "react";
 
 export type TimeFilter = "all" | "1h" | "6h" | "24h" | "168h" | "720h";
 

apps/dokploy/components/dashboard/docker/logs/terminal-line.tsx

@@ -9,7 +9,6 @@ import {
 import { cn } from "@/lib/utils";
 import { FancyAnsi } from "fancy-ansi";
 import { escapeRegExp } from "lodash";
-import React from "react";
 import { type LogLine, getLogType } from "./utils";
 
 interface LogLineProps {
@@ -48,23 +47,12 @@ export function TerminalLine({ log, noTimestamp, searchTerm }: LogLineProps) {
 		}
 
 		const htmlContent = fancyAnsi.toHtml(text);
+		const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+
 		const modifiedContent = htmlContent.replace(
-			/<span([^>]*)>([^<]*)<\/span>/g,
+			searchRegex,
-			(match, attrs, content) => {
+			(match) =>
-				const searchRegex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+				`<span class="bg-orange-200/80 dark:bg-orange-900/80 font-bold">${match}</span>`,
-				if (!content.match(searchRegex)) return match;
-
-				const segments = content.split(searchRegex);
-				const wrappedSegments = segments
-					.map((segment: string) =>
-						segment.toLowerCase() === term.toLowerCase()
-							? `<span${attrs} class="bg-yellow-200/50 dark:bg-yellow-900/50">${segment}</span>`
-							: segment,
-					)
-					.join("");
-
-				return `<span${attrs}>${wrappedSegments}</span>`;
-			},
 		);
 
 		return (

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

@@ -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/colums.tsx

@@ -1,6 +1,5 @@
 import type { ColumnDef } from "@tanstack/react-table";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
-import * as React from "react";
 
 import { Button } from "@/components/ui/button";
 import {

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

@@ -1,18 +1,3 @@
-import {
-	type ColumnFiltersState,
-	type SortingState,
-	type VisibilityState,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable,
-} from "@tanstack/react-table";
-import { ChevronDown, Container } from "lucide-react";
-import * as React from "react";
-
-import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -37,6 +22,19 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import { type RouterOutputs, api } from "@/utils/api";
+import {
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+import { ChevronDown, Container } from "lucide-react";
+import * as React from "react";
 import { columns } from "./colums";
 export type Container = NonNullable<
 	RouterOutputs["docker"]["getContainers"]

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

@@ -7,9 +7,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Tree } from "@/components/ui/file-tree";
-import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
-import { FileIcon, Folder, Link, Loader2, Workflow } from "lucide-react";
+import { FileIcon, Folder, Loader2, Workflow } from "lucide-react";
 import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";

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

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	mariadbId: string;

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

@@ -21,7 +21,7 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AlertTriangle, PenBoxIcon, SquarePen } from "lucide-react";
+import { PenBoxIcon } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";

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

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { api } from "@/utils/api";
 import { Ban, CheckCircle2, RefreshCcw, Terminal } from "lucide-react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { type LogLine, parseLogs } from "../../docker/logs/utils";
 import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";

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

@@ -3,7 +3,6 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
-import React from "react";
 
 interface Props {
 	mongoId: string;

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 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.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>
+				{payload[0].payload.time && (
-				<p>{`Read ${payload[0].payload.readMb.toFixed(2)} MB`}</p>
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				<p>{`Write: ${payload[0].payload.writeMb.toFixed(3)} MB`}</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";
+import type { DockerStatsJSON } from "./show-free-container-monitoring";
-1;
 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),
+			inMB: item.value.inputMb,
-			outMB: item.value.outputMb.toFixed(2),
+			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>
+				{payload[0].payload.time && (
-				<p>{`In MB Usage: ${payload[0].payload.inMB} MB`}</p>
+					<p>{`Date: ${format(new Date(payload[0].payload.time), "PPpp")}`}</p>
-				<p>{`Out MB Usage: ${payload[0].payload.outMB} MB`}</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,130 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	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}){" "}
+										<Badge variant={badgeStateColor(container.state)}>
+											{container.state}
+										</Badge>
+									</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,310 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { api } from "@/utils/api";
+import { 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 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,181 @@
+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[];
+}
+
+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

@@ -1,3 +1,5 @@
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -20,18 +22,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 +50,9 @@ export const ShowMonitoringCompose = ({
 		},
 	);
 
-	const [containerAppName, setContainerAppName] = useState<
+	const [containerAppName, setContainerAppName] = useState<string | undefined>(
-		string | undefined
+		"",
-	>();
+	);
 
 	const [containerId, setContainerId] = useState<string | undefined>();
 
@@ -62,7 +68,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>
@@ -98,7 +104,9 @@ export const ShowMonitoringCompose = ({
 											value={container.name}
 										>
 											{container.name} ({container.containerId}){" "}
-											{container.state}
+											<Badge variant={badgeStateColor(container.state)}>
+												{container.state}
+											</Badge>
 										</SelectItem>
 									))}
 									<SelectLabel>Containers ({data?.length})</SelectLabel>
@@ -118,10 +126,13 @@ export const ShowMonitoringCompose = ({
 							Restart
 						</Button>
 					</div>
-					<DockerMonitoring
+					<div className="flex flex-col gap-4">
-						appName={containerAppName || ""}
+						<ContainerPaidMonitoring
-						appType={appType}
+							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,275 @@
+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 { 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.server.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="w-full">
-			<DockerMonitoring appName="dokploy" />
-		</div>
-	);
-};

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

@@ -19,7 +19,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";