Merge branch 'canary' into feat/quick-service-switcher

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

@@ -15,13 +15,17 @@ interface Props {
 }
 
 export const ShowTraefikConfig = ({ applicationId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canRead = permissions?.traefikFiles.read ?? false;
 	const { data, isPending } = api.application.readTraefikConfig.useQuery(
 		{
 			applicationId,
 		},
-		{ enabled: !!applicationId },
+		{ enabled: !!applicationId && canRead },
 	);
 
+	if (!canRead) return null;
+
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between">

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

@@ -60,6 +60,8 @@ export const validateAndFormatYAML = (yamlText: string) => {
 };
 
 export const UpdateTraefikConfig = ({ applicationId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canWrite = permissions?.traefikFiles.write ?? false;
 	const [open, setOpen] = useState(false);
 	const [skipYamlValidation, setSkipYamlValidation] = useState(false);
 	const { data, refetch } = api.application.readTraefikConfig.useQuery(
@@ -125,9 +127,11 @@ export const UpdateTraefikConfig = ({ applicationId }: Props) => {
 				}
 			}}
 		>
-			<DialogTrigger asChild>
-				<Button isLoading={isPending}>Modify</Button>
-			</DialogTrigger>
+			{canWrite && (
+				<DialogTrigger asChild>
+					<Button isLoading={isPending}>Modify</Button>
+				</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-4xl">
 				<DialogHeader>
 					<DialogTitle>Update traefik config</DialogTitle>

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

@@ -21,6 +21,13 @@ interface Props {
 }
 
 export const ShowVolumes = ({ id, type }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canRead = permissions?.volume.read ?? false;
+	const canCreate = permissions?.volume.create ?? false;
+	const canDelete = permissions?.volume.delete ?? false;
+
+	if (!canRead) return null;
+
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -50,7 +57,7 @@ export const ShowVolumes = ({ id, type }: Props) => {
 					</CardDescription>
 				</div>
 
-				{data && data?.mounts.length > 0 && (
+				{canCreate && data && data?.mounts.length > 0 && (
 					<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
 						Add Volume
 					</AddVolumes>
@@ -63,9 +70,11 @@ export const ShowVolumes = ({ id, type }: Props) => {
 						<span className="text-base text-muted-foreground">
 							No volumes/mounts configured
 						</span>
-						<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
-							Add Volume
-						</AddVolumes>
+						{canCreate && (
+							<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
+								Add Volume
+							</AddVolumes>
+						)}
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
@@ -130,38 +139,42 @@ export const ShowVolumes = ({ id, type }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-1">
-											<UpdateVolume
-												mountId={mount.mountId}
-												type={mount.type}
-												refetch={refetch}
-												serviceType={type}
-											/>
-											<DialogAction
-												title="Delete Volume"
-												description="Are you sure you want to delete this volume?"
-												type="destructive"
-												onClick={async () => {
-													await deleteVolume({
-														mountId: mount.mountId,
-													})
-														.then(() => {
-															refetch();
-															toast.success("Volume deleted successfully");
+											{canCreate && (
+												<UpdateVolume
+													mountId={mount.mountId}
+													type={mount.type}
+													refetch={refetch}
+													serviceType={type}
+												/>
+											)}
+											{canDelete && (
+												<DialogAction
+													title="Delete Volume"
+													description="Are you sure you want to delete this volume?"
+													type="destructive"
+													onClick={async () => {
+														await deleteVolume({
+															mountId: mount.mountId,
 														})
-														.catch(() => {
-															toast.error("Error deleting volume");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
+															.then(() => {
+																refetch();
+																toast.success("Volume deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting volume");
+															});
+													}}
 												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-												</Button>
-											</DialogAction>
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-red-500/10"
+														isLoading={isRemoving}
+													>
+														<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													</Button>
+												</DialogAction>
+											)}
 										</div>
 									</div>
 								</div>

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

@@ -2,6 +2,7 @@ import {
 	ChevronDown,
 	ChevronUp,
 	Clock,
+	Copy,
 	Loader2,
 	RefreshCcw,
 	RocketIcon,
@@ -10,6 +11,7 @@ import {
 } from "lucide-react";
 import React, { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
+import copy from "copy-to-clipboard";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { DialogAction } from "@/components/shared/dialog-action";
@@ -97,6 +99,12 @@ export const ShowDeployments = ({
 		new Set(),
 	);
 
+	const webhookUrl = useMemo(
+		() =>
+			`${url}/api/deploy${type === "compose" ? "/compose" : ""}/${refreshToken}`,
+		[url, refreshToken, type],
+	);
+
 	const MAX_DESCRIPTION_LENGTH = 200;
 
 	const truncateDescription = (description: string): string => {
@@ -224,11 +232,27 @@ export const ShowDeployments = ({
 						<div className="flex flex-row items-center gap-2 flex-wrap">
 							<span>Webhook URL: </span>
 							<div className="flex flex-row items-center gap-2">
-								<span className="break-all text-muted-foreground">
-									{`${url}/api/deploy${
-										type === "compose" ? "/compose" : ""
-									}/${refreshToken}`}
-								</span>
+								<Badge
+									role="button"
+									tabIndex={0}
+									aria-label="Copy webhook URL to clipboard"
+									className="p-2 rounded-md ml-1 mr-1 hover:border-primary hover:text-primary-foreground hover:bg-primary hover:cursor-pointer whitespace-normal break-all"
+									variant="outline"
+									onKeyDown={(event) => {
+										if (event.key === "Enter" || event.key === " ") {
+											event.preventDefault();
+											copy(webhookUrl);
+											toast.success("Copied to clipboard.");
+										}
+									}}
+									onClick={() => {
+										copy(webhookUrl);
+										toast.success("Copied to clipboard.");
+									}}
+								>
+									{webhookUrl}
+									<Copy className="h-4 w-4 ml-2" />
+								</Badge>
 								{(type === "application" || type === "compose") && (
 									<RefreshToken id={id} type={type} />
 								)}

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

@@ -50,6 +50,9 @@ interface Props {
 }
 
 export const ShowDomains = ({ id, type }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canCreateDomain = permissions?.domain.create ?? false;
+	const canDeleteDomain = permissions?.domain.delete ?? false;
 	const { data: application } =
 		type === "application"
 			? api.application.one.useQuery(
@@ -149,7 +152,7 @@ export const ShowDomains = ({ id, type }: Props) => {
 					</div>
 
 					<div className="flex flex-row gap-4 flex-wrap">
-						{data && data?.length > 0 && (
+						{canCreateDomain && data && data?.length > 0 && (
 							<AddDomain id={id} type={type}>
 								<Button>
 									<GlobeIcon className="size-4" /> Add Domain
@@ -173,13 +176,15 @@ export const ShowDomains = ({ id, type }: Props) => {
 								To access the application it is required to set at least 1
 								domain
 							</span>
-							<div className="flex flex-row gap-4 flex-wrap">
-								<AddDomain id={id} type={type}>
-									<Button>
-										<GlobeIcon className="size-4" /> Add Domain
-									</Button>
-								</AddDomain>
-							</div>
+							{canCreateDomain && (
+								<div className="flex flex-row gap-4 flex-wrap">
+									<AddDomain id={id} type={type}>
+										<Button>
+											<GlobeIcon className="size-4" /> Add Domain
+										</Button>
+									</AddDomain>
+								</div>
+							)}
 						</div>
 					) : (
 						<div className="grid grid-cols-1 gap-4 xl:grid-cols-2 w-full min-h-[40vh] ">
@@ -214,47 +219,51 @@ export const ShowDomains = ({ id, type }: Props) => {
 																}
 															/>
 														)}
-														<AddDomain
-															id={id}
-															type={type}
-															domainId={item.domainId}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-blue-500/10"
+														{canCreateDomain && (
+															<AddDomain
+																id={id}
+																type={type}
+																domainId={item.domainId}
 															>
-																<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-															</Button>
-														</AddDomain>
-														<DialogAction
-															title="Delete Domain"
-															description="Are you sure you want to delete this domain?"
-															type="destructive"
-															onClick={async () => {
-																await deleteDomain({
-																	domainId: item.domainId,
-																})
-																	.then((_data) => {
-																		refetch();
-																		toast.success(
-																			"Domain deleted successfully",
-																		);
+																<Button
+																	variant="ghost"
+																	size="icon"
+																	className="group hover:bg-blue-500/10"
+																>
+																	<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+																</Button>
+															</AddDomain>
+														)}
+														{canDeleteDomain && (
+															<DialogAction
+																title="Delete Domain"
+																description="Are you sure you want to delete this domain?"
+																type="destructive"
+																onClick={async () => {
+																	await deleteDomain({
+																		domainId: item.domainId,
 																	})
-																	.catch(() => {
-																		toast.error("Error deleting domain");
-																	});
-															}}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-red-500/10"
-																isLoading={isRemoving}
+																		.then((_data) => {
+																			refetch();
+																			toast.success(
+																				"Domain deleted successfully",
+																			);
+																		})
+																		.catch(() => {
+																			toast.error("Error deleting domain");
+																		});
+																}}
 															>
-																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-															</Button>
-														</DialogAction>
+																<Button
+																	variant="ghost"
+																	size="icon"
+																	className="group hover:bg-red-500/10"
+																	isLoading={isRemoving}
+																>
+																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																</Button>
+															</DialogAction>
+														)}
 													</div>
 												</div>
 												<div className="w-full break-all">

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

@@ -36,6 +36,8 @@ interface Props {
 }
 
 export const ShowEnvironment = ({ id, type }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canWrite = permissions?.envVars.write ?? false;
 	const queryMap = {
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
@@ -185,25 +187,27 @@ PORT=3000
 								)}
 							/>
 
-							<div className="flex flex-row justify-end gap-2">
-								{hasChanges && (
+							{canWrite && (
+								<div className="flex flex-row justify-end gap-2">
+									{hasChanges && (
+										<Button
+											type="button"
+											variant="outline"
+											onClick={handleCancel}
+										>
+											Cancel
+										</Button>
+									)}
 									<Button
-										type="button"
-										variant="outline"
-										onClick={handleCancel}
+										isLoading={isPending}
+										className="w-fit"
+										type="submit"
+										disabled={!hasChanges}
 									>
-										Cancel
+										Save
 									</Button>
-								)}
-								<Button
-									isLoading={isPending}
-									className="w-fit"
-									type="submit"
-									disabled={!hasChanges}
-								>
-									Save
-								</Button>
-							</div>
+								</div>
+							)}
 						</form>
 					</Form>
 				</CardContent>

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

@@ -31,6 +31,8 @@ interface Props {
 }
 
 export const ShowEnvironment = ({ applicationId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canWrite = permissions?.envVars.write ?? false;
 	const { mutateAsync, isPending } =
 		api.application.saveEnvironment.useMutation();
 
@@ -201,27 +203,30 @@ export const ShowEnvironment = ({ applicationId }: Props) => {
 										<Switch
 											checked={field.value}
 											onCheckedChange={field.onChange}
+											disabled={!canWrite}
 										/>
 									</FormControl>
 								</FormItem>
 							)}
 						/>
 					)}
-					<div className="flex flex-row justify-end gap-2">
-						{hasChanges && (
-							<Button type="button" variant="outline" onClick={handleCancel}>
-								Cancel
+					{canWrite && (
+						<div className="flex flex-row justify-end gap-2">
+							{hasChanges && (
+								<Button type="button" variant="outline" onClick={handleCancel}>
+									Cancel
+								</Button>
+							)}
+							<Button
+								isLoading={isPending}
+								className="w-fit"
+								type="submit"
+								disabled={!hasChanges}
+							>
+								Save
 							</Button>
-						)}
-						<Button
-							isLoading={isPending}
-							className="w-fit"
-							type="submit"
-							disabled={!hasChanges}
-						>
-							Save
-						</Button>
-					</div>
+						</div>
+					)}
 				</form>
 			</Form>
 		</Card>

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

@@ -1,5 +1,5 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { CheckIcon, ChevronsUpDown, X } from "lucide-react";
+import { CheckIcon, ChevronsUpDown, HelpCircle, X } from "lucide-react";
 import Link from "next/link";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
@@ -416,10 +416,8 @@ export const SaveBitbucketProvider = ({ applicationId }: Props) => {
 										<FormLabel>Watch Paths</FormLabel>
 										<TooltipProvider>
 											<Tooltip>
-												<TooltipTrigger>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-														?
-													</div>
+												<TooltipTrigger asChild>
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 												</TooltipTrigger>
 												<TooltipContent>
 													<p>

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

@@ -1,5 +1,5 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -228,10 +228,8 @@ export const SaveGitProvider = ({ applicationId }: Props) => {
 									<FormLabel>Watch Paths</FormLabel>
 									<TooltipProvider>
 										<Tooltip>
-											<TooltipTrigger>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-													?
-												</div>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipContent className="max-w-[300px]">
 												<p>

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

@@ -30,6 +30,9 @@ interface Props {
 
 export const ShowGeneralApplication = ({ applicationId }: Props) => {
 	const router = useRouter();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
+	const canUpdateService = permissions?.service.create ?? false;
 	const { data, refetch } = api.application.one.useQuery(
 		{
 			applicationId,
@@ -57,128 +60,135 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 				</CardHeader>
 				<CardContent className="flex flex-row gap-4 flex-wrap">
 					<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-						<DialogAction
-							title="Deploy Application"
-							description="Are you sure you want to deploy this application?"
-							type="default"
-							onClick={async () => {
-								await deploy({
-									applicationId: applicationId,
-								})
-									.then(() => {
-										toast.success("Application deployed successfully");
-										refetch();
-										router.push(
-											`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/application/${applicationId}?tab=deployments`,
-										);
+						{canDeploy && (
+							<DialogAction
+								title="Deploy Application"
+								description="Are you sure you want to deploy this application?"
+								type="default"
+								onClick={async () => {
+									await deploy({
+										applicationId: applicationId,
 									})
-									.catch(() => {
-										toast.error("Error deploying application");
-									});
-							}}
-						>
-							<Button
-								variant="default"
-								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+										.then(() => {
+											toast.success("Application deployed successfully");
+											refetch();
+											router.push(
+												`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/application/${applicationId}?tab=deployments`,
+											);
+										})
+										.catch(() => {
+											toast.error("Error deploying application");
+										});
+								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<div className="flex items-center">
-											<Rocket className="size-4 mr-1" />
-											Deploy
-										</div>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>
-												Downloads the source code and performs a complete build
-											</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Reload Application"
-							description="Are you sure you want to reload this application?"
-							type="default"
-							onClick={async () => {
-								await reload({
-									applicationId: applicationId,
-									appName: data?.appName || "",
-								})
-									.then(() => {
-										toast.success("Application reloaded successfully");
-										refetch();
+								<Button
+									variant="default"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Rocket className="size-4 mr-1" />
+												Deploy
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>
+													Downloads the source code and performs a complete
+													build
+												</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
+						{canDeploy && (
+							<DialogAction
+								title="Reload Application"
+								description="Are you sure you want to reload this application?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										applicationId: applicationId,
+										appName: data?.appName || "",
 									})
-									.catch(() => {
-										toast.error("Error reloading application");
-									});
-							}}
-						>
-							<Button
-								variant="secondary"
-								isLoading={isReloading}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+										.then(() => {
+											toast.success("Application reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading application");
+										});
+								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<div className="flex items-center">
-											<RefreshCcw className="size-4 mr-1" />
-											Reload
-										</div>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>Reload the application without rebuilding it</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
-							</Button>
-						</DialogAction>
-						<DialogAction
-							title="Rebuild Application"
-							description="Are you sure you want to rebuild this application?"
-							type="default"
-							onClick={async () => {
-								await redeploy({
-									applicationId: applicationId,
-								})
-									.then(() => {
-										toast.success("Application rebuilt successfully");
-										refetch();
+								<Button
+									variant="secondary"
+									isLoading={isReloading}
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<RefreshCcw className="size-4 mr-1" />
+												Reload
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>Reload the application without rebuilding it</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
+						{canDeploy && (
+							<DialogAction
+								title="Rebuild Application"
+								description="Are you sure you want to rebuild this application?"
+								type="default"
+								onClick={async () => {
+									await redeploy({
+										applicationId: applicationId,
 									})
-									.catch(() => {
-										toast.error("Error rebuilding application");
-									});
-							}}
-						>
-							<Button
-								variant="secondary"
-								isLoading={data?.applicationStatus === "running"}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+										.then(() => {
+											toast.success("Application rebuilt successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error rebuilding application");
+										});
+								}}
 							>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<div className="flex items-center">
-											<Hammer className="size-4 mr-1" />
-											Rebuild
-										</div>
-									</TooltipTrigger>
-									<TooltipPrimitive.Portal>
-										<TooltipContent sideOffset={5} className="z-[60]">
-											<p>
-												Only rebuilds the application without downloading new
-												code
-											</p>
-										</TooltipContent>
-									</TooltipPrimitive.Portal>
-								</Tooltip>
-							</Button>
-						</DialogAction>
+								<Button
+									variant="secondary"
+									isLoading={data?.applicationStatus === "running"}
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+								>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<div className="flex items-center">
+												<Hammer className="size-4 mr-1" />
+												Rebuild
+											</div>
+										</TooltipTrigger>
+										<TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
+												<p>
+													Only rebuilds the application without downloading new
+													code
+												</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						)}
 
-						{data?.applicationStatus === "idle" ? (
+						{canDeploy && data?.applicationStatus === "idle" ? (
 							<DialogAction
 								title="Start Application"
 								description="Are you sure you want to start this application?"
@@ -219,7 +229,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
-						) : (
+						) : canDeploy ? (
 							<DialogAction
 								title="Stop Application"
 								description="Are you sure you want to stop this application?"
@@ -256,7 +266,7 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 									</Tooltip>
 								</Button>
 							</DialogAction>
-						)}
+						) : null}
 					</TooltipProvider>
 					<DockerTerminalModal
 						appName={data?.appName || ""}
@@ -270,49 +280,53 @@ export const ShowGeneralApplication = ({ applicationId }: Props) => {
 							Open Terminal
 						</Button>
 					</DockerTerminalModal>
-					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<span className="text-sm font-medium">Autodeploy</span>
-						<Switch
-							aria-label="Toggle autodeploy"
-							checked={data?.autoDeploy || false}
-							onCheckedChange={async (enabled) => {
-								await update({
-									applicationId,
-									autoDeploy: enabled,
-								})
-									.then(async () => {
-										toast.success("Auto Deploy Updated");
-										await refetch();
+					{canUpdateService && (
+						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+							<span className="text-sm font-medium">Autodeploy</span>
+							<Switch
+								aria-label="Toggle autodeploy"
+								checked={data?.autoDeploy || false}
+								onCheckedChange={async (enabled) => {
+									await update({
+										applicationId,
+										autoDeploy: enabled,
 									})
-									.catch(() => {
-										toast.error("Error updating Auto Deploy");
-									});
-							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
-						/>
-					</div>
+										.then(async () => {
+											toast.success("Auto Deploy Updated");
+											await refetch();
+										})
+										.catch(() => {
+											toast.error("Error updating Auto Deploy");
+										});
+								}}
+								className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+							/>
+						</div>
+					)}
 
-					<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<span className="text-sm font-medium">Clean Cache</span>
-						<Switch
-							aria-label="Toggle clean cache"
-							checked={data?.cleanCache || false}
-							onCheckedChange={async (enabled) => {
-								await update({
-									applicationId,
-									cleanCache: enabled,
-								})
-									.then(async () => {
-										toast.success("Clean Cache Updated");
-										await refetch();
+					{canUpdateService && (
+						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+							<span className="text-sm font-medium">Clean Cache</span>
+							<Switch
+								aria-label="Toggle clean cache"
+								checked={data?.cleanCache || false}
+								onCheckedChange={async (enabled) => {
+									await update({
+										applicationId,
+										cleanCache: enabled,
 									})
-									.catch(() => {
-										toast.error("Error updating Clean Cache");
-									});
-							}}
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
-						/>
-					</div>
+										.then(async () => {
+											toast.success("Clean Cache Updated");
+											await refetch();
+										})
+										.catch(() => {
+											toast.error("Error updating Clean Cache");
+										});
+								}}
+								className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+							/>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 			<ShowProviderForm applicationId={applicationId} />

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

@@ -46,6 +46,8 @@ interface Props {
 }
 
 export const DeleteService = ({ id, type }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDelete = permissions?.service.delete ?? false;
 	const [isOpen, setIsOpen] = useState(false);
 
 	const queryMap = {
@@ -123,6 +125,8 @@ export const DeleteService = ({ id, type }: Props) => {
 			data?.applicationStatus === "running") ||
 		(data && "composeStatus" in data && data?.composeStatus === "running");
 
+	if (!canDelete) return null;
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>

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

@@ -19,6 +19,9 @@ interface Props {
 }
 export const ComposeActions = ({ composeId }: Props) => {
 	const router = useRouter();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
+	const canUpdateService = permissions?.service.create ?? false;
 	const { data, refetch } = api.compose.one.useQuery(
 		{
 			composeId,
@@ -35,162 +38,169 @@ export const ComposeActions = ({ composeId }: Props) => {
 	return (
 		<div className="flex flex-row gap-4 w-full flex-wrap ">
 			<TooltipProvider delayDuration={0} disableHoverableContent={false}>
-				<DialogAction
-					title="Deploy Compose"
-					description="Are you sure you want to deploy this compose?"
-					type="default"
-					onClick={async () => {
-						await deploy({
-							composeId: composeId,
-						})
-							.then(() => {
-								toast.success("Compose deployed successfully");
-								refetch();
-								router.push(
-									`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/compose/${composeId}?tab=deployments`,
-								);
-							})
-							.catch(() => {
-								toast.error("Error deploying compose");
-							});
-					}}
-				>
-					<Button
-						variant="default"
-						isLoading={data?.composeStatus === "running"}
-						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-					>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<div className="flex items-center">
-									<Rocket className="size-4 mr-1" />
-									Deploy
-								</div>
-							</TooltipTrigger>
-							<TooltipPrimitive.Portal>
-								<TooltipContent sideOffset={5} className="z-[60]">
-									<p>Downloads the source code and performs a complete build</p>
-								</TooltipContent>
-							</TooltipPrimitive.Portal>
-						</Tooltip>
-					</Button>
-				</DialogAction>
-				<DialogAction
-					title="Reload Compose"
-					description="Are you sure you want to reload this compose?"
-					type="default"
-					onClick={async () => {
-						await redeploy({
-							composeId: composeId,
-						})
-							.then(() => {
-								toast.success("Compose reloaded successfully");
-								refetch();
-							})
-							.catch(() => {
-								toast.error("Error reloading compose");
-							});
-					}}
-				>
-					<Button
-						variant="secondary"
-						isLoading={data?.composeStatus === "running"}
-						className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-					>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<div className="flex items-center">
-									<RefreshCcw className="size-4 mr-1" />
-									Reload
-								</div>
-							</TooltipTrigger>
-							<TooltipPrimitive.Portal>
-								<TooltipContent sideOffset={5} className="z-[60]">
-									<p>Reload the compose without rebuilding it</p>
-								</TooltipContent>
-							</TooltipPrimitive.Portal>
-						</Tooltip>
-					</Button>
-				</DialogAction>
-				{data?.composeType === "docker-compose" &&
-				data?.composeStatus === "idle" ? (
+				{canDeploy && (
 					<DialogAction
-						title="Start Compose"
-						description="Are you sure you want to start this compose?"
+						title="Deploy Compose"
+						description="Are you sure you want to deploy this compose?"
 						type="default"
 						onClick={async () => {
-							await start({
+							await deploy({
 								composeId: composeId,
 							})
 								.then(() => {
-									toast.success("Compose started successfully");
+									toast.success("Compose deployed successfully");
 									refetch();
+									router.push(
+										`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/compose/${composeId}?tab=deployments`,
+									);
 								})
 								.catch(() => {
-									toast.error("Error starting compose");
+									toast.error("Error deploying compose");
 								});
 						}}
 					>
 						<Button
-							variant="secondary"
-							isLoading={isStarting}
+							variant="default"
+							isLoading={data?.composeStatus === "running"}
 							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 						>
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center">
-										<CheckCircle2 className="size-4 mr-1" />
-										Start
+										<Rocket className="size-4 mr-1" />
+										Deploy
 									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
 									<TooltipContent sideOffset={5} className="z-[60]">
 										<p>
-											Start the compose (requires a previous successful build)
+											Downloads the source code and performs a complete build
 										</p>
 									</TooltipContent>
 								</TooltipPrimitive.Portal>
 							</Tooltip>
 						</Button>
 					</DialogAction>
-				) : (
+				)}
+				{canDeploy && (
 					<DialogAction
-						title="Stop Compose"
-						description="Are you sure you want to stop this compose?"
+						title="Reload Compose"
+						description="Are you sure you want to reload this compose?"
+						type="default"
 						onClick={async () => {
-							await stop({
+							await redeploy({
 								composeId: composeId,
 							})
 								.then(() => {
-									toast.success("Compose stopped successfully");
+									toast.success("Compose reloaded successfully");
 									refetch();
 								})
 								.catch(() => {
-									toast.error("Error stopping compose");
+									toast.error("Error reloading compose");
 								});
 						}}
 					>
 						<Button
-							variant="destructive"
-							isLoading={isStopping}
+							variant="secondary"
+							isLoading={data?.composeStatus === "running"}
 							className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 						>
 							<Tooltip>
 								<TooltipTrigger asChild>
 									<div className="flex items-center">
-										<Ban className="size-4 mr-1" />
-										Stop
+										<RefreshCcw className="size-4 mr-1" />
+										Reload
 									</div>
 								</TooltipTrigger>
 								<TooltipPrimitive.Portal>
 									<TooltipContent sideOffset={5} className="z-[60]">
-										<p>Stop the currently running compose</p>
+										<p>Reload the compose without rebuilding it</p>
 									</TooltipContent>
 								</TooltipPrimitive.Portal>
 							</Tooltip>
 						</Button>
 					</DialogAction>
 				)}
+				{canDeploy &&
+					(data?.composeType === "docker-compose" &&
+					data?.composeStatus === "idle" ? (
+						<DialogAction
+							title="Start Compose"
+							description="Are you sure you want to start this compose?"
+							type="default"
+							onClick={async () => {
+								await start({
+									composeId: composeId,
+								})
+									.then(() => {
+										toast.success("Compose started successfully");
+										refetch();
+									})
+									.catch(() => {
+										toast.error("Error starting compose");
+									});
+							}}
+						>
+							<Button
+								variant="secondary"
+								isLoading={isStarting}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<CheckCircle2 className="size-4 mr-1" />
+											Start
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>
+												Start the compose (requires a previous successful build)
+											</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
+						</DialogAction>
+					) : (
+						<DialogAction
+							title="Stop Compose"
+							description="Are you sure you want to stop this compose?"
+							onClick={async () => {
+								await stop({
+									composeId: composeId,
+								})
+									.then(() => {
+										toast.success("Compose stopped successfully");
+										refetch();
+									})
+									.catch(() => {
+										toast.error("Error stopping compose");
+									});
+							}}
+						>
+							<Button
+								variant="destructive"
+								isLoading={isStopping}
+								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Ban className="size-4 mr-1" />
+											Stop
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Stop the currently running compose</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
+						</DialogAction>
+					))}
 			</TooltipProvider>
 			<DockerTerminalModal
 				appName={data?.appName || ""}
@@ -205,27 +215,29 @@ export const ComposeActions = ({ composeId }: Props) => {
 					Open Terminal
 				</Button>
 			</DockerTerminalModal>
-			<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-				<span className="text-sm font-medium">Autodeploy</span>
-				<Switch
-					aria-label="Toggle autodeploy"
-					checked={data?.autoDeploy || false}
-					onCheckedChange={async (enabled) => {
-						await update({
-							composeId,
-							autoDeploy: enabled,
-						})
-							.then(async () => {
-								toast.success("Auto Deploy Updated");
-								await refetch();
+			{canUpdateService && (
+				<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
+					<span className="text-sm font-medium">Autodeploy</span>
+					<Switch
+						aria-label="Toggle autodeploy"
+						checked={data?.autoDeploy || false}
+						onCheckedChange={async (enabled) => {
+							await update({
+								composeId,
+								autoDeploy: enabled,
 							})
-							.catch(() => {
-								toast.error("Error updating Auto Deploy");
-							});
-					}}
-					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
-				/>
-			</div>
+								.then(async () => {
+									toast.success("Auto Deploy Updated");
+									await refetch();
+								})
+								.catch(() => {
+									toast.error("Error updating Auto Deploy");
+								});
+						}}
+						className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+					/>
+				</div>
+			)}
 		</div>
 	);
 };

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

@@ -26,6 +26,8 @@ const AddComposeFile = z.object({
 type AddComposeFile = z.infer<typeof AddComposeFile>;
 
 export const ComposeFileEditor = ({ composeId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canUpdate = permissions?.service.create ?? false;
 	const utils = api.useUtils();
 	const { data, refetch } = api.compose.one.useQuery(
 		{
@@ -164,14 +166,16 @@ services:
 				</Form>
 				<div className="flex justify-between flex-col lg:flex-row gap-2">
 					<div className="w-full flex flex-col lg:flex-row gap-4 items-end" />
-					<Button
-						type="submit"
-						form="hook-form-save-compose-file"
-						isLoading={isPending}
-						className="lg:w-fit w-full"
-					>
-						Save
-					</Button>
+					{canUpdate && (
+						<Button
+							type="submit"
+							form="hook-form-save-compose-file"
+							isLoading={isPending}
+							className="lg:w-fit w-full"
+						>
+							Save
+						</Button>
+					)}
 				</div>
 			</div>
 		</>

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

@@ -1,5 +1,5 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { KeyRoundIcon, LockIcon, X } from "lucide-react";
+import { HelpCircle, KeyRoundIcon, LockIcon, X } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
@@ -230,10 +230,8 @@ export const SaveGitProviderCompose = ({ composeId }: Props) => {
 									<FormLabel>Watch Paths</FormLabel>
 									<TooltipProvider>
 										<Tooltip>
-											<TooltipTrigger>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
-													?
-												</div>
+											<TooltipTrigger asChild>
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
 											</TooltipTrigger>
 											<TooltipContent className="max-w-[300px]">
 												<p>

apps/dokploy/components/dashboard/impersonation/impersonation-bar.tsx

@@ -45,10 +45,12 @@ import {
 import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type User = typeof authClient.$Infer.Session.user;
 
 export const ImpersonationBar = () => {
+	const { config: whitelabeling } = useWhitelabeling();
 	const [users, setUsers] = useState<User[]>([]);
 	const [selectedUser, setSelectedUser] = useState<User | null>(null);
 	const [isImpersonating, setIsImpersonating] = useState(false);
@@ -180,7 +182,10 @@ export const ImpersonationBar = () => {
 					)}
 				>
 					<div className="flex items-center gap-4 px-4 md:px-20 w-full">
-						<Logo className="w-10 h-10" />
+						<Logo
+							className="w-10 h-10"
+							logoUrl={whitelabeling?.logoUrl || undefined}
+						/>
 						{!isImpersonating ? (
 							<div className="flex items-center gap-2 w-full">
 								<Popover open={open} onOpenChange={setOpen}>

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

@@ -21,6 +21,8 @@ interface Props {
 }
 
 export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
 	const { data, refetch } = api.mariadb.one.useQuery(
 		{
 			mariadbId,
@@ -72,154 +74,33 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 						<CardTitle className="text-xl">Deploy Settings</CardTitle>
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
-						<TooltipProvider delayDuration={0}>
-							<DialogAction
-								title="Deploy Mariadb"
-								description="Are you sure you want to deploy this mariadb?"
-								type="default"
-								onClick={async () => {
-									setIsDeploying(true);
-									await new Promise((resolve) => setTimeout(resolve, 1000));
-									refetch();
-								}}
-							>
-								<Button
-									variant="default"
-									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Downloads and sets up the MariaDB database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-						</TooltipProvider>
-						<TooltipProvider delayDuration={0}>
-							<DialogAction
-								title="Reload Mariadb"
-								description="Are you sure you want to reload this mariadb?"
-								type="default"
-								onClick={async () => {
-									await reload({
-										mariadbId: mariadbId,
-										appName: data?.appName || "",
-									})
-										.then(() => {
-											toast.success("Mariadb reloaded successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error reloading Mariadb");
-										});
-								}}
-							>
-								<Button
-									variant="secondary"
-									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Restart the MariaDB service without rebuilding</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-						</TooltipProvider>
-						{data?.applicationStatus === "idle" ? (
+						{canDeploy && (
 							<TooltipProvider delayDuration={0}>
 								<DialogAction
-									title="Start Mariadb"
-									description="Are you sure you want to start this mariadb?"
+									title="Deploy Mariadb"
+									description="Are you sure you want to deploy this mariadb?"
 									type="default"
 									onClick={async () => {
-										await start({
-											mariadbId: mariadbId,
-										})
-											.then(() => {
-												toast.success("Mariadb started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Mariadb");
-											});
+										setIsDeploying(true);
+										await new Promise((resolve) => setTimeout(resolve, 1000));
+										refetch();
 									}}
 								>
 									<Button
-										variant="secondary"
-										isLoading={isStarting}
+										variant="default"
+										isLoading={data?.applicationStatus === "running"}
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
+													<Rocket className="size-4 mr-1" />
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
-														Start the MariaDB database (requires a previous
-														successful setup)
-													</p>
-												</TooltipContent>
-											</TooltipPrimitive.Portal>
-										</Tooltip>
-									</Button>
-								</DialogAction>
-							</TooltipProvider>
-						) : (
-							<TooltipProvider delayDuration={0}>
-								<DialogAction
-									title="Stop Mariadb"
-									description="Are you sure you want to stop this mariadb?"
-									onClick={async () => {
-										await stop({
-											mariadbId: mariadbId,
-										})
-											.then(() => {
-												toast.success("Mariadb stopped successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error stopping Mariadb");
-											});
-									}}
-								>
-									<Button
-										variant="destructive"
-										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
-											</TooltipTrigger>
-											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>Stop the currently running MariaDB database</p>
+													<p>Downloads and sets up the MariaDB database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
 										</Tooltip>
@@ -227,6 +108,132 @@ export const ShowGeneralMariadb = ({ mariadbId }: Props) => {
 								</DialogAction>
 							</TooltipProvider>
 						)}
+						{canDeploy && (
+							<TooltipProvider delayDuration={0}>
+								<DialogAction
+									title="Reload Mariadb"
+									description="Are you sure you want to reload this mariadb?"
+									type="default"
+									onClick={async () => {
+										await reload({
+											mariadbId: mariadbId,
+											appName: data?.appName || "",
+										})
+											.then(() => {
+												toast.success("Mariadb reloaded successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error reloading Mariadb");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isReloading}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<RefreshCcw className="size-4 mr-1" />
+													Reload
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Restart the MariaDB service without rebuilding</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							</TooltipProvider>
+						)}
+						{canDeploy &&
+							(data?.applicationStatus === "idle" ? (
+								<TooltipProvider delayDuration={0}>
+									<DialogAction
+										title="Start Mariadb"
+										description="Are you sure you want to start this mariadb?"
+										type="default"
+										onClick={async () => {
+											await start({
+												mariadbId: mariadbId,
+											})
+												.then(() => {
+													toast.success("Mariadb started successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error starting Mariadb");
+												});
+										}}
+									>
+										<Button
+											variant="secondary"
+											isLoading={isStarting}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<CheckCircle2 className="size-4 mr-1" />
+														Start
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Start the MariaDB database (requires a previous
+															successful setup)
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								</TooltipProvider>
+							) : (
+								<TooltipProvider delayDuration={0}>
+									<DialogAction
+										title="Stop Mariadb"
+										description="Are you sure you want to stop this mariadb?"
+										onClick={async () => {
+											await stop({
+												mariadbId: mariadbId,
+											})
+												.then(() => {
+													toast.success("Mariadb stopped successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error stopping Mariadb");
+												});
+										}}
+									>
+										<Button
+											variant="destructive"
+											isLoading={isStopping}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<Ban className="size-4 mr-1" />
+														Stop
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>Stop the currently running MariaDB database</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								</TooltipProvider>
+							))}
 						<DockerTerminalModal
 							appName={data?.appName || ""}
 							serverId={data?.serverId || ""}

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

@@ -21,6 +21,8 @@ interface Props {
 }
 
 export const ShowGeneralMongo = ({ mongoId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
 	const { data, refetch } = api.mongo.one.useQuery(
 		{
 			mongoId,
@@ -73,153 +75,158 @@ export const ShowGeneralMongo = ({ mongoId }: Props) => {
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider delayDuration={0}>
-							<DialogAction
-								title="Deploy Mongo"
-								description="Are you sure you want to deploy this mongo?"
-								type="default"
-								onClick={async () => {
-									setIsDeploying(true);
-									await new Promise((resolve) => setTimeout(resolve, 1000));
-									refetch();
-								}}
-							>
-								<Button
-									variant="default"
-									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Downloads and sets up the MongoDB database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							<DialogAction
-								title="Reload Mongo"
-								description="Are you sure you want to reload this mongo?"
-								type="default"
-								onClick={async () => {
-									await reload({
-										mongoId: mongoId,
-										appName: data?.appName || "",
-									})
-										.then(() => {
-											toast.success("Mongo reloaded successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error reloading Mongo");
-										});
-								}}
-							>
-								<Button
-									variant="secondary"
-									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Restart the MongoDB service without rebuilding</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							{data?.applicationStatus === "idle" ? (
+							{canDeploy && (
 								<DialogAction
-									title="Start Mongo"
-									description="Are you sure you want to start this mongo?"
+									title="Deploy Mongo"
+									description="Are you sure you want to deploy this mongo?"
 									type="default"
 									onClick={async () => {
-										await start({
-											mongoId: mongoId,
-										})
-											.then(() => {
-												toast.success("Mongo started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Mongo");
-											});
+										setIsDeploying(true);
+										await new Promise((resolve) => setTimeout(resolve, 1000));
+										refetch();
 									}}
 								>
 									<Button
-										variant="secondary"
-										isLoading={isStarting}
+										variant="default"
+										isLoading={data?.applicationStatus === "running"}
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
+													<Rocket className="size-4 mr-1" />
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
-														Start the MongoDB database (requires a previous
-														successful setup)
-													</p>
-												</TooltipContent>
-											</TooltipPrimitive.Portal>
-										</Tooltip>
-									</Button>
-								</DialogAction>
-							) : (
-								<DialogAction
-									title="Stop Mongo"
-									description="Are you sure you want to stop this mongo?"
-									onClick={async () => {
-										await stop({
-											mongoId: mongoId,
-										})
-											.then(() => {
-												toast.success("Mongo stopped successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error stopping Mongo");
-											});
-									}}
-								>
-									<Button
-										variant="destructive"
-										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
-											</TooltipTrigger>
-											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>Stop the currently running MongoDB database</p>
+													<p>Downloads and sets up the MongoDB database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
 										</Tooltip>
 									</Button>
 								</DialogAction>
 							)}
+							{canDeploy && (
+								<DialogAction
+									title="Reload Mongo"
+									description="Are you sure you want to reload this mongo?"
+									type="default"
+									onClick={async () => {
+										await reload({
+											mongoId: mongoId,
+											appName: data?.appName || "",
+										})
+											.then(() => {
+												toast.success("Mongo reloaded successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error reloading Mongo");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isReloading}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<RefreshCcw className="size-4 mr-1" />
+													Reload
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Restart the MongoDB service without rebuilding</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+							{canDeploy &&
+								(data?.applicationStatus === "idle" ? (
+									<DialogAction
+										title="Start Mongo"
+										description="Are you sure you want to start this mongo?"
+										type="default"
+										onClick={async () => {
+											await start({
+												mongoId: mongoId,
+											})
+												.then(() => {
+													toast.success("Mongo started successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error starting Mongo");
+												});
+										}}
+									>
+										<Button
+											variant="secondary"
+											isLoading={isStarting}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<CheckCircle2 className="size-4 mr-1" />
+														Start
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Start the MongoDB database (requires a previous
+															successful setup)
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								) : (
+									<DialogAction
+										title="Stop Mongo"
+										description="Are you sure you want to stop this mongo?"
+										onClick={async () => {
+											await stop({
+												mongoId: mongoId,
+											})
+												.then(() => {
+													toast.success("Mongo stopped successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error stopping Mongo");
+												});
+										}}
+									>
+										<Button
+											variant="destructive"
+											isLoading={isStopping}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<Ban className="size-4 mr-1" />
+														Stop
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>Stop the currently running MongoDB database</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								))}
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}

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

@@ -21,6 +21,8 @@ interface Props {
 }
 
 export const ShowGeneralMysql = ({ mysqlId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
 	const { data, refetch } = api.mysql.one.useQuery(
 		{
 			mysqlId,
@@ -71,153 +73,158 @@ export const ShowGeneralMysql = ({ mysqlId }: Props) => {
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider delayDuration={0}>
-							<DialogAction
-								title="Deploy MySQL"
-								description="Are you sure you want to deploy this mysql?"
-								type="default"
-								onClick={async () => {
-									setIsDeploying(true);
-									await new Promise((resolve) => setTimeout(resolve, 1000));
-									refetch();
-								}}
-							>
-								<Button
-									variant="default"
-									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Downloads and sets up the MySQL database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							<DialogAction
-								title="Reload MySQL"
-								description="Are you sure you want to reload this mysql?"
-								type="default"
-								onClick={async () => {
-									await reload({
-										mysqlId: mysqlId,
-										appName: data?.appName || "",
-									})
-										.then(() => {
-											toast.success("MySQL reloaded successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error reloading MySQL");
-										});
-								}}
-							>
-								<Button
-									variant="secondary"
-									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Restart the MySQL service without rebuilding</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							{data?.applicationStatus === "idle" ? (
+							{canDeploy && (
 								<DialogAction
-									title="Start MySQL"
-									description="Are you sure you want to start this mysql?"
+									title="Deploy MySQL"
+									description="Are you sure you want to deploy this mysql?"
 									type="default"
 									onClick={async () => {
-										await start({
-											mysqlId: mysqlId,
-										})
-											.then(() => {
-												toast.success("MySQL started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting MySQL");
-											});
+										setIsDeploying(true);
+										await new Promise((resolve) => setTimeout(resolve, 1000));
+										refetch();
 									}}
 								>
 									<Button
-										variant="secondary"
-										isLoading={isStarting}
+										variant="default"
+										isLoading={data?.applicationStatus === "running"}
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
+													<Rocket className="size-4 mr-1" />
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
-														Start the MySQL database (requires a previous
-														successful setup)
-													</p>
-												</TooltipContent>
-											</TooltipPrimitive.Portal>
-										</Tooltip>
-									</Button>
-								</DialogAction>
-							) : (
-								<DialogAction
-									title="Stop MySQL"
-									description="Are you sure you want to stop this mysql?"
-									onClick={async () => {
-										await stop({
-											mysqlId: mysqlId,
-										})
-											.then(() => {
-												toast.success("MySQL stopped successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error stopping MySQL");
-											});
-									}}
-								>
-									<Button
-										variant="destructive"
-										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
-											</TooltipTrigger>
-											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>Stop the currently running MySQL database</p>
+													<p>Downloads and sets up the MySQL database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
 										</Tooltip>
 									</Button>
 								</DialogAction>
 							)}
+							{canDeploy && (
+								<DialogAction
+									title="Reload MySQL"
+									description="Are you sure you want to reload this mysql?"
+									type="default"
+									onClick={async () => {
+										await reload({
+											mysqlId: mysqlId,
+											appName: data?.appName || "",
+										})
+											.then(() => {
+												toast.success("MySQL reloaded successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error reloading MySQL");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isReloading}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<RefreshCcw className="size-4 mr-1" />
+													Reload
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Restart the MySQL service without rebuilding</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+							{canDeploy &&
+								(data?.applicationStatus === "idle" ? (
+									<DialogAction
+										title="Start MySQL"
+										description="Are you sure you want to start this mysql?"
+										type="default"
+										onClick={async () => {
+											await start({
+												mysqlId: mysqlId,
+											})
+												.then(() => {
+													toast.success("MySQL started successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error starting MySQL");
+												});
+										}}
+									>
+										<Button
+											variant="secondary"
+											isLoading={isStarting}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<CheckCircle2 className="size-4 mr-1" />
+														Start
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Start the MySQL database (requires a previous
+															successful setup)
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								) : (
+									<DialogAction
+										title="Stop MySQL"
+										description="Are you sure you want to stop this mysql?"
+										onClick={async () => {
+											await stop({
+												mysqlId: mysqlId,
+											})
+												.then(() => {
+													toast.success("MySQL stopped successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error stopping MySQL");
+												});
+										}}
+									>
+										<Button
+											variant="destructive"
+											isLoading={isStopping}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<Ban className="size-4 mr-1" />
+														Stop
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>Stop the currently running MySQL database</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								))}
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}

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

@@ -21,6 +21,8 @@ interface Props {
 }
 
 export const ShowGeneralPostgres = ({ postgresId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
 	const { data, refetch } = api.postgres.one.useQuery(
 		{
 			postgresId: postgresId,
@@ -73,153 +75,162 @@ export const ShowGeneralPostgres = ({ postgresId }: Props) => {
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider disableHoverableContent={false}>
-							<DialogAction
-								title="Deploy PostgreSQL"
-								description="Are you sure you want to deploy this postgres?"
-								type="default"
-								onClick={async () => {
-									setIsDeploying(true);
-									await new Promise((resolve) => setTimeout(resolve, 1000));
-									refetch();
-								}}
-							>
-								<Button
-									variant="default"
-									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Downloads and sets up the PostgreSQL database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							<DialogAction
-								title="Reload PostgreSQL"
-								description="Are you sure you want to reload this postgres?"
-								type="default"
-								onClick={async () => {
-									await reload({
-										postgresId: postgresId,
-										appName: data?.appName || "",
-									})
-										.then(() => {
-											toast.success("PostgreSQL reloaded successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error reloading PostgreSQL");
-										});
-								}}
-							>
-								<Button
-									variant="secondary"
-									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Restart the PostgreSQL service without rebuilding</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							{data?.applicationStatus === "idle" ? (
+							{canDeploy && (
 								<DialogAction
-									title="Start PostgreSQL"
-									description="Are you sure you want to start this postgres?"
+									title="Deploy PostgreSQL"
+									description="Are you sure you want to deploy this postgres?"
 									type="default"
 									onClick={async () => {
-										await start({
-											postgresId: postgresId,
-										})
-											.then(() => {
-												toast.success("PostgreSQL started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting PostgreSQL");
-											});
+										setIsDeploying(true);
+										await new Promise((resolve) => setTimeout(resolve, 1000));
+										refetch();
 									}}
 								>
 									<Button
-										variant="secondary"
-										isLoading={isStarting}
+										variant="default"
+										isLoading={data?.applicationStatus === "running"}
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
+													<Rocket className="size-4 mr-1" />
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
-														Start the PostgreSQL database (requires a previous
-														successful setup)
-													</p>
-												</TooltipContent>
-											</TooltipPrimitive.Portal>
-										</Tooltip>
-									</Button>
-								</DialogAction>
-							) : (
-								<DialogAction
-									title="Stop PostgreSQL"
-									description="Are you sure you want to stop this postgres?"
-									onClick={async () => {
-										await stop({
-											postgresId: postgresId,
-										})
-											.then(() => {
-												toast.success("PostgreSQL stopped successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error stopping PostgreSQL");
-											});
-									}}
-								>
-									<Button
-										variant="destructive"
-										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
-											</TooltipTrigger>
-											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>Stop the currently running PostgreSQL database</p>
+													<p>Downloads and sets up the PostgreSQL database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
 										</Tooltip>
 									</Button>
 								</DialogAction>
 							)}
+							{canDeploy && (
+								<DialogAction
+									title="Reload PostgreSQL"
+									description="Are you sure you want to reload this postgres?"
+									type="default"
+									onClick={async () => {
+										await reload({
+											postgresId: postgresId,
+											appName: data?.appName || "",
+										})
+											.then(() => {
+												toast.success("PostgreSQL reloaded successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error reloading PostgreSQL");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isReloading}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<RefreshCcw className="size-4 mr-1" />
+													Reload
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>
+														Restart the PostgreSQL service without rebuilding
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+							{canDeploy &&
+								(data?.applicationStatus === "idle" ? (
+									<DialogAction
+										title="Start PostgreSQL"
+										description="Are you sure you want to start this postgres?"
+										type="default"
+										onClick={async () => {
+											await start({
+												postgresId: postgresId,
+											})
+												.then(() => {
+													toast.success("PostgreSQL started successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error starting PostgreSQL");
+												});
+										}}
+									>
+										<Button
+											variant="secondary"
+											isLoading={isStarting}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<CheckCircle2 className="size-4 mr-1" />
+														Start
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Start the PostgreSQL database (requires a previous
+															successful setup)
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								) : (
+									<DialogAction
+										title="Stop PostgreSQL"
+										description="Are you sure you want to stop this postgres?"
+										onClick={async () => {
+											await stop({
+												postgresId: postgresId,
+											})
+												.then(() => {
+													toast.success("PostgreSQL stopped successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error stopping PostgreSQL");
+												});
+										}}
+									>
+										<Button
+											variant="destructive"
+											isLoading={isStopping}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<Ban className="size-4 mr-1" />
+														Stop
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Stop the currently running PostgreSQL database
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								))}
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx

@@ -57,19 +57,13 @@ export const AdvancedEnvironmentSelector = ({
 	const [description, setDescription] = useState("");
 
 	// Get current user's permissions
-	const { data: currentUser } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	// Check if user can create environments
-	const canCreateEnvironments =
-		currentUser?.role === "owner" ||
-		currentUser?.role === "admin" ||
-		currentUser?.canCreateEnvironments === true;
+	const canCreateEnvironments = !!permissions?.environment.create;
 
 	// Check if user can delete environments
-	const canDeleteEnvironments =
-		currentUser?.role === "owner" ||
-		currentUser?.role === "admin" ||
-		currentUser?.canDeleteEnvironments === true;
+	const canDeleteEnvironments = !!permissions?.environment.delete;
 
 	const haveServices =
 		selectedEnvironment &&

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

@@ -39,6 +39,9 @@ interface Props {
 }
 
 export const EnvironmentVariables = ({ environmentId, children }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canRead = permissions?.environmentEnvVars.read ?? false;
+	const canWrite = permissions?.environmentEnvVars.write ?? false;
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { mutateAsync, error, isError, isPending } =
@@ -97,6 +100,10 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 		};
 	}, [form, onSubmit, isPending, isOpen]);
 
+	if (!canRead) {
+		return null;
+	}
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -141,6 +148,7 @@ export const EnvironmentVariables = ({ environmentId, children }: Props) => {
 												<CodeEditor
 													lineWrapping
 													language="properties"
+													readOnly={!canWrite}
 													wrapperClassName="h-[35rem] font-mono"
 													placeholder={`NODE_ENV=development
 DATABASE_URL=postgresql://localhost:5432/mydb
@@ -157,11 +165,13 @@ API_KEY=your-api-key-here
 										</FormItem>
 									)}
 								/>
-								<DialogFooter>
-									<Button isLoading={isPending} type="submit">
-										Update
-									</Button>
-								</DialogFooter>
+								{canWrite && (
+									<DialogFooter>
+										<Button isLoading={isPending} type="submit">
+											Update
+										</Button>
+									</DialogFooter>
+								)}
 							</form>
 						</Form>
 					</div>

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

@@ -39,6 +39,9 @@ interface Props {
 }
 
 export const ProjectEnvironment = ({ projectId, children }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canRead = permissions?.projectEnvVars.read ?? false;
+	const canWrite = permissions?.projectEnvVars.write ?? false;
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 	const { mutateAsync, error, isError, isPending } =
@@ -96,6 +99,10 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 		};
 	}, [form, onSubmit, isPending, isOpen]);
 
+	if (!canRead) {
+		return null;
+	}
+
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
@@ -139,6 +146,7 @@ export const ProjectEnvironment = ({ projectId, children }: Props) => {
 												<CodeEditor
 													lineWrapping
 													language="properties"
+													readOnly={!canWrite}
 													wrapperClassName="h-[35rem] font-mono"
 													placeholder={`NODE_ENV=production
 PORT=3000
@@ -154,11 +162,13 @@ PORT=3000
 										</FormItem>
 									)}
 								/>
-								<DialogFooter>
-									<Button isLoading={isPending} type="submit">
-										Update
-									</Button>
-								</DialogFooter>
+								{canWrite && (
+									<DialogFooter>
+										<Button isLoading={isPending} type="submit">
+											Update
+										</Button>
+									</DialogFooter>
+								)}
 							</form>
 						</Form>
 					</div>

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

@@ -13,6 +13,7 @@ import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { AdvanceBreadcrumb } from "@/components/shared/advance-breadcrumb";
+import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import {
@@ -61,6 +62,7 @@ export const ShowProjects = () => {
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data, isPending } = api.project.all.useQuery();
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { mutateAsync } = api.project.remove.useMutation();
 
 	const [searchQuery, setSearchQuery] = useState(
@@ -165,12 +167,14 @@ export const ShowProjects = () => {
 
 	return (
 		<>
-			<AdvanceBreadcrumb />
 			{!isCloud && (
 				<div className="absolute top-4 right-4">
 					<TimeBadge />
 				</div>
 			)}
+			<BreadcrumbSidebar
+				list={[{ name: "Projects", href: "/dashboard/projects" }]}
+			/>
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
@@ -184,9 +188,7 @@ export const ShowProjects = () => {
 									Create and manage your projects
 								</CardDescription>
 							</CardHeader>
-							{(auth?.role === "owner" ||
-								auth?.role === "admin" ||
-								auth?.canCreateProjects) && (
+							{permissions?.project.create && (
 								<div className="">
 									<HandleProject />
 								</div>
@@ -359,8 +361,7 @@ export const ShowProjects = () => {
 																				<div
 																					onClick={(e) => e.stopPropagation()}
 																				>
-																					{(auth?.role === "owner" ||
-																						auth?.canDeleteProjects) && (
+																					{permissions?.project.delete && (
 																						<AlertDialog>
 																							<AlertDialogTrigger className="w-full">
 																								<DropdownMenuItem

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

@@ -21,6 +21,8 @@ interface Props {
 }
 
 export const ShowGeneralRedis = ({ redisId }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canDeploy = permissions?.deployment.create ?? false;
 	const { data, refetch } = api.redis.one.useQuery(
 		{
 			redisId,
@@ -72,153 +74,158 @@ export const ShowGeneralRedis = ({ redisId }: Props) => {
 					</CardHeader>
 					<CardContent className="flex flex-row gap-4 flex-wrap">
 						<TooltipProvider delayDuration={0}>
-							<DialogAction
-								title="Deploy Redis"
-								description="Are you sure you want to deploy this redis?"
-								type="default"
-								onClick={async () => {
-									setIsDeploying(true);
-									await new Promise((resolve) => setTimeout(resolve, 1000));
-									refetch();
-								}}
-							>
-								<Button
-									variant="default"
-									isLoading={data?.applicationStatus === "running"}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<Rocket className="size-4 mr-1" />
-												Deploy
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Downloads and sets up the Redis database</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							<DialogAction
-								title="Reload Redis"
-								description="Are you sure you want to reload this redis?"
-								type="default"
-								onClick={async () => {
-									await reload({
-										redisId: redisId,
-										appName: data?.appName || "",
-									})
-										.then(() => {
-											toast.success("Redis reloaded successfully");
-											refetch();
-										})
-										.catch(() => {
-											toast.error("Error reloading Redis");
-										});
-								}}
-							>
-								<Button
-									variant="secondary"
-									isLoading={isReloading}
-									className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-								>
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<div className="flex items-center">
-												<RefreshCcw className="size-4 mr-1" />
-												Reload
-											</div>
-										</TooltipTrigger>
-										<TooltipPrimitive.Portal>
-											<TooltipContent sideOffset={5} className="z-[60]">
-												<p>Restart the Redis service without rebuilding</p>
-											</TooltipContent>
-										</TooltipPrimitive.Portal>
-									</Tooltip>
-								</Button>
-							</DialogAction>
-							{data?.applicationStatus === "idle" ? (
+							{canDeploy && (
 								<DialogAction
-									title="Start Redis"
-									description="Are you sure you want to start this redis?"
+									title="Deploy Redis"
+									description="Are you sure you want to deploy this redis?"
 									type="default"
 									onClick={async () => {
-										await start({
-											redisId: redisId,
-										})
-											.then(() => {
-												toast.success("Redis started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Redis");
-											});
+										setIsDeploying(true);
+										await new Promise((resolve) => setTimeout(resolve, 1000));
+										refetch();
 									}}
 								>
 									<Button
-										variant="secondary"
-										isLoading={isStarting}
+										variant="default"
+										isLoading={data?.applicationStatus === "running"}
 										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
 									>
 										<Tooltip>
 											<TooltipTrigger asChild>
 												<div className="flex items-center">
-													<CheckCircle2 className="size-4 mr-1" />
-													Start
+													<Rocket className="size-4 mr-1" />
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
-														Start the Redis database (requires a previous
-														successful setup)
-													</p>
-												</TooltipContent>
-											</TooltipPrimitive.Portal>
-										</Tooltip>
-									</Button>
-								</DialogAction>
-							) : (
-								<DialogAction
-									title="Stop Redis"
-									description="Are you sure you want to stop this redis?"
-									onClick={async () => {
-										await stop({
-											redisId: redisId,
-										})
-											.then(() => {
-												toast.success("Redis stopped successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error stopping Redis");
-											});
-									}}
-								>
-									<Button
-										variant="destructive"
-										isLoading={isStopping}
-										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
-									>
-										<Tooltip>
-											<TooltipTrigger asChild>
-												<div className="flex items-center">
-													<Ban className="size-4 mr-1" />
-													Stop
-												</div>
-											</TooltipTrigger>
-											<TooltipPrimitive.Portal>
-												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>Stop the currently running Redis database</p>
+													<p>Downloads and sets up the Redis database</p>
 												</TooltipContent>
 											</TooltipPrimitive.Portal>
 										</Tooltip>
 									</Button>
 								</DialogAction>
 							)}
+							{canDeploy && (
+								<DialogAction
+									title="Reload Redis"
+									description="Are you sure you want to reload this redis?"
+									type="default"
+									onClick={async () => {
+										await reload({
+											redisId: redisId,
+											appName: data?.appName || "",
+										})
+											.then(() => {
+												toast.success("Redis reloaded successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error reloading Redis");
+											});
+									}}
+								>
+									<Button
+										variant="secondary"
+										isLoading={isReloading}
+										className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+									>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<div className="flex items-center">
+													<RefreshCcw className="size-4 mr-1" />
+													Reload
+												</div>
+											</TooltipTrigger>
+											<TooltipPrimitive.Portal>
+												<TooltipContent sideOffset={5} className="z-[60]">
+													<p>Restart the Redis service without rebuilding</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							)}
+							{canDeploy &&
+								(data?.applicationStatus === "idle" ? (
+									<DialogAction
+										title="Start Redis"
+										description="Are you sure you want to start this redis?"
+										type="default"
+										onClick={async () => {
+											await start({
+												redisId: redisId,
+											})
+												.then(() => {
+													toast.success("Redis started successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error starting Redis");
+												});
+										}}
+									>
+										<Button
+											variant="secondary"
+											isLoading={isStarting}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<CheckCircle2 className="size-4 mr-1" />
+														Start
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>
+															Start the Redis database (requires a previous
+															successful setup)
+														</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								) : (
+									<DialogAction
+										title="Stop Redis"
+										description="Are you sure you want to stop this redis?"
+										onClick={async () => {
+											await stop({
+												redisId: redisId,
+											})
+												.then(() => {
+													toast.success("Redis stopped successfully");
+													refetch();
+												})
+												.catch(() => {
+													toast.error("Error stopping Redis");
+												});
+										}}
+									>
+										<Button
+											variant="destructive"
+											isLoading={isStopping}
+											className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+										>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div className="flex items-center">
+														<Ban className="size-4 mr-1" />
+														Stop
+													</div>
+												</TooltipTrigger>
+												<TooltipPrimitive.Portal>
+													<TooltipContent sideOffset={5} className="z-[60]">
+														<p>Stop the currently running Redis database</p>
+													</TooltipContent>
+												</TooltipPrimitive.Portal>
+											</Tooltip>
+										</Button>
+									</DialogAction>
+								))}
 						</TooltipProvider>
 						<DockerTerminalModal
 							appName={data?.appName || ""}

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

@@ -91,7 +91,10 @@ export const ShowBilling = () => {
 		api.stripe.upgradeSubscription.useMutation();
 	const utils = api.useUtils();
 
-	const [serverQuantity, setServerQuantity] = useState(3);
+	const [hobbyServerQuantity, setHobbyServerQuantity] = useState(1);
+	const [startupServerQuantity, setStartupServerQuantity] = useState(
+		STARTUP_SERVERS_INCLUDED,
+	);
 	const [isAnnual, setIsAnnual] = useState(false);
 	const [upgradeTier, setUpgradeTier] = useState<"hobby" | "startup" | null>(
 		null,
@@ -111,6 +114,12 @@ export const ShowBilling = () => {
 		productId: string,
 	) => {
 		const stripe = await stripePromise;
+		const serverQuantity =
+			tier === "startup"
+				? startupServerQuantity
+				: tier === "hobby"
+					? hobbyServerQuantity
+					: hobbyServerQuantity;
 		if (data && data.subscriptions.length === 0) {
 			createCheckoutSession({
 				tier,
@@ -679,7 +688,7 @@ export const ShowBilling = () => {
 												<p className="text-2xl font-semibold text-foreground">
 													$
 													{calculatePriceHobby(
-														serverQuantity,
+														hobbyServerQuantity,
 														isAnnual,
 													).toFixed(2)}
 													/{isAnnual ? "yr" : "mo"}
@@ -692,7 +701,8 @@ export const ShowBilling = () => {
 													<p className="text-xs text-muted-foreground mt-2">
 														$
 														{(
-															calculatePriceHobby(serverQuantity, true) / 12
+															calculatePriceHobby(hobbyServerQuantity, true) /
+															12
 														).toFixed(2)}
 														/mo
 													</p>
@@ -724,19 +734,19 @@ export const ShowBilling = () => {
 														Servers:
 													</span>
 													<Button
-														disabled={serverQuantity <= 1}
+														disabled={hobbyServerQuantity <= 1}
 														variant="outline"
 														size="icon"
 														onClick={() =>
-															setServerQuantity((q) => Math.max(1, q - 1))
+															setHobbyServerQuantity((q) => Math.max(1, q - 1))
 														}
 													>
 														<MinusIcon className="h-4 w-4" />
 													</Button>
 													<NumberInput
-														value={serverQuantity}
+														value={hobbyServerQuantity}
 														onChange={(e) =>
-															setServerQuantity(
+															setHobbyServerQuantity(
 																Math.max(
 																	1,
 																	Number(
@@ -750,7 +760,7 @@ export const ShowBilling = () => {
 													<Button
 														variant="outline"
 														size="icon"
-														onClick={() => setServerQuantity((q) => q + 1)}
+														onClick={() => setHobbyServerQuantity((q) => q + 1)}
 													>
 														<PlusIcon className="h-4 w-4" />
 													</Button>
@@ -775,7 +785,7 @@ export const ShowBilling = () => {
 															onClick={() =>
 																handleCheckout("hobby", data!.hobbyProductId!)
 															}
-															disabled={serverQuantity < 1}
+															disabled={hobbyServerQuantity < 1}
 														>
 															Get Started
 														</Button>
@@ -806,7 +816,7 @@ export const ShowBilling = () => {
 												<p className="text-2xl font-semibold text-foreground">
 													$
 													{calculatePriceStartup(
-														serverQuantity,
+														startupServerQuantity,
 														isAnnual,
 													).toFixed(2)}
 													/{isAnnual ? "yr" : "mo"}
@@ -819,7 +829,10 @@ export const ShowBilling = () => {
 													<p className="text-xs text-muted-foreground mt-2">
 														$
 														{(
-															calculatePriceStartup(serverQuantity, true) / 12
+															calculatePriceStartup(
+																startupServerQuantity,
+																true,
+															) / 12
 														).toFixed(2)}
 														/mo
 													</p>
@@ -856,13 +869,14 @@ export const ShowBilling = () => {
 													<div className="flex items-center gap-2">
 														<Button
 															disabled={
-																serverQuantity <= STARTUP_SERVERS_INCLUDED
+																startupServerQuantity <=
+																STARTUP_SERVERS_INCLUDED
 															}
 															variant="outline"
 															size="icon"
 															className="h-8 w-8"
 															onClick={() =>
-																setServerQuantity((q) =>
+																setStartupServerQuantity((q) =>
 																	Math.max(STARTUP_SERVERS_INCLUDED, q - 1),
 																)
 															}
@@ -870,9 +884,9 @@ export const ShowBilling = () => {
 															<MinusIcon className="h-4 w-4" />
 														</Button>
 														<NumberInput
-															value={serverQuantity}
+															value={startupServerQuantity}
 															onChange={(e) =>
-																setServerQuantity(
+																setStartupServerQuantity(
 																	Math.max(
 																		STARTUP_SERVERS_INCLUDED,
 																		Number(
@@ -887,7 +901,9 @@ export const ShowBilling = () => {
 															variant="outline"
 															size="icon"
 															className="h-8 w-8"
-															onClick={() => setServerQuantity((q) => q + 1)}
+															onClick={() =>
+																setStartupServerQuantity((q) => q + 1)
+															}
 														>
 															<PlusIcon className="h-4 w-4" />
 														</Button>
@@ -917,7 +933,7 @@ export const ShowBilling = () => {
 																)
 															}
 															disabled={
-																serverQuantity < STARTUP_SERVERS_INCLUDED
+																startupServerQuantity < STARTUP_SERVERS_INCLUDED
 															}
 														>
 															Get Started
@@ -1009,7 +1025,7 @@ export const ShowBilling = () => {
 															<p className="text-2xl font-semibold tracking-tight text-primary ">
 																${" "}
 																{calculatePrice(
-																	serverQuantity,
+																	hobbyServerQuantity,
 																	isAnnual,
 																).toFixed(2)}{" "}
 																USD
@@ -1018,7 +1034,10 @@ export const ShowBilling = () => {
 															<p className="text-base font-semibold tracking-tight text-muted-foreground">
 																${" "}
 																{(
-																	calculatePrice(serverQuantity, isAnnual) / 12
+																	calculatePrice(
+																		hobbyServerQuantity,
+																		isAnnual,
+																	) / 12
 																).toFixed(2)}{" "}
 																/ Month USD
 															</p>
@@ -1026,9 +1045,10 @@ export const ShowBilling = () => {
 													) : (
 														<p className="text-2xl font-semibold tracking-tight text-primary ">
 															${" "}
-															{calculatePrice(serverQuantity, isAnnual).toFixed(
-																2,
-															)}{" "}
+															{calculatePrice(
+																hobbyServerQuantity,
+																isAnnual,
+															).toFixed(2)}{" "}
 															USD
 														</p>
 													)}
@@ -1071,26 +1091,28 @@ export const ShowBilling = () => {
 													<div className="flex flex-col gap-2 mt-4">
 														<div className="flex items-center gap-2 justify-center">
 															<span className="text-sm text-muted-foreground">
-																{serverQuantity} Servers
+																{hobbyServerQuantity} Servers
 															</span>
 														</div>
 
 														<div className="flex items-center space-x-2">
 															<Button
-																disabled={serverQuantity <= 1}
+																disabled={hobbyServerQuantity <= 1}
 																variant="outline"
 																onClick={() => {
-																	if (serverQuantity <= 1) return;
+																	if (hobbyServerQuantity <= 1) return;
 
-																	setServerQuantity(serverQuantity - 1);
+																	setHobbyServerQuantity(
+																		hobbyServerQuantity - 1,
+																	);
 																}}
 															>
 																<MinusIcon className="h-4 w-4" />
 															</Button>
 															<NumberInput
-																value={serverQuantity}
+																value={hobbyServerQuantity}
 																onChange={(e) => {
-																	setServerQuantity(
+																	setHobbyServerQuantity(
 																		e.target.value as unknown as number,
 																	);
 																}}
@@ -1099,7 +1121,9 @@ export const ShowBilling = () => {
 															<Button
 																variant="outline"
 																onClick={() => {
-																	setServerQuantity(serverQuantity + 1);
+																	setHobbyServerQuantity(
+																		hobbyServerQuantity + 1,
+																	);
 																}}
 															>
 																<PlusIcon className="h-4 w-4" />
@@ -1125,7 +1149,7 @@ export const ShowBilling = () => {
 																	onClick={async () => {
 																		handleCheckout("legacy", product.id);
 																	}}
-																	disabled={serverQuantity < 1}
+																	disabled={hobbyServerQuantity < 1}
 																>
 																	Subscribe
 																</Button>

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

@@ -18,6 +18,7 @@ export const ShowCertificates = () => {
 	const { mutateAsync, isPending: isRemoving } =
 		api.certificates.remove.useMutation();
 	const { data, isPending, refetch } = api.certificates.all.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	return (
 		<div className="w-full">
@@ -53,7 +54,7 @@ export const ShowCertificates = () => {
 										<span className="text-base text-muted-foreground text-center">
 											You don't have any certificates created
 										</span>
-										<AddCertificate />
+										{permissions?.certificate.create && <AddCertificate />}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -101,47 +102,52 @@ export const ShowCertificates = () => {
 																</div>
 															</div>
 
-															<div className="flex flex-row gap-1">
-																<DialogAction
-																	title="Delete Certificate"
-																	description="Are you sure you want to delete this certificate?"
-																	type="destructive"
-																	onClick={async () => {
-																		await mutateAsync({
-																			certificateId: certificate.certificateId,
-																		})
-																			.then(() => {
-																				toast.success(
-																					"Certificate deleted successfully",
-																				);
-																				refetch();
+															{permissions?.certificate.delete && (
+																<div className="flex flex-row gap-1">
+																	<DialogAction
+																		title="Delete Certificate"
+																		description="Are you sure you want to delete this certificate?"
+																		type="destructive"
+																		onClick={async () => {
+																			await mutateAsync({
+																				certificateId:
+																					certificate.certificateId,
 																			})
-																			.catch(() => {
-																				toast.error(
-																					"Error deleting certificate",
-																				);
-																			});
-																	}}
-																>
-																	<Button
-																		variant="ghost"
-																		size="icon"
-																		className="group hover:bg-red-500/10 "
-																		isLoading={isRemoving}
+																				.then(() => {
+																					toast.success(
+																						"Certificate deleted successfully",
+																					);
+																					refetch();
+																				})
+																				.catch(() => {
+																					toast.error(
+																						"Error deleting certificate",
+																					);
+																				});
+																		}}
 																	>
-																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																	</Button>
-																</DialogAction>
-															</div>
+																		<Button
+																			variant="ghost"
+																			size="icon"
+																			className="group hover:bg-red-500/10 "
+																			isLoading={isRemoving}
+																		>
+																			<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																		</Button>
+																	</DialogAction>
+																</div>
+															)}
 														</div>
 													</div>
 												);
 											})}
 										</div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<AddCertificate />
-										</div>
+										{permissions?.certificate.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<AddCertificate />
+											</div>
+										)}
 									</div>
 								)}
 							</>

apps/dokploy/components/dashboard/settings/cluster/registry/show-registry.tsx

@@ -16,6 +16,7 @@ export const ShowRegistry = () => {
 	const { mutateAsync, isPending: isRemoving } =
 		api.registry.remove.useMutation();
 	const { data, isPending, refetch } = api.registry.all.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	return (
 		<div className="w-full">
@@ -44,7 +45,7 @@ export const ShowRegistry = () => {
 										<span className="text-base text-muted-foreground text-center">
 											You don't have any registry configurations
 										</span>
-										<HandleRegistry />
+										{permissions?.registry.create && <HandleRegistry />}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -73,45 +74,49 @@ export const ShowRegistry = () => {
 																registryId={registry.registryId}
 															/>
 
-															<DialogAction
-																title="Delete Registry"
-																description="Are you sure you want to delete this registry configuration?"
-																type="destructive"
-																onClick={async () => {
-																	await mutateAsync({
-																		registryId: registry.registryId,
-																	})
-																		.then(() => {
-																			toast.success(
-																				"Registry configuration deleted successfully",
-																			);
-																			refetch();
+															{permissions?.registry.delete && (
+																<DialogAction
+																	title="Delete Registry"
+																	description="Are you sure you want to delete this registry configuration?"
+																	type="destructive"
+																	onClick={async () => {
+																		await mutateAsync({
+																			registryId: registry.registryId,
 																		})
-																		.catch(() => {
-																			toast.error(
-																				"Error deleting registry configuration",
-																			);
-																		});
-																}}
-															>
-																<Button
-																	variant="ghost"
-																	size="icon"
-																	className="group hover:bg-red-500/10 "
-																	isLoading={isRemoving}
+																			.then(() => {
+																				toast.success(
+																					"Registry configuration deleted successfully",
+																				);
+																				refetch();
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error deleting registry configuration",
+																				);
+																			});
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																</Button>
-															</DialogAction>
+																	<Button
+																		variant="ghost"
+																		size="icon"
+																		className="group hover:bg-red-500/10 "
+																		isLoading={isRemoving}
+																	>
+																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	</Button>
+																</DialogAction>
+															)}
 														</div>
 													</div>
 												</div>
 											))}
 										</div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<HandleRegistry />
-										</div>
+										{permissions?.registry.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleRegistry />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -16,6 +16,7 @@ export const ShowDestinations = () => {
 	const { data, isPending, refetch } = api.destination.all.useQuery();
 	const { mutateAsync, isPending: isRemoving } =
 		api.destination.remove.useMutation();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	return (
 		<div className="w-full">
 			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
@@ -45,7 +46,7 @@ export const ShowDestinations = () => {
 											To create a backup it is required to set at least 1
 											provider.
 										</span>
-										<HandleDestinations />
+										{permissions?.destination.create && <HandleDestinations />}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -71,43 +72,49 @@ export const ShowDestinations = () => {
 															<HandleDestinations
 																destinationId={destination.destinationId}
 															/>
-															<DialogAction
-																title="Delete Destination"
-																description="Are you sure you want to delete this destination?"
-																type="destructive"
-																onClick={async () => {
-																	await mutateAsync({
-																		destinationId: destination.destinationId,
-																	})
-																		.then(() => {
-																			toast.success(
-																				"Destination deleted successfully",
-																			);
-																			refetch();
+															{permissions?.destination.delete && (
+																<DialogAction
+																	title="Delete Destination"
+																	description="Are you sure you want to delete this destination?"
+																	type="destructive"
+																	onClick={async () => {
+																		await mutateAsync({
+																			destinationId: destination.destinationId,
 																		})
-																		.catch(() => {
-																			toast.error("Error deleting destination");
-																		});
-																}}
-															>
-																<Button
-																	variant="ghost"
-																	size="icon"
-																	className="group hover:bg-red-500/10 "
-																	isLoading={isRemoving}
+																			.then(() => {
+																				toast.success(
+																					"Destination deleted successfully",
+																				);
+																				refetch();
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error deleting destination",
+																				);
+																			});
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																</Button>
-															</DialogAction>
+																	<Button
+																		variant="ghost"
+																		size="icon"
+																		className="group hover:bg-red-500/10 "
+																		isLoading={isRemoving}
+																	>
+																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	</Button>
+																</DialogAction>
+															)}
 														</div>
 													</div>
 												</div>
 											))}
 										</div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<HandleDestinations />
-										</div>
+										{permissions?.destination.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleDestinations />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -737,6 +737,9 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					});
 					setVisible(false);
 					await utils.notification.all.invalidate();
+					if (notificationId) {
+						await utils.notification.one.invalidate({ notificationId });
+					}
 				})
 				.catch(() => {
 					toast.error(

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

@@ -26,6 +26,7 @@ export const ShowNotifications = () => {
 	const { data, isPending, refetch } = api.notification.all.useQuery();
 	const { mutateAsync, isPending: isRemoving } =
 		api.notification.remove.useMutation();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	return (
 		<div className="w-full">
@@ -56,7 +57,9 @@ export const ShowNotifications = () => {
 											To send notifications it is required to set at least 1
 											provider.
 										</span>
-										<HandleNotifications />
+										{permissions?.notification.create && (
+											<HandleNotifications />
+										)}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4 min-h-[25vh]">
@@ -126,45 +129,50 @@ export const ShowNotifications = () => {
 																notificationId={notification.notificationId}
 															/>
 
-															<DialogAction
-																title="Delete Notification"
-																description="Are you sure you want to delete this notification?"
-																type="destructive"
-																onClick={async () => {
-																	await mutateAsync({
-																		notificationId: notification.notificationId,
-																	})
-																		.then(() => {
-																			toast.success(
-																				"Notification deleted successfully",
-																			);
-																			refetch();
+															{permissions?.notification.delete && (
+																<DialogAction
+																	title="Delete Notification"
+																	description="Are you sure you want to delete this notification?"
+																	type="destructive"
+																	onClick={async () => {
+																		await mutateAsync({
+																			notificationId:
+																				notification.notificationId,
 																		})
-																		.catch(() => {
-																			toast.error(
-																				"Error deleting notification",
-																			);
-																		});
-																}}
-															>
-																<Button
-																	variant="ghost"
-																	size="icon"
-																	className="group hover:bg-red-500/10 "
-																	isLoading={isRemoving}
+																			.then(() => {
+																				toast.success(
+																					"Notification deleted successfully",
+																				);
+																				refetch();
+																			})
+																			.catch(() => {
+																				toast.error(
+																					"Error deleting notification",
+																				);
+																			});
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																</Button>
-															</DialogAction>
+																	<Button
+																		variant="ghost"
+																		size="icon"
+																		className="group hover:bg-red-500/10 "
+																		isLoading={isRemoving}
+																	>
+																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	</Button>
+																</DialogAction>
+															)}
 														</div>
 													</div>
 												</div>
 											))}
 										</div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<HandleNotifications />
-										</div>
+										{permissions?.notification.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleNotifications />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -59,6 +59,7 @@ export const ShowServers = () => {
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: canCreateMoreServers } =
 		api.stripe.canCreateMoreServers.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	return (
 		<div className="w-full">
@@ -115,7 +116,7 @@ export const ShowServers = () => {
 													Start adding servers to deploy your applications
 													remotely.
 												</span>
-												<HandleServers />
+												{permissions?.server.create && <HandleServers />}
 											</div>
 										) : (
 											<div className="flex flex-col gap-4 min-h-[25vh]">
@@ -362,66 +363,71 @@ export const ShowServers = () => {
 
 																				<div className="flex-1" />
 
-																				<Tooltip>
-																					<TooltipTrigger asChild>
-																						<div>
-																							<DialogAction
-																								disabled={!canDelete}
-																								title={
-																									canDelete
-																										? "Delete Server"
-																										: "Server has active services"
-																								}
-																								description={
-																									canDelete ? (
-																										"This will delete the server and all associated data"
-																									) : (
-																										<div className="flex flex-col gap-2">
-																											You can not delete this
-																											server because it has
-																											active services.
-																											<AlertBlock type="warning">
-																												You have active services
-																												associated with this
-																												server, please delete
-																												them first.
-																											</AlertBlock>
-																										</div>
-																									)
-																								}
-																								onClick={async () => {
-																									await mutateAsync({
-																										serverId: server.serverId,
-																									})
-																										.then(() => {
-																											refetch();
-																											toast.success(
-																												`Server ${server.name} deleted successfully`,
-																											);
+																				{permissions?.server.delete && (
+																					<Tooltip>
+																						<TooltipTrigger asChild>
+																							<div>
+																								<DialogAction
+																									disabled={!canDelete}
+																									title={
+																										canDelete
+																											? "Delete Server"
+																											: "Server has active services"
+																									}
+																									description={
+																										canDelete ? (
+																											"This will delete the server and all associated data"
+																										) : (
+																											<div className="flex flex-col gap-2">
+																												You can not delete this
+																												server because it has
+																												active services.
+																												<AlertBlock type="warning">
+																													You have active
+																													services associated
+																													with this server,
+																													please delete them
+																													first.
+																												</AlertBlock>
+																											</div>
+																										)
+																									}
+																									onClick={async () => {
+																										await mutateAsync({
+																											serverId: server.serverId,
 																										})
-																										.catch((err) => {
-																											toast.error(err.message);
-																										});
-																								}}
-																							>
-																								<Button
-																									variant="ghost"
-																									size="icon"
-																									className={`h-9 w-9 ${canDelete ? "text-destructive hover:text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"}`}
+																											.then(() => {
+																												refetch();
+																												toast.success(
+																													`Server ${server.name} deleted successfully`,
+																												);
+																											})
+																											.catch((err) => {
+																												toast.error(
+																													err.message,
+																												);
+																											});
+																									}}
 																								>
-																									<Trash2 className="h-4 w-4" />
-																								</Button>
-																							</DialogAction>
-																						</div>
-																					</TooltipTrigger>
-																					<TooltipContent>
-																						<p>
-																							{canDelete
-																								? "Delete Server"
-																								: "Cannot delete - has active services"}
-																						</p>
-																					</TooltipContent>
-																				</Tooltip>
+																									<Button
+																										variant="ghost"
+																										size="icon"
+																										className={`h-9 w-9 ${canDelete ? "text-destructive hover:text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"}`}
+																									>
+																										<Trash2 className="h-4 w-4" />
+																									</Button>
+																								</DialogAction>
+																							</div>
+																						</TooltipTrigger>
+																						<TooltipContent>
+																							<p>
+																								{canDelete
+																									? "Delete Server"
+																									: "Cannot delete - has active services"}
+																							</p>
+																						</TooltipContent>
+																					</Tooltip>
+																				)}
 																			</TooltipProvider>
 																		</div>
 																	)}
@@ -431,13 +437,15 @@ export const ShowServers = () => {
 													})}
 												</div>
 
-												<div className="flex flex-row gap-2 flex-wrap w-full justify-end mt-4">
-													{data && data?.length > 0 && (
-														<div>
-															<HandleServers />
-														</div>
-													)}
-												</div>
+												{permissions?.server.create && (
+													<div className="flex flex-row gap-2 flex-wrap w-full justify-end mt-4">
+														{data && data?.length > 0 && (
+															<div>
+																<HandleServers />
+															</div>
+														)}
+													</div>
+												)}
 											</div>
 										)}
 									</>

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

@@ -17,6 +17,7 @@ export const ShowDestinations = () => {
 	const { data, isPending, refetch } = api.sshKey.all.useQuery();
 	const { mutateAsync, isPending: isRemoving } =
 		api.sshKey.remove.useMutation();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	return (
 		<div className="w-full">
@@ -46,7 +47,7 @@ export const ShowDestinations = () => {
 										<span className="text-base text-muted-foreground text-center">
 											You don't have any SSH keys
 										</span>
-										<HandleSSHKeys />
+										{permissions?.sshKeys.create && <HandleSSHKeys />}
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
@@ -84,43 +85,47 @@ export const ShowDestinations = () => {
 														<div className="flex flex-row gap-1">
 															<HandleSSHKeys sshKeyId={sshKey.sshKeyId} />
 
-															<DialogAction
-																title="Delete SSH Key"
-																description="Are you sure you want to delete this SSH Key?"
-																type="destructive"
-																onClick={async () => {
-																	await mutateAsync({
-																		sshKeyId: sshKey.sshKeyId,
-																	})
-																		.then(() => {
-																			toast.success(
-																				"SSH Key deleted successfully",
-																			);
-																			refetch();
+															{permissions?.sshKeys.delete && (
+																<DialogAction
+																	title="Delete SSH Key"
+																	description="Are you sure you want to delete this SSH Key?"
+																	type="destructive"
+																	onClick={async () => {
+																		await mutateAsync({
+																			sshKeyId: sshKey.sshKeyId,
 																		})
-																		.catch(() => {
-																			toast.error("Error deleting SSH Key");
-																		});
-																}}
-															>
-																<Button
-																	variant="ghost"
-																	size="icon"
-																	className="group hover:bg-red-500/10 "
-																	isLoading={isRemoving}
+																			.then(() => {
+																				toast.success(
+																					"SSH Key deleted successfully",
+																				);
+																				refetch();
+																			})
+																			.catch(() => {
+																				toast.error("Error deleting SSH Key");
+																			});
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-																</Button>
-															</DialogAction>
+																	<Button
+																		variant="ghost"
+																		size="icon"
+																		className="group hover:bg-red-500/10 "
+																		isLoading={isRemoving}
+																	>
+																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	</Button>
+																</DialogAction>
+															)}
 														</div>
 													</div>
 												</div>
 											))}
 										</div>
 
-										<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-											<HandleSSHKeys />
-										</div>
+										{permissions?.sshKeys.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleSSHKeys />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -32,7 +32,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 
 const addInvitation = z.object({
@@ -40,7 +39,7 @@ const addInvitation = z.object({
 		.string()
 		.min(1, "Email is required")
 		.email({ message: "Invalid email" }),
-	role: z.enum(["member", "admin"]),
+	role: z.string().min(1, "Role is required"),
 	notificationId: z.string().optional(),
 });
 
@@ -49,13 +48,14 @@ type AddInvitation = z.infer<typeof addInvitation>;
 export const AddInvitation = () => {
 	const [open, setOpen] = useState(false);
 	const utils = api.useUtils();
-	const [isLoading, setIsLoading] = useState(false);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: emailProviders } =
 		api.notification.getEmailProviders.useQuery();
+	const { mutateAsync: inviteMember, isPending: isInviting } =
+		api.organization.inviteMember.useMutation();
 	const { mutateAsync: sendInvitation } = api.user.sendInvitation.useMutation();
+	const { data: customRoles } = api.customRole.all.useQuery();
 	const [error, setError] = useState<string | null>(null);
-	const { data: activeOrganization } = api.organization.active.useQuery();
 
 	const form = useForm<AddInvitation>({
 		defaultValues: {
@@ -70,19 +70,15 @@ export const AddInvitation = () => {
 	}, [form, form.formState.isSubmitSuccessful, form.reset]);
 
 	const onSubmit = async (data: AddInvitation) => {
-		setIsLoading(true);
-		const result = await authClient.organization.inviteMember({
-			email: data.email.toLowerCase(),
-			role: data.role,
-			organizationId: activeOrganization?.id,
-		});
+		try {
+			const result = await inviteMember({
+				email: data.email.toLowerCase(),
+				role: data.role,
+			});
 
-		if (result.error) {
-			setError(result.error.message || "");
-		} else {
 			if (!isCloud && data.notificationId) {
 				await sendInvitation({
-					invitationId: result.data.id,
+					invitationId: result!.id,
 					notificationId: data.notificationId || "",
 				})
 					.then(() => {
@@ -96,10 +92,11 @@ export const AddInvitation = () => {
 			}
 			setError(null);
 			setOpen(false);
+		} catch (error: any) {
+			setError(error.message || "Failed to create invitation");
 		}
 
 		utils.organization.allInvitations.invalidate();
-		setIsLoading(false);
 	};
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
@@ -159,6 +156,11 @@ export const AddInvitation = () => {
 											<SelectContent>
 												<SelectItem value="member">Member</SelectItem>
 												<SelectItem value="admin">Admin</SelectItem>
+												{customRoles?.map((role) => (
+													<SelectItem key={role.role} value={role.role}>
+														{role.role}
+													</SelectItem>
+												))}
 											</SelectContent>
 										</Select>
 										<FormDescription>
@@ -212,7 +214,7 @@ export const AddInvitation = () => {
 						)}
 						<DialogFooter className="flex w-full flex-row">
 							<Button
-								isLoading={isLoading}
+								isLoading={isInviting}
 								form="hook-form-add-invitation"
 								type="submit"
 							>

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

@@ -173,9 +173,11 @@ type AddPermissions = z.infer<typeof addPermissions>;
 
 interface Props {
 	userId: string;
+	role?: string;
 }
 
-export const AddUserPermissions = ({ userId }: Props) => {
+export const AddUserPermissions = ({ userId, role }: Props) => {
+	const isCustomRole = !!role && !["owner", "admin", "member"].includes(role);
 	const [isOpen, setIsOpen] = useState(false);
 	const { data: projects } = api.project.allForPermissions.useQuery(undefined, {
 		enabled: isOpen,
@@ -284,226 +286,237 @@ export const AddUserPermissions = ({ userId }: Props) => {
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4"
 					>
-						<FormField
-							control={form.control}
-							name="canCreateProjects"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Create Projects</FormLabel>
-										<FormDescription>
-											Allow the user to create projects
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canDeleteProjects"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Delete Projects</FormLabel>
-										<FormDescription>
-											Allow the user to delete projects
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canCreateServices"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Create Services</FormLabel>
-										<FormDescription>
-											Allow the user to create services
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canDeleteServices"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Delete Services</FormLabel>
-										<FormDescription>
-											Allow the user to delete services
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canCreateEnvironments"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Create Environments</FormLabel>
-										<FormDescription>
-											Allow the user to create environments
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canDeleteEnvironments"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Delete Environments</FormLabel>
-										<FormDescription>
-											Allow the user to delete environments
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToTraefikFiles"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Traefik Files</FormLabel>
-										<FormDescription>
-											Allow the user to access to the Traefik Tab Files
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToDocker"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Docker</FormLabel>
-										<FormDescription>
-											Allow the user to access to the Docker Tab
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToAPI"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to API/CLI</FormLabel>
-										<FormDescription>
-											Allow the user to access to the API/CLI
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToSSHKeys"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to SSH Keys</FormLabel>
-										<FormDescription>
-											Allow to users to access to the SSH Keys section
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
-						<FormField
-							control={form.control}
-							name="canAccessToGitProviders"
-							render={({ field }) => (
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-									<div className="space-y-0.5">
-										<FormLabel>Access to Git Providers</FormLabel>
-										<FormDescription>
-											Allow to users to access to the Git Providers section
-										</FormDescription>
-									</div>
-									<FormControl>
-										<Switch
-											checked={field.value}
-											onCheckedChange={field.onChange}
-										/>
-									</FormControl>
-								</FormItem>
-							)}
-						/>
+						{isCustomRole && (
+							<div className="md:col-span-2 rounded-lg border p-3 bg-muted/50 text-sm text-muted-foreground">
+								This user has a custom role assigned. Capabilities are defined
+								by the role. You can still manage which projects, environments,
+								and services they can access below.
+							</div>
+						)}
+						{!isCustomRole && (
+							<>
+								<FormField
+									control={form.control}
+									name="canCreateProjects"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Create Projects</FormLabel>
+												<FormDescription>
+													Allow the user to create projects
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canDeleteProjects"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Delete Projects</FormLabel>
+												<FormDescription>
+													Allow the user to delete projects
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canCreateServices"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Create Services</FormLabel>
+												<FormDescription>
+													Allow the user to create services
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canDeleteServices"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Delete Services</FormLabel>
+												<FormDescription>
+													Allow the user to delete services
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canCreateEnvironments"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Create Environments</FormLabel>
+												<FormDescription>
+													Allow the user to create environments
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canDeleteEnvironments"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Delete Environments</FormLabel>
+												<FormDescription>
+													Allow the user to delete environments
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canAccessToTraefikFiles"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Access to Traefik Files</FormLabel>
+												<FormDescription>
+													Allow the user to access to the Traefik Tab Files
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canAccessToDocker"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Access to Docker</FormLabel>
+												<FormDescription>
+													Allow the user to access to the Docker Tab
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canAccessToAPI"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Access to API/CLI</FormLabel>
+												<FormDescription>
+													Allow the user to access to the API/CLI
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canAccessToSSHKeys"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Access to SSH Keys</FormLabel>
+												<FormDescription>
+													Allow to users to access to the SSH Keys section
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="canAccessToGitProviders"
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+											<div className="space-y-0.5">
+												<FormLabel>Access to Git Providers</FormLabel>
+												<FormDescription>
+													Allow to users to access to the Git Providers section
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							</>
+						)}
 						<FormField
 							control={form.control}
 							name="accessedProjects"

apps/dokploy/components/dashboard/settings/users/change-role.tsx

@@ -34,14 +34,14 @@ import {
 import { api } from "@/utils/api";
 
 const changeRoleSchema = z.object({
-	role: z.enum(["admin", "member"]),
+	role: z.string().min(1),
 });
 
 type ChangeRoleSchema = z.infer<typeof changeRoleSchema>;
 
 interface Props {
 	memberId: string;
-	currentRole: "admin" | "member";
+	currentRole: string;
 	userEmail: string;
 }
 
@@ -49,6 +49,10 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const utils = api.useUtils();
 
+	const { data: customRoles } = api.customRole.all.useQuery(undefined, {
+		enabled: isOpen,
+	});
+
 	const { mutateAsync, isError, error, isPending } =
 		api.organization.updateMemberRole.useMutation();
 
@@ -125,6 +129,14 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
 										<SelectContent>
 											<SelectItem value="admin">Admin</SelectItem>
 											<SelectItem value="member">Member</SelectItem>
+											{customRoles?.map((customRole) => (
+												<SelectItem
+													key={customRole.role}
+													value={customRole.role}
+												>
+													{customRole.role}
+												</SelectItem>
+											))}
 										</SelectContent>
 									</Select>
 									<FormDescription>
@@ -132,6 +144,13 @@ export const ChangeRole = ({ memberId, currentRole, userEmail }: Props) => {
 										<br />
 										<strong>Member:</strong> Limited permissions, can be
 										customized.
+										{customRoles && customRoles.length > 0 && (
+											<>
+												<br />
+												<strong>Custom roles:</strong> Enterprise-defined
+												permissions.
+											</>
+										)}
 										<br />
 										<em className="text-muted-foreground text-xs">
 											Note: Owner role is intransferible.

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

@@ -1,6 +1,7 @@
 import { format } from "date-fns";
 import { Loader2, MoreHorizontal, Users } from "lucide-react";
 import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
 import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -35,10 +36,20 @@ export const ShowUsers = () => {
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data, isPending, refetch } = api.user.all.useQuery();
 	const { mutateAsync } = api.user.remove.useMutation();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const { data: hasValidLicense } =
+		api.licenseKey.haveValidLicenseKey.useQuery();
 
 	const utils = api.useUtils();
 	const { data: session } = api.user.session.useQuery();
 
+	const FREE_ROLES = ["owner", "admin", "member"];
+	const membersWithCustomRoles = data?.filter(
+		(member) => !FREE_ROLES.includes(member.role),
+	);
+	const hasCustomRolesWithoutLicense =
+		!hasValidLicense && (membersWithCustomRoles?.length ?? 0) > 0;
+
 	return (
 		<div className="w-full">
 			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-5xl mx-auto">
@@ -69,6 +80,18 @@ export const ShowUsers = () => {
 									</div>
 								) : (
 									<div className="flex flex-col gap-4  min-h-[25vh]">
+										{hasCustomRolesWithoutLicense && (
+											<AlertBlock type="warning">
+												You have{" "}
+												{membersWithCustomRoles?.length === 1
+													? "1 user"
+													: `${membersWithCustomRoles?.length} users`}{" "}
+												assigned to custom roles. Custom roles will not work
+												without a valid Enterprise license. Please activate your
+												license or change these users to a free role (Admin or
+												Member).
+											</AlertBlock>
+										)}
 										<Table>
 											<TableHeader>
 												<TableRow>
@@ -89,40 +112,39 @@ export const ShowUsers = () => {
 													)?.role;
 
 													// Owner never has "Edit Permissions" (they're absolute owner)
-													// Other users can edit permissions if target is not themselves and target is a member
+													// Other users can edit permissions if target is not themselves and target is a member/custom role
+													const isStaticAdminOrOwner =
+														member.role === "owner" || member.role === "admin";
 													const canEditPermissions =
-														member.role !== "owner" &&
-														member.role === "member" &&
+														!isStaticAdminOrOwner &&
 														member.user.id !== session?.user?.id;
 
 													// Can change role based on hierarchy:
 													// - Owner: Can change anyone's role (except themselves and other owners)
-													// - Admin: Can only change member roles (not other admins or owners)
+													// - Admin: Can only change member/custom roles (not other admins or owners)
 													// - Owner role is intransferible
 													const canChangeRole =
 														member.role !== "owner" &&
 														member.user.id !== session?.user?.id &&
 														(currentUserRole === "owner" ||
 															(currentUserRole === "admin" &&
-																member.role === "member"));
+																member.role !== "admin"));
 
-													// Delete/Unlink follow same hierarchy as role changes
-													// - Owner: Can delete/unlink anyone (except themselves and owner can't be deleted)
-													// - Admin: Can only delete/unlink members (not other admins or owner)
-													const canDelete =
-														member.role !== "owner" &&
-														!isCloud &&
-														member.user.id !== session?.user?.id &&
-														(currentUserRole === "owner" ||
-															(currentUserRole === "admin" &&
-																member.role === "member"));
+													const canDeleteMember =
+														permissions?.member.delete ?? false;
 
-													const canUnlink =
+													// Self-hosted: "Delete User" removes the user entirely
+													// Cloud: "Unlink User" removes from the organization only
+													const canRemove =
 														member.role !== "owner" &&
 														member.user.id !== session?.user?.id &&
 														(currentUserRole === "owner" ||
 															(currentUserRole === "admin" &&
-																member.role === "member"));
+																member.role !== "admin") ||
+															(canDeleteMember && !isStaticAdminOrOwner));
+
+													const canDelete = canRemove && !isCloud;
+													const canUnlink = canRemove && !!isCloud;
 
 													const hasAnyAction =
 														canEditPermissions ||
@@ -134,6 +156,11 @@ export const ShowUsers = () => {
 														<TableRow key={member.id}>
 															<TableCell className="w-[100px]">
 																{member.user.email}
+																{member.user.id === session?.user?.id && (
+																	<span className="text-muted-foreground ml-1">
+																		(You)
+																	</span>
+																)}
 															</TableCell>
 															<TableCell className="text-center">
 																<Badge
@@ -179,9 +206,7 @@ export const ShowUsers = () => {
 																			{canChangeRole && (
 																				<ChangeRole
 																					memberId={member.id}
-																					currentRole={
-																						member.role as "admin" | "member"
-																					}
+																					currentRole={member.role}
 																					userEmail={member.user.email}
 																				/>
 																			)}
@@ -189,6 +214,7 @@ export const ShowUsers = () => {
 																			{canEditPermissions && (
 																				<AddUserPermissions
 																					userId={member.user.id}
+																					role={member.role}
 																				/>
 																			)}
 

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

@@ -1,4 +1,11 @@
-import { HardDriveDownload, Loader2 } from "lucide-react";
+import {
+	AlertTriangle,
+	CheckCircle2,
+	HardDriveDownload,
+	Loader2,
+	RefreshCw,
+	XCircle,
+} from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import {
@@ -15,11 +22,70 @@ import {
 import { Button } from "@/components/ui/button";
 import { api } from "@/utils/api";
 
+type ServiceStatus = {
+	status: "healthy" | "unhealthy";
+	message?: string;
+};
+
+type HealthResult = {
+	postgres: ServiceStatus;
+	redis: ServiceStatus;
+	traefik: ServiceStatus;
+};
+
+type ModalState = "idle" | "checking" | "results" | "updating";
+
+const ServiceStatusItem = ({
+	name,
+	service,
+}: {
+	name: string;
+	service: ServiceStatus;
+}) => (
+	<div className="flex items-center gap-2">
+		{service.status === "healthy" ? (
+			<CheckCircle2 className="h-4 w-4 text-green-500" />
+		) : (
+			<XCircle className="h-4 w-4 text-red-500" />
+		)}
+		<span className="text-sm font-medium">{name}</span>
+		{service.status === "unhealthy" && service.message && (
+			<span className="text-xs text-muted-foreground">— {service.message}</span>
+		)}
+	</div>
+);
+
 export const UpdateWebServer = () => {
-	const [updating, setUpdating] = useState(false);
+	const [modalState, setModalState] = useState<ModalState>("idle");
 	const [open, setOpen] = useState(false);
+	const [healthResult, setHealthResult] = useState<HealthResult | null>(null);
 
 	const { mutateAsync: updateServer } = api.settings.updateServer.useMutation();
+	const { refetch: checkHealth } =
+		api.settings.checkInfrastructureHealth.useQuery(undefined, {
+			enabled: false,
+		});
+
+	const handleVerify = async () => {
+		setModalState("checking");
+		setHealthResult(null);
+
+		try {
+			const result = await checkHealth();
+			if (result.data) {
+				setHealthResult(result.data);
+			}
+		} catch {
+			// checkHealth failed entirely
+		}
+		setModalState("results");
+	};
+
+	const allHealthy =
+		healthResult &&
+		healthResult.postgres.status === "healthy" &&
+		healthResult.redis.status === "healthy" &&
+		healthResult.traefik.status === "healthy";
 
 	const checkIsUpdateFinished = async () => {
 		try {
@@ -33,28 +99,24 @@ export const UpdateWebServer = () => {
 			);
 
 			setTimeout(() => {
-				// Allow seeing the toast before reloading
 				window.location.reload();
 			}, 2000);
 		} catch {
-			// Delay each request
 			await new Promise((resolve) => setTimeout(resolve, 2000));
-			// Keep running until it returns 200
 			void checkIsUpdateFinished();
 		}
 	};
 
 	const handleConfirm = async () => {
 		try {
-			setUpdating(true);
+			setModalState("updating");
 			await updateServer();
 
-			// Give some time for docker service restart before starting to check status
 			await new Promise((resolve) => setTimeout(resolve, 8000));
 
 			await checkIsUpdateFinished();
 		} catch (error) {
-			setUpdating(false);
+			setModalState("results");
 			console.error("Error updating server:", error);
 			toast.error(
 				"An error occurred while updating the server, please try again.",
@@ -62,6 +124,14 @@ export const UpdateWebServer = () => {
 		}
 	};
 
+	const handleClose = () => {
+		if (modalState !== "updating") {
+			setOpen(false);
+			setModalState("idle");
+			setHealthResult(null);
+		}
+	};
+
 	return (
 		<AlertDialog open={open}>
 			<AlertDialogTrigger asChild>
@@ -81,36 +151,111 @@ export const UpdateWebServer = () => {
 			<AlertDialogContent>
 				<AlertDialogHeader>
 					<AlertDialogTitle>
-						{updating
-							? "Server update in progress"
-							: "Are you absolutely sure?"}
+						{modalState === "idle" && "Are you absolutely sure?"}
+						{modalState === "checking" && "Verifying Services..."}
+						{modalState === "results" &&
+							(allHealthy ? "Ready to Update" : "Service Issues Detected")}
+						{modalState === "updating" && "Server update in progress"}
 					</AlertDialogTitle>
-					<AlertDialogDescription>
-						{updating ? (
-							<span className="flex items-center gap-1">
-								<Loader2 className="animate-spin" />
-								The server is being updated, please wait...
-							</span>
-						) : (
-							<>
-								This action cannot be undone. This will update the web server to
-								the new version. You will not be able to use the panel during
-								the update process. The page will be reloaded once the update is
-								finished.
-							</>
-						)}
+					<AlertDialogDescription asChild>
+						<div>
+							{modalState === "idle" && (
+								<span>
+									This will update the web server to the new version. You will
+									not be able to use the panel during the update process. The
+									page will be reloaded once the update is finished.
+									<br />
+									<br />
+									We recommend verifying that all services are running before
+									updating.
+								</span>
+							)}
+
+							{modalState === "checking" && (
+								<span className="flex items-center gap-2">
+									<Loader2 className="animate-spin h-4 w-4" />
+									Checking PostgreSQL, Redis and Traefik...
+								</span>
+							)}
+
+							{modalState === "results" && healthResult && (
+								<div className="flex flex-col gap-3">
+									<div className="flex flex-col gap-2">
+										<ServiceStatusItem
+											name="PostgreSQL"
+											service={healthResult.postgres}
+										/>
+										<ServiceStatusItem
+											name="Redis"
+											service={healthResult.redis}
+										/>
+										<ServiceStatusItem
+											name="Traefik"
+											service={healthResult.traefik}
+										/>
+									</div>
+
+									{!allHealthy && (
+										<div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 p-3">
+											<AlertTriangle className="h-4 w-4 text-yellow-500 mt-0.5 shrink-0" />
+											<span className="text-sm text-yellow-600 dark:text-yellow-400">
+												Some services are not healthy. You can still proceed
+												with the update.
+											</span>
+										</div>
+									)}
+
+									{allHealthy && (
+										<span className="text-sm text-muted-foreground">
+											All services are running. You can proceed with the update.
+										</span>
+									)}
+								</div>
+							)}
+
+							{modalState === "results" && !healthResult && (
+								<div className="flex items-start gap-2 rounded-md border border-yellow-500/30 bg-yellow-500/10 p-3">
+									<AlertTriangle className="h-4 w-4 text-yellow-500 mt-0.5 shrink-0" />
+									<span className="text-sm text-yellow-600 dark:text-yellow-400">
+										Could not verify services. You can still proceed with the
+										update.
+									</span>
+								</div>
+							)}
+
+							{modalState === "updating" && (
+								<span className="flex items-center gap-2">
+									<Loader2 className="animate-spin h-4 w-4" />
+									The server is being updated, please wait...
+								</span>
+							)}
+						</div>
 					</AlertDialogDescription>
 				</AlertDialogHeader>
-				{!updating && (
+				{modalState === "idle" && (
 					<AlertDialogFooter>
-						<AlertDialogCancel onClick={() => setOpen(false)}>
-							Cancel
-						</AlertDialogCancel>
+						<AlertDialogCancel onClick={handleClose}>Cancel</AlertDialogCancel>
+						<Button variant="secondary" onClick={handleVerify}>
+							<RefreshCw className="h-4 w-4" />
+							Verify Status
+						</Button>
 						<AlertDialogAction onClick={handleConfirm}>
 							Confirm
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				)}
+				{modalState === "results" && (
+					<AlertDialogFooter>
+						<AlertDialogCancel onClick={handleClose}>Cancel</AlertDialogCancel>
+						<Button variant="secondary" onClick={handleVerify}>
+							<RefreshCw className="h-4 w-4" />
+							Re-check
+						</Button>
+						<AlertDialogAction onClick={handleConfirm}>
+							{allHealthy ? "Confirm" : "Confirm Anyway"}
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				)}
 			</AlertDialogContent>
 		</AlertDialog>
 	);