Reapply "Merge branch 'canary' into kucherenko/canary"

This reverts commit e6cb6454db.

apps/dokploy/pages/dashboard/docker.tsx

@@ -1,10 +1,11 @@
 import { ShowContainers } from "@/components/dashboard/docker/show/show-containers";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Dashboard = () => {
@@ -27,7 +28,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -44,21 +45,20 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 	try {
 		await helpers.project.all.prefetch();
-		const auth = await helpers.auth.get.fetch();
 
-		if (auth.rol === "user") {
-			const user = await helpers.user.byAuthId.fetch({
-				authId: auth.id,
+		if (user.role === "member") {
+			const userR = await helpers.user.one.fetch({
+				userId: user.id,
 			});
 
-			if (!user.canAccessToDocker) {
+			if (!userR?.canAccessToDocker) {
 				return {
 					redirect: {
 						permanent: true,
@@ -72,7 +72,7 @@ export async function getServerSideProps(
 				trpcState: helpers.dehydrate(),
 			},
 		};
-	} catch (error) {
+	} catch (_error) {
 		return {
 			props: {},
 		};

apps/dokploy/pages/dashboard/monitoring.tsx

@@ -1,11 +1,86 @@
-import { ShowMonitoring } from "@/components/dashboard/monitoring/web-server/show";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ShowPaidMonitoring } from "@/components/dashboard/monitoring/paid/servers/show-paid-monitoring";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { Card } from "@/components/ui/card";
+import { useLocalStorage } from "@/hooks/useLocalStorage";
+import { api } from "@/utils/api";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
+import { Loader2 } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
+
+const BASE_URL = "http://localhost:3001/metrics";
+
+const DEFAULT_TOKEN = "metrics";
 
 const Dashboard = () => {
-	return <ShowMonitoring />;
+	const [toggleMonitoring, _setToggleMonitoring] = useLocalStorage(
+		"monitoring-enabled",
+		false,
+	);
+
+	const { data: monitoring, isLoading } = api.user.getMetricsToken.useQuery();
+	return (
+		<div className="space-y-4 pb-10">
+			{/* <AlertBlock>
+				You are watching the <strong>Free</strong> plan.{" "}
+				<a
+					href="https://dokploy.com#pricing"
+					target="_blank"
+					className="underline"
+					rel="noreferrer"
+				>
+					Upgrade
+				</a>{" "}
+				to get more features.
+			</AlertBlock> */}
+			{isLoading ? (
+				<Card className="bg-sidebar  p-2.5 rounded-xl  mx-auto  items-center">
+					<div className="rounded-xl bg-background flex shadow-md px-4 min-h-[50vh] justify-center items-center text-muted-foreground">
+						Loading...
+						<Loader2 className="h-4 w-4 animate-spin" />
+					</div>
+				</Card>
+			) : (
+				<>
+					{/* {monitoring?.enabledFeatures && (
+						<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+							<Label className="text-muted-foreground">Change Monitoring</Label>
+							<Switch
+								checked={toggleMonitoring}
+								onCheckedChange={setToggleMonitoring}
+							/>
+						</div>
+					)} */}
+					{toggleMonitoring ? (
+						<Card className="bg-sidebar  p-2.5 rounded-xl  mx-auto">
+							<div className="rounded-xl bg-background shadow-md">
+								<ShowPaidMonitoring
+									BASE_URL={
+										process.env.NODE_ENV === "production"
+											? `http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}/metrics`
+											: BASE_URL
+									}
+									token={
+										process.env.NODE_ENV === "production"
+											? monitoring?.metricsConfig?.server?.token
+											: DEFAULT_TOKEN
+									}
+								/>
+							</div>
+						</Card>
+					) : (
+						<Card className="h-full bg-sidebar  p-2.5 rounded-xl">
+							<div className="rounded-xl bg-background shadow-md p-6">
+								<ContainerFreeMonitoring appName="dokploy" />
+							</div>
+						</Card>
+					)}
+				</>
+			)}
+		</div>
+	);
 };
 
 export default Dashboard;
@@ -24,7 +99,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user } = await validateRequest(ctx.req, ctx.res);
+	const { user } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {

apps/dokploy/pages/dashboard/project/[projectId].tsx

@@ -13,6 +13,7 @@ import {
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Button } from "@/components/ui/button";
 
@@ -25,6 +26,7 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Command,
 	CommandEmpty,
@@ -49,27 +51,34 @@ import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 import type { findProjectById } from "@dokploy/server";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import {
+	Ban,
+	Check,
+	CheckCircle2,
+	ChevronsUpDown,
 	CircuitBoard,
 	FolderInput,
 	GlobeIcon,
 	Loader2,
 	PlusIcon,
 	Search,
+	X,
 } from "lucide-react";
-import { Check, ChevronsUpDown, X } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
 } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { useMemo, useState, type ReactElement } from "react";
+import { type ReactElement, useMemo, useState } from "react";
+import { toast } from "sonner";
 import superjson from "superjson";
 
 export type Services = {
+	appName: string;
+	serverId?: string | null;
 	name: string;
 	type:
 		| "mariadb"
@@ -90,72 +99,86 @@ type Project = Awaited<ReturnType<typeof findProjectById>>;
 export const extractServices = (data: Project | undefined) => {
 	const applications: Services[] =
 		data?.applications.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "application",
 			id: item.applicationId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const mariadb: Services[] =
 		data?.mariadb.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "mariadb",
 			id: item.mariadbId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const postgres: Services[] =
 		data?.postgres.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "postgres",
 			id: item.postgresId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const mongo: Services[] =
 		data?.mongo.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "mongo",
 			id: item.mongoId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const redis: Services[] =
 		data?.redis.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "redis",
 			id: item.redisId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const mysql: Services[] =
 		data?.mysql.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "mysql",
 			id: item.mysqlId,
 			createdAt: item.createdAt,
 			status: item.applicationStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	const compose: Services[] =
 		data?.compose.map((item) => ({
+			appName: item.appName,
 			name: item.name,
 			type: "compose",
 			id: item.composeId,
 			createdAt: item.createdAt,
 			status: item.composeStatus,
 			description: item.description,
+			serverId: item.serverId,
 		})) || [];
 
 	applications.push(
@@ -177,17 +200,11 @@ export const extractServices = (data: Project | undefined) => {
 const Project = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
 	const { projectId } = props;
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
-	const { data, isLoading } = api.project.one.useQuery({ projectId });
+	const { data: auth } = api.user.get.useQuery();
+
+	const { data, isLoading, refetch } = api.project.one.useQuery({ projectId });
 	const router = useRouter();
 
 	const emptyServices =
@@ -214,6 +231,70 @@ const Project = (
 
 	const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
 	const [openCombobox, setOpenCombobox] = useState(false);
+	const [selectedServices, setSelectedServices] = useState<string[]>([]);
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+	const handleSelectAll = () => {
+		if (selectedServices.length === filteredServices.length) {
+			setSelectedServices([]);
+		} else {
+			setSelectedServices(filteredServices.map((service) => service.id));
+		}
+	};
+
+	const handleServiceSelect = (serviceId: string, event: React.MouseEvent) => {
+		event.stopPropagation();
+		setSelectedServices((prev) =>
+			prev.includes(serviceId)
+				? prev.filter((id) => id !== serviceId)
+				: [...prev, serviceId],
+		);
+	};
+
+	const composeActions = {
+		start: api.compose.start.useMutation(),
+		stop: api.compose.stop.useMutation(),
+	};
+
+	const handleBulkStart = async () => {
+		let success = 0;
+		setIsBulkActionLoading(true);
+		for (const serviceId of selectedServices) {
+			try {
+				await composeActions.start.mutateAsync({ composeId: serviceId });
+				success++;
+			} catch (_error) {
+				toast.error(`Error starting service ${serviceId}`);
+			}
+		}
+		if (success > 0) {
+			toast.success(`${success} services started successfully`);
+			refetch();
+		}
+		setIsBulkActionLoading(false);
+		setSelectedServices([]);
+		setIsDropdownOpen(false);
+	};
+
+	const handleBulkStop = async () => {
+		let success = 0;
+		setIsBulkActionLoading(true);
+		for (const serviceId of selectedServices) {
+			try {
+				await composeActions.stop.mutateAsync({ composeId: serviceId });
+				success++;
+			} catch (_error) {
+				toast.error(`Error stopping service ${serviceId}`);
+			}
+		}
+		if (success > 0) {
+			toast.success(`${success} services stopped successfully`);
+			refetch();
+		}
+		setSelectedServices([]);
+		setIsDropdownOpen(false);
+		setIsBulkActionLoading(false);
+	};
 
 	const filteredServices = useMemo(() => {
 		if (!applications) return [];
@@ -241,16 +322,16 @@ const Project = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
-						<div className="flex justify-between gap-4 w-full items-center">
-							<CardHeader className="">
+						<div className="flex justify-between gap-4 w-full items-center  flex-wrap p-6">
+							<CardHeader className="p-0">
 								<CardTitle className="text-xl flex flex-row gap-2">
 									<FolderInput className="size-6 text-muted-foreground self-center" />
 									{data?.name}
 								</CardTitle>
 								<CardDescription>{data?.description}</CardDescription>
 							</CardHeader>
-							{(auth?.rol === "admin" || user?.canCreateServices) && (
-								<div className="flex flex-row gap-4 flex-wrap px-4">
+							{(auth?.role === "owner" || auth?.canCreateServices) && (
+								<div className="flex flex-row gap-4 flex-wrap">
 									<ProjectEnvironment projectId={projectId}>
 										<Button variant="outline">Project Environment</Button>
 									</ProjectEnvironment>
@@ -299,78 +380,151 @@ const Project = (
 								</div>
 							) : (
 								<>
-									<div className="flex flex-row gap-2 items-center">
-										<div className="w-full relative">
-											<Input
-												placeholder="Filter services..."
-												value={searchQuery}
-												onChange={(e) => setSearchQuery(e.target.value)}
-												className="pr-10"
-											/>
-											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+									<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+										<div className="flex items-center gap-4">
+											<div className="flex items-center gap-2">
+												<Checkbox
+													checked={selectedServices.length > 0}
+													className={cn(
+														"data-[state=checked]:bg-primary",
+														selectedServices.length > 0 &&
+															selectedServices.length <
+																filteredServices.length &&
+															"bg-primary/50",
+													)}
+													onCheckedChange={handleSelectAll}
+												/>
+												<span className="text-sm">
+													Select All{" "}
+													{selectedServices.length > 0 &&
+														`(${selectedServices.length}/${filteredServices.length})`}
+												</span>
+											</div>
+
+											<DropdownMenu
+												open={isDropdownOpen}
+												onOpenChange={setIsDropdownOpen}
+											>
+												<DropdownMenuTrigger asChild>
+													<Button
+														variant="outline"
+														disabled={selectedServices.length === 0}
+														isLoading={isBulkActionLoading}
+													>
+														Bulk Actions
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuLabel>Actions</DropdownMenuLabel>
+													<DropdownMenuSeparator />
+													<DialogAction
+														title="Start Services"
+														description={`Are you sure you want to start ${selectedServices.length} services?`}
+														type="default"
+														onClick={handleBulkStart}
+													>
+														<Button
+															variant="ghost"
+															className="w-full justify-start"
+														>
+															<CheckCircle2 className="mr-2 h-4 w-4" />
+															Start
+														</Button>
+													</DialogAction>
+													<DialogAction
+														title="Stop Services"
+														description={`Are you sure you want to stop ${selectedServices.length} services?`}
+														type="destructive"
+														onClick={handleBulkStop}
+													>
+														<Button
+															variant="ghost"
+															className="w-full justify-start text-destructive"
+														>
+															<Ban className="mr-2 h-4 w-4" />
+															Stop
+														</Button>
+													</DialogAction>
+												</DropdownMenuContent>
+											</DropdownMenu>
 										</div>
-										<Popover open={openCombobox} onOpenChange={setOpenCombobox}>
-											<PopoverTrigger asChild>
-												<Button
-													variant="outline"
-													aria-expanded={openCombobox}
-													className="min-w-[200px] justify-between"
-												>
-													{selectedTypes.length === 0
-														? "Select types..."
-														: `${selectedTypes.length} selected`}
-													<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-												</Button>
-											</PopoverTrigger>
-											<PopoverContent className="w-[200px] p-0">
-												<Command>
-													<CommandInput placeholder="Search type..." />
-													<CommandEmpty>No type found.</CommandEmpty>
-													<CommandGroup>
-														{serviceTypes.map((type) => (
+
+										<div className="flex flex-col gap-2 sm:flex-row sm:gap-4 sm:items-center">
+											<div className="w-full relative">
+												<Input
+													placeholder="Filter services..."
+													value={searchQuery}
+													onChange={(e) => setSearchQuery(e.target.value)}
+													className="pr-10"
+												/>
+												<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+											</div>
+											<Popover
+												open={openCombobox}
+												onOpenChange={setOpenCombobox}
+											>
+												<PopoverTrigger asChild>
+													<Button
+														variant="outline"
+														aria-expanded={openCombobox}
+														className="min-w-[200px] justify-between"
+													>
+														{selectedTypes.length === 0
+															? "Select types..."
+															: `${selectedTypes.length} selected`}
+														<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+													</Button>
+												</PopoverTrigger>
+												<PopoverContent className="w-[200px] p-0">
+													<Command>
+														<CommandInput placeholder="Search type..." />
+														<CommandEmpty>No type found.</CommandEmpty>
+														<CommandGroup>
+															{serviceTypes.map((type) => (
+																<CommandItem
+																	key={type.value}
+																	onSelect={() => {
+																		setSelectedTypes((prev) =>
+																			prev.includes(type.value)
+																				? prev.filter((t) => t !== type.value)
+																				: [...prev, type.value],
+																		);
+																		setOpenCombobox(false);
+																	}}
+																>
+																	<div className="flex flex-row">
+																		<Check
+																			className={cn(
+																				"mr-2 h-4 w-4",
+																				selectedTypes.includes(type.value)
+																					? "opacity-100"
+																					: "opacity-0",
+																			)}
+																		/>
+																		{type.icon && (
+																			<type.icon className="mr-2 h-4 w-4" />
+																		)}
+																		{type.label}
+																	</div>
+																</CommandItem>
+															))}
 															<CommandItem
-																key={type.value}
 																onSelect={() => {
-																	setSelectedTypes((prev) =>
-																		prev.includes(type.value)
-																			? prev.filter((t) => t !== type.value)
-																			: [...prev, type.value],
-																	);
+																	setSelectedTypes([]);
 																	setOpenCombobox(false);
 																}}
+																className="border-t"
 															>
-																<div className="flex flex-row">
-																	<Check
-																		className={cn(
-																			"mr-2 h-4 w-4",
-																			selectedTypes.includes(type.value)
-																				? "opacity-100"
-																				: "opacity-0",
-																		)}
-																	/>
-																	{type.icon && (
-																		<type.icon className="mr-2 h-4 w-4" />
-																	)}
-																	{type.label}
+																<div className="flex flex-row items-center">
+																	<X className="mr-2 h-4 w-4" />
+																	Clear filters
 																</div>
 															</CommandItem>
-														))}
-														<CommandItem
-															onSelect={() => {
-																setSelectedTypes([]);
-																setOpenCombobox(false);
-															}}
-															className="border-t"
-														>
-															<div className="flex flex-row items-center">
-																<X className="mr-2 h-4 w-4" />
-																Clear filters
-															</div>
-														</CommandItem>
-													</CommandGroup>
-												</Command>
-											</PopoverContent>
-										</Popover>
+														</CommandGroup>
+													</Command>
+												</PopoverContent>
+											</Popover>
+										</div>
 									</div>
 
 									<div className="flex w-full gap-8">
@@ -408,6 +562,27 @@ const Project = (
 																<StatusTooltip status={service.status} />
 															</div>
 
+															<div
+																className={cn(
+																	"absolute -left-3 -bottom-3 size-9 translate-y-1 rounded-full p-0 transition-all duration-200 z-10 bg-background border",
+																	selectedServices.includes(service.id)
+																		? "opacity-100 translate-y-0"
+																		: "opacity-0 group-hover:translate-y-0 group-hover:opacity-100",
+																)}
+																onClick={(e) =>
+																	handleServiceSelect(service.id, e)
+																}
+															>
+																<div className="h-full w-full flex items-center justify-center">
+																	<Checkbox
+																		checked={selectedServices.includes(
+																			service.id,
+																		)}
+																		className="data-[state=checked]:bg-primary"
+																	/>
+																</div>
+															</div>
+
 															<CardHeader>
 																<CardTitle className="flex items-center justify-between">
 																	<div className="flex flex-row items-center gap-2 justify-between w-full">
@@ -482,7 +657,7 @@ export async function getServerSideProps(
 	const { params } = ctx;
 
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -498,8 +673,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -516,7 +691,7 @@ export async function getServerSideProps(
 					projectId: params?.projectId,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx

@@ -13,13 +13,13 @@ import { ShowGeneralApplication } from "@/components/dashboard/application/gener
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
 import { ShowPreviewDeployments } from "@/components/dashboard/application/preview-deployments/show-preview-deployments";
 import { UpdateApplication } from "@/components/dashboard/application/update-application";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -38,9 +38,10 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { GlobeIcon, HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { GlobeIcon, HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -48,7 +49,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, useEffect, type ReactElement } from "react";
+import { type ReactElement, useEffect, useState } from "react";
 import { toast } from "sonner";
 import superjson from "superjson";
 
@@ -64,6 +65,7 @@ type TabState =
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { applicationId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
@@ -82,17 +84,8 @@ const Service = (
 		},
 	);
 
-	const { mutateAsync, isLoading: isRemoving } =
-		api.application.delete.useMutation();
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const { data: auth } = api.user.get.useQuery();
 
 	return (
 		<div className="pb-10">
@@ -140,6 +133,13 @@ const Service = (
 							<div className="flex flex-col h-fit w-fit gap-2">
 								<div className="flex flex-row h-fit w-fit gap-2">
 									<Badge
+										className="cursor-pointer"
+										onClick={() => {
+											if (data?.server?.ipAddress) {
+												copy(data.server.ipAddress);
+												toast.success("IP Address Copied!");
+											}
+										}}
 										variant={
 											!data?.serverId
 												? "default"
@@ -176,35 +176,8 @@ const Service = (
 
 								<div className="flex flex-row gap-2 justify-end">
 									<UpdateApplication applicationId={applicationId} />
-									{(auth?.rol === "admin" || user?.canDeleteServices) && (
-										<DialogAction
-											title="Delete Application"
-											description="Are you sure you want to delete this application?"
-											type="destructive"
-											onClick={async () => {
-												await mutateAsync({
-													applicationId: applicationId,
-												})
-													.then(() => {
-														router.push(
-															`/dashboard/project/${data?.projectId}`,
-														);
-														toast.success("Application deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting application");
-													});
-											}}
-										>
-											<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>
+									{(auth?.role === "owner" || auth?.canDeleteServices) && (
+										<DeleteService id={applicationId} type="application" />
 									)}
 								</div>
 							</div>
@@ -246,12 +219,16 @@ const Service = (
 										<TabsList
 											className={cn(
 												"flex gap-8 justify-start max-xl:overflow-x-scroll overflow-y-hidden",
-												data?.serverId ? "md:grid-cols-7" : "md:grid-cols-8",
+												isCloud && data?.serverId
+													? "md:grid-cols-7"
+													: data?.serverId
+														? "md:grid-cols-6"
+														: "md:grid-cols-7",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{!data?.serverId && (
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="logs">Logs</TabsTrigger>
@@ -274,13 +251,54 @@ const Service = (
 											<ShowEnvironment applicationId={applicationId} />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<DockerMonitoring appName={data?.appName || ""} />
+
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg p-6">
+												{data?.serverId && isCloud ? (
+													<ContainerPaidMonitoring
+														appName={data?.appName || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures &&
+															isCloud &&
+															data?.serverId && (
+																<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																	<Label className="text-muted-foreground">
+																		Change Monitoring
+																	</Label>
+																	<Switch
+																		checked={toggleMonitoring}
+																		onCheckedChange={setToggleMonitoring}
+																	/>
+																</div>
+															)} */}
+
+														{/* {toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : ( */}
+														<div>
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+														</div>
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4  pt-2.5">
@@ -342,7 +360,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 
 	const activeTab = query.tab;
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -358,8 +376,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -371,6 +389,8 @@ export async function getServerSideProps(
 				applicationId: params?.applicationId,
 			});
 
+			await helpers.settings.isCloud.prefetch();
+
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -378,7 +398,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/compose/[composeId].tsx

@@ -1,14 +1,15 @@
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { AddCommandCompose } from "@/components/dashboard/compose/advanced/add-command";
-import { DeleteCompose } from "@/components/dashboard/compose/delete-compose";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowDeploymentsCompose } from "@/components/dashboard/compose/deployments/show-deployments-compose";
 import { ShowDomainsCompose } from "@/components/dashboard/compose/domains/show-domains";
 import { ShowGeneralCompose } from "@/components/dashboard/compose/general/show";
 import { ShowDockerLogsCompose } from "@/components/dashboard/compose/logs/show";
 import { ShowDockerLogsStack } from "@/components/dashboard/compose/logs/show-stack";
-import { ShowMonitoringCompose } from "@/components/dashboard/compose/monitoring/show";
 import { UpdateCompose } from "@/components/dashboard/compose/update-compose";
+import { ComposeFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-compose-monitoring";
+import { ComposePaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-compose-monitoring";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
@@ -31,8 +32,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
+import copy from "copy-to-clipboard";
 import { CircuitBoard, ServerOff } from "lucide-react";
 import { HelpCircle } from "lucide-react";
 import type {
@@ -42,7 +44,8 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, useEffect, type ReactElement } from "react";
+import { type ReactElement, useEffect, useState } from "react";
+import { toast } from "sonner";
 import superjson from "superjson";
 
 type TabState =
@@ -56,6 +59,7 @@ type TabState =
 const Service = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { composeId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
@@ -74,15 +78,8 @@ const Service = (
 		},
 	);
 
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: auth } = api.user.get.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	return (
 		<div className="pb-10">
@@ -131,6 +128,13 @@ const Service = (
 								<div className="flex flex-col h-fit w-fit gap-2">
 									<div className="flex flex-row h-fit w-fit gap-2">
 										<Badge
+											className="cursor-pointer"
+											onClick={() => {
+												if (data?.server?.ipAddress) {
+													copy(data.server.ipAddress);
+													toast.success("IP Address Copied!");
+												}
+											}}
 											variant={
 												!data?.serverId
 													? "default"
@@ -142,7 +146,7 @@ const Service = (
 											{data?.server?.name || "Dokploy Server"}
 										</Badge>
 										{data?.server?.serverStatus === "inactive" && (
-											<TooltipProvider delayDuration={0}>
+											<TooltipProvider>
 												<Tooltip>
 													<TooltipTrigger asChild>
 														<Label className="break-all w-fit flex flex-row gap-1 items-center">
@@ -167,8 +171,8 @@ const Service = (
 									<div className="flex flex-row gap-2 justify-end">
 										<UpdateCompose composeId={composeId} />
 
-										{(auth?.rol === "admin" || user?.canDeleteServices) && (
-											<DeleteCompose composeId={composeId} />
+										{(auth?.role === "owner" || auth?.canDeleteServices) && (
+											<DeleteService id={composeId} type="compose" />
 										)}
 									</div>
 								</div>
@@ -211,22 +215,16 @@ const Service = (
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												data?.serverId ? "md:grid-cols-6" : "md:grid-cols-7",
-												data?.composeType === "docker-compose"
-													? ""
-													: "md:grid-cols-6",
-												data?.serverId && data?.composeType === "stack"
-													? "md:grid-cols-5"
-													: "",
+												isCloud && data?.serverId
+													? "md:grid-cols-7"
+													: data?.serverId
+														? "md:grid-cols-6"
+														: "md:grid-cols-7",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
-											{data?.composeType === "docker-compose" && (
-												<TabsTrigger value="environment">
-													Environment
-												</TabsTrigger>
-											)}
-											{!data?.serverId && (
+											<TabsTrigger value="environment">Environment</TabsTrigger>
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="logs">Logs</TabsTrigger>
@@ -246,17 +244,59 @@ const Service = (
 											<ShowEnvironment id={composeId} type="compose" />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<ShowMonitoringCompose
-													serverId={data?.serverId || ""}
-													appName={data?.appName || ""}
-													appType={data?.composeType || "docker-compose"}
-												/>
+
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col border rounded-lg ">
+												{data?.serverId && isCloud ? (
+													<ComposePaidMonitoring
+														serverId={data?.serverId || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														appName={data?.appName || ""}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+														appType={data?.composeType || "docker-compose"}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures &&
+															isCloud &&
+															data?.serverId && (
+																<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2 m-4">
+																	<Label className="text-muted-foreground">
+																		Change Monitoring
+																	</Label>
+																	<Switch
+																		checked={toggleMonitoring}
+																		onCheckedChange={setToggleMonitoring}
+																	/>
+																</div>
+															)}
+
+														{toggleMonitoring ? (
+															<ComposePaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+																appType={data?.composeType || "docker-compose"}
+															/>
+														) : ( */}
+														{/* <div> */}
+														<ComposeFreeMonitoring
+															serverId={data?.serverId || ""}
+															appName={data?.appName || ""}
+															appType={data?.composeType || "docker-compose"}
+														/>
+														{/* </div> */}
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4 pt-2.5">
@@ -316,7 +356,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 
 	const activeTab = query.tab;
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -332,8 +372,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -344,7 +384,7 @@ export async function getServerSideProps(
 			await helpers.compose.one.fetch({
 				composeId: params?.composeId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -352,7 +392,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/mariadb/[mariadbId].tsx

@@ -2,20 +2,20 @@ import { ShowResources } from "@/components/dashboard/application/advanced/show-
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
 import { ShowExternalMariadbCredentials } from "@/components/dashboard/mariadb/general/show-external-mariadb-credentials";
 import { ShowGeneralMariadb } from "@/components/dashboard/mariadb/general/show-general-mariadb";
 import { ShowInternalMariadbCredentials } from "@/components/dashboard/mariadb/general/show-internal-mariadb-credentials";
 import { UpdateMariadb } from "@/components/dashboard/mariadb/update-mariadb";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { MariadbIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -34,9 +34,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -44,8 +44,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
-import { toast } from "sonner";
+import { type ReactElement, useState } from "react";
 import superjson from "superjson";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
@@ -53,22 +52,17 @@ type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 const Mariadb = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
+
 	const { mariadbId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mariadb.one.useQuery({ mariadbId });
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
-	const { mutateAsync: remove, isLoading: isRemoving } =
-		api.mariadb.remove.useMutation();
+	const { data: auth } = api.user.get.useQuery();
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
 	return (
 		<div className="pb-10">
 			<BreadcrumbSidebar
@@ -148,35 +142,10 @@ const Mariadb = (
 										</TooltipProvider>
 									)}
 								</div>
-								<div className="flex flex-row gap-2">
+								<div className="flex flex-row gap-2 justify-end">
 									<UpdateMariadb mariadbId={mariadbId} />
-									{(auth?.rol === "admin" || user?.canDeleteServices) && (
-										<DialogAction
-											title="Remove Mariadb"
-											description="Are you sure you want to delete this mariadb?"
-											type="destructive"
-											onClick={async () => {
-												await remove({ mariadbId })
-													.then(() => {
-														router.push(
-															`/dashboard/project/${data?.projectId}`,
-														);
-														toast.success("Mariadb deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting the mariadb");
-													});
-											}}
-										>
-											<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>
+									{(auth?.role === "owner" || auth?.canDeleteServices) && (
+										<DeleteService id={mariadbId} type="mariadb" />
 									)}
 								</div>
 							</div>
@@ -219,12 +188,16 @@ const Mariadb = (
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
+												isCloud && data?.serverId
+													? "md:grid-cols-6"
+													: data?.serverId
+														? "md:grid-cols-5"
+														: "md:grid-cols-6",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{!data?.serverId && (
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
@@ -245,13 +218,51 @@ const Mariadb = (
 											<ShowEnvironment id={mariadbId} type="mariadb" />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<DockerMonitoring appName={data?.appName || ""} />
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg p-6">
+												{data?.serverId && isCloud ? (
+													<ContainerPaidMonitoring
+														appName={data?.appName || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={toggleMonitoring}
+																	onCheckedChange={setToggleMonitoring}
+																/>
+															</div>
+														)}
+
+														{toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : (
+															<div> */}
+														<ContainerFreeMonitoring
+															appName={data?.appName || ""}
+														/>
+														{/* </div> */}
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4  pt-2.5">
 											<ShowDockerLogs
@@ -295,7 +306,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 	const activeTab = query.tab;
 
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -311,8 +322,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -322,7 +333,7 @@ export async function getServerSideProps(
 			await helpers.mariadb.one.fetch({
 				mariadbId: params?.mariadbId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -330,7 +341,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/mongo/[mongoId].tsx

@@ -2,21 +2,20 @@ import { ShowResources } from "@/components/dashboard/application/advanced/show-
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
 import { ShowExternalMongoCredentials } from "@/components/dashboard/mongo/general/show-external-mongo-credentials";
 import { ShowGeneralMongo } from "@/components/dashboard/mongo/general/show-general-mongo";
 import { ShowInternalMongoCredentials } from "@/components/dashboard/mongo/general/show-internal-mongo-credentials";
 import { UpdateMongo } from "@/components/dashboard/mongo/update-mongo";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { MongodbIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -35,9 +34,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -45,8 +44,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
-import { toast } from "sonner";
+import { type ReactElement, useState } from "react";
 import superjson from "superjson";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
@@ -54,23 +52,16 @@ type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 const Mongo = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { mongoId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mongo.one.useQuery({ mongoId });
 
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
-	const { mutateAsync: remove, isLoading: isRemoving } =
-		api.mongo.remove.useMutation();
+	const { data: auth } = api.user.get.useQuery();
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	return (
 		<div className="pb-10">
@@ -154,33 +145,8 @@ const Mongo = (
 
 								<div className="flex flex-row gap-2 justify-end">
 									<UpdateMongo mongoId={mongoId} />
-									{(auth?.rol === "admin" || user?.canDeleteServices) && (
-										<DialogAction
-											title="Remove mongo"
-											description="Are you sure you want to delete this mongo?"
-											type="destructive"
-											onClick={async () => {
-												await remove({ mongoId })
-													.then(() => {
-														router.push(
-															`/dashboard/project/${data?.projectId}`,
-														);
-														toast.success("Mongo deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting the mongo");
-													});
-											}}
-										>
-											<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>
+									{(auth?.role === "owner" || auth?.canDeleteServices) && (
+										<DeleteService id={mongoId} type="mongo" />
 									)}
 								</div>
 							</div>
@@ -223,12 +189,16 @@ const Mongo = (
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
+												isCloud && data?.serverId
+													? "md:grid-cols-6"
+													: data?.serverId
+														? "md:grid-cols-5"
+														: "md:grid-cols-6",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{!data?.serverId && (
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
@@ -249,13 +219,51 @@ const Mongo = (
 											<ShowEnvironment id={mongoId} type="mongo" />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<DockerMonitoring appName={data?.appName || ""} />
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg p-6">
+												{data?.serverId && isCloud ? (
+													<ContainerPaidMonitoring
+														appName={data?.appName || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={toggleMonitoring}
+																	onCheckedChange={setToggleMonitoring}
+																/>
+															</div>
+														)}
+
+														{toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : (
+															<div> */}
+														<ContainerFreeMonitoring
+															appName={data?.appName || ""}
+														/>
+														{/* </div> */}
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4  pt-2.5">
 											<ShowDockerLogs
@@ -299,7 +307,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 	const activeTab = query.tab;
 
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -315,8 +323,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -326,7 +334,7 @@ export async function getServerSideProps(
 			await helpers.mongo.one.fetch({
 				mongoId: params?.mongoId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -334,7 +342,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/mysql/[mysqlId].tsx

@@ -2,8 +2,10 @@ import { ShowResources } from "@/components/dashboard/application/advanced/show-
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ShowExternalMysqlCredentials } from "@/components/dashboard/mysql/general/show-external-mysql-credentials";
 import { ShowGeneralMysql } from "@/components/dashboard/mysql/general/show-general-mysql";
 import { ShowInternalMysqlCredentials } from "@/components/dashboard/mysql/general/show-internal-mysql-credentials";
@@ -12,10 +14,8 @@ import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show
 import { MysqlIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -34,9 +34,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -44,8 +44,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
-import { toast } from "sonner";
+import { type ReactElement, useState } from "react";
 import superjson from "superjson";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
@@ -53,23 +52,16 @@ type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 const MySql = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { mysqlId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mysql.one.useQuery({ mysqlId });
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: auth } = api.user.get.useQuery();
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
-	const { mutateAsync: remove, isLoading: isRemoving } =
-		api.mysql.remove.useMutation();
 	return (
 		<div className="pb-10">
 			<BreadcrumbSidebar
@@ -153,33 +145,8 @@ const MySql = (
 
 									<div className="flex flex-row gap-2 justify-end">
 										<UpdateMysql mysqlId={mysqlId} />
-										{(auth?.rol === "admin" || user?.canDeleteServices) && (
-											<DialogAction
-												title="Remove Mysql"
-												description="Are you sure you want to delete this mysql?"
-												type="destructive"
-												onClick={async () => {
-													await remove({ mysqlId })
-														.then(() => {
-															router.push(
-																`/dashboard/project/${data?.projectId}`,
-															);
-															toast.success("Mysql deleted successfully");
-														})
-														.catch(() => {
-															toast.error("Error deleting the mysql");
-														});
-												}}
-											>
-												<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>
+										{(auth?.role === "owner" || auth?.canDeleteServices) && (
+											<DeleteService id={mysqlId} type="mysql" />
 										)}
 									</div>
 								</div>
@@ -221,15 +188,19 @@ const MySql = (
 										<div className="flex flex-row items-center justify-between  w-full gap-4">
 											<TabsList
 												className={cn(
-													"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-													data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
+													"md:grid md:w-fit max-md:overflow-y-scroll justify-start ",
+													isCloud && data?.serverId
+														? "md:grid-cols-6"
+														: data?.serverId
+															? "md:grid-cols-5"
+															: "md:grid-cols-6",
 												)}
 											>
 												<TabsTrigger value="general">General</TabsTrigger>
 												<TabsTrigger value="environment">
 													Environment
 												</TabsTrigger>
-												{!data?.serverId && (
+												{((data?.serverId && isCloud) || !data?.server) && (
 													<TabsTrigger value="monitoring">
 														Monitoring
 													</TabsTrigger>
@@ -252,13 +223,51 @@ const MySql = (
 												<ShowEnvironment id={mysqlId} type="mysql" />
 											</div>
 										</TabsContent>
-										{!data?.serverId && (
-											<TabsContent value="monitoring">
-												<div className="flex flex-col gap-4 pt-2.5">
-													<DockerMonitoring appName={data?.appName || ""} />
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={toggleMonitoring}
+																	onCheckedChange={setToggleMonitoring}
+																/>
+															</div>
+														)}
+
+														{toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : (
+															<div> */}
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+															{/* </div> */}
+															{/* )} */}
+														</>
+													)}
 												</div>
-											</TabsContent>
-										)}
+											</div>
+										</TabsContent>
 										<TabsContent value="logs">
 											<div className="flex flex-col gap-4  pt-2.5">
 												<ShowDockerLogs
@@ -303,7 +312,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 	const activeTab = query.tab;
 
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -319,8 +328,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -330,7 +339,7 @@ export async function getServerSideProps(
 			await helpers.mysql.one.fetch({
 				mysqlId: params?.mysqlId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -338,7 +347,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/postgres/[postgresId].tsx

@@ -2,8 +2,10 @@ import { ShowResources } from "@/components/dashboard/application/advanced/show-
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
 import { ShowBackups } from "@/components/dashboard/database/backups/show-backups";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowExternalPostgresCredentials } from "@/components/dashboard/postgres/general/show-external-postgres-credentials";
 import { ShowGeneralPostgres } from "@/components/dashboard/postgres/general/show-general-postgres";
@@ -12,11 +14,8 @@ import { UpdatePostgres } from "@/components/dashboard/postgres/update-postgres"
 import { PostgresqlIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -35,9 +34,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -45,8 +44,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
-import { toast } from "sonner";
+import { type ReactElement, useState } from "react";
 import superjson from "superjson";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
@@ -54,24 +52,15 @@ type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 const Postgresql = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { postgresId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.postgres.one.useQuery({ postgresId });
-	const { data: auth } = api.auth.get.useQuery();
+	const { data: auth } = api.user.get.useQuery();
 
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
-
-	const { mutateAsync: remove, isLoading: isRemoving } =
-		api.postgres.remove.useMutation();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	return (
 		<div className="pb-10">
@@ -155,33 +144,8 @@ const Postgresql = (
 
 								<div className="flex flex-row gap-2 justify-end">
 									<UpdatePostgres postgresId={postgresId} />
-									{(auth?.rol === "admin" || user?.canDeleteServices) && (
-										<DialogAction
-											title="Remove Postgres"
-											description="Are you sure you want to delete this postgres?"
-											type="destructive"
-											onClick={async () => {
-												await remove({ postgresId })
-													.then(() => {
-														router.push(
-															`/dashboard/project/${data?.projectId}`,
-														);
-														toast.success("Postgres deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting the postgres");
-													});
-											}}
-										>
-											<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>
+									{(auth?.role === "owner" || auth?.canDeleteServices) && (
+										<DeleteService id={postgresId} type="postgres" />
 									)}
 								</div>
 							</div>
@@ -224,12 +188,16 @@ const Postgresql = (
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												data?.serverId ? "md:grid-cols-5" : "md:grid-cols-6",
+												isCloud && data?.serverId
+													? "md:grid-cols-6"
+													: data?.serverId
+														? "md:grid-cols-5"
+														: "md:grid-cols-6",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{!data?.serverId && (
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
@@ -254,13 +222,51 @@ const Postgresql = (
 											<ShowEnvironment id={postgresId} type="postgres" />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<DockerMonitoring appName={data?.appName || ""} />
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg p-6">
+												{data?.serverId && isCloud ? (
+													<ContainerPaidMonitoring
+														appName={data?.appName || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={toggleMonitoring}
+																	onCheckedChange={setToggleMonitoring}
+																/>
+															</div>
+														)}
+
+														{toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : (
+															<div> */}
+														<ContainerFreeMonitoring
+															appName={data?.appName || ""}
+														/>
+														{/* </div> */}
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4  pt-2.5">
 											<ShowDockerLogs
@@ -303,7 +309,7 @@ export async function getServerSideProps(
 ) {
 	const { query, params, req, res } = ctx;
 	const activeTab = query.tab;
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -319,8 +325,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -330,7 +336,7 @@ export async function getServerSideProps(
 			await helpers.postgres.one.fetch({
 				postgresId: params?.postgresId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -338,7 +344,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/project/[projectId]/services/redis/[redisId].tsx

@@ -2,7 +2,9 @@ import { ShowResources } from "@/components/dashboard/application/advanced/show-
 import { ShowVolumes } from "@/components/dashboard/application/advanced/volumes/show-volumes";
 import { ShowEnvironment } from "@/components/dashboard/application/environment/show-enviroment";
 import { ShowDockerLogs } from "@/components/dashboard/application/logs/show";
-import { DockerMonitoring } from "@/components/dashboard/monitoring/docker/show";
+import { DeleteService } from "@/components/dashboard/compose/delete-service";
+import { ContainerFreeMonitoring } from "@/components/dashboard/monitoring/free/container/show-free-container-monitoring";
+import { ContainerPaidMonitoring } from "@/components/dashboard/monitoring/paid/container/show-paid-container-monitoring";
 import { ShowCustomCommand } from "@/components/dashboard/postgres/advanced/show-custom-command";
 import { ShowExternalRedisCredentials } from "@/components/dashboard/redis/general/show-external-redis-credentials";
 import { ShowGeneralRedis } from "@/components/dashboard/redis/general/show-general-redis";
@@ -11,10 +13,8 @@ import { UpdateRedis } from "@/components/dashboard/redis/update-redis";
 import { RedisIcon } from "@/components/icons/data-tools-icons";
 import { ProjectLayout } from "@/components/layouts/project-layout";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
-import { DialogAction } from "@/components/shared/dialog-action";
 import { StatusTooltip } from "@/components/shared/status-tooltip";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -33,9 +33,9 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
-import { HelpCircle, ServerOff, Trash2 } from "lucide-react";
+import { HelpCircle, ServerOff } from "lucide-react";
 import type {
 	GetServerSidePropsContext,
 	InferGetServerSidePropsType,
@@ -43,8 +43,7 @@ import type {
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useState, type ReactElement } from "react";
-import { toast } from "sonner";
+import { type ReactElement, useState } from "react";
 import superjson from "superjson";
 
 type TabState = "projects" | "monitoring" | "settings" | "advanced";
@@ -52,24 +51,17 @@ type TabState = "projects" | "monitoring" | "settings" | "advanced";
 const Redis = (
 	props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) => {
+	const [_toggleMonitoring, _setToggleMonitoring] = useState(false);
 	const { redisId, activeTab } = props;
 	const router = useRouter();
 	const { projectId } = router.query;
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.redis.one.useQuery({ redisId });
 
-	const { data: auth } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: auth?.id || "",
-		},
-		{
-			enabled: !!auth?.id && auth?.rol === "user",
-		},
-	);
+	const { data: auth } = api.user.get.useQuery();
+
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 
-	const { mutateAsync: remove, isLoading: isRemoving } =
-		api.redis.remove.useMutation();
 	return (
 		<div className="pb-10">
 			<BreadcrumbSidebar
@@ -152,33 +144,8 @@ const Redis = (
 
 								<div className="flex flex-row gap-2 justify-end">
 									<UpdateRedis redisId={redisId} />
-									{(auth?.rol === "admin" || user?.canDeleteServices) && (
-										<DialogAction
-											title="Remove Redis"
-											description="Are you sure you want to delete this redis?"
-											type="destructive"
-											onClick={async () => {
-												await remove({ redisId })
-													.then(() => {
-														router.push(
-															`/dashboard/project/${data?.projectId}`,
-														);
-														toast.success("Redis deleted successfully");
-													})
-													.catch(() => {
-														toast.error("Error deleting the redis");
-													});
-											}}
-										>
-											<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>
+									{(auth?.role === "owner" || auth?.canDeleteServices) && (
+										<DeleteService id={redisId} type="redis" />
 									)}
 								</div>
 							</div>
@@ -221,12 +188,16 @@ const Redis = (
 										<TabsList
 											className={cn(
 												"md:grid md:w-fit max-md:overflow-y-scroll justify-start",
-												data?.serverId ? "md:grid-cols-4" : "md:grid-cols-5",
+												isCloud && data?.serverId
+													? "md:grid-cols-5"
+													: data?.serverId
+														? "md:grid-cols-4"
+														: "md:grid-cols-5",
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
 											<TabsTrigger value="environment">Environment</TabsTrigger>
-											{!data?.serverId && (
+											{((data?.serverId && isCloud) || !data?.server) && (
 												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
 											)}
 											<TabsTrigger value="logs">Logs</TabsTrigger>
@@ -246,13 +217,51 @@ const Redis = (
 											<ShowEnvironment id={redisId} type="redis" />
 										</div>
 									</TabsContent>
-									{!data?.serverId && (
-										<TabsContent value="monitoring">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<DockerMonitoring appName={data?.appName || ""} />
+									<TabsContent value="monitoring">
+										<div className="pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg p-6">
+												{data?.serverId && isCloud ? (
+													<ContainerPaidMonitoring
+														appName={data?.appName || ""}
+														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+														token={
+															data?.server?.metricsConfig?.server?.token || ""
+														}
+													/>
+												) : (
+													<>
+														{/* {monitoring?.enabledFeatures && (
+															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
+																<Label className="text-muted-foreground">
+																	Change Monitoring
+																</Label>
+																<Switch
+																	checked={toggleMonitoring}
+																	onCheckedChange={setToggleMonitoring}
+																/>
+															</div>
+														)}
+
+														{toggleMonitoring ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
+																token={
+																	monitoring?.metricsConfig?.server?.token || ""
+																}
+															/>
+														) : (
+															<div> */}
+														<ContainerFreeMonitoring
+															appName={data?.appName || ""}
+														/>
+														{/* </div> */}
+														{/* )} */}
+													</>
+												)}
 											</div>
-										</TabsContent>
-									)}
+										</div>
+									</TabsContent>
 									<TabsContent value="logs">
 										<div className="flex flex-col gap-4  pt-2.5">
 											<ShowDockerLogs
@@ -291,7 +300,7 @@ export async function getServerSideProps(
 	const { query, params, req, res } = ctx;
 	const activeTab = query.tab;
 
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -307,8 +316,8 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
@@ -317,7 +326,7 @@ export async function getServerSideProps(
 			await helpers.redis.one.fetch({
 				redisId: params?.redisId,
 			});
-
+			await helpers.settings.isCloud.prefetch();
 			return {
 				props: {
 					trpcState: helpers.dehydrate(),
@@ -325,7 +334,7 @@ export async function getServerSideProps(
 					activeTab: (activeTab || "general") as TabState,
 				},
 			};
-		} catch (error) {
+		} catch (_error) {
 			return {
 				redirect: {
 					permanent: false,

apps/dokploy/pages/dashboard/projects.tsx

@@ -2,11 +2,10 @@ import { ShowProjects } from "@/components/dashboard/projects/show";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
-import { validateRequest } from "@dokploy/server";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
 import dynamic from "next/dynamic";
-import type React from "react";
 import type { ReactElement } from "react";
 import superjson from "superjson";
 
@@ -38,7 +37,7 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 
 	const helpers = createServerSideHelpers({
 		router: appRouter,
@@ -46,14 +45,14 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 
 	await helpers.settings.isCloud.prefetch();
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	if (!user) {
 		return {
 			redirect: {

apps/dokploy/pages/dashboard/requests.tsx

@@ -1,9 +1,9 @@
 import { ShowRequests } from "@/components/dashboard/requests/show-requests";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import type { GetServerSidePropsContext } from "next";
 import type { ReactElement } from "react";
-import * as React from "react";
 
 export default function Requests() {
 	return <ShowRequests />;
@@ -22,7 +22,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user } = await validateRequest(ctx.req, ctx.res);
+	const { user } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {

apps/dokploy/pages/dashboard/settings/billing.tsx

@@ -2,10 +2,11 @@ import { ShowBilling } from "@/components/dashboard/settings/billing/show-billin
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 
 import { appRouter } from "@/server/api/root";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -29,8 +30,8 @@ export async function getServerSideProps(
 		};
 	}
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -45,13 +46,13 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 
 	await helpers.settings.isCloud.prefetch();
 

apps/dokploy/pages/dashboard/settings/certificates.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 const Page = () => {
 	return (
@@ -24,8 +24,8 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -40,12 +40,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/settings/cluster.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -33,8 +33,8 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(ctx.req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -48,12 +48,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 
 	return {
 		props: {

apps/dokploy/pages/dashboard/settings/destinations.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -25,8 +25,8 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -41,12 +41,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/settings/git-providers.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -24,7 +24,7 @@ Page.getLayout = (page: ReactElement) => {
 export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -40,23 +40,21 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	try {
 		await helpers.project.all.prefetch();
 		await helpers.settings.isCloud.prefetch();
-		const auth = await helpers.auth.get.fetch();
-
-		if (auth.rol === "user") {
-			const user = await helpers.user.byAuthId.fetch({
-				authId: auth.id,
+		if (user.role === "member") {
+			const userR = await helpers.user.one.fetch({
+				userId: user.id,
 			});
 
-			if (!user.canAccessToGitProviders) {
+			if (!userR?.canAccessToGitProviders) {
 				return {
 					redirect: {
 						permanent: true,
@@ -70,7 +68,7 @@ export async function getServerSideProps(
 				trpcState: helpers.dehydrate(),
 			},
 		};
-	} catch (error) {
+	} catch (_error) {
 		return {
 			props: {},
 		};

apps/dokploy/pages/dashboard/settings/index.tsx

@@ -0,0 +1,219 @@
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { DialogFooter } from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+} from "@/components/ui/form";
+import { Switch } from "@/components/ui/switch";
+import { appRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+import { validateRequest } from "@dokploy/server";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import { Settings } from "lucide-react";
+import type { GetServerSidePropsContext } from "next";
+import { type ReactElement, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import superjson from "superjson";
+import { z } from "zod";
+
+const settings = z.object({
+	cleanCacheOnApplications: z.boolean(),
+	cleanCacheOnCompose: z.boolean(),
+	cleanCacheOnPreviews: z.boolean(),
+});
+
+type SettingsType = z.infer<typeof settings>;
+
+const Page = () => {
+	const { data, refetch } = api.user.get.useQuery();
+	const { mutateAsync, isLoading, isError, error } =
+		api.user.update.useMutation();
+	const form = useForm<SettingsType>({
+		defaultValues: {
+			cleanCacheOnApplications: false,
+			cleanCacheOnCompose: false,
+			cleanCacheOnPreviews: false,
+		},
+		resolver: zodResolver(settings),
+	});
+	useEffect(() => {
+		form.reset({
+			cleanCacheOnApplications: data?.user.cleanupCacheApplications || false,
+			cleanCacheOnCompose: data?.user.cleanupCacheOnCompose || false,
+			cleanCacheOnPreviews: data?.user.cleanupCacheOnPreviews || false,
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
+
+	const onSubmit = async (values: SettingsType) => {
+		await mutateAsync({
+			cleanupCacheApplications: values.cleanCacheOnApplications,
+			cleanupCacheOnCompose: values.cleanCacheOnCompose,
+			cleanupCacheOnPreviews: values.cleanCacheOnPreviews,
+		})
+			.then(() => {
+				toast.success("Settings updated");
+				refetch();
+			})
+			.catch(() => {
+				toast.error("Something went wrong");
+			});
+	};
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
+				<div className="rounded-xl bg-background shadow-md ">
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Settings className="size-6 text-muted-foreground self-center" />
+							Settings
+						</CardTitle>
+						<CardDescription>Manage your Dokploy settings</CardDescription>
+						{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						<Form {...form}>
+							<form
+								id="hook-form-add-security"
+								onSubmit={form.handleSubmit(onSubmit)}
+								className="grid w-full gap-2"
+							>
+								<FormField
+									control={form.control}
+									name="cleanCacheOnApplications"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Clean Cache on Applications</FormLabel>
+												<FormDescription>
+													Clean the cache after every application deployment
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="cleanCacheOnPreviews"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Clean Cache on Previews</FormLabel>
+												<FormDescription>
+													Clean the cache after every preview deployment
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="cleanCacheOnCompose"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between p-3 mt-4 border rounded-lg shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Clean Cache on Compose</FormLabel>
+												<FormDescription>
+													Clean the cache after every compose deployment
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isLoading}
+										form="hook-form-add-security"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</CardContent>
+				</div>
+			</Card>
+		</div>
+	);
+};
+
+export default Page;
+
+Page.getLayout = (page: ReactElement) => {
+	return <DashboardLayout metaName="Server">{page}</DashboardLayout>;
+};
+export async function getServerSideProps(
+	ctx: GetServerSidePropsContext<{ serviceId: string }>,
+) {
+	const { req, res } = ctx;
+	const { user, session } = await validateRequest(ctx.req);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	if (user.role === "member") {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/dashboard/settings/profile",
+			},
+		};
+	}
+
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session as any,
+			user: user as any,
+		},
+		transformer: superjson,
+	});
+	await helpers.user.get.prefetch();
+
+	return {
+		props: {
+			trpcState: helpers.dehydrate(),
+		},
+	};
+}

apps/dokploy/pages/dashboard/settings/notifications.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -25,8 +25,8 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -41,12 +41,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/settings/profile.tsx

@@ -1,6 +1,5 @@
-import { GenerateToken } from "@/components/dashboard/settings/profile/generate-token";
+import { ShowApiKeys } from "@/components/dashboard/settings/api/show-api-keys";
 import { ProfileForm } from "@/components/dashboard/settings/profile/profile-form";
-import { RemoveSelfAccount } from "@/components/dashboard/settings/profile/remove-self-account";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 
 import { appRouter } from "@/server/api/root";
@@ -9,28 +8,20 @@ import { getLocale, serverSideTranslations } from "@/utils/i18n";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
-	const { data } = api.auth.get.useQuery();
-	const { data: user } = api.user.byAuthId.useQuery(
-		{
-			authId: data?.id || "",
-		},
-		{
-			enabled: !!data?.id && data?.rol === "user",
-		},
-	);
+	const { data } = api.user.get.useQuery();
 
-	const { data: isCloud } = api.settings.isCloud.useQuery();
+	// const { data: isCloud } = api.settings.isCloud.useQuery();
 	return (
 		<div className="w-full">
 			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<ProfileForm />
-				{(user?.canAccessToAPI || data?.rol === "admin") && <GenerateToken />}
+				{(data?.canAccessToAPI || data?.role === "owner") && <ShowApiKeys />}
 
-				{isCloud && <RemoveSelfAccount />}
+				{/* {isCloud && <RemoveSelfAccount />} */}
 			</div>
 		</div>
 	);
@@ -46,7 +37,7 @@ export async function getServerSideProps(
 ) {
 	const { req, res } = ctx;
 	const locale = getLocale(req.cookies);
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 
 	const helpers = createServerSideHelpers({
 		router: appRouter,
@@ -54,19 +45,14 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 
 	await helpers.settings.isCloud.prefetch();
-	await helpers.auth.get.prefetch();
-	if (user?.rol === "user") {
-		await helpers.user.byAuthId.prefetch({
-			authId: user.authId,
-		});
-	}
+	await helpers.user.get.prefetch();
 
 	if (!user) {
 		return {

apps/dokploy/pages/dashboard/settings/registry.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -25,8 +25,8 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -40,12 +40,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/settings/server.tsx

@@ -1,13 +1,12 @@
 import { WebDomain } from "@/components/dashboard/settings/web-domain";
 import { WebServer } from "@/components/dashboard/settings/web-server";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
-
 import { appRouter } from "@/server/api/root";
 import { getLocale, serverSideTranslations } from "@/utils/i18n";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -16,6 +15,49 @@ const Page = () => {
 			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<WebDomain />
 				<WebServer />
+				{/* <Card className="h-full bg-sidebar  p-2.5 rounded-xl ">
+					<div className="rounded-xl bg-background shadow-md ">
+						<CardHeader className="">
+							<CardTitle className="text-xl flex flex-row gap-2">
+								<LayoutDashboardIcon className="size-6 text-muted-foreground self-center" />
+								Paid Features
+							</CardTitle>
+							<CardDescription>
+								Enable or disable paid features like monitoring
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<div className="flex flex-row gap-2 items-center">
+								<span className="text-sm font-medium text-muted-foreground">
+									Enable Paid Features:
+								</span>
+
+								<Switch
+									checked={data?.enablePaidFeatures}
+									onCheckedChange={() => {
+										update({
+											enablePaidFeatures: !data?.enablePaidFeatures,
+										})
+											.then(() => {
+												toast.success(
+													`Paid features ${
+														data?.enablePaidFeatures ? "disabled" : "enabled"
+													} successfully`,
+												);
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error updating paid features");
+											});
+									}}
+								/>
+							</div>
+						</CardContent>
+						{data?.enablePaidFeatures && <SetupMonitoring />}
+					</div>
+				</Card> */}
+
+				{/* */}
 			</div>
 		</div>
 	);
@@ -39,7 +81,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -48,7 +90,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	if (user.rol === "user") {
+	if (user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -63,12 +105,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 
 	return {
 		props: {

apps/dokploy/pages/dashboard/settings/servers.tsx

@@ -6,7 +6,7 @@ import { getLocale, serverSideTranslations } from "@/utils/i18n";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -27,7 +27,7 @@ export async function getServerSideProps(
 ) {
 	const { req, res } = ctx;
 	const locale = await getLocale(req.cookies);
-	const { user, session } = await validateRequest(req, res);
+	const { user, session } = await validateRequest(req);
 	if (!user) {
 		return {
 			redirect: {
@@ -36,7 +36,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	if (user.rol === "user") {
+	if (user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -51,12 +51,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/settings/ssh-keys.tsx

@@ -5,7 +5,7 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
@@ -24,7 +24,7 @@ Page.getLayout = (page: ReactElement) => {
 export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -33,30 +33,29 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { req, res, resolvedUrl } = ctx;
+	const { req, res } = ctx;
 	const helpers = createServerSideHelpers({
 		router: appRouter,
 		ctx: {
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 
 	try {
 		await helpers.project.all.prefetch();
-		const auth = await helpers.auth.get.fetch();
 		await helpers.settings.isCloud.prefetch();
 
-		if (auth.rol === "user") {
-			const user = await helpers.user.byAuthId.fetch({
-				authId: auth.id,
+		if (user.role === "member") {
+			const userR = await helpers.user.one.fetch({
+				userId: user.id,
 			});
 
-			if (!user.canAccessToSSHKeys) {
+			if (!userR?.canAccessToSSHKeys) {
 				return {
 					redirect: {
 						permanent: true,
@@ -70,7 +69,7 @@ export async function getServerSideProps(
 				trpcState: helpers.dehydrate(),
 			},
 		};
-	} catch (error) {
+	} catch (_error) {
 		return {
 			props: {},
 		};

apps/dokploy/pages/dashboard/settings/users.tsx

@@ -1,3 +1,4 @@
+import { ShowInvitations } from "@/components/dashboard/settings/users/show-invitations";
 import { ShowUsers } from "@/components/dashboard/settings/users/show-users";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 
@@ -5,13 +6,14 @@ import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Page = () => {
 	return (
 		<div className="flex flex-col gap-4 w-full">
 			<ShowUsers />
+			<ShowInvitations />
 		</div>
 	);
 };
@@ -25,8 +27,9 @@ export async function getServerSideProps(
 	ctx: GetServerSidePropsContext<{ serviceId: string }>,
 ) {
 	const { req, res } = ctx;
-	const { user, session } = await validateRequest(req, res);
-	if (!user || user.rol === "user") {
+	const { user, session } = await validateRequest(req);
+
+	if (!user || user.role === "member") {
 		return {
 			redirect: {
 				permanent: true,
@@ -41,12 +44,12 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
-	await helpers.auth.get.prefetch();
+	await helpers.user.get.prefetch();
 	await helpers.settings.isCloud.prefetch();
 
 	return {

apps/dokploy/pages/dashboard/swarm.tsx

@@ -1,18 +1,15 @@
 import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
 import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Dashboard = () => {
-	return (
-		<>
-			<SwarmMonitorCard />
-		</>
-	);
+	return <SwarmMonitorCard />;
 };
 
 export default Dashboard;
@@ -31,7 +28,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -48,21 +45,20 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 	try {
 		await helpers.project.all.prefetch();
-		const auth = await helpers.auth.get.fetch();
 
-		if (auth.rol === "user") {
-			const user = await helpers.user.byAuthId.fetch({
-				authId: auth.id,
+		if (user.role === "member") {
+			const userR = await helpers.user.one.fetch({
+				userId: user.id,
 			});
 
-			if (!user.canAccessToDocker) {
+			if (!userR?.canAccessToDocker) {
 				return {
 					redirect: {
 						permanent: true,
@@ -76,7 +72,7 @@ export async function getServerSideProps(
 				trpcState: helpers.dehydrate(),
 			},
 		};
-	} catch (error) {
+	} catch (_error) {
 		return {
 			props: {},
 		};

apps/dokploy/pages/dashboard/traefik.tsx

@@ -1,10 +1,11 @@
 import { ShowTraefikSystem } from "@/components/dashboard/file-system/show-traefik-system";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
-import { IS_CLOUD, validateRequest } from "@dokploy/server";
+import { IS_CLOUD } from "@dokploy/server/constants";
+import { validateRequest } from "@dokploy/server/lib/auth";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Dashboard = () => {
@@ -27,7 +28,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user, session } = await validateRequest(ctx.req, ctx.res);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -44,21 +45,20 @@ export async function getServerSideProps(
 			req: req as any,
 			res: res as any,
 			db: null as any,
-			session: session,
-			user: user,
+			session: session as any,
+			user: user as any,
 		},
 		transformer: superjson,
 	});
 	try {
 		await helpers.project.all.prefetch();
-		const auth = await helpers.auth.get.fetch();
 
-		if (auth.rol === "user") {
-			const user = await helpers.user.byAuthId.fetch({
-				authId: auth.id,
+		if (user.role === "member") {
+			const userR = await helpers.user.one.fetch({
+				userId: user.id,
 			});
 
-			if (!user.canAccessToTraefikFiles) {
+			if (!userR?.canAccessToTraefikFiles) {
 				return {
 					redirect: {
 						permanent: true,
@@ -72,7 +72,7 @@ export async function getServerSideProps(
 				trpcState: helpers.dehydrate(),
 			},
 		};
-	} catch (error) {
+	} catch (_error) {
 		return {
 			props: {},
 		};