fix: update API key deletion authorization check

- Changed the authorization check for deleting an API key to use referenceId instead of userId, ensuring proper validation against the current user's ID.

CONTRIBUTING.md

@@ -62,16 +62,6 @@ pnpm install
 cp apps/dokploy/.env.example apps/dokploy/.env
 ```
 
-### Optional Docker Configuration
-
-The following environment variables can be added to your `.env` file if you need custom Docker daemon configuration:
-
-- **DOCKER_API_VERSION**: Specify which Docker API version to use (optional)
-- **DOCKER_HOST**: Specify a custom Docker daemon host (optional)
-- **DOCKER_PORT**: Specify a custom Docker daemon port (optional)
-
-These variables are typically not needed for standard local development but can be useful if you need to connect to a remote Docker daemon or require a specific Docker API version.
-
 ## Requirements
 
 - [Docker](/GUIDES.md#docker)
@@ -181,11 +171,6 @@ curl -sSL "https://github.com/buildpacks/pack/releases/download/v0.39.1/pack-v0.
 - **Issue Association:** For any significant change, it's highly recommended to open an issue first to discuss the proposed solution with the community and maintainers. This ensures alignment and avoids duplicated effort. If your PR resolves an existing issue, please link it in the description (e.g., `Fixes #123`, `Closes #456`).
 - **Large Features:** Pull Requests that introduce very large or broad features **will not be accepted** unless the idea is first outlined and discussed in a GitHub issue. Large features should be designed together with the Dokploy team so the project stays coherent and moves in the same direction. Open an issue to propose and align on the design before implementing.
 
-### Pull Request Guidelines
-
-- **Keep PRs small and focused.** Avoid very large PRs; prefer several smaller PRs (e.g., one template or one logical change per PR). This speeds up review and keeps the history clear.
-- **Test before submitting.** Any PR that has not been tested by the contributor will be closed. This keeps the PR queue tidy and ensures that only contributions that have been verified by their authors are considered.
-
 Thank you for your contribution!
 
 ## Templates

apps/api/README.md

@@ -6,249 +6,3 @@ npm run dev
 ```
 open http://localhost:3000
 ```
-
-## Environment Variables
-
-The API server requires the following environment variables for configuration:
-
-### Inngest Configuration
-
-Required for the GET /jobs endpoint to list deployment jobs:
-
-- **INNGEST_BASE_URL** - The base URL for the Inngest instance
-  - Self-hosted: `http://localhost:8288`
-  - Production: `https://dev-inngest.dokploy.com`
-  
-- **INNGEST_SIGNING_KEY** - The signing key for authenticating with Inngest
-
-Optional configuration for filtering and pagination:
-
-- **INNGEST_EVENTS_RECEIVED_AFTER** (optional) - An RFC3339 timestamp to filter events received after a specific date (e.g., `2024-01-01T00:00:00Z`). If unset, no date filter is applied.
-
-- **INNGEST_JOBS_MAX_EVENTS** (optional) - Maximum number of events to fetch when listing jobs. Default is 100, maximum is 10000. Used for pagination with cursor.
-
-### Lemon Squeezy Integration
-
-- **LEMON_SQUEEZY_API_KEY** - API key for Lemon Squeezy integration
-- **LEMON_SQUEEZY_STORE_ID** - Store ID for Lemon Squeezy integration
-
-### Docker Configuration
-
-Optional configuration for customizing Docker daemon connections:
-
-- **DOCKER_API_VERSION** (optional) - Specifies which Docker API version to use when connecting to the Docker daemon. If not set, the Docker client uses the default API version.
-
-- **DOCKER_HOST** (optional) - Specifies the Docker daemon host to connect to. If not set, uses the default Docker socket connection.
-
-- **DOCKER_PORT** (optional) - Specifies the port for connecting to the Docker daemon. If not set, uses the default port.
-
-These variables allow advanced users to customize how the Dokploy API server connects to Docker, which can be useful for connecting to remote Docker daemons or using specific API versions.
-
-## API Endpoints
-
-### GET /jobs
-
-Lists deployment jobs (Inngest runs) for a specified server.
-
-**Query Parameters:**
-- `serverId` (required) - The ID of the server to list deployment jobs for
-
-**Response:**
-Returns an array of deployment job objects with the same shape as BullMQ queue jobs:
-```json
-[
-  {
-    "id": "string",
-    "name": "string",
-    "data": {},
-    "timestamp": 0,
-    "processedOn": 0,
-    "finishedOn": 0,
-    "failedReason": "string",
-    "state": "string"
-  }
-]
-```
-
-**Error Responses:**
-- `400` - serverId is not provided
-- `503` - INNGEST_BASE_URL is not configured
-- `200` - Empty array on other errors
-
-This endpoint is used by the UI to display deployment queue information in the dashboard.
-
-## Search Endpoints
-
-The following search endpoints provide flexible querying capabilities with pagination support. All search endpoints respect member permissions, returning only resources the user has access to.
-
-### application.search
-
-Search applications across name, appName, description, repository, owner, and dockerImage fields.
-
-**Query Parameters:**
-- `q` (optional string) - General search term that searches across name, appName, description, repository, owner, and dockerImage
-- `name` (optional string) - Filter by application name
-- `appName` (optional string) - Filter by app name
-- `description` (optional string) - Filter by description
-- `repository` (optional string) - Filter by repository
-- `owner` (optional string) - Filter by owner
-- `dockerImage` (optional string) - Filter by Docker image
-- `projectId` (optional string) - Filter by project ID
-- `environmentId` (optional string) - Filter by environment ID
-- `limit` (number, default 20, min 1, max 100) - Maximum number of results
-- `offset` (number, default 0, min 0) - Pagination offset
-
-**Response:**
-```json
-{
-  "items": [
-    {
-      "applicationId": "string",
-      "name": "string",
-      "appName": "string",
-      "description": "string",
-      "environmentId": "string",
-      "applicationStatus": "string",
-      "sourceType": "string",
-      "createdAt": "string"
-    }
-  ],
-  "total": 0
-}
-```
-
-### compose.search
-
-Search compose services with filtering by name, appName, and description.
-
-**Query Parameters:**
-- `q` (optional string) - General search term across name, appName, description
-- `name` (optional string) - Filter by name
-- `appName` (optional string) - Filter by app name
-- `description` (optional string) - Filter by description
-- `projectId` (optional string) - Filter by project ID
-- `environmentId` (optional string) - Filter by environment ID
-- `limit` (number, default 20, min 1, max 100) - Maximum results
-- `offset` (number, default 0, min 0) - Pagination offset
-
-**Response:**
-```json
-{
-  "items": [
-    {
-      "composeId": "string",
-      "name": "string",
-      "appName": "string",
-      "description": "string",
-      "environmentId": "string",
-      "composeStatus": "string",
-      "sourceType": "string",
-      "createdAt": "string"
-    }
-  ],
-  "total": 0
-}
-```
-
-### environment.search
-
-Search environments by name and description.
-
-**Query Parameters:**
-- `q` (optional string) - General search term across name and description
-- `name` (optional string) - Filter by name
-- `description` (optional string) - Filter by description
-- `projectId` (optional string) - Filter by project ID
-- `limit` (number, default 20, min 1, max 100) - Maximum results
-- `offset` (number, default 0, min 0) - Pagination offset
-
-**Response:**
-```json
-{
-  "items": [
-    {
-      "environmentId": "string",
-      "name": "string",
-      "description": "string",
-      "createdAt": "string",
-      "env": "string",
-      "projectId": "string",
-      "isDefault": true
-    }
-  ],
-  "total": 0
-}
-```
-
-### project.search
-
-Search projects by name and description.
-
-**Query Parameters:**
-- `q` (optional string) - General search term across name and description
-- `name` (optional string) - Filter by name
-- `description` (optional string) - Filter by description
-- `limit` (number, default 20, min 1, max 100) - Maximum results
-- `offset` (number, default 0, min 0) - Pagination offset
-
-**Response:**
-```json
-{
-  "items": [
-    {
-      "projectId": "string",
-      "name": "string",
-      "description": "string",
-      "createdAt": "string",
-      "organizationId": "string",
-      "env": "string"
-    }
-  ],
-  "total": 0
-}
-```
-
-### Database Service Search Endpoints
-
-The following database services all share the same search interface:
-- **postgres.search**
-- **mysql.search**
-- **mariadb.search**
-- **mongo.search**
-- **redis.search**
-
-**Query Parameters:**
-- `q` (optional string) - General search term across name, appName, description
-- `name` (optional string) - Filter by name
-- `appName` (optional string) - Filter by app name
-- `description` (optional string) - Filter by description
-- `projectId` (optional string) - Filter by project ID
-- `environmentId` (optional string) - Filter by environment ID
-- `limit` (number, default 20, min 1, max 100) - Maximum results
-- `offset` (number, default 0, min 0) - Pagination offset
-
-**Response:**
-```json
-{
-  "items": [
-    {
-      "postgresId": "string",
-      "name": "string",
-      "appName": "string",
-      "description": "string",
-      "environmentId": "string",
-      "applicationStatus": "string",
-      "createdAt": "string"
-    }
-  ],
-  "total": 0
-}
-```
-
-*Note: The response shape is similar across all database services, with the ID field varying (e.g., `mysqlId`, `mariadbId`, `mongoId`, `redisId`).*
-
-**Search Behavior:**
-- All searches use case-insensitive pattern matching with wildcards
-- Results are ordered by creation date (descending)
-- Members only see services they have access to
-- Returns total count for pagination UI

apps/dokploy/__test__/permissions/check-permission.test.ts

@@ -0,0 +1,144 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockMemberData = (
+	role: string,
+	overrides: Record<string, boolean> = {},
+) => ({
+	id: "member-1",
+	role,
+	userId: "user-1",
+	organizationId: "org-1",
+	accessedProjects: [] as string[],
+	accessedServices: [] as string[],
+	accessedEnvironments: [] as string[],
+	canCreateProjects: overrides.canCreateProjects ?? false,
+	canDeleteProjects: overrides.canDeleteProjects ?? false,
+	canCreateServices: overrides.canCreateServices ?? false,
+	canDeleteServices: overrides.canDeleteServices ?? false,
+	canCreateEnvironments: overrides.canCreateEnvironments ?? false,
+	canDeleteEnvironments: overrides.canDeleteEnvironments ?? false,
+	canAccessToTraefikFiles: overrides.canAccessToTraefikFiles ?? false,
+	canAccessToDocker: overrides.canAccessToDocker ?? false,
+	canAccessToAPI: overrides.canAccessToAPI ?? false,
+	canAccessToSSHKeys: overrides.canAccessToSSHKeys ?? false,
+	canAccessToGitProviders: overrides.canAccessToGitProviders ?? false,
+	user: { id: "user-1", email: "test@test.com" },
+});
+
+let memberToReturn: ReturnType<typeof mockMemberData> =
+	mockMemberData("member");
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: {
+			member: {
+				findFirst: vi.fn(() => Promise.resolve(memberToReturn)),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+			organizationRole: {
+				findFirst: vi.fn(),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+		},
+	},
+}));
+
+vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
+	hasValidLicense: vi.fn(() => Promise.resolve(false)),
+}));
+
+const { checkPermission } = await import("@dokploy/server/services/permission");
+
+const ctx = {
+	user: { id: "user-1" },
+	session: { activeOrganizationId: "org-1" },
+};
+
+beforeEach(() => {
+	vi.clearAllMocks();
+});
+
+describe("static roles bypass enterprise resources", () => {
+	it("owner bypasses deployment.read", async () => {
+		memberToReturn = mockMemberData("owner");
+		await expect(
+			checkPermission(ctx, { deployment: ["read"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("admin bypasses backup.create", async () => {
+		memberToReturn = mockMemberData("admin");
+		await expect(
+			checkPermission(ctx, { backup: ["create"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member bypasses schedule.delete", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, { schedule: ["delete"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member bypasses multiple enterprise permissions at once", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, {
+				deployment: ["read"],
+				backup: ["create"],
+				domain: ["delete"],
+			}),
+		).resolves.toBeUndefined();
+	});
+});
+
+describe("static roles validate free-tier resources", () => {
+	it("owner passes project.create", async () => {
+		memberToReturn = mockMemberData("owner");
+		await expect(
+			checkPermission(ctx, { project: ["create"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member fails project.create (no legacy override)", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, { project: ["create"] }),
+		).rejects.toThrow();
+	});
+
+	it("member passes service.read", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, { service: ["read"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member fails service.create", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(
+			checkPermission(ctx, { service: ["create"] }),
+		).rejects.toThrow();
+	});
+});
+
+describe("legacy boolean overrides for member", () => {
+	it("member passes project.create with canCreateProjects=true", async () => {
+		memberToReturn = mockMemberData("member", { canCreateProjects: true });
+		await expect(
+			checkPermission(ctx, { project: ["create"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member passes docker.read with canAccessToDocker=true", async () => {
+		memberToReturn = mockMemberData("member", { canAccessToDocker: true });
+		await expect(
+			checkPermission(ctx, { docker: ["read"] }),
+		).resolves.toBeUndefined();
+	});
+
+	it("member fails docker.read with canAccessToDocker=false", async () => {
+		memberToReturn = mockMemberData("member");
+		await expect(checkPermission(ctx, { docker: ["read"] })).rejects.toThrow();
+	});
+});

apps/dokploy/__test__/permissions/enterprise-only-resources.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import {
+	enterpriseOnlyResources,
+	statements,
+} from "@dokploy/server/lib/access-control";
+
+const FREE_TIER_RESOURCES = [
+	"organization",
+	"member",
+	"invitation",
+	"team",
+	"ac",
+	"project",
+	"service",
+	"environment",
+	"docker",
+	"sshKeys",
+	"gitProviders",
+	"traefikFiles",
+	"api",
+];
+
+const ENTERPRISE_RESOURCES = [
+	"volume",
+	"deployment",
+	"envVars",
+	"projectEnvVars",
+	"environmentEnvVars",
+	"server",
+	"registry",
+	"certificate",
+	"backup",
+	"volumeBackup",
+	"schedule",
+	"domain",
+	"destination",
+	"notification",
+	"logs",
+	"monitoring",
+	"auditLog",
+];
+
+describe("enterpriseOnlyResources set", () => {
+	it("contains all enterprise resources", () => {
+		for (const resource of ENTERPRISE_RESOURCES) {
+			expect(enterpriseOnlyResources.has(resource)).toBe(true);
+		}
+	});
+
+	it("does NOT contain free-tier resources", () => {
+		for (const resource of FREE_TIER_RESOURCES) {
+			expect(enterpriseOnlyResources.has(resource)).toBe(false);
+		}
+	});
+
+	it("every resource in statements is either free or enterprise", () => {
+		const allResources = Object.keys(statements);
+		for (const resource of allResources) {
+			const isFree = FREE_TIER_RESOURCES.includes(resource);
+			const isEnterprise = enterpriseOnlyResources.has(resource);
+			expect(isFree || isEnterprise).toBe(true);
+		}
+	});
+
+	it("free and enterprise sets don't overlap", () => {
+		for (const resource of FREE_TIER_RESOURCES) {
+			expect(enterpriseOnlyResources.has(resource)).toBe(false);
+		}
+	});
+
+	it("all statement resources are accounted for", () => {
+		const allResources = Object.keys(statements);
+		const categorized = [...FREE_TIER_RESOURCES, ...ENTERPRISE_RESOURCES];
+		for (const resource of allResources) {
+			expect(categorized).toContain(resource);
+		}
+	});
+});

apps/dokploy/__test__/permissions/resolve-permissions.test.ts

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockMemberData = (
+	role: string,
+	overrides: Record<string, boolean> = {},
+) => ({
+	id: "member-1",
+	role,
+	userId: "user-1",
+	organizationId: "org-1",
+	accessedProjects: [] as string[],
+	accessedServices: [] as string[],
+	accessedEnvironments: [] as string[],
+	canCreateProjects: overrides.canCreateProjects ?? false,
+	canDeleteProjects: overrides.canDeleteProjects ?? false,
+	canCreateServices: overrides.canCreateServices ?? false,
+	canDeleteServices: overrides.canDeleteServices ?? false,
+	canCreateEnvironments: overrides.canCreateEnvironments ?? false,
+	canDeleteEnvironments: overrides.canDeleteEnvironments ?? false,
+	canAccessToTraefikFiles: overrides.canAccessToTraefikFiles ?? false,
+	canAccessToDocker: overrides.canAccessToDocker ?? false,
+	canAccessToAPI: overrides.canAccessToAPI ?? false,
+	canAccessToSSHKeys: overrides.canAccessToSSHKeys ?? false,
+	canAccessToGitProviders: overrides.canAccessToGitProviders ?? false,
+	user: { id: "user-1", email: "test@test.com" },
+});
+
+let memberToReturn: ReturnType<typeof mockMemberData> =
+	mockMemberData("member");
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: {
+			member: {
+				findFirst: vi.fn(() => Promise.resolve(memberToReturn)),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+			organizationRole: {
+				findFirst: vi.fn(),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+		},
+	},
+}));
+
+vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
+	hasValidLicense: vi.fn(() => Promise.resolve(false)),
+}));
+
+const { resolvePermissions } = await import(
+	"@dokploy/server/services/permission"
+);
+const { enterpriseOnlyResources, statements } = await import(
+	"@dokploy/server/lib/access-control"
+);
+
+const ctx = {
+	user: { id: "user-1" },
+	session: { activeOrganizationId: "org-1" },
+};
+
+beforeEach(() => {
+	vi.clearAllMocks();
+});
+
+describe("enterprise resources for static roles", () => {
+	it("owner gets true for all enterprise resources", async () => {
+		memberToReturn = mockMemberData("owner");
+		const perms = await resolvePermissions(ctx);
+
+		for (const resource of enterpriseOnlyResources) {
+			const actions = statements[resource as keyof typeof statements];
+			for (const action of actions) {
+				expect((perms as any)[resource][action]).toBe(true);
+			}
+		}
+	});
+
+	it("admin gets true for all enterprise resources", async () => {
+		memberToReturn = mockMemberData("admin");
+		const perms = await resolvePermissions(ctx);
+
+		for (const resource of enterpriseOnlyResources) {
+			const actions = statements[resource as keyof typeof statements];
+			for (const action of actions) {
+				expect((perms as any)[resource][action]).toBe(true);
+			}
+		}
+	});
+
+	it("member gets true for service-level enterprise resources", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+
+		expect(perms.deployment.read).toBe(true);
+		expect(perms.deployment.create).toBe(true);
+		expect(perms.domain.read).toBe(true);
+		expect(perms.backup.read).toBe(true);
+		expect(perms.logs.read).toBe(true);
+		expect(perms.monitoring.read).toBe(true);
+	});
+
+	it("member gets false for org-level enterprise resources", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+
+		expect(perms.server.read).toBe(false);
+		expect(perms.registry.read).toBe(false);
+		expect(perms.certificate.read).toBe(false);
+		expect(perms.destination.read).toBe(false);
+		expect(perms.notification.read).toBe(false);
+		expect(perms.auditLog.read).toBe(false);
+	});
+});
+
+describe("free-tier resources for member", () => {
+	it("member gets service.read=true", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+		expect(perms.service.read).toBe(true);
+	});
+
+	it("member gets project.create=false without legacy override", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+		expect(perms.project.create).toBe(false);
+	});
+
+	it("member gets project.create=true with canCreateProjects", async () => {
+		memberToReturn = mockMemberData("member", { canCreateProjects: true });
+		const perms = await resolvePermissions(ctx);
+		expect(perms.project.create).toBe(true);
+	});
+
+	it("member gets docker.read=false without legacy override", async () => {
+		memberToReturn = mockMemberData("member");
+		const perms = await resolvePermissions(ctx);
+		expect(perms.docker.read).toBe(false);
+	});
+
+	it("member gets docker.read=true with canAccessToDocker", async () => {
+		memberToReturn = mockMemberData("member", { canAccessToDocker: true });
+		const perms = await resolvePermissions(ctx);
+		expect(perms.docker.read).toBe(true);
+	});
+});
+
+describe("free-tier resources for owner", () => {
+	it("owner gets all free-tier permissions as true", async () => {
+		memberToReturn = mockMemberData("owner");
+		const perms = await resolvePermissions(ctx);
+		expect(perms.project.create).toBe(true);
+		expect(perms.project.delete).toBe(true);
+		expect(perms.service.create).toBe(true);
+		expect(perms.service.read).toBe(true);
+		expect(perms.service.delete).toBe(true);
+		expect(perms.docker.read).toBe(true);
+		expect(perms.traefikFiles.read).toBe(true);
+		expect(perms.traefikFiles.write).toBe(true);
+	});
+});

apps/dokploy/__test__/permissions/service-access.test.ts

@@ -0,0 +1,132 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const mockMemberData = (
+	role: string,
+	accessedServices: string[] = [],
+	accessedProjects: string[] = [],
+) => ({
+	id: "member-1",
+	role,
+	userId: "user-1",
+	organizationId: "org-1",
+	accessedProjects,
+	accessedServices,
+	accessedEnvironments: [] as string[],
+	canCreateProjects: false,
+	canDeleteProjects: false,
+	canCreateServices: false,
+	canDeleteServices: false,
+	canCreateEnvironments: false,
+	canDeleteEnvironments: false,
+	canAccessToTraefikFiles: false,
+	canAccessToDocker: false,
+	canAccessToAPI: false,
+	canAccessToSSHKeys: false,
+	canAccessToGitProviders: false,
+	user: { id: "user-1", email: "test@test.com" },
+});
+
+let memberToReturn: ReturnType<typeof mockMemberData> =
+	mockMemberData("member");
+
+vi.mock("@dokploy/server/db", () => ({
+	db: {
+		query: {
+			member: {
+				findFirst: vi.fn(() => Promise.resolve(memberToReturn)),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+			organizationRole: {
+				findFirst: vi.fn(),
+				findMany: vi.fn(() => Promise.resolve([])),
+			},
+		},
+	},
+}));
+
+vi.mock("@dokploy/server/services/proprietary/license-key", () => ({
+	hasValidLicense: vi.fn(() => Promise.resolve(false)),
+}));
+
+const { checkServicePermissionAndAccess, checkServiceAccess } = await import(
+	"@dokploy/server/services/permission"
+);
+
+const ctx = {
+	user: { id: "user-1" },
+	session: { activeOrganizationId: "org-1" },
+};
+
+beforeEach(() => {
+	vi.clearAllMocks();
+});
+
+describe("checkServicePermissionAndAccess", () => {
+	it("owner bypasses accessedServices check", async () => {
+		memberToReturn = mockMemberData("owner", []);
+		await expect(
+			checkServicePermissionAndAccess(ctx, "service-123", {
+				deployment: ["read"],
+			}),
+		).resolves.toBeUndefined();
+	});
+
+	it("admin bypasses accessedServices check", async () => {
+		memberToReturn = mockMemberData("admin", []);
+		await expect(
+			checkServicePermissionAndAccess(ctx, "service-123", {
+				backup: ["create"],
+			}),
+		).resolves.toBeUndefined();
+	});
+
+	it("member with access to service passes", async () => {
+		memberToReturn = mockMemberData("member", ["service-123"]);
+		await expect(
+			checkServicePermissionAndAccess(ctx, "service-123", {
+				deployment: ["read"],
+			}),
+		).resolves.toBeUndefined();
+	});
+
+	it("member WITHOUT access to service fails", async () => {
+		memberToReturn = mockMemberData("member", ["other-service"]);
+		await expect(
+			checkServicePermissionAndAccess(ctx, "service-123", {
+				deployment: ["read"],
+			}),
+		).rejects.toThrow("You don't have access to this service");
+	});
+
+	it("member with empty accessedServices fails", async () => {
+		memberToReturn = mockMemberData("member", []);
+		await expect(
+			checkServicePermissionAndAccess(ctx, "service-123", {
+				domain: ["delete"],
+			}),
+		).rejects.toThrow("You don't have access to this service");
+	});
+});
+
+describe("checkServiceAccess", () => {
+	it("member with service access passes read check", async () => {
+		memberToReturn = mockMemberData("member", ["app-1"]);
+		await expect(
+			checkServiceAccess(ctx, "app-1", "read"),
+		).resolves.toBeUndefined();
+	});
+
+	it("member without service access fails read check", async () => {
+		memberToReturn = mockMemberData("member", []);
+		await expect(checkServiceAccess(ctx, "app-1", "read")).rejects.toThrow(
+			"You don't have access to this service",
+		);
+	});
+
+	it("owner bypasses all access checks", async () => {
+		memberToReturn = mockMemberData("owner", [], []);
+		await expect(
+			checkServiceAccess(ctx, "project-1", "create"),
+		).resolves.toBeUndefined();
+	});
+});

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

@@ -48,6 +48,20 @@ const baseSettings: WebServerSettings = {
 			urlCallback: "",
 		},
 	},
+	whitelabelingConfig: {
+		appName: null,
+		appDescription: null,
+		logoUrl: null,
+		faviconUrl: null,
+		customCss: null,
+		loginLogoUrl: null,
+		supportUrl: null,
+		docsUrl: null,
+		errorPageTitle: null,
+		errorPageDescription: null,
+		metaTitle: null,
+		footerText: null,
+	},
 	cleanupCacheApplications: false,
 	cleanupCacheOnCompose: false,
 	cleanupCacheOnPreviews: false,

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

@@ -61,6 +61,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(
@@ -168,11 +169,6 @@ export const ShowProjects = () => {
 			<BreadcrumbSidebar
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
-			{!isCloud && (
-				<div className="absolute top-4 right-4">
-					<TimeBadge />
-				</div>
-			)}
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
@@ -186,9 +182,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>
@@ -361,8 +355,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/search-command.tsx

@@ -23,7 +23,6 @@ import {
 	CommandList,
 	CommandSeparator,
 } from "@/components/ui/command";
-import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 import { StatusTooltip } from "../shared/status-tooltip";
 
@@ -56,7 +55,7 @@ export const SearchCommand = () => {
 	const router = useRouter();
 	const [open, setOpen] = React.useState(false);
 	const [search, setSearch] = React.useState("");
-	const { data: session } = authClient.useSession();
+	const { data: session } = api.user.session.useQuery();
 	const { data } = api.project.all.useQuery(undefined, {
 		enabled: !!session,
 	});

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/git/github/add-github-provider.tsx

@@ -12,14 +12,13 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
 
 export const AddGithubProvider = () => {
 	const [isOpen, setIsOpen] = useState(false);
 	const { data: activeOrganization } = api.organization.active.useQuery();
 
-	const { data: session } = authClient.useSession();
+	const { data: session } = api.user.session.useQuery();
 	const { data } = api.user.get.useQuery();
 	const [manifest, setManifest] = useState("");
 	const [isOrganization, setIsOrganization] = useState(false);
@@ -99,8 +98,8 @@ export const AddGithubProvider = () => {
 							<form
 								action={
 									isOrganization
-										? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}`
-										: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.id}`
+										? `https://github.com/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
+										: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
 								}
 								method="post"
 							>

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,9 +36,19 @@ 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 } = authClient.useSession();
+	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">
@@ -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/layouts/onboarding-layout.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import type React from "react";
 import { cn } from "@/lib/utils";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 import { GithubIcon } from "../icons/data-tools-icons";
 import { Logo } from "../shared/logo";
 import { Button } from "../ui/button";
@@ -9,23 +10,28 @@ interface Props {
 	children: React.ReactNode;
 }
 export const OnboardingLayout = ({ children }: Props) => {
+	const { config: whitelabeling } = useWhitelabelingPublic();
+	const appName = whitelabeling?.appName || "Dokploy";
+	const appDescription =
+		whitelabeling?.appDescription ||
+		"\u201CThe Open Source alternative to Netlify, Vercel, Heroku.\u201D";
+	const logoUrl =
+		whitelabeling?.loginLogoUrl || whitelabeling?.logoUrl || undefined;
+
 	return (
 		<div className="container relative min-h-svh flex-col items-center justify-center flex lg:max-w-none lg:grid lg:grid-cols-2 lg:px-0 w-full">
 			<div className="relative hidden h-full flex-col  p-10 text-primary dark:border-r lg:flex">
 				<div className="absolute inset-0 bg-muted" />
 				<Link
-					href="https://dokploy.com"
+					href="/"
 					className="relative z-20 flex items-center text-lg font-medium gap-4  text-primary"
 				>
-					<Logo className="size-10" />
-					Dokploy
+					<Logo className="size-10" logoUrl={logoUrl} />
+					{appName}
 				</Link>
 				<div className="relative z-20 mt-auto">
 					<blockquote className="space-y-2">
-						<p className="text-lg text-primary">
-							&ldquo;The Open Source alternative to Netlify, Vercel,
-							Heroku.&rdquo;
-						</p>
+						<p className="text-lg text-primary">{appDescription}</p>
 					</blockquote>
 				</div>
 			</div>

apps/dokploy/components/layouts/side.tsx

@@ -11,6 +11,7 @@ import {
 	ChevronRight,
 	ChevronsUpDown,
 	CircleHelp,
+	ClipboardList,
 	Clock,
 	CreditCard,
 	Database,
@@ -24,6 +25,7 @@ import {
 	LogIn,
 	type LucideIcon,
 	Package,
+	Palette,
 	PieChart,
 	Rocket,
 	Server,
@@ -91,13 +93,21 @@ import { UserNav } from "./user-nav";
 
 // The types of the queries we are going to use
 type AuthQueryOutput = inferRouterOutputs<AppRouter>["user"]["get"];
+type PermissionsOutput =
+	inferRouterOutputs<AppRouter>["user"]["getPermissions"];
+
+type EnabledOpts = {
+	auth?: AuthQueryOutput;
+	permissions?: PermissionsOutput;
+	isCloud: boolean;
+};
 
 type SingleNavItem = {
 	isSingle?: true;
 	title: string;
 	url: string;
 	icon?: LucideIcon;
-	isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean;
+	isEnabled?: (opts: EnabledOpts) => boolean;
 };
 
 // NavItem type
@@ -111,10 +121,7 @@ type NavItem =
 			title: string;
 			icon: LucideIcon;
 			items: SingleNavItem[];
-			isEnabled?: (opts: {
-				auth?: AuthQueryOutput;
-				isCloud: boolean;
-			}) => boolean;
+			isEnabled?: (opts: EnabledOpts) => boolean;
 	  };
 
 // ExternalLink type
@@ -123,7 +130,7 @@ type ExternalLink = {
 	name: string;
 	url: string;
 	icon: React.ComponentType<{ className?: string }>;
-	isEnabled?: (opts: { auth?: AuthQueryOutput; isCloud: boolean }) => boolean;
+	isEnabled?: (opts: EnabledOpts) => boolean;
 };
 
 // Menu type
@@ -151,14 +158,16 @@ const MENU: Menu = {
 			title: "Deployments",
 			url: "/dashboard/deployments",
 			icon: Rocket,
+			isEnabled: ({ permissions }) => !!permissions?.deployment.read,
 		},
 		{
 			isSingle: true,
 			title: "Monitoring",
 			url: "/dashboard/monitoring",
 			icon: BarChartHorizontalBigIcon,
-			// Only enabled in non-cloud environments
-			isEnabled: ({ isCloud }) => !isCloud,
+			// Only enabled in non-cloud environments and if user has monitoring.read
+			isEnabled: ({ isCloud, permissions }) =>
+				!isCloud && !!permissions?.monitoring.read,
 		},
 		{
 			isSingle: true,
@@ -166,64 +175,44 @@ const MENU: Menu = {
 			url: "/dashboard/schedules",
 			icon: Clock,
 			// Only enabled in non-cloud environments
-			isEnabled: ({ isCloud, auth }) =>
-				!isCloud && (auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ isCloud, permissions }) =>
+				!isCloud && !!permissions?.organization.update,
 		},
 		{
 			isSingle: true,
 			title: "Traefik File System",
 			url: "/dashboard/traefik",
 			icon: GalleryVerticalEnd,
-			// Only enabled for admins and users with access to Traefik files in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!(
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToTraefikFiles) &&
-					!isCloud
-				),
+			// Only enabled for users with access to Traefik files in non-cloud environments
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.traefikFiles.read && !isCloud),
 		},
 		{
 			isSingle: true,
 			title: "Docker",
 			url: "/dashboard/docker",
 			icon: BlocksIcon,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!(
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
+			// Only enabled for users with access to Docker in non-cloud environments
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.docker.read && !isCloud),
 		},
 		{
 			isSingle: true,
 			title: "Swarm",
 			url: "/dashboard/swarm",
 			icon: PieChart,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!(
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
+			// Only enabled for users with access to Docker in non-cloud environments
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.docker.read && !isCloud),
 		},
 		{
 			isSingle: true,
 			title: "Requests",
 			url: "/dashboard/requests",
 			icon: Forward,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!(
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
+			// Only enabled for users with access to Docker in non-cloud environments
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.docker.read && !isCloud),
 		},
 
 		// Legacy unused menu, adjusted to the new structure
@@ -290,8 +279,8 @@ const MENU: Menu = {
 			url: "/dashboard/settings/server",
 			icon: Activity,
 			// Only enabled for admins in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.organization.update && !isCloud),
 		},
 		{
 			isSingle: true,
@@ -304,70 +293,59 @@ const MENU: Menu = {
 			title: "Remote Servers",
 			url: "/dashboard/settings/servers",
 			icon: Server,
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.server.read,
 		},
 		{
 			isSingle: true,
 			title: "Users",
 			icon: Users,
 			url: "/dashboard/settings/users",
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			// Only enabled for users with member.read permission
+			isEnabled: ({ permissions }) => !!permissions?.member.read,
+		},
+		{
+			isSingle: true,
+			title: "Audit Logs",
+			icon: ClipboardList,
+			url: "/dashboard/settings/audit-logs",
+			isEnabled: ({ permissions }) => !!permissions?.auditLog.read,
 		},
 		{
 			isSingle: true,
 			title: "SSH Keys",
 			icon: KeyRound,
 			url: "/dashboard/settings/ssh-keys",
-			// Only enabled for admins and users with access to SSH keys
-			isEnabled: ({ auth }) =>
-				!!(
-					auth?.role === "owner" ||
-					auth?.canAccessToSSHKeys ||
-					auth?.role === "admin"
-				),
+			// Only enabled for users with access to SSH keys
+			isEnabled: ({ permissions }) => !!permissions?.sshKeys.read,
 		},
 		{
 			title: "AI",
 			icon: BotIcon,
 			url: "/dashboard/settings/ai",
 			isSingle: true,
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.organization.update,
 		},
 		{
 			isSingle: true,
 			title: "Git",
 			url: "/dashboard/settings/git-providers",
 			icon: GitBranch,
-			// Only enabled for admins and users with access to Git providers
-			isEnabled: ({ auth }) =>
-				!!(
-					auth?.role === "owner" ||
-					auth?.canAccessToGitProviders ||
-					auth?.role === "admin"
-				),
+			// Only enabled for users with access to Git providers
+			isEnabled: ({ permissions }) => !!permissions?.gitProviders.read,
 		},
 		{
 			isSingle: true,
 			title: "Registry",
 			url: "/dashboard/settings/registry",
 			icon: Package,
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.registry.read,
 		},
 		{
 			isSingle: true,
 			title: "S3 Destinations",
 			url: "/dashboard/settings/destinations",
 			icon: Database,
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.destination.read,
 		},
 
 		{
@@ -375,9 +353,7 @@ const MENU: Menu = {
 			title: "Certificates",
 			url: "/dashboard/settings/certificates",
 			icon: ShieldCheck,
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.certificate.read,
 		},
 		{
 			isSingle: true,
@@ -385,24 +361,23 @@ const MENU: Menu = {
 			url: "/dashboard/settings/cluster",
 			icon: Boxes,
 			// Only enabled for admins in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
-				!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
+			isEnabled: ({ permissions, isCloud }) =>
+				!!(permissions?.organization.update && !isCloud),
 		},
 		{
 			isSingle: true,
 			title: "Notifications",
 			url: "/dashboard/settings/notifications",
 			icon: Bell,
-			// Only enabled for admins
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			// Only enabled for users with access to notifications
+			isEnabled: ({ permissions }) => !!permissions?.notification.read,
 		},
 		{
 			isSingle: true,
 			title: "Billing",
 			url: "/dashboard/settings/billing",
 			icon: CreditCard,
-			// Only enabled for admins in cloud environments
+			// Only enabled for owners in cloud environments
 			isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && isCloud),
 		},
 		{
@@ -410,7 +385,7 @@ const MENU: Menu = {
 			title: "License",
 			url: "/dashboard/settings/license",
 			icon: Key,
-			// Only enabled for admins in non-cloud environments
+			// Only enabled for owners
 			isEnabled: ({ auth }) => !!(auth?.role === "owner"),
 		},
 		{
@@ -419,8 +394,15 @@ const MENU: Menu = {
 			url: "/dashboard/settings/sso",
 			icon: LogIn,
 			// Enabled for admins in both cloud and self-hosted (enterprise)
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+			isEnabled: ({ permissions }) => !!permissions?.organization.update,
+		},
+		{
+			isSingle: true,
+			title: "Whitelabeling",
+			url: "/dashboard/settings/whitelabeling",
+			icon: Palette,
+			// Only enabled for owners in non-cloud environments (enterprise)
+			isEnabled: ({ auth, isCloud }) => !!(auth?.role === "owner" && !isCloud),
 		},
 	],
 
@@ -444,39 +426,45 @@ const MENU: Menu = {
  */
 function createMenuForAuthUser(opts: {
 	auth?: AuthQueryOutput;
+	permissions?: PermissionsOutput;
 	isCloud: boolean;
+	whitelabeling?: {
+		docsUrl?: string | null;
+		supportUrl?: string | null;
+	} | null;
 }): Menu {
+	const filterEnabled = <
+		T extends {
+			isEnabled?: (o: EnabledOpts) => boolean;
+		},
+	>(
+		items: readonly T[],
+	): T[] =>
+		items.filter((item) =>
+			!item.isEnabled
+				? true
+				: item.isEnabled({
+						auth: opts.auth,
+						permissions: opts.permissions,
+						isCloud: opts.isCloud,
+					}),
+		) as T[];
+
+	// Apply whitelabeling URL overrides to help items
+	const helpItems = filterEnabled(MENU.help).map((item) => {
+		if (opts.whitelabeling?.docsUrl && item.name === "Documentation") {
+			return { ...item, url: opts.whitelabeling.docsUrl };
+		}
+		if (opts.whitelabeling?.supportUrl && item.name === "Support") {
+			return { ...item, url: opts.whitelabeling.supportUrl };
+		}
+		return item;
+	});
+
 	return {
-		// Filter the home items based on the user's role and permissions
-		// Calls the `isEnabled` function if it exists to determine if the item should be displayed
-		home: MENU.home.filter((item) =>
-			!item.isEnabled
-				? true
-				: item.isEnabled({
-						auth: opts.auth,
-						isCloud: opts.isCloud,
-					}),
-		),
-		// Filter the settings items based on the user's role and permissions
-		// Calls the `isEnabled` function if it exists to determine if the item should be displayed
-		settings: MENU.settings.filter((item) =>
-			!item.isEnabled
-				? true
-				: item.isEnabled({
-						auth: opts.auth,
-						isCloud: opts.isCloud,
-					}),
-		),
-		// Filter the help items based on the user's role and permissions
-		// Calls the `isEnabled` function if it exists to determine if the item should be displayed
-		help: MENU.help.filter((item) =>
-			!item.isEnabled
-				? true
-				: item.isEnabled({
-						auth: opts.auth,
-						isCloud: opts.isCloud,
-					}),
-		),
+		home: filterEnabled(MENU.home),
+		settings: filterEnabled(MENU.settings),
+		help: helpItems,
 	};
 }
 
@@ -546,7 +534,7 @@ function SidebarLogo() {
 	const { state } = useSidebar();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: user } = api.user.get.useQuery();
-	const { data: session } = authClient.useSession();
+	const { data: session } = api.user.session.useQuery();
 	const {
 		data: organizations,
 		refetch,
@@ -557,6 +545,7 @@ function SidebarLogo() {
 	const { mutateAsync: setDefaultOrganization, isPending: isSettingDefault } =
 		api.organization.setDefault.useMutation();
 	const { isMobile } = useSidebar();
+	const isCollapsed = state === "collapsed" && !isMobile;
 	const { data: activeOrganization } = api.organization.active.useQuery();
 
 	const { data: invitations, refetch: refetchInvitations } =
@@ -582,9 +571,7 @@ function SidebarLogo() {
 				<SidebarMenu
 					className={cn(
 						"flex gap-2",
-						state === "collapsed"
-							? "flex-col"
-							: "flex-row justify-between items-center",
+						isCollapsed ? "flex-col" : "flex-row justify-between items-center",
 					)}
 				>
 					{/* Organization Logo and Selector */}
@@ -592,17 +579,17 @@ function SidebarLogo() {
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<SidebarMenuButton
-									size={state === "collapsed" ? "sm" : "lg"}
+									size={isCollapsed ? "sm" : "lg"}
 									className={cn(
 										"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-										state === "collapsed" &&
+										isCollapsed &&
 											"flex justify-center items-center p-2 h-10 w-10 mx-auto",
 									)}
 								>
 									<div
 										className={cn(
 											"flex items-center gap-2",
-											state === "collapsed" && "justify-center",
+											isCollapsed && "justify-center",
 										)}
 									>
 										<div
@@ -614,7 +601,7 @@ function SidebarLogo() {
 											<Logo
 												className={cn(
 													"transition-all",
-													state === "collapsed" ? "size-4" : "size-5",
+													isCollapsed ? "size-4" : "size-5",
 												)}
 												logoUrl={activeOrganization?.logo || undefined}
 											/>
@@ -622,7 +609,7 @@ function SidebarLogo() {
 										<div
 											className={cn(
 												"flex flex-col items-start",
-												state === "collapsed" && "hidden",
+												isCollapsed && "hidden",
 											)}
 										>
 											<p className="text-sm font-medium leading-none">
@@ -631,7 +618,7 @@ function SidebarLogo() {
 										</div>
 									</div>
 									<ChevronsUpDown
-										className={cn("ml-auto", state === "collapsed" && "hidden")}
+										className={cn("ml-auto", isCollapsed && "hidden")}
 									/>
 								</SidebarMenuButton>
 							</DropdownMenuTrigger>
@@ -780,7 +767,7 @@ function SidebarLogo() {
 					</SidebarMenuItem>
 
 					{/* Notification Bell */}
-					<SidebarMenuItem className={cn(state === "collapsed" && "mt-2")}>
+					<SidebarMenuItem className={cn(isCollapsed && "mt-2")}>
 						<DropdownMenu>
 							<DropdownMenuTrigger asChild>
 								<Button
@@ -788,7 +775,7 @@ function SidebarLogo() {
 									size="icon"
 									className={cn(
 										"relative",
-										state === "collapsed" && "h-8 w-8 p-1.5 mx-auto",
+										isCollapsed && "h-8 w-8 p-1.5 mx-auto",
 									)}
 								>
 									<Bell className="size-4" />
@@ -884,7 +871,12 @@ export default function Page({ children }: Props) {
 
 	const pathname = usePathname();
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { data: dokployVersion } = api.settings.getDokployVersion.useQuery();
+	const { data: whitelabeling } = api.whitelabeling.get.useQuery(undefined, {
+		staleTime: 5 * 60 * 1000,
+		refetchOnWindowFocus: false,
+	});
 
 	const includesProjects = pathname?.includes("/dashboard/project");
 	const { data: isCloud } = api.settings.isCloud.useQuery();
@@ -893,7 +885,12 @@ export default function Page({ children }: Props) {
 		home: filteredHome,
 		settings: filteredSettings,
 		help,
-	} = createMenuForAuthUser({ auth, isCloud: !!isCloud });
+	} = createMenuForAuthUser({
+		auth,
+		permissions,
+		isCloud: !!isCloud,
+		whitelabeling,
+	});
 
 	const activeItem = findActiveNavItem(
 		[...filteredHome, ...filteredSettings],
@@ -1133,7 +1130,7 @@ export default function Page({ children }: Props) {
 				</SidebarContent>
 				<SidebarFooter>
 					<SidebarMenu className="flex flex-col gap-2">
-						{!isCloud && (auth?.role === "owner" || auth?.role === "admin") && (
+						{!isCloud && permissions?.organization.update && (
 							<SidebarMenuItem>
 								<UpdateServerButton />
 							</SidebarMenuItem>
@@ -1141,15 +1138,15 @@ export default function Page({ children }: Props) {
 						<SidebarMenuItem>
 							<UserNav />
 						</SidebarMenuItem>
+						{whitelabeling?.footerText && (
+							<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
+								{whitelabeling.footerText}
+							</div>
+						)}
 						{dokployVersion && (
-							<>
-								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
-									Version {dokployVersion}
-								</div>
-								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
-									{dokployVersion}
-								</div>
-							</>
+							<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
+								Version {dokployVersion}
+							</div>
 						)}
 					</SidebarMenu>
 				</SidebarFooter>

apps/dokploy/components/layouts/user-nav.tsx

@@ -21,6 +21,7 @@ const _AUTO_CHECK_UPDATES_INTERVAL_MINUTES = 7;
 export const UserNav = () => {
 	const router = useRouter();
 	const { data } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	// const { mutateAsync } = api.auth.logout.useMutation();
@@ -94,9 +95,7 @@ export const UserNav = () => {
 							>
 								Monitoring
 							</DropdownMenuItem>
-							{(data?.role === "owner" ||
-								data?.role === "admin" ||
-								data?.canAccessToTraefikFiles) && (
+							{permissions?.traefikFiles.read && (
 								<DropdownMenuItem
 									className="cursor-pointer"
 									onClick={() => {
@@ -106,9 +105,7 @@ export const UserNav = () => {
 									Traefik
 								</DropdownMenuItem>
 							)}
-							{(data?.role === "owner" ||
-								data?.role === "admin" ||
-								data?.canAccessToDocker) && (
+							{permissions?.docker.read && (
 								<DropdownMenuItem
 									className="cursor-pointer"
 									onClick={() => {
@@ -122,7 +119,7 @@ export const UserNav = () => {
 							)}
 						</>
 					) : (
-						(data?.role === "owner" || data?.role === "admin") && (
+						permissions?.organization.update && (
 							<DropdownMenuItem
 								className="cursor-pointer"
 								onClick={() => {

apps/dokploy/components/proprietary/audit-logs/columns.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import type { AuditLog } from "@dokploy/server/db/schema";
+import type { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+import {
+	ArrowUpDown,
+	FileJson,
+	LogIn,
+	LogOut,
+	PlusCircle,
+	RefreshCw,
+	RotateCcw,
+	Trash2,
+	Upload,
+	XCircle,
+} from "lucide-react";
+import React from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+
+const ACTION_CONFIG: Record<
+	string,
+	{ label: string; icon: React.ElementType; className: string }
+> = {
+	create: {
+		label: "Created",
+		icon: PlusCircle,
+		className:
+			"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+	},
+	update: {
+		label: "Updated",
+		icon: RefreshCw,
+		className:
+			"bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+	},
+	delete: {
+		label: "Deleted",
+		icon: Trash2,
+		className: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+	},
+	deploy: {
+		label: "Deployed",
+		icon: Upload,
+		className:
+			"bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
+	},
+	cancel: {
+		label: "Cancelled",
+		icon: XCircle,
+		className:
+			"bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/20",
+	},
+	redeploy: {
+		label: "Redeployed",
+		icon: RotateCcw,
+		className:
+			"bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20",
+	},
+	login: {
+		label: "Login",
+		icon: LogIn,
+		className:
+			"bg-teal-500/10 text-teal-600 dark:text-teal-400 border-teal-500/20",
+	},
+	logout: {
+		label: "Logout",
+		icon: LogOut,
+		className:
+			"bg-slate-500/10 text-slate-600 dark:text-slate-400 border-slate-500/20",
+	},
+};
+
+const RESOURCE_LABELS: Record<string, string> = {
+	project: "Project",
+	service: "Service",
+	environment: "Environment",
+	deployment: "Deployment",
+	user: "User",
+	customRole: "Custom Role",
+	domain: "Domain",
+	certificate: "Certificate",
+	registry: "Registry",
+	server: "Server",
+	sshKey: "SSH Key",
+	gitProvider: "Git Provider",
+	notification: "Notification",
+	settings: "Settings",
+	session: "Session",
+};
+
+function MetadataCell({ metadata }: { metadata: string | null }) {
+	if (!metadata)
+		return <span className="text-muted-foreground text-sm">—</span>;
+
+	const formatted = React.useMemo(() => {
+		try {
+			return JSON.stringify(JSON.parse(metadata), null, 2);
+		} catch {
+			return metadata;
+		}
+	}, [metadata]);
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost" size="sm" className="h-7 gap-1.5 text-xs">
+					<FileJson className="h-3.5 w-3.5" />
+					View
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Metadata</DialogTitle>
+				</DialogHeader>
+				<CodeEditor
+					value={formatted}
+					language="json"
+					lineNumbers={false}
+					readOnly
+					className="min-h-[200px] max-h-[400px] overflow-auto rounded-md"
+				/>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export const columns: ColumnDef<AuditLog>[] = [
+	{
+		accessorKey: "createdAt",
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+			>
+				Date
+				<ArrowUpDown className="ml-2 h-4 w-4" />
+			</Button>
+		),
+		cell: ({ row }) => (
+			<span className="text-sm text-muted-foreground whitespace-nowrap">
+				{format(new Date(row.getValue("createdAt")), "MMM d, yyyy HH:mm")}
+			</span>
+		),
+	},
+	{
+		accessorKey: "userEmail",
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+			>
+				User
+				<ArrowUpDown className="ml-2 h-4 w-4" />
+			</Button>
+		),
+		cell: ({ row }) => (
+			<span className="text-sm">{row.getValue("userEmail")}</span>
+		),
+	},
+	{
+		accessorKey: "action",
+		header: ({ column }) => (
+			<Button
+				variant="ghost"
+				onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+			>
+				Action
+				<ArrowUpDown className="ml-2 h-4 w-4" />
+			</Button>
+		),
+		cell: ({ row }) => {
+			const action = row.getValue("action") as string;
+			const config = ACTION_CONFIG[action];
+			if (!config) {
+				return <span className="text-xs text-muted-foreground">{action}</span>;
+			}
+			const Icon = config.icon;
+			return (
+				<span
+					className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium ${config.className}`}
+				>
+					<Icon className="size-3" />
+					{config.label}
+				</span>
+			);
+		},
+	},
+	{
+		accessorKey: "resourceType",
+		header: "Resource",
+		cell: ({ row }) => (
+			<span className="text-sm text-muted-foreground">
+				{RESOURCE_LABELS[row.getValue("resourceType") as string] ??
+					row.getValue("resourceType")}
+			</span>
+		),
+	},
+	{
+		accessorKey: "resourceName",
+		header: "Name",
+		cell: ({ row }) => (
+			<span className="text-sm font-medium">
+				{(row.getValue("resourceName") as string) ?? "—"}
+			</span>
+		),
+	},
+	{
+		accessorKey: "userRole",
+		header: "Role",
+		cell: ({ row }) => (
+			<span className="text-sm text-muted-foreground capitalize">
+				{row.getValue("userRole")}
+			</span>
+		),
+	},
+	{
+		accessorKey: "metadata",
+		header: "Metadata",
+		cell: ({ row }) => <MetadataCell metadata={row.getValue("metadata")} />,
+	},
+];

apps/dokploy/components/proprietary/audit-logs/data-table.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import type { AuditLog } from "@dokploy/server/db/schema";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import {
+	type ColumnDef,
+	flexRender,
+	getCoreRowModel,
+	getSortedRowModel,
+	type SortingState,
+	useReactTable,
+	type VisibilityState,
+} from "@tanstack/react-table";
+import { format } from "date-fns";
+import { CalendarIcon, ChevronDown, X } from "lucide-react";
+import React from "react";
+import type { DateRange } from "react-day-picker";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+
+const ACTION_OPTIONS = [
+	{ value: "create", label: "Created" },
+	{ value: "update", label: "Updated" },
+	{ value: "delete", label: "Deleted" },
+	{ value: "deploy", label: "Deployed" },
+	{ value: "cancel", label: "Cancelled" },
+	{ value: "redeploy", label: "Redeployed" },
+	{ value: "login", label: "Login" },
+	{ value: "logout", label: "Logout" },
+];
+
+const RESOURCE_OPTIONS = [
+	{ value: "project", label: "Projects" },
+	{ value: "service", label: "Applications / Services" },
+	{ value: "environment", label: "Environments" },
+	{ value: "deployment", label: "Deployments" },
+	{ value: "user", label: "Users" },
+	{ value: "customRole", label: "Custom Roles" },
+	{ value: "domain", label: "Domains" },
+	{ value: "certificate", label: "Certificates" },
+	{ value: "registry", label: "Registries" },
+	{ value: "server", label: "Remote Servers" },
+	{ value: "sshKey", label: "SSH Keys" },
+	{ value: "gitProvider", label: "Git Providers" },
+	{ value: "notification", label: "Notifications" },
+	{ value: "settings", label: "Settings" },
+	{ value: "session", label: "Sessions (Login/Logout)" },
+];
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+
+type AuditAction =
+	| "create"
+	| "update"
+	| "delete"
+	| "deploy"
+	| "cancel"
+	| "redeploy"
+	| "login"
+	| "logout";
+type AuditResourceType =
+	| "project"
+	| "service"
+	| "environment"
+	| "deployment"
+	| "user"
+	| "customRole"
+	| "domain"
+	| "certificate"
+	| "registry"
+	| "server"
+	| "sshKey"
+	| "gitProvider"
+	| "notification"
+	| "settings"
+	| "session";
+
+export interface AuditLogFilters {
+	userEmail: string;
+	resourceName: string;
+	action: AuditAction | "";
+	resourceType: AuditResourceType | "";
+	dateRange: DateRange | undefined;
+}
+
+interface DataTableProps {
+	columns: ColumnDef<AuditLog>[];
+	data: AuditLog[];
+	total: number;
+	pageIndex: number;
+	pageSize: number;
+	filters: AuditLogFilters;
+	onPageChange: (page: number) => void;
+	onPageSizeChange: (size: number) => void;
+	onFilterChange: <K extends keyof AuditLogFilters>(
+		key: K,
+		value: AuditLogFilters[K],
+	) => void;
+	isLoading?: boolean;
+}
+
+export function DataTable({
+	columns,
+	data,
+	total,
+	pageIndex,
+	pageSize,
+	filters,
+	onPageChange,
+	onPageSizeChange,
+	onFilterChange,
+	isLoading,
+}: DataTableProps) {
+	const [sorting, setSorting] = React.useState<SortingState>([
+		{ id: "createdAt", desc: true },
+	]);
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+
+	const table = useReactTable({
+		data,
+		columns,
+		onSortingChange: setSorting,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		manualPagination: true,
+		manualFiltering: true,
+		rowCount: total,
+		state: {
+			sorting,
+			columnVisibility,
+		},
+	});
+
+	const pageCount = Math.ceil(total / pageSize);
+	const hasFilters =
+		filters.userEmail ||
+		filters.resourceName ||
+		filters.action ||
+		filters.resourceType ||
+		filters.dateRange;
+
+	return (
+		<div className="flex flex-col gap-4 w-full">
+			<div className="flex items-center gap-2 flex-wrap">
+				<Input
+					placeholder="Filter by user..."
+					value={filters.userEmail}
+					onChange={(e) => onFilterChange("userEmail", e.target.value)}
+					className="max-w-xs"
+				/>
+				<Input
+					placeholder="Filter by name..."
+					value={filters.resourceName}
+					onChange={(e) => onFilterChange("resourceName", e.target.value)}
+					className="max-w-xs"
+				/>
+				<Select
+					value={filters.action || "__all__"}
+					onValueChange={(value) =>
+						onFilterChange(
+							"action",
+							value === "__all__" ? "" : (value as AuditAction),
+						)
+					}
+				>
+					<SelectTrigger className="w-[160px]">
+						<SelectValue placeholder="All actions" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="__all__">All actions</SelectItem>
+						{ACTION_OPTIONS.map((opt) => (
+							<SelectItem key={opt.value} value={opt.value}>
+								{opt.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<Select
+					value={filters.resourceType || "__all__"}
+					onValueChange={(value) =>
+						onFilterChange(
+							"resourceType",
+							value === "__all__" ? "" : (value as AuditResourceType),
+						)
+					}
+				>
+					<SelectTrigger className="w-[200px]">
+						<SelectValue placeholder="All resources" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="__all__">All resources</SelectItem>
+						{RESOURCE_OPTIONS.map((opt) => (
+							<SelectItem key={opt.value} value={opt.value}>
+								{opt.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<Popover>
+					<PopoverTrigger asChild>
+						<Button
+							variant="outline"
+							size="sm"
+							className="h-9 gap-1.5 text-sm font-normal"
+						>
+							<CalendarIcon className="h-4 w-4" />
+							{filters.dateRange?.from ? (
+								filters.dateRange.to ? (
+									`${format(filters.dateRange.from, "MMM d")} – ${format(filters.dateRange.to, "MMM d, yyyy")}`
+								) : (
+									format(filters.dateRange.from, "MMM d, yyyy")
+								)
+							) : (
+								<span className="text-muted-foreground">Date range</span>
+							)}
+						</Button>
+					</PopoverTrigger>
+					<PopoverContent className="w-auto p-0" align="start">
+						<Calendar
+							mode="range"
+							selected={filters.dateRange}
+							onSelect={(range) => onFilterChange("dateRange", range)}
+							numberOfMonths={2}
+							initialFocus
+						/>
+					</PopoverContent>
+				</Popover>
+				{hasFilters && (
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={() => {
+							onFilterChange("userEmail", "");
+							onFilterChange("resourceName", "");
+							onFilterChange("action", "");
+							onFilterChange("resourceType", "");
+							onFilterChange("dateRange", undefined);
+						}}
+						className="text-muted-foreground"
+					>
+						<X className="h-4 w-4 mr-1" />
+						Clear
+					</Button>
+				)}
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="outline" className="ml-auto">
+							Columns <ChevronDown className="ml-2 h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						{table
+							.getAllColumns()
+							.filter((col) => col.getCanHide())
+							.map((col) => (
+								<DropdownMenuCheckboxItem
+									key={col.id}
+									className="capitalize"
+									checked={col.getIsVisible()}
+									onCheckedChange={(value) => col.toggleVisibility(!!value)}
+								>
+									{col.id}
+								</DropdownMenuCheckboxItem>
+							))}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="rounded-md border overflow-auto">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<TableHead key={header.id}>
+										{header.isPlaceholder
+											? null
+											: flexRender(
+													header.column.columnDef.header,
+													header.getContext(),
+												)}
+									</TableHead>
+								))}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{isLoading ? (
+							<TableRow>
+								<TableCell
+									colSpan={columns.length}
+									className="h-24 text-center text-muted-foreground"
+								>
+									Loading...
+								</TableCell>
+							</TableRow>
+						) : table.getRowModel().rows.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(
+												cell.column.columnDef.cell,
+												cell.getContext(),
+											)}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : (
+							<TableRow>
+								<TableCell
+									colSpan={columns.length}
+									className="h-24 text-center text-muted-foreground"
+								>
+									No audit logs found.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+
+			<div className="flex items-center justify-between text-sm text-muted-foreground">
+				<span>
+					{total} {total === 1 ? "entry" : "entries"} total
+				</span>
+				<div className="flex items-center gap-3">
+					<div className="flex items-center gap-2">
+						<span className="text-sm whitespace-nowrap">Rows per page</span>
+						<Select
+							value={String(pageSize)}
+							onValueChange={(value) => onPageSizeChange(Number(value))}
+						>
+							<SelectTrigger className="w-[80px] h-8">
+								<SelectValue />
+							</SelectTrigger>
+							<SelectContent>
+								{PAGE_SIZE_OPTIONS.map((size) => (
+									<SelectItem key={size} value={String(size)}>
+										{size}
+									</SelectItem>
+								))}
+							</SelectContent>
+						</Select>
+					</div>
+					<span className="whitespace-nowrap">
+						Page {pageIndex + 1} of {Math.max(1, pageCount)}
+					</span>
+					<div className="flex gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => onPageChange(pageIndex - 1)}
+							disabled={pageIndex === 0}
+						>
+							Previous
+						</Button>
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={() => onPageChange(pageIndex + 1)}
+							disabled={pageIndex + 1 >= pageCount}
+						>
+							Next
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/proprietary/audit-logs/show-audit-logs.tsx

@@ -0,0 +1,112 @@
+import { ClipboardList } from "lucide-react";
+import React from "react";
+import { EnterpriseFeatureGate } from "@/components/proprietary/enterprise-feature-gate";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { columns } from "./columns";
+import { type AuditLogFilters, DataTable } from "./data-table";
+
+function AuditLogsContent() {
+	const [pageIndex, setPageIndex] = React.useState(0);
+	const [pageSize, setPageSize] = React.useState(50);
+	const [filters, setFilters] = React.useState<AuditLogFilters>({
+		userEmail: "",
+		resourceName: "",
+		action: "",
+		resourceType: "",
+		dateRange: undefined,
+	});
+
+	const [debouncedText, setDebouncedText] = React.useState({
+		userEmail: "",
+		resourceName: "",
+	});
+
+	React.useEffect(() => {
+		const t = setTimeout(() => {
+			setDebouncedText({
+				userEmail: filters.userEmail,
+				resourceName: filters.resourceName,
+			});
+			setPageIndex(0);
+		}, 400);
+		return () => clearTimeout(t);
+	}, [filters.userEmail, filters.resourceName]);
+
+	const handleFilterChange = <K extends keyof AuditLogFilters>(
+		key: K,
+		value: AuditLogFilters[K],
+	) => {
+		setFilters((prev) => ({ ...prev, [key]: value }));
+		if (key !== "userEmail" && key !== "resourceName") {
+			setPageIndex(0);
+		}
+	};
+
+	const handlePageSizeChange = (size: number) => {
+		setPageSize(size);
+		setPageIndex(0);
+	};
+
+	const { data, isLoading } = api.auditLog.all.useQuery({
+		userEmail: debouncedText.userEmail || undefined,
+		resourceName: debouncedText.resourceName || undefined,
+		action: filters.action || undefined,
+		resourceType: filters.resourceType || undefined,
+		from: filters.dateRange?.from,
+		to: filters.dateRange?.to,
+		limit: pageSize,
+		offset: pageIndex * pageSize,
+	});
+
+	return (
+		<DataTable
+			columns={columns}
+			data={data?.logs ?? []}
+			total={data?.total ?? 0}
+			pageIndex={pageIndex}
+			pageSize={pageSize}
+			filters={filters}
+			onPageChange={setPageIndex}
+			onPageSizeChange={handlePageSizeChange}
+			onFilterChange={handleFilterChange}
+			isLoading={isLoading}
+		/>
+	);
+}
+
+export function ShowAuditLogs() {
+	return (
+		<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-6xl w-full mx-auto">
+			<div className="rounded-xl bg-background shadow-md ">
+				<EnterpriseFeatureGate
+					lockedProps={{
+						title: "Audit Logs",
+						description:
+							"Get full visibility into every action performed across your organization. Audit logs are available as part of Dokploy Enterprise.",
+						ctaLabel: "Manage License",
+					}}
+				>
+					<CardHeader>
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<ClipboardList className="h-5 w-5 text-muted-foreground self-center" />
+							Audit Logs
+						</CardTitle>
+						<CardDescription>
+							Track all actions performed by members in your organization.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						<AuditLogsContent />
+					</CardContent>
+				</EnterpriseFeatureGate>
+			</div>
+		</Card>
+	);
+}

apps/dokploy/components/proprietary/whitelabeling/whitelabeling-preview.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+
+interface WhitelabelingPreviewProps {
+	config: {
+		appName?: string;
+		logoUrl?: string;
+		footerText?: string;
+	};
+}
+
+export function WhitelabelingPreview({ config }: WhitelabelingPreviewProps) {
+	const appName = config.appName || "Dokploy";
+
+	return (
+		<Card className="bg-transparent">
+			<CardHeader>
+				<CardTitle>Live Preview</CardTitle>
+				<CardDescription>
+					A quick preview of how your branding changes will look.
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="rounded-lg border overflow-hidden">
+					{/* Simulated sidebar header */}
+					<div className="flex items-center gap-3 p-4 border-b bg-sidebar">
+						{config.logoUrl ? (
+							<img
+								src={config.logoUrl}
+								alt="Preview Logo"
+								className="size-8 rounded-sm object-contain"
+							/>
+						) : (
+							<div className="size-8 rounded-sm flex items-center justify-center bg-primary text-primary-foreground font-bold text-sm">
+								{appName.charAt(0).toUpperCase()}
+							</div>
+						)}
+						<span className="font-semibold text-sm">{appName}</span>
+					</div>
+
+					{/* Simulated content area */}
+					<div className="p-4 bg-background">
+						<div className="flex items-center gap-2 mb-3">
+							<div className="h-2 w-16 rounded-full bg-primary" />
+							<div className="h-2 w-24 rounded-full bg-muted" />
+						</div>
+						<div className="flex gap-2">
+							<div className="px-3 py-1.5 rounded-md text-xs bg-primary text-primary-foreground font-medium">
+								Button
+							</div>
+							<div className="px-3 py-1.5 rounded-md text-xs border font-medium">
+								Secondary
+							</div>
+						</div>
+					</div>
+
+					{/* Simulated footer */}
+					{config.footerText && (
+						<div className="px-4 py-2 border-t text-xs text-muted-foreground text-center bg-sidebar">
+							{config.footerText}
+						</div>
+					)}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/proprietary/whitelabeling/whitelabeling-provider.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import Head from "next/head";
+import { api } from "@/utils/api";
+
+export function WhitelabelingProvider() {
+	const { data: config } = api.whitelabeling.getPublic.useQuery(undefined, {
+		staleTime: 5 * 60 * 1000,
+		refetchOnWindowFocus: false,
+	});
+
+	if (!config) return null;
+
+	return (
+		<>
+			<Head>
+				{config.metaTitle && <title>{config.metaTitle}</title>}
+				{config.faviconUrl && <link rel="icon" href={config.faviconUrl} />}
+			</Head>
+
+			{config.customCss && (
+				<style
+					id="whitelabeling-styles"
+					dangerouslySetInnerHTML={{
+						__html: config.customCss,
+					}}
+				/>
+			)}
+		</>
+	);
+}

apps/dokploy/components/proprietary/whitelabeling/whitelabeling-settings.tsx

@@ -0,0 +1,589 @@
+"use client";
+
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { Loader2, RotateCcw } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { api } from "@/utils/api";
+import { WhitelabelingPreview } from "./whitelabeling-preview";
+
+const safeUrlField = z
+	.string()
+	.refine((val) => val === "" || /^https?:\/\//i.test(val), {
+		message: "Only http:// and https:// URLs are allowed",
+	});
+
+const formSchema = z.object({
+	appName: z.string(),
+	appDescription: z.string(),
+	logoUrl: safeUrlField,
+	faviconUrl: safeUrlField,
+	customCss: z.string(),
+	loginLogoUrl: safeUrlField,
+	supportUrl: safeUrlField,
+	docsUrl: safeUrlField,
+	errorPageTitle: z.string(),
+	errorPageDescription: z.string(),
+	metaTitle: z.string(),
+	footerText: z.string(),
+});
+
+type FormSchema = z.infer<typeof formSchema>;
+
+const DEFAULT_CSS_TEMPLATE = `/* ============================================
+   Dokploy Default Theme - CSS Variables
+   Modify these values to customize your instance.
+   ============================================ */
+
+/* ---------- Light Mode ---------- */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 50.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 10% 3.9%;
+  --radius: 0.5rem;
+
+  /* Sidebar */
+  --sidebar-background: 0 0% 98%;
+  --sidebar-foreground: 240 5.3% 26.1%;
+  --sidebar-primary: 240 5.9% 10%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 240 4.8% 95.9%;
+  --sidebar-accent-foreground: 240 5.9% 10%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
+  /* Charts */
+  --chart-1: 173 58% 39%;
+  --chart-2: 12 76% 61%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+/* ---------- Dark Mode ---------- */
+.dark {
+  --background: 0 0% 0%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 4% 10%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 4% 10%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 84.2% 50.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 4% 10%;
+  --ring: 240 4.9% 83.9%;
+
+  /* Sidebar */
+  --sidebar-background: 240 5.9% 10%;
+  --sidebar-foreground: 240 4.8% 95.9%;
+  --sidebar-primary: 224.3 76.3% 48%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 3.7% 15.9%;
+  --sidebar-accent-foreground: 240 4.8% 95.9%;
+  --sidebar-border: 240 3.7% 15.9%;
+  --sidebar-ring: 217.2 91.2% 59.8%;
+
+  /* Charts */
+  --chart-1: 220 70% 50%;
+  --chart-2: 340 75% 55%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 160 60% 45%;
+}
+
+/* ---------- Custom Styles ---------- */
+/* Add your own CSS rules below */
+`;
+
+export function WhitelabelingSettings() {
+	const utils = api.useUtils();
+	const {
+		data,
+		isPending: isLoading,
+		refetch,
+	} = api.whitelabeling.get.useQuery();
+
+	const { mutateAsync: updateWhitelabeling, isPending: isUpdating } =
+		api.whitelabeling.update.useMutation();
+
+	const { mutateAsync: resetWhitelabeling, isPending: isResetting } =
+		api.whitelabeling.reset.useMutation();
+
+	const form = useForm<FormSchema>({
+		defaultValues: {
+			appName: "",
+			appDescription: "",
+			logoUrl: "",
+			faviconUrl: "",
+			customCss: "",
+			loginLogoUrl: "",
+			supportUrl: "",
+			docsUrl: "",
+			errorPageTitle: "",
+			errorPageDescription: "",
+			metaTitle: "",
+			footerText: "",
+		},
+		resolver: zodResolver(formSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				appName: data.appName ?? "",
+				appDescription: data.appDescription ?? "",
+				logoUrl: data.logoUrl ?? "",
+				faviconUrl: data.faviconUrl ?? "",
+				customCss: data.customCss ?? "",
+				loginLogoUrl: data.loginLogoUrl ?? "",
+				supportUrl: data.supportUrl ?? "",
+				docsUrl: data.docsUrl ?? "",
+				errorPageTitle: data.errorPageTitle ?? "",
+				errorPageDescription: data.errorPageDescription ?? "",
+				metaTitle: data.metaTitle ?? "",
+				footerText: data.footerText ?? "",
+			});
+		}
+	}, [data, form]);
+
+	if (isLoading) {
+		return (
+			<div className="flex items-center gap-2 justify-center min-h-[25vh]">
+				<Loader2 className="size-6 text-muted-foreground animate-spin" />
+				<span className="text-sm text-muted-foreground">
+					Loading whitelabeling settings...
+				</span>
+			</div>
+		);
+	}
+
+	const onSubmit = async (values: FormSchema) => {
+		await updateWhitelabeling({
+			whitelabelingConfig: {
+				appName: values.appName || null,
+				appDescription: values.appDescription || null,
+				logoUrl: values.logoUrl || null,
+				faviconUrl: values.faviconUrl || null,
+				customCss: values.customCss || null,
+				loginLogoUrl: values.loginLogoUrl || null,
+				supportUrl: values.supportUrl || null,
+				docsUrl: values.docsUrl || null,
+				errorPageTitle: values.errorPageTitle || null,
+				errorPageDescription: values.errorPageDescription || null,
+				metaTitle: values.metaTitle || null,
+				footerText: values.footerText || null,
+			},
+		})
+			.then(async () => {
+				toast.success("Whitelabeling settings updated");
+				await refetch();
+				await utils.whitelabeling.getPublic.invalidate();
+				await utils.whitelabeling.get.invalidate();
+			})
+			.catch((error) => {
+				toast.error(
+					error?.message || "Failed to update whitelabeling settings",
+				);
+			});
+	};
+
+	const handleReset = async () => {
+		await resetWhitelabeling()
+			.then(async () => {
+				toast.success("Whitelabeling settings reset to defaults");
+				await refetch();
+				await utils.whitelabeling.getPublic.invalidate();
+				await utils.whitelabeling.get.invalidate();
+			})
+			.catch((error) => {
+				toast.error(error?.message || "Failed to reset whitelabeling settings");
+			});
+	};
+
+	return (
+		<div className="flex flex-col gap-6">
+			<Form {...form}>
+				<form
+					onSubmit={form.handleSubmit(onSubmit)}
+					className="flex flex-col gap-6"
+				>
+					{/* Branding Section */}
+					<Card className="bg-transparent">
+						<CardHeader>
+							<CardTitle>Branding</CardTitle>
+							<CardDescription>
+								Customize the application name, logos, and favicon to match your
+								brand identity.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="appName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Application Name</FormLabel>
+										<FormControl>
+											<Input placeholder="Dokploy" {...field} />
+										</FormControl>
+										<FormDescription>
+											Replaces "Dokploy" across the entire interface.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="appDescription"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Application Description</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="The Open Source alternative to Netlify, Vercel, Heroku."
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Tagline shown on the login/onboarding pages. Defaults to
+											the standard Dokploy description if empty.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="logoUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Logo URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://example.com/logo.svg"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Main logo shown in the sidebar and header. Recommended
+											size: 128x128px.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="loginLogoUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Login Page Logo URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://example.com/login-logo.svg"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Logo displayed on the login page. If empty, the main logo
+											is used.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="faviconUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Favicon URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://example.com/favicon.ico"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Browser tab icon. Supports .ico, .png, and .svg formats.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					{/* Appearance Section */}
+					<Card className="bg-transparent">
+						<CardHeader>
+							<CardTitle>Appearance</CardTitle>
+							<CardDescription>
+								Customize the look and feel of the application with custom CSS.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="customCss"
+								render={({ field }) => (
+									<FormItem>
+										<div className="flex items-center justify-between">
+											<FormLabel>Custom CSS</FormLabel>
+											<Button
+												type="button"
+												variant="outline"
+												size="sm"
+												onClick={() => {
+													form.setValue("customCss", DEFAULT_CSS_TEMPLATE);
+												}}
+											>
+												Load Default Styles
+											</Button>
+										</div>
+										<FormControl>
+											<div className="max-h-[350px] overflow-auto">
+												<CodeEditor
+													language="css"
+													value={field.value}
+													onChange={field.onChange}
+													placeholder="/* Click 'Load Default Styles' to start with the base theme variables */"
+													lineWrapping
+												/>
+											</div>
+										</FormControl>
+										<FormDescription>
+											Inject custom CSS styles globally. Click "Load Default
+											Styles" to get the base theme CSS variables as a starting
+											point.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					{/* Metadata & Links Section */}
+					<Card className="bg-transparent">
+						<CardHeader>
+							<CardTitle>Metadata & Links</CardTitle>
+							<CardDescription>
+								Customize the page title, footer text, and sidebar links.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="metaTitle"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Page Title</FormLabel>
+										<FormControl>
+											<Input placeholder="Dokploy" {...field} />
+										</FormControl>
+										<FormDescription>
+											Browser tab title. Defaults to "Dokploy" if empty.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="footerText"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Footer Text</FormLabel>
+										<FormControl>
+											<Input placeholder="Powered by Your Company" {...field} />
+										</FormControl>
+										<FormDescription>
+											Custom text displayed in the footer area.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="supportUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Support URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://support.example.com"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Custom URL for the "Support" link in the sidebar.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="docsUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Documentation URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="https://docs.example.com"
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription>
+											Custom URL for the "Documentation" link in the sidebar.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					{/* Error Pages Section */}
+					<Card className="bg-transparent">
+						<CardHeader>
+							<CardTitle>Error Pages</CardTitle>
+							<CardDescription>
+								Customize the error page messages shown to users.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="errorPageTitle"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Error Page Title</FormLabel>
+										<FormControl>
+											<Input placeholder="Something went wrong" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="errorPageDescription"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Error Page Description</FormLabel>
+										<FormControl>
+											<Textarea
+												placeholder="We're sorry, but an unexpected error occurred. Please try again later."
+												className="min-h-[80px]"
+												{...field}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</CardContent>
+					</Card>
+
+					{/* Actions */}
+					<div className="flex items-center justify-between">
+						<DialogAction
+							title="Reset Whitelabeling"
+							description="Are you sure you want to reset all whitelabeling settings to their defaults? This action cannot be undone."
+							type="destructive"
+							onClick={handleReset}
+						>
+							<Button variant="outline" type="button" isLoading={isResetting}>
+								<RotateCcw className="size-4 mr-2" />
+								Reset to Defaults
+							</Button>
+						</DialogAction>
+
+						<Button type="submit" isLoading={isUpdating} disabled={isUpdating}>
+							Save Changes
+						</Button>
+					</div>
+				</form>
+			</Form>
+
+			{/* Live Preview */}
+			<WhitelabelingPreview config={form.watch()} />
+		</div>
+	);
+}

apps/dokploy/components/shared/breadcrumb-sidebar.tsx

@@ -17,6 +17,8 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
 import { SidebarTrigger } from "@/components/ui/sidebar";
+import { TimeBadge } from "@/components/ui/time-badge";
+import { api } from "@/utils/api";
 
 interface BreadcrumbEntry {
 	name: string;
@@ -32,9 +34,11 @@ interface Props {
 }
 
 export const BreadcrumbSidebar = ({ list }: Props) => {
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+
 	return (
 		<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-			<div className="flex items-center justify-between w-full">
+			<div className="flex items-center justify-between w-full px-4">
 				<div className="flex items-center gap-2">
 					<SidebarTrigger className="-ml-1" />
 					<Separator orientation="vertical" className="mr-2 h-4" />
@@ -75,6 +79,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 						</BreadcrumbList>
 					</Breadcrumb>
 				</div>
+				{!isCloud && <TimeBadge />}
 			</div>
 		</header>
 	);

apps/dokploy/components/shared/code-editor.tsx

@@ -4,12 +4,14 @@ import {
 	type CompletionContext,
 	type CompletionResult,
 } from "@codemirror/autocomplete";
+import { css } from "@codemirror/lang-css";
 import { json } from "@codemirror/lang-json";
 import { yaml } from "@codemirror/lang-yaml";
 import { StreamLanguage } from "@codemirror/language";
 import { properties } from "@codemirror/legacy-modes/mode/properties";
 import { shell } from "@codemirror/legacy-modes/mode/shell";
-import { EditorView } from "@codemirror/view";
+import { search, searchKeymap } from "@codemirror/search";
+import { EditorView, keymap } from "@codemirror/view";
 import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
 import CodeMirror, { type ReactCodeMirrorProps } from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
@@ -130,7 +132,7 @@ function dockerComposeComplete(
 interface Props extends ReactCodeMirrorProps {
 	wrapperClassName?: string;
 	disabled?: boolean;
-	language?: "yaml" | "json" | "properties" | "shell";
+	language?: "yaml" | "json" | "properties" | "shell" | "css";
 	lineWrapping?: boolean;
 	lineNumbers?: boolean;
 }
@@ -155,13 +157,17 @@ export const CodeEditor = ({
 				}}
 				theme={resolvedTheme === "dark" ? githubDark : githubLight}
 				extensions={[
+					search(),
+					keymap.of(searchKeymap),
 					language === "yaml"
 						? yaml()
 						: language === "json"
 							? json()
-							: language === "shell"
-								? StreamLanguage.define(shell)
-								: StreamLanguage.define(properties),
+							: language === "css"
+								? css()
+								: language === "shell"
+									? StreamLanguage.define(shell)
+									: StreamLanguage.define(properties),
 					props.lineWrapping ? EditorView.lineWrapping : [],
 					language === "yaml"
 						? autocompletion({

apps/dokploy/components/ui/sidebar.tsx

@@ -213,7 +213,9 @@ const Sidebar = React.forwardRef<
 						}
 						side={side}
 					>
-						<div className="flex h-full w-full flex-col">{children}</div>
+						<div className="flex h-full w-full flex-col overflow-hidden">
+							{children}
+						</div>
 					</SheetContent>
 				</Sheet>
 			);
@@ -412,7 +414,7 @@ const SidebarContent = React.forwardRef<
 			ref={ref}
 			data-sidebar="content"
 			className={cn(
-				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-y-auto",
 				className,
 			)}
 			{...props}

apps/dokploy/drizzle/0148_futuristic_bullseye.sql

@@ -0,0 +1 @@
+ALTER TABLE "webServerSettings" ADD COLUMN "whitelabelingConfig" jsonb DEFAULT '{"appName":null,"appDescription":null,"logoUrl":null,"faviconUrl":null,"customCss":null,"loginLogoUrl":null,"supportUrl":null,"docsUrl":null,"errorPageTitle":null,"errorPageDescription":null,"metaTitle":null,"footerText":null}'::jsonb;

apps/dokploy/drizzle/0149_rare_radioactive_man.sql

@@ -0,0 +1,31 @@
+CREATE TABLE "organization_role" (
+	"id" text PRIMARY KEY NOT NULL,
+	"organization_id" text NOT NULL,
+	"role" text NOT NULL,
+	"permission" text NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	"updated_at" timestamp
+);
+--> statement-breakpoint
+CREATE TABLE "audit_log" (
+	"id" text PRIMARY KEY NOT NULL,
+	"organization_id" text,
+	"user_id" text,
+	"user_email" text NOT NULL,
+	"user_role" text NOT NULL,
+	"action" text NOT NULL,
+	"resource_type" text NOT NULL,
+	"resource_id" text,
+	"resource_name" text,
+	"metadata" text,
+	"created_at" timestamp DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "organization_role" ADD CONSTRAINT "organization_role_organization_id_organization_id_fk" FOREIGN KEY ("organization_id") REFERENCES "public"."organization"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "audit_log" ADD CONSTRAINT "audit_log_organization_id_organization_id_fk" FOREIGN KEY ("organization_id") REFERENCES "public"."organization"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "audit_log" ADD CONSTRAINT "audit_log_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE set null ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "organizationRole_organizationId_idx" ON "organization_role" USING btree ("organization_id");--> statement-breakpoint
+CREATE INDEX "organizationRole_role_idx" ON "organization_role" USING btree ("role");--> statement-breakpoint
+CREATE INDEX "auditLog_organizationId_idx" ON "audit_log" USING btree ("organization_id");--> statement-breakpoint
+CREATE INDEX "auditLog_userId_idx" ON "audit_log" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "auditLog_createdAt_idx" ON "audit_log" USING btree ("created_at");

apps/dokploy/drizzle/0150_nappy_blue_blade.sql

@@ -0,0 +1,5 @@
+ALTER TABLE "apikey" ALTER COLUMN "user_id" DROP NOT NULL;--> statement-breakpoint
+ALTER TABLE "apikey" ADD COLUMN "config_id" text DEFAULT 'default' NOT NULL;--> statement-breakpoint
+ALTER TABLE "apikey" ADD COLUMN "reference_id" text;--> statement-breakpoint
+UPDATE "apikey" SET "reference_id" = "user_id" WHERE "reference_id" IS NULL;--> statement-breakpoint
+ALTER TABLE "apikey" ALTER COLUMN "reference_id" SET NOT NULL;

apps/dokploy/drizzle/0151_modern_sunfire.sql

@@ -0,0 +1,4 @@
+ALTER TABLE "apikey" DROP CONSTRAINT "apikey_user_id_user_id_fk";
+--> statement-breakpoint
+ALTER TABLE "apikey" ADD CONSTRAINT "apikey_reference_id_user_id_fk" FOREIGN KEY ("reference_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "apikey" DROP COLUMN "user_id";

apps/dokploy/drizzle/meta/_journal.json

@@ -1037,6 +1037,34 @@
       "when": 1771830695385,
       "tag": "0147_right_lake",
       "breakpoints": true
+    },
+    {
+      "idx": 148,
+      "version": "7",
+      "when": 1773129798212,
+      "tag": "0148_futuristic_bullseye",
+      "breakpoints": true
+    },
+    {
+      "idx": 149,
+      "version": "7",
+      "when": 1773637297592,
+      "tag": "0149_rare_radioactive_man",
+      "breakpoints": true
+    },
+    {
+      "idx": 150,
+      "version": "7",
+      "when": 1773870095817,
+      "tag": "0150_nappy_blue_blade",
+      "breakpoints": true
+    },
+    {
+      "idx": 151,
+      "version": "7",
+      "when": 1773872561300,
+      "tag": "0151_modern_sunfire",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/lib/auth-client.ts

@@ -1,7 +1,7 @@
 import { ssoClient } from "@better-auth/sso/client";
+import { apiKeyClient } from "@better-auth/api-key/client";
 import {
 	adminClient,
-	apiKeyClient,
 	inferAdditionalFields,
 	organizationClient,
 	twoFactorClient,

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.28.3",
+	"version": "v0.28.8",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",
@@ -39,8 +39,6 @@
 		"generate:openapi": "tsx -r dotenv/config scripts/generate-openapi.ts"
 	},
 	"dependencies": {
-		"resend": "^6.0.2",
-		"@better-auth/sso": "1.5.0-beta.16",
 		"@ai-sdk/anthropic": "^3.0.44",
 		"@ai-sdk/azure": "^3.0.30",
 		"@ai-sdk/cohere": "^3.0.21",
@@ -48,12 +46,16 @@
 		"@ai-sdk/mistral": "^3.0.20",
 		"@ai-sdk/openai": "^3.0.29",
 		"@ai-sdk/openai-compatible": "^2.0.30",
+		"@better-auth/api-key": "1.5.4",
+		"@better-auth/sso": "1.5.4",
 		"@codemirror/autocomplete": "^6.18.6",
+		"@codemirror/lang-css": "^6.3.1",
 		"@codemirror/lang-json": "^6.0.1",
 		"@codemirror/lang-yaml": "^6.1.2",
 		"@codemirror/language": "^6.11.0",
 		"@codemirror/legacy-modes": "6.4.0",
-		"@codemirror/view": "6.29.0",
+		"@codemirror/search": "^6.6.0",
+		"@codemirror/view": "^6.39.15",
 		"@dokploy/server": "workspace:*",
 		"@dokploy/trpc-openapi": "0.0.17",
 		"@faker-js/faker": "^8.4.1",
@@ -98,11 +100,10 @@
 		"ai": "^6.0.86",
 		"ai-sdk-ollama": "^3.7.0",
 		"bcrypt": "5.1.1",
-		"better-auth": "1.5.0-beta.16",
+		"better-auth": "1.5.4",
 		"bl": "6.0.11",
 		"boxen": "^7.1.1",
 		"bullmq": "5.67.3",
-		"shell-quote": "^1.8.1",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^0.2.1",
@@ -139,6 +140,9 @@
 		"react-hook-form": "^7.71.2",
 		"react-markdown": "^9.1.0",
 		"recharts": "^2.15.3",
+		"resend": "^6.0.2",
+		"semver": "7.7.3",
+		"shell-quote": "^1.8.1",
 		"slugify": "^1.6.6",
 		"sonner": "^1.7.4",
 		"ssh2": "1.15.0",
@@ -154,12 +158,9 @@
 		"xterm-addon-fit": "^0.8.0",
 		"yaml": "2.8.1",
 		"zod": "^4.3.6",
-		"zod-form-data": "^3.0.1",
-		"semver": "7.7.3"
+		"zod-form-data": "^3.0.1"
 	},
 	"devDependencies": {
-		"@types/semver": "7.7.1",
-		"@types/shell-quote": "^1.7.5",
 		"@types/adm-zip": "^0.5.7",
 		"@types/bcrypt": "5.0.2",
 		"@types/js-cookie": "^3.0.6",
@@ -171,6 +172,8 @@
 		"@types/qrcode": "^1.5.5",
 		"@types/react": "^18.3.5",
 		"@types/react-dom": "^18.3.0",
+		"@types/semver": "7.7.1",
+		"@types/shell-quote": "^1.7.5",
 		"@types/ssh2": "1.15.1",
 		"@types/swagger-ui-react": "^4.19.0",
 		"@types/ws": "8.5.10",

apps/dokploy/pages/_app.tsx

@@ -8,6 +8,7 @@ import { ThemeProvider } from "next-themes";
 import NextTopLoader from "nextjs-toploader";
 import type { ReactElement, ReactNode } from "react";
 import { SearchCommand } from "@/components/dashboard/search-command";
+import { WhitelabelingProvider } from "@/components/proprietary/whitelabeling/whitelabeling-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { api } from "@/utils/api";
 
@@ -48,6 +49,7 @@ const MyApp = ({
 				forcedTheme={Component.theme}
 			>
 				<NextTopLoader color="hsl(var(--sidebar-ring))" />
+				<WhitelabelingProvider />
 				<Toaster richColors />
 				<SearchCommand />
 				{getLayout(<Component {...pageProps} />)}

apps/dokploy/pages/_error.tsx

@@ -2,6 +2,7 @@ import type { NextPageContext } from "next";
 import Link from "next/link";
 import { Logo } from "@/components/shared/logo";
 import { buttonVariants } from "@/components/ui/button";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 interface Props {
 	statusCode: number;
@@ -10,18 +11,20 @@ interface Props {
 
 export default function Custom404({ statusCode, error }: Props) {
 	const displayStatusCode = statusCode || 400;
+	const { config: whitelabeling } = useWhitelabelingPublic();
+	const appName = whitelabeling?.appName || "Dokploy";
+	const logoUrl = whitelabeling?.logoUrl || undefined;
+	const errorTitle = whitelabeling?.errorPageTitle;
+	const errorDescription = whitelabeling?.errorPageDescription;
+
 	return (
 		<div className="h-screen">
 			<div className="max-w-[50rem] flex flex-col mx-auto size-full">
 				<header className="mb-auto flex justify-center z-50 w-full py-4">
 					<nav className="px-4 sm:px-6 lg:px-8" aria-label="Global">
-						<Link
-							href="https://dokploy.com"
-							target="_blank"
-							className="flex flex-row items-center gap-2"
-						>
-							<Logo />
-							<span className="font-medium text-sm">Dokploy</span>
+						<Link href="/" className="flex flex-row items-center gap-2">
+							<Logo logoUrl={logoUrl} />
+							<span className="font-medium text-sm">{appName}</span>
 						</Link>
 					</nav>
 				</header>
@@ -30,19 +33,18 @@ export default function Custom404({ statusCode, error }: Props) {
 						<h1 className="block text-7xl font-bold text-primary sm:text-9xl">
 							{displayStatusCode}
 						</h1>
-						{/* <AlertBlock className="max-w-xs mx-auto">
-							<p className="text-muted-foreground">
-								Oops, something went wrong.
-							</p>
-							<p className="text-muted-foreground">
-								Sorry, we couldn't find your page.
-							</p>
-						</AlertBlock> */}
 						<p className="mt-3 text-muted-foreground">
-							{statusCode === 404
-								? "Sorry, we couldn't find your page."
-								: "Oops, something went wrong."}
+							{errorTitle
+								? errorTitle
+								: statusCode === 404
+									? "Sorry, we couldn't find your page."
+									: "Oops, something went wrong."}
 						</p>
+						{errorDescription && (
+							<p className="mt-2 text-muted-foreground text-sm">
+								{errorDescription}
+							</p>
+						)}
 						{error && (
 							<div className="mt-3 text-red-500">
 								<p>{error.message}</p>
@@ -80,13 +82,17 @@ export default function Custom404({ statusCode, error }: Props) {
 				<footer className="mt-auto text-center py-5">
 					<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
 						<p className="text-sm text-gray-500">
-							<Link
-								href="https://github.com/Dokploy/dokploy/issues"
-								target="_blank"
-								className="underline hover:text-primary transition-colors"
-							>
-								Submit Log in issue on Github
-							</Link>
+							{whitelabeling?.footerText ? (
+								whitelabeling.footerText
+							) : (
+								<Link
+									href="https://github.com/Dokploy/dokploy/issues"
+									target="_blank"
+									className="underline hover:text-primary transition-colors"
+								>
+									Submit Log in issue on Github
+								</Link>
+							)}
 						</p>
 					</div>
 				</footer>

apps/dokploy/pages/api/deploy/github.ts

@@ -358,7 +358,8 @@ export default async function handler(
 			const shouldCreateDeployment =
 				action === "opened" ||
 				action === "synchronize" ||
-				action === "reopened";
+				action === "reopened" ||
+				action === "labeled";
 
 			const repository = githubBody?.repository?.name;
 			const deploymentHash = githubBody?.pull_request?.head?.sha;

apps/dokploy/pages/api/providers/github/setup.ts

@@ -10,22 +10,29 @@ type Query = {
 	state: string;
 	installation_id: string;
 	setup_action: string;
-	userId: string;
 };
 
 export default async function handler(
 	req: NextApiRequest,
 	res: NextApiResponse,
 ) {
-	const { code, state, installation_id, userId }: Query = req.query as Query;
+	const { code, state, installation_id }: Query = req.query as Query;
 
 	if (!code) {
 		return res.status(400).json({ error: "Missing code parameter" });
 	}
-	const [action, value] = state?.split(":");
-	// Value could be the organizationId or the githubProviderId
+	const [action, ...rest] = state?.split(":");
+	// For gh_init: rest[0] = organizationId, rest[1] = userId
+	// For gh_setup: rest[0] = githubProviderId
 
 	if (action === "gh_init") {
+		const organizationId = rest[0];
+		const userId = rest[1] || (req.query.userId as string);
+
+		if (!userId) {
+			return res.status(400).json({ error: "Missing userId parameter" });
+		}
+
 		const octokit = new Octokit({});
 		const { data } = await octokit.request(
 			"POST /app-manifests/{code}/conversions",
@@ -44,7 +51,7 @@ export default async function handler(
 				githubWebhookSecret: data.webhook_secret,
 				githubPrivateKey: data.pem,
 			},
-			value as string,
+			organizationId as string,
 			userId,
 		);
 	} else if (action === "gh_setup") {
@@ -53,7 +60,7 @@ export default async function handler(
 			.set({
 				githubInstallationId: installation_id,
 			})
-			.where(eq(github.githubId, value as string))
+			.where(eq(github.githubId, rest[0] as string))
 			.returning();
 	}
 

apps/dokploy/pages/dashboard/deployments.tsx

@@ -1,4 +1,5 @@
 import { validateRequest } from "@dokploy/server/lib/auth";
+import { hasPermission } from "@dokploy/server/services/permission";
 import { Rocket } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
@@ -79,7 +80,7 @@ DeploymentsPage.getLayout = (page: ReactElement) => {
 };
 
 export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-	const { user } = await validateRequest(ctx.req);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -88,6 +89,24 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
 			},
 		};
 	}
+
+	const canView = await hasPermission(
+		{
+			user: { id: user.id },
+			session: { activeOrganizationId: session?.activeOrganizationId || "" },
+		},
+		{ deployment: ["read"] },
+	);
+
+	if (!canView) {
+		return {
+			redirect: {
+				permanent: false,
+				destination: "/dashboard/projects",
+			},
+		};
+	}
+
 	return {
 		props: {},
 	};

apps/dokploy/pages/dashboard/docker.tsx

@@ -53,19 +53,15 @@ export async function getServerSideProps(
 	try {
 		await helpers.project.all.prefetch();
 
-		if (user.role === "member") {
-			const userR = await helpers.user.one.fetch({
-				userId: user.id,
-			});
+		const userPermissions = await helpers.user.getPermissions.fetch();
 
-			if (!userR?.canAccessToDocker) {
-				return {
-					redirect: {
-						permanent: true,
-						destination: "/",
-					},
-				};
-			}
+		if (!userPermissions?.docker.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
 		}
 		return {
 			props: {

apps/dokploy/pages/dashboard/monitoring.tsx

@@ -1,5 +1,6 @@
 import { IS_CLOUD } from "@dokploy/server/constants";
 import { validateRequest } from "@dokploy/server/lib/auth";
+import { hasPermission } from "@dokploy/server/services/permission";
 import { Loader2 } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
 import type { ReactElement } from "react";
@@ -99,7 +100,7 @@ export async function getServerSideProps(
 			},
 		};
 	}
-	const { user } = await validateRequest(ctx.req);
+	const { user, session } = await validateRequest(ctx.req);
 	if (!user) {
 		return {
 			redirect: {
@@ -109,6 +110,23 @@ export async function getServerSideProps(
 		};
 	}
 
+	const canView = await hasPermission(
+		{
+			user: { id: user.id },
+			session: { activeOrganizationId: session?.activeOrganizationId || "" },
+		},
+		{ monitoring: ["read"] },
+	);
+
+	if (!canView) {
+		return {
+			redirect: {
+				permanent: false,
+				destination: "/dashboard/projects",
+			},
+		};
+	}
+
 	return {
 		props: {},
 	};

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

@@ -98,6 +98,7 @@ import {
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 export type Services = {
 	serverId?: string | null;
@@ -271,6 +272,7 @@ const EnvironmentPage = (
 	const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
 	const { projectId, environmentId } = props;
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: projectId,
@@ -370,6 +372,8 @@ const EnvironmentPage = (
 			{ projectId: selectedTargetProject },
 			{ enabled: !!selectedTargetProject },
 		);
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 
 	const emptyServices =
 		!currentEnvironment ||
@@ -777,7 +781,7 @@ const EnvironmentPage = (
 		}
 		if (success > 0) {
 			toast.success(
-				`${success} service${success !== 1 ? "s" : ""} deployed successfully`,
+				`${success} service${success !== 1 ? "s" : ""} queued for deployment`,
 			);
 		}
 		if (failed > 0) {
@@ -871,7 +875,8 @@ const EnvironmentPage = (
 			/>
 			<Head>
 				<title>
-					Environment: {currentEnvironment.name} | {projectData?.name} | Dokploy
+					Environment: {currentEnvironment.name} | {projectData?.name} |{" "}
+					{appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -901,9 +906,7 @@ const EnvironmentPage = (
 									<ProjectEnvironment projectId={projectId}>
 										<Button variant="outline">Project Environment</Button>
 									</ProjectEnvironment>
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canCreateServices) && (
+									{permissions?.service.create && (
 										<DropdownMenu>
 											<DropdownMenuTrigger asChild>
 												<Button>
@@ -1025,9 +1028,7 @@ const EnvironmentPage = (
 														Stop
 													</Button>
 												</DialogAction>
-												{(auth?.role === "owner" ||
-													auth?.role === "admin" ||
-													auth?.canDeleteServices) && (
+												{permissions?.service.delete && (
 													<>
 														<DialogAction
 															title="Delete Services"
@@ -1620,6 +1621,7 @@ export async function getServerSideProps(
 					environmentId: params.environmentId,
 				});
 			} catch (error) {
+				console.log(error);
 				// If user doesn't have access to requested environment, redirect to accessible one
 				const accessibleEnvironments =
 					await helpers.environment.byProjectId.fetch({
@@ -1639,11 +1641,11 @@ export async function getServerSideProps(
 						},
 					};
 				}
-				// No accessible environments, redirect to home
+				// No accessible environments, redirect to projects
 				return {
 					redirect: {
 						permanent: false,
-						destination: "/",
+						destination: "/dashboard/projects",
 					},
 				};
 			}
@@ -1659,7 +1661,8 @@ export async function getServerSideProps(
 					environmentId: params.environmentId,
 				},
 			};
-		} catch {
+		} catch (error) {
+			console.log(error);
 			return {
 				redirect: {
 					permanent: false,

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

@@ -56,6 +56,7 @@ import {
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState =
 	| "projects"
@@ -91,10 +92,13 @@ const Service = (
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.project?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -122,7 +126,8 @@ const Service = (
 			/>
 			<Head>
 				<title>
-					Application: {data?.name} - {data?.environment.project.name} | Dokploy
+					Application: {data?.name} - {data?.environment.project.name} |{" "}
+					{appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -193,10 +198,10 @@ const Service = (
 								</div>
 
 								<div className="flex flex-row gap-2 justify-end">
-									<UpdateApplication applicationId={applicationId} />
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canDeleteServices) && (
+									{permissions?.service.create && (
+										<UpdateApplication applicationId={applicationId} />
+									)}
+									{permissions?.service.delete && (
 										<DeleteService id={applicationId} type="application" />
 									)}
 								</div>
@@ -238,24 +243,47 @@ const Service = (
 									<div className="flex flex-row items-center justify-between w-full overflow-auto">
 										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="domains">Domains</TabsTrigger>
-											<TabsTrigger value="deployments">Deployments</TabsTrigger>
-											<TabsTrigger value="preview-deployments">
-												Preview Deployments
-											</TabsTrigger>
-											<TabsTrigger value="schedules">Schedules</TabsTrigger>
-											<TabsTrigger value="volume-backups">
-												Volume Backups
-											</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
+											)}
+											{permissions?.domain.read && (
+												<TabsTrigger value="domains">Domains</TabsTrigger>
+											)}
+											{permissions?.deployment.read && (
+												<TabsTrigger value="deployments">
+													Deployments
+												</TabsTrigger>
+											)}
+											{permissions?.deployment.read && (
+												<TabsTrigger value="preview-deployments">
+													Preview Deployments
+												</TabsTrigger>
+											)}
+											{permissions?.schedule.read && (
+												<TabsTrigger value="schedules">Schedules</TabsTrigger>
+											)}
+											{permissions?.volumeBackup.read && (
+												<TabsTrigger value="volume-backups">
+													Volume Backups
+												</TabsTrigger>
+											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
 											{data?.sourceType !== "docker" && (
 												<TabsTrigger value="patches">Patches</TabsTrigger>
 											)}
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
 
@@ -264,26 +292,29 @@ const Service = (
 											<ShowGeneralApplication applicationId={applicationId} />
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment applicationId={applicationId} />
-										</div>
-									</TabsContent>
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment applicationId={applicationId} />
+											</div>
+										</TabsContent>
+									)}
 
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col gap-4 border rounded-lg p-6">
-												{data?.serverId && isCloud ? (
-													<ContainerPaidMonitoring
-														appName={data?.appName || ""}
-														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-													/>
-												) : (
-													<>
-														{/* {monitoring?.enabledFeatures &&
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures &&
 															isCloud &&
 															data?.serverId && (
 																<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
@@ -297,7 +328,7 @@ const Service = (
 																</div>
 															)} */}
 
-														{/* {toggleMonitoring ? (
+															{/* {toggleMonitoring ? (
 															<ContainerPaidMonitoring
 																appName={data?.appName || ""}
 																baseUrl={`http://${monitoring?.serverIp}:${monitoring?.metricsConfig?.server?.port}`}
@@ -306,84 +337,102 @@ const Service = (
 																}
 															/>
 														) : ( */}
-														<div>
-															<ContainerFreeMonitoring
-																appName={data?.appName || ""}
-															/>
-														</div>
-														{/* )} */}
-													</>
-												)}
+															<div>
+																<ContainerFreeMonitoring
+																	appName={data?.appName || ""}
+																/>
+															</div>
+															{/* )} */}
+														</>
+													)}
+												</div>
 											</div>
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
 
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDockerLogs
-												appName={data?.appName || ""}
-												serverId={data?.serverId || ""}
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="schedules">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowSchedules
-												id={applicationId}
-												scheduleType="application"
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="deployments" className="w-full pt-2.5">
-										<div className="flex flex-col gap-4 border rounded-lg">
-											<ShowDeployments
-												id={applicationId}
-												type="application"
-												serverId={data?.serverId || ""}
-												refreshToken={data?.refreshToken || ""}
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="volume-backups" className="w-full pt-2.5">
-										<div className="flex flex-col gap-4 border rounded-lg">
-											<ShowVolumeBackups
-												id={applicationId}
-												type="application"
-												serverId={data?.serverId || ""}
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="preview-deployments" className="w-full">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowPreviewDeployments applicationId={applicationId} />
-										</div>
-									</TabsContent>
-									<TabsContent value="domains" className="w-full">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDomains id={applicationId} type="application" />
-										</div>
-									</TabsContent>
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDockerLogs
+													appName={data?.appName || ""}
+													serverId={data?.serverId || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.schedule.read && (
+										<TabsContent value="schedules">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowSchedules
+													id={applicationId}
+													scheduleType="application"
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.deployment.read && (
+										<TabsContent value="deployments" className="w-full pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg">
+												<ShowDeployments
+													id={applicationId}
+													type="application"
+													serverId={data?.serverId || ""}
+													refreshToken={data?.refreshToken || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.volumeBackup.read && (
+										<TabsContent
+											value="volume-backups"
+											className="w-full pt-2.5"
+										>
+											<div className="flex flex-col gap-4 border rounded-lg">
+												<ShowVolumeBackups
+													id={applicationId}
+													type="application"
+													serverId={data?.serverId || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.deployment.read && (
+										<TabsContent value="preview-deployments" className="w-full">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowPreviewDeployments applicationId={applicationId} />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.domain.read && (
+										<TabsContent value="domains" className="w-full">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDomains id={applicationId} type="application" />
+											</div>
+										</TabsContent>
+									)}
 									<TabsContent value="patches" className="w-full">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<ShowPatches id={applicationId} type="application" />
 										</div>
 									</TabsContent>
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<AddCommand applicationId={applicationId} />
-											<ShowClusterSettings
-												id={applicationId}
-												type="application"
-											/>
-											<ShowBuildServer applicationId={applicationId} />
-											<ShowResources id={applicationId} type="application" />
-											<ShowVolumes id={applicationId} type="application" />
-											<ShowRedirects applicationId={applicationId} />
-											<ShowSecurity applicationId={applicationId} />
-											<ShowPorts applicationId={applicationId} />
-											<ShowTraefikConfig applicationId={applicationId} />
-										</div>
-									</TabsContent>
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<AddCommand applicationId={applicationId} />
+												<ShowClusterSettings
+													id={applicationId}
+													type="application"
+												/>
+												<ShowBuildServer applicationId={applicationId} />
+												<ShowResources id={applicationId} type="application" />
+												<ShowVolumes id={applicationId} type="application" />
+												<ShowRedirects applicationId={applicationId} />
+												<ShowSecurity applicationId={applicationId} />
+												<ShowPorts applicationId={applicationId} />
+												<ShowTraefikConfig applicationId={applicationId} />
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

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

@@ -52,6 +52,7 @@ import {
 import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState =
 	| "projects"
@@ -80,10 +81,13 @@ const Service = (
 	const { data } = api.compose.one.useQuery({ composeId });
 
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -111,7 +115,7 @@ const Service = (
 			/>
 			<Head>
 				<title>
-					Compose: {data?.name} - {data?.environment?.project?.name} | Dokploy
+					Compose: {data?.name} - {data?.environment?.project?.name} | {appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -182,11 +186,11 @@ const Service = (
 										)}
 									</div>
 									<div className="flex flex-row gap-2 justify-end">
-										<UpdateCompose composeId={composeId} />
+										{permissions?.service.create && (
+											<UpdateCompose composeId={composeId} />
+										)}
 
-										{(auth?.role === "owner" ||
-											auth?.role === "admin" ||
-											auth?.canDeleteServices) && (
+										{permissions?.service.delete && (
 											<DeleteService id={composeId} type="compose" />
 										)}
 									</div>
@@ -229,22 +233,45 @@ const Service = (
 									<div className="flex flex-row items-center w-full overflow-auto">
 										<TabsList className="flex gap-8 max-md:gap-4 justify-start">
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="domains">Domains</TabsTrigger>
-											<TabsTrigger value="deployments">Deployments</TabsTrigger>
-											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="schedules">Schedules</TabsTrigger>
-											<TabsTrigger value="volumeBackups">
-												Volume Backups
-											</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
+											)}
+											{permissions?.domain.read && (
+												<TabsTrigger value="domains">Domains</TabsTrigger>
+											)}
+											{permissions?.deployment.read && (
+												<TabsTrigger value="deployments">
+													Deployments
+												</TabsTrigger>
+											)}
+											{permissions?.service.create && (
+												<TabsTrigger value="backups">Backups</TabsTrigger>
+											)}
+											{permissions?.schedule.read && (
+												<TabsTrigger value="schedules">Schedules</TabsTrigger>
+											)}
+											{permissions?.volumeBackup.read && (
+												<TabsTrigger value="volumeBackups">
+													Volume Backups
+												</TabsTrigger>
+											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
 											{data?.sourceType !== "raw" && (
 												<TabsTrigger value="patches">Patches</TabsTrigger>
 											)}
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
 
@@ -253,47 +280,56 @@ const Service = (
 											<ShowGeneralCompose composeId={composeId} />
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment id={composeId} type="compose" />
-										</div>
-									</TabsContent>
-									<TabsContent value="backups">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowBackups id={composeId} backupType="compose" />
-										</div>
-									</TabsContent>
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment id={composeId} type="compose" />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.service.create && (
+										<TabsContent value="backups">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowBackups id={composeId} backupType="compose" />
+											</div>
+										</TabsContent>
+									)}
 
-									<TabsContent value="schedules">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowSchedules id={composeId} scheduleType="compose" />
-										</div>
-									</TabsContent>
-									<TabsContent value="volumeBackups">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowVolumeBackups
-												id={composeId}
-												type="compose"
-												serverId={data?.serverId || ""}
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col border rounded-lg ">
-												{data?.serverId && isCloud ? (
-													<ComposePaidMonitoring
-														serverId={data?.serverId || ""}
-														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-														appName={data?.appName || ""}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-														appType={data?.composeType || "docker-compose"}
-													/>
-												) : (
-													<>
-														{/* {monitoring?.enabledFeatures &&
+									{permissions?.schedule.read && (
+										<TabsContent value="schedules">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowSchedules id={composeId} scheduleType="compose" />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.volumeBackup.read && (
+										<TabsContent value="volumeBackups">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowVolumeBackups
+													id={composeId}
+													type="compose"
+													serverId={data?.serverId || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col border rounded-lg ">
+													{data?.serverId && isCloud ? (
+														<ComposePaidMonitoring
+															serverId={data?.serverId || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															appName={data?.appName || ""}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+															appType={data?.composeType || "docker-compose"}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures &&
 															isCloud &&
 															data?.serverId && (
 																<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2 m-4">
@@ -317,53 +353,60 @@ const Service = (
 																appType={data?.composeType || "docker-compose"}
 															/>
 														) : ( */}
-														{/* <div> */}
-														<ComposeFreeMonitoring
-															serverId={data?.serverId || ""}
-															appName={data?.appName || ""}
-															appType={data?.composeType || "docker-compose"}
-														/>
-														{/* </div> */}
-														{/* )} */}
-													</>
+															{/* <div> */}
+															<ComposeFreeMonitoring
+																serverId={data?.serverId || ""}
+																appName={data?.appName || ""}
+																appType={data?.composeType || "docker-compose"}
+															/>
+															{/* </div> */}
+															{/* )} */}
+														</>
+													)}
+												</div>
+											</div>
+										</TabsContent>
+									)}
+
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4 pt-2.5">
+												{data?.composeType === "docker-compose" ? (
+													<ShowDockerLogsCompose
+														serverId={data?.serverId || ""}
+														appName={data?.appName || ""}
+														appType={data?.composeType || "docker-compose"}
+													/>
+												) : (
+													<ShowDockerLogsStack
+														serverId={data?.serverId || ""}
+														appName={data?.appName || ""}
+													/>
 												)}
 											</div>
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
 
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4 pt-2.5">
-											{data?.composeType === "docker-compose" ? (
-												<ShowDockerLogsCompose
+									{permissions?.deployment.read && (
+										<TabsContent value="deployments" className="w-full pt-2.5">
+											<div className="flex flex-col gap-4 border rounded-lg">
+												<ShowDeployments
+													id={composeId}
+													type="compose"
 													serverId={data?.serverId || ""}
-													appName={data?.appName || ""}
-													appType={data?.composeType || "docker-compose"}
+													refreshToken={data?.refreshToken || ""}
 												/>
-											) : (
-												<ShowDockerLogsStack
-													serverId={data?.serverId || ""}
-													appName={data?.appName || ""}
-												/>
-											)}
-										</div>
-									</TabsContent>
+											</div>
+										</TabsContent>
+									)}
 
-									<TabsContent value="deployments" className="w-full pt-2.5">
-										<div className="flex flex-col gap-4 border rounded-lg">
-											<ShowDeployments
-												id={composeId}
-												type="compose"
-												serverId={data?.serverId || ""}
-												refreshToken={data?.refreshToken || ""}
-											/>
-										</div>
-									</TabsContent>
-
-									<TabsContent value="domains">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDomains id={composeId} type="compose" />
-										</div>
-									</TabsContent>
+									{permissions?.domain.read && (
+										<TabsContent value="domains">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDomains id={composeId} type="compose" />
+											</div>
+										</TabsContent>
+									)}
 
 									<TabsContent value="patches" className="w-full">
 										<div className="flex flex-col gap-4 pt-2.5">
@@ -371,14 +414,16 @@ const Service = (
 										</div>
 									</TabsContent>
 
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<AddCommandCompose composeId={composeId} />
-											<ShowVolumes id={composeId} type="compose" />
-											<ShowImport composeId={composeId} />
-											<IsolatedDeploymentTab composeId={composeId} />
-										</div>
-									</TabsContent>
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<AddCommandCompose composeId={composeId} />
+												<ShowVolumes id={composeId} type="compose" />
+												<ShowImport composeId={composeId} />
+												<IsolatedDeploymentTab composeId={composeId} />
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

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

@@ -45,6 +45,7 @@ import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 
@@ -59,12 +60,15 @@ const Mariadb = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mariadb.one.useQuery({ mariadbId });
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -94,7 +98,7 @@ const Mariadb = (
 				<Head>
 					<title>
 						Database: {data?.name} - {data?.environment?.project?.name} |
-						Dokploy
+						{appName}
 					</title>
 				</Head>
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl w-full">
@@ -156,10 +160,10 @@ const Mariadb = (
 									)}
 								</div>
 								<div className="flex flex-row gap-2 justify-end">
-									<UpdateMariadb mariadbId={mariadbId} />
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canDeleteServices) && (
+									{permissions?.service.create && (
+										<UpdateMariadb mariadbId={mariadbId} />
+									)}
+									{permissions?.service.delete && (
 										<DeleteService id={mariadbId} type="mariadb" />
 									)}
 								</div>
@@ -211,13 +215,24 @@ const Mariadb = (
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
 											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											)}
 										</TabsList>
 									</div>
 
@@ -228,25 +243,28 @@ const Mariadb = (
 											<ShowExternalMariadbCredentials mariadbId={mariadbId} />
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment id={mariadbId} type="mariadb" />
-										</div>
-									</TabsContent>
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col gap-4 border rounded-lg p-6">
-												{data?.serverId && isCloud ? (
-													<ContainerPaidMonitoring
-														appName={data?.appName || ""}
-														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-													/>
-												) : (
-													<>
-														{/* {monitoring?.enabledFeatures && (
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment id={mariadbId} type="mariadb" />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures && (
 															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
 																<Label className="text-muted-foreground">
 																	Change Monitoring
@@ -268,37 +286,42 @@ const Mariadb = (
 															/>
 														) : (
 															<div> */}
-														<ContainerFreeMonitoring
-															appName={data?.appName || ""}
-														/>
-														{/* </div> */}
-														{/* )} */}
-													</>
-												)}
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+															{/* </div> */}
+															{/* )} */}
+														</>
+													)}
+												</div>
 											</div>
-										</div>
-									</TabsContent>
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4  pt-2.5">
-											<ShowDockerLogs
-												serverId={data?.serverId || ""}
-												appName={data?.appName || ""}
-											/>
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4  pt-2.5">
+												<ShowDockerLogs
+													serverId={data?.serverId || ""}
+													appName={data?.appName || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
 									<TabsContent value="backups">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<ShowBackups id={mariadbId} databaseType="mariadb" />
 										</div>
 									</TabsContent>
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDatabaseAdvancedSettings
-												id={mariadbId}
-												type="mariadb"
-											/>
-										</div>
-									</TabsContent>
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDatabaseAdvancedSettings
+													id={mariadbId}
+													type="mariadb"
+												/>
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

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

@@ -45,6 +45,7 @@ import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 
@@ -59,11 +60,14 @@ const Mongo = (
 	const { data } = api.mongo.one.useQuery({ mongoId });
 
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -91,7 +95,8 @@ const Mongo = (
 			/>
 			<Head>
 				<title>
-					Database: {data?.name} - {data?.environment?.project?.name} | Dokploy
+					Database: {data?.name} - {data?.environment?.project?.name} |{" "}
+					{appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -155,10 +160,10 @@ const Mongo = (
 								</div>
 
 								<div className="flex flex-row gap-2 justify-end">
-									<UpdateMongo mongoId={mongoId} />
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canDeleteServices) && (
+									{permissions?.service.create && (
+										<UpdateMongo mongoId={mongoId} />
+									)}
+									{permissions?.service.delete && (
 										<DeleteService id={mongoId} type="mongo" />
 									)}
 								</div>
@@ -210,13 +215,24 @@ const Mongo = (
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
 											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											)}
 										</TabsList>
 									</div>
 
@@ -227,25 +243,28 @@ const Mongo = (
 											<ShowExternalMongoCredentials mongoId={mongoId} />
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment id={mongoId} type="mongo" />
-										</div>
-									</TabsContent>
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col gap-4 border rounded-lg p-6">
-												{data?.serverId && isCloud ? (
-													<ContainerPaidMonitoring
-														appName={data?.appName || ""}
-														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-													/>
-												) : (
-													<>
-														{/* {monitoring?.enabledFeatures && (
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment id={mongoId} type="mongo" />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures && (
 															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
 																<Label className="text-muted-foreground">
 																	Change Monitoring
@@ -267,24 +286,27 @@ const Mongo = (
 															/>
 														) : (
 															<div> */}
-														<ContainerFreeMonitoring
-															appName={data?.appName || ""}
-														/>
-														{/* </div> */}
-														{/* )} */}
-													</>
-												)}
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+															{/* </div> */}
+															{/* )} */}
+														</>
+													)}
+												</div>
 											</div>
-										</div>
-									</TabsContent>
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4  pt-2.5">
-											<ShowDockerLogs
-												serverId={data?.serverId || ""}
-												appName={data?.appName || ""}
-											/>
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4  pt-2.5">
+												<ShowDockerLogs
+													serverId={data?.serverId || ""}
+													appName={data?.appName || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
 									<TabsContent value="backups">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<ShowBackups
@@ -294,11 +316,16 @@ const Mongo = (
 											/>
 										</div>
 									</TabsContent>
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDatabaseAdvancedSettings id={mongoId} type="mongo" />
-										</div>
-									</TabsContent>
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDatabaseAdvancedSettings
+													id={mongoId}
+													type="mongo"
+												/>
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

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

@@ -45,6 +45,7 @@ import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 
@@ -58,11 +59,14 @@ const MySql = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.mysql.one.useQuery({ mysqlId });
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -92,7 +96,7 @@ const MySql = (
 				<Head>
 					<title>
 						Database: {data?.name} - {data?.environment?.project?.name} |
-						Dokploy
+						{appName}
 					</title>
 				</Head>
 				<div className="w-full">
@@ -156,10 +160,10 @@ const MySql = (
 									</div>
 
 									<div className="flex flex-row gap-2 justify-end">
-										<UpdateMysql mysqlId={mysqlId} />
-										{(auth?.role === "owner" ||
-											auth?.role === "admin" ||
-											auth?.canDeleteServices) && (
+										{permissions?.service.create && (
+											<UpdateMysql mysqlId={mysqlId} />
+										)}
+										{permissions?.service.delete && (
 											<DeleteService id={mysqlId} type="mysql" />
 										)}
 									</div>
@@ -211,17 +215,24 @@ const MySql = (
 												)}
 											>
 												<TabsTrigger value="general">General</TabsTrigger>
-												<TabsTrigger value="environment">
-													Environment
-												</TabsTrigger>
-												<TabsTrigger value="logs">Logs</TabsTrigger>
-												{((data?.serverId && isCloud) || !data?.server) && (
-													<TabsTrigger value="monitoring">
-														Monitoring
+												{permissions?.envVars.read && (
+													<TabsTrigger value="environment">
+														Environment
 													</TabsTrigger>
 												)}
+												{permissions?.logs.read && (
+													<TabsTrigger value="logs">Logs</TabsTrigger>
+												)}
+												{permissions?.monitoring.read &&
+													((data?.serverId && isCloud) || !data?.server) && (
+														<TabsTrigger value="monitoring">
+															Monitoring
+														</TabsTrigger>
+													)}
 												<TabsTrigger value="backups">Backups</TabsTrigger>
-												<TabsTrigger value="advanced">Advanced</TabsTrigger>
+												{permissions?.service.create && (
+													<TabsTrigger value="advanced">Advanced</TabsTrigger>
+												)}
 											</TabsList>
 										</div>
 
@@ -232,40 +243,47 @@ const MySql = (
 												<ShowExternalMysqlCredentials mysqlId={mysqlId} />
 											</div>
 										</TabsContent>
-										<TabsContent value="environment" className="w-full">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<ShowEnvironment id={mysqlId} type="mysql" />
-											</div>
-										</TabsContent>
-										<TabsContent value="monitoring">
-											<div className="pt-2.5">
-												<div className="flex flex-col gap-4 border rounded-lg p-6">
-													{data?.serverId && isCloud ? (
-														<ContainerPaidMonitoring
-															appName={data?.appName || ""}
-															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-															token={
-																data?.server?.metricsConfig?.server?.token || ""
-															}
-														/>
-													) : (
-														<>
-															<ContainerFreeMonitoring
-																appName={data?.appName || ""}
-															/>
-														</>
-													)}
+										{permissions?.envVars.read && (
+											<TabsContent value="environment" className="w-full">
+												<div className="flex flex-col gap-4 pt-2.5">
+													<ShowEnvironment id={mysqlId} type="mysql" />
 												</div>
-											</div>
-										</TabsContent>
-										<TabsContent value="logs">
-											<div className="flex flex-col gap-4  pt-2.5">
-												<ShowDockerLogs
-													serverId={data?.serverId || ""}
-													appName={data?.appName || ""}
-												/>
-											</div>
-										</TabsContent>
+											</TabsContent>
+										)}
+										{permissions?.monitoring.read && (
+											<TabsContent value="monitoring">
+												<div className="pt-2.5">
+													<div className="flex flex-col gap-4 border rounded-lg p-6">
+														{data?.serverId && isCloud ? (
+															<ContainerPaidMonitoring
+																appName={data?.appName || ""}
+																baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+																token={
+																	data?.server?.metricsConfig?.server?.token ||
+																	""
+																}
+															/>
+														) : (
+															<>
+																<ContainerFreeMonitoring
+																	appName={data?.appName || ""}
+																/>
+															</>
+														)}
+													</div>
+												</div>
+											</TabsContent>
+										)}
+										{permissions?.logs.read && (
+											<TabsContent value="logs">
+												<div className="flex flex-col gap-4  pt-2.5">
+													<ShowDockerLogs
+														serverId={data?.serverId || ""}
+														appName={data?.appName || ""}
+													/>
+												</div>
+											</TabsContent>
+										)}
 										<TabsContent value="backups">
 											<div className="flex flex-col gap-4 pt-2.5">
 												<ShowBackups
@@ -275,14 +293,16 @@ const MySql = (
 												/>
 											</div>
 										</TabsContent>
-										<TabsContent value="advanced">
-											<div className="flex flex-col gap-4 pt-2.5">
-												<ShowDatabaseAdvancedSettings
-													id={mysqlId}
-													type="mysql"
-												/>
-											</div>
-										</TabsContent>
+										{permissions?.service.create && (
+											<TabsContent value="advanced">
+												<div className="flex flex-col gap-4 pt-2.5">
+													<ShowDatabaseAdvancedSettings
+														id={mysqlId}
+														type="mysql"
+													/>
+												</div>
+											</TabsContent>
+										)}
 									</Tabs>
 								)}
 							</CardContent>

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

@@ -45,6 +45,7 @@ import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState = "projects" | "monitoring" | "settings" | "backups" | "advanced";
 
@@ -58,11 +59,14 @@ const Postgresql = (
 	const [tab, setSab] = useState<TabState>(activeTab);
 	const { data } = api.postgres.one.useQuery({ postgresId });
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -90,7 +94,8 @@ const Postgresql = (
 			/>
 			<Head>
 				<title>
-					Database: {data?.name} - {data?.environment?.project?.name} | Dokploy
+					Database: {data?.name} - {data?.environment?.project?.name} |{" "}
+					{appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -154,10 +159,10 @@ const Postgresql = (
 								</div>
 
 								<div className="flex flex-row gap-2 justify-end">
-									<UpdatePostgres postgresId={postgresId} />
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canDeleteServices) && (
+									{permissions?.service.create && (
+										<UpdatePostgres postgresId={postgresId} />
+									)}
+									{permissions?.service.delete && (
 										<DeleteService id={postgresId} type="postgres" />
 									)}
 								</div>
@@ -211,13 +216,24 @@ const Postgresql = (
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
 											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
 											<TabsTrigger value="backups">Backups</TabsTrigger>
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
+											)}
 										</TabsList>
 									</div>
 
@@ -232,44 +248,50 @@ const Postgresql = (
 											/>
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment id={postgresId} type="postgres" />
-										</div>
-									</TabsContent>
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col gap-4 border rounded-lg p-6">
-												{data?.serverId && isCloud ? (
-													<ContainerPaidMonitoring
-														appName={data?.appName || ""}
-														baseUrl={`${
-															data?.serverId
-																? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}`
-																: "http://localhost:4500"
-														}`}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-													/>
-												) : (
-													<>
-														<ContainerFreeMonitoring
-															appName={data?.appName || ""}
-														/>
-													</>
-												)}
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment id={postgresId} type="postgres" />
 											</div>
-										</div>
-									</TabsContent>
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4  pt-2.5">
-											<ShowDockerLogs
-												serverId={data?.serverId || ""}
-												appName={data?.appName || ""}
-											/>
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${
+																data?.serverId
+																	? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}`
+																	: "http://localhost:4500"
+															}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+														</>
+													)}
+												</div>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4  pt-2.5">
+												<ShowDockerLogs
+													serverId={data?.serverId || ""}
+													appName={data?.appName || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
 									<TabsContent value="backups">
 										<div className="flex flex-col gap-4 pt-2.5">
 											<ShowBackups
@@ -279,14 +301,16 @@ const Postgresql = (
 											/>
 										</div>
 									</TabsContent>
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDatabaseAdvancedSettings
-												id={postgresId}
-												type="postgres"
-											/>
-										</div>
-									</TabsContent>
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDatabaseAdvancedSettings
+													id={postgresId}
+													type="postgres"
+												/>
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

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

@@ -44,6 +44,7 @@ import { UseKeyboardNav } from "@/hooks/use-keyboard-nav";
 import { cn } from "@/lib/utils";
 import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { useWhitelabeling } from "@/utils/hooks/use-whitelabeling";
 
 type TabState = "projects" | "monitoring" | "settings" | "advanced";
 
@@ -58,11 +59,14 @@ const Redis = (
 	const { data } = api.redis.one.useQuery({ redisId });
 
 	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: environments } = api.environment.byProjectId.useQuery({
 		projectId: data?.environment?.projectId || "",
 	});
+	const { config: whitelabeling } = useWhitelabeling();
+	const appName = whitelabeling?.appName || "Dokploy";
 	const environmentDropdownItems =
 		environments?.map((env) => ({
 			name: env.name,
@@ -90,7 +94,8 @@ const Redis = (
 			/>
 			<Head>
 				<title>
-					Database: {data?.name} - {data?.environment?.project?.name} | Dokploy
+					Database: {data?.name} - {data?.environment?.project?.name} |{" "}
+					{appName}
 				</title>
 			</Head>
 			<div className="w-full">
@@ -154,10 +159,10 @@ const Redis = (
 								</div>
 
 								<div className="flex flex-row gap-2 justify-end">
-									<UpdateRedis redisId={redisId} />
-									{(auth?.role === "owner" ||
-										auth?.role === "admin" ||
-										auth?.canDeleteServices) && (
+									{permissions?.service.create && (
+										<UpdateRedis redisId={redisId} />
+									)}
+									{permissions?.service.delete && (
 										<DeleteService id={redisId} type="redis" />
 									)}
 								</div>
@@ -209,12 +214,23 @@ const Redis = (
 											)}
 										>
 											<TabsTrigger value="general">General</TabsTrigger>
-											<TabsTrigger value="environment">Environment</TabsTrigger>
-											<TabsTrigger value="logs">Logs</TabsTrigger>
-											{((data?.serverId && isCloud) || !data?.server) && (
-												<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+											{permissions?.envVars.read && (
+												<TabsTrigger value="environment">
+													Environment
+												</TabsTrigger>
+											)}
+											{permissions?.logs.read && (
+												<TabsTrigger value="logs">Logs</TabsTrigger>
+											)}
+											{permissions?.monitoring.read &&
+												((data?.serverId && isCloud) || !data?.server) && (
+													<TabsTrigger value="monitoring">
+														Monitoring
+													</TabsTrigger>
+												)}
+											{permissions?.service.create && (
+												<TabsTrigger value="advanced">Advanced</TabsTrigger>
 											)}
-											<TabsTrigger value="advanced">Advanced</TabsTrigger>
 										</TabsList>
 									</div>
 
@@ -225,25 +241,28 @@ const Redis = (
 											<ShowExternalRedisCredentials redisId={redisId} />
 										</div>
 									</TabsContent>
-									<TabsContent value="environment">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowEnvironment id={redisId} type="redis" />
-										</div>
-									</TabsContent>
-									<TabsContent value="monitoring">
-										<div className="pt-2.5">
-											<div className="flex flex-col gap-4 border rounded-lg p-6">
-												{data?.serverId && isCloud ? (
-													<ContainerPaidMonitoring
-														appName={data?.appName || ""}
-														baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
-														token={
-															data?.server?.metricsConfig?.server?.token || ""
-														}
-													/>
-												) : (
-													<>
-														{/* {monitoring?.enabledFeatures && (
+									{permissions?.envVars.read && (
+										<TabsContent value="environment">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowEnvironment id={redisId} type="redis" />
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.monitoring.read && (
+										<TabsContent value="monitoring">
+											<div className="pt-2.5">
+												<div className="flex flex-col gap-4 border rounded-lg p-6">
+													{data?.serverId && isCloud ? (
+														<ContainerPaidMonitoring
+															appName={data?.appName || ""}
+															baseUrl={`${data?.serverId ? `http://${data?.server?.ipAddress}:${data?.server?.metricsConfig?.server?.port}` : "http://localhost:4500"}`}
+															token={
+																data?.server?.metricsConfig?.server?.token || ""
+															}
+														/>
+													) : (
+														<>
+															{/* {monitoring?.enabledFeatures && (
 															<div className="flex flex-row border w-fit p-4 rounded-lg items-center gap-2">
 																<Label className="text-muted-foreground">
 																	Change Monitoring
@@ -265,29 +284,37 @@ const Redis = (
 															/>
 														) : (
 															<div> */}
-														<ContainerFreeMonitoring
-															appName={data?.appName || ""}
-														/>
-														{/* </div> */}
-														{/* )} */}
-													</>
-												)}
+															<ContainerFreeMonitoring
+																appName={data?.appName || ""}
+															/>
+															{/* </div> */}
+															{/* )} */}
+														</>
+													)}
+												</div>
 											</div>
-										</div>
-									</TabsContent>
-									<TabsContent value="logs">
-										<div className="flex flex-col gap-4  pt-2.5">
-											<ShowDockerLogs
-												serverId={data?.serverId || ""}
-												appName={data?.appName || ""}
-											/>
-										</div>
-									</TabsContent>
-									<TabsContent value="advanced">
-										<div className="flex flex-col gap-4 pt-2.5">
-											<ShowDatabaseAdvancedSettings id={redisId} type="redis" />
-										</div>
-									</TabsContent>
+										</TabsContent>
+									)}
+									{permissions?.logs.read && (
+										<TabsContent value="logs">
+											<div className="flex flex-col gap-4  pt-2.5">
+												<ShowDockerLogs
+													serverId={data?.serverId || ""}
+													appName={data?.appName || ""}
+												/>
+											</div>
+										</TabsContent>
+									)}
+									{permissions?.service.create && (
+										<TabsContent value="advanced">
+											<div className="flex flex-col gap-4 pt-2.5">
+												<ShowDatabaseAdvancedSettings
+													id={redisId}
+													type="redis"
+												/>
+											</div>
+										</TabsContent>
+									)}
 								</Tabs>
 							)}
 						</CardContent>

apps/dokploy/pages/dashboard/settings/audit-logs.tsx

@@ -0,0 +1,66 @@
+import { validateRequest } from "@dokploy/server";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import type { GetServerSidePropsContext } from "next";
+import type { ReactElement } from "react";
+import superjson from "superjson";
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { ShowAuditLogs } from "@/components/proprietary/audit-logs/show-audit-logs";
+import { appRouter } from "@/server/api/root";
+
+const Page = () => {
+	return (
+		<div className="flex flex-col gap-4 w-full">
+			<ShowAuditLogs />
+		</div>
+	);
+};
+
+export default Page;
+
+Page.getLayout = (page: ReactElement) => {
+	return <DashboardLayout metaName="Audit Logs">{page}</DashboardLayout>;
+};
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+	const { req, res } = ctx;
+	const { user, session } = await validateRequest(req);
+
+	if (!user) {
+		return {
+			redirect: { destination: "/", permanent: true },
+		};
+	}
+
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session as any,
+			user: user as any,
+		},
+		transformer: superjson,
+	});
+
+	try {
+		const userPermissions = await helpers.user.getPermissions.fetch();
+
+		if (!userPermissions?.auditLog.read) {
+			return {
+				redirect: {
+					destination: "/dashboard/settings/profile",
+					permanent: false,
+				},
+			};
+		}
+
+		return {
+			props: {
+				trpcState: helpers.dehydrate(),
+			},
+		};
+	} catch {
+		return { props: {} };
+	}
+}

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

@@ -48,19 +48,15 @@ export async function getServerSideProps(
 	try {
 		await helpers.project.all.prefetch();
 		await helpers.settings.isCloud.prefetch();
-		if (user.role === "member") {
-			const userR = await helpers.user.one.fetch({
-				userId: user.id,
-			});
+		const userPermissions = await helpers.user.getPermissions.fetch();
 
-			if (!userR?.canAccessToGitProviders) {
-				return {
-					redirect: {
-						permanent: true,
-						destination: "/",
-					},
-				};
-			}
+		if (!userPermissions?.gitProviders.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
 		}
 		return {
 			props: {

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

@@ -11,7 +11,7 @@ import { appRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
 
 const Page = () => {
-	const { data } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 
 	return (
@@ -19,9 +19,7 @@ const Page = () => {
 			<div className="h-full rounded-xl max-w-5xl mx-auto flex flex-col gap-4">
 				<ProfileForm />
 				{isCloud && <LinkingAccount />}
-				{(data?.canAccessToAPI ||
-					data?.role === "owner" ||
-					data?.role === "admin") && <ShowApiKeys />}
+				{permissions?.api.read && <ShowApiKeys />}
 			</div>
 		</div>
 	);

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

@@ -49,19 +49,15 @@ export async function getServerSideProps(
 		await helpers.project.all.prefetch();
 		await helpers.settings.isCloud.prefetch();
 
-		if (user.role === "member") {
-			const userR = await helpers.user.one.fetch({
-				userId: user.id,
-			});
+		const userPermissions = await helpers.user.getPermissions.fetch();
 
-			if (!userR?.canAccessToSSHKeys) {
-				return {
-					redirect: {
-						permanent: true,
-						destination: "/",
-					},
-				};
-			}
+		if (!userPermissions?.sshKeys.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
 		}
 		return {
 			props: {

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

@@ -3,16 +3,24 @@ import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
 import type { ReactElement } from "react";
 import superjson from "superjson";
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { ManageCustomRoles } from "@/components/proprietary/roles/manage-custom-roles";
 import { ShowInvitations } from "@/components/dashboard/settings/users/show-invitations";
 import { ShowUsers } from "@/components/dashboard/settings/users/show-users";
-import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
 
 const Page = () => {
+	const { data: auth } = api.user.get.useQuery();
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const isOwnerOrAdmin = auth?.role === "owner" || auth?.role === "admin";
+	const canCreateMembers = permissions?.member.create ?? false;
+
 	return (
 		<div className="flex flex-col gap-4 w-full">
 			<ShowUsers />
-			<ShowInvitations />
+			{canCreateMembers && <ShowInvitations />}
+			{isOwnerOrAdmin && <ManageCustomRoles />}
 		</div>
 	);
 };
@@ -28,7 +36,7 @@ export async function getServerSideProps(
 	const { req, res } = ctx;
 	const { user, session } = await validateRequest(req);
 
-	if (!user || user.role === "member") {
+	if (!user) {
 		return {
 			redirect: {
 				permanent: true,
@@ -48,12 +56,30 @@ export async function getServerSideProps(
 		},
 		transformer: superjson,
 	});
-	await helpers.user.get.prefetch();
-	await helpers.settings.isCloud.prefetch();
 
-	return {
-		props: {
-			trpcState: helpers.dehydrate(),
-		},
-	};
+	try {
+		await helpers.user.get.prefetch();
+		await helpers.settings.isCloud.prefetch();
+
+		const userPermissions = await helpers.user.getPermissions.fetch();
+
+		if (!userPermissions?.member.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
+		}
+
+		return {
+			props: {
+				trpcState: helpers.dehydrate(),
+			},
+		};
+	} catch {
+		return {
+			props: {},
+		};
+	}
 }

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

@@ -0,0 +1,81 @@
+import { validateRequest } from "@dokploy/server";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import type { GetServerSidePropsContext } from "next";
+import type { ReactElement } from "react";
+import superjson from "superjson";
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { EnterpriseFeatureGate } from "@/components/proprietary/enterprise-feature-gate";
+import { WhitelabelingSettings } from "@/components/proprietary/whitelabeling/whitelabeling-settings";
+import { Card } from "@/components/ui/card";
+import { appRouter } from "@/server/api/root";
+
+const Page = () => {
+	return (
+		<div className="w-full">
+			<div className="h-full rounded-xl max-w-5xl mx-auto flex flex-col gap-4">
+				<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+					<div className="rounded-xl bg-background shadow-md">
+						<div className="p-6">
+							<EnterpriseFeatureGate
+								lockedProps={{
+									title: "Enterprise Whitelabeling",
+									description:
+										"Whitelabeling allows you to fully customize logos, colors, CSS, error pages, and more. Add a valid license to configure it.",
+									ctaLabel: "Go to License",
+								}}
+							>
+								<WhitelabelingSettings />
+							</EnterpriseFeatureGate>
+						</div>
+					</div>
+				</Card>
+			</div>
+		</div>
+	);
+};
+
+export default Page;
+
+Page.getLayout = (page: ReactElement) => {
+	return <DashboardLayout metaName="Whitelabeling">{page}</DashboardLayout>;
+};
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+	const { req, res } = ctx;
+	const { user, session } = await validateRequest(ctx.req);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	if (user.role !== "owner") {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/dashboard/settings/profile",
+			},
+		};
+	}
+
+	const helpers = createServerSideHelpers({
+		router: appRouter,
+		ctx: {
+			req: req as any,
+			res: res as any,
+			db: null as any,
+			session: session as any,
+			user: user as any,
+		},
+		transformer: superjson,
+	});
+	await helpers.user.get.prefetch();
+
+	return {
+		props: {
+			trpcState: helpers.dehydrate(),
+		},
+	};
+}

apps/dokploy/pages/dashboard/swarm.tsx

@@ -53,19 +53,15 @@ export async function getServerSideProps(
 	try {
 		await helpers.project.all.prefetch();
 
-		if (user.role === "member") {
-			const userR = await helpers.user.one.fetch({
-				userId: user.id,
-			});
+		const userPermissions = await helpers.user.getPermissions.fetch();
 
-			if (!userR?.canAccessToDocker) {
-				return {
-					redirect: {
-						permanent: true,
-						destination: "/",
-					},
-				};
-			}
+		if (!userPermissions?.docker.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
 		}
 		return {
 			props: {

apps/dokploy/pages/dashboard/traefik.tsx

@@ -53,19 +53,15 @@ export async function getServerSideProps(
 	try {
 		await helpers.project.all.prefetch();
 
-		if (user.role === "member") {
-			const userR = await helpers.user.one.fetch({
-				userId: user.id,
-			});
+		const userPermissions = await helpers.user.getPermissions.fetch();
 
-			if (!userR?.canAccessToTraefikFiles) {
-				return {
-					redirect: {
-						permanent: true,
-						destination: "/",
-					},
-				};
-			}
+		if (!userPermissions?.traefikFiles.read) {
+			return {
+				redirect: {
+					permanent: true,
+					destination: "/",
+				},
+			};
 		}
 		return {
 			props: {

apps/dokploy/pages/index.tsx

@@ -41,6 +41,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 const LoginSchema = z.object({
 	email: z.string().email(),
@@ -58,6 +59,7 @@ interface Props {
 }
 export default function Home({ IS_CLOUD }: Props) {
 	const router = useRouter();
+	const { config: whitelabeling } = useWhitelabelingPublic();
 	const { data: showSignInWithSSO } = api.sso.showSignInWithSSO.useQuery();
 	const [isLoginLoading, setIsLoginLoading] = useState(false);
 	const [isTwoFactorLoading, setIsTwoFactorLoading] = useState(false);
@@ -216,7 +218,14 @@ export default function Home({ IS_CLOUD }: Props) {
 			<div className="flex flex-col space-y-2 text-center">
 				<h1 className="text-2xl font-semibold tracking-tight">
 					<div className="flex flex-row items-center justify-center gap-2">
-						<Logo className="size-12" />
+						<Logo
+							className="size-12"
+							logoUrl={
+								whitelabeling?.loginLogoUrl ||
+								whitelabeling?.logoUrl ||
+								undefined
+							}
+						/>
 						Sign in
 					</div>
 				</h1>

apps/dokploy/pages/invitation.tsx

@@ -23,6 +23,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth-client";
 import { api } from "@/utils/api";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 const registerSchema = z
 	.object({
@@ -82,6 +83,7 @@ const Invitation = ({
 	userAlreadyExists,
 }: Props) => {
 	const router = useRouter();
+	const { config: whitelabeling } = useWhitelabelingPublic();
 	const { data } = api.user.getUserByToken.useQuery(
 		{
 			token,
@@ -148,12 +150,15 @@ const Invitation = ({
 			<div className="flex  h-screen w-full items-center justify-center ">
 				<div className="flex flex-col items-center gap-4 w-full">
 					<CardTitle className="text-2xl font-bold flex items-center gap-2">
-						<Link
-							href="https://dokploy.com"
-							target="_blank"
-							className="flex flex-row items-center gap-2"
-						>
-							<Logo className="size-12" />
+						<Link href="/" className="flex flex-row items-center gap-2">
+							<Logo
+								className="size-12"
+								logoUrl={
+									whitelabeling?.loginLogoUrl ||
+									whitelabeling?.logoUrl ||
+									undefined
+								}
+							/>
 						</Link>
 						Invitation
 					</CardTitle>

apps/dokploy/pages/register.tsx

@@ -25,6 +25,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth-client";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 const registerSchema = z
 	.object({
@@ -77,6 +78,7 @@ interface Props {
 
 const Register = ({ isCloud }: Props) => {
 	const router = useRouter();
+	const { config: whitelabeling } = useWhitelabelingPublic();
 	const [isError, setIsError] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const [data, setData] = useState<any>(null);
@@ -123,12 +125,15 @@ const Register = ({ isCloud }: Props) => {
 			<div className="flex  w-full items-center justify-center ">
 				<div className="flex flex-col items-center gap-4 w-full">
 					<CardTitle className="text-2xl font-bold flex  items-center gap-2">
-						<Link
-							href="https://dokploy.com"
-							target="_blank"
-							className="flex flex-row items-center gap-2"
-						>
-							<Logo className="size-12" />
+						<Link href="/" className="flex flex-row items-center gap-2">
+							<Logo
+								className="size-12"
+								logoUrl={
+									whitelabeling?.loginLogoUrl ||
+									whitelabeling?.logoUrl ||
+									undefined
+								}
+							/>
 						</Link>
 						{isCloud ? "Sign Up" : "Setup the server"}
 					</CardTitle>

apps/dokploy/pages/reset-password.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth-client";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 const loginSchema = z
 	.object({
@@ -53,6 +54,7 @@ interface Props {
 	tokenResetPassword: string;
 }
 export default function Home({ tokenResetPassword }: Props) {
+	const { config: whitelabeling } = useWhitelabelingPublic();
 	const [token, setToken] = useState<string | null>(tokenResetPassword);
 	const [isLoading, setIsLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
@@ -97,7 +99,14 @@ export default function Home({ tokenResetPassword }: Props) {
 			<div className="flex flex-col items-center gap-4 w-full">
 				<CardTitle className="text-2xl font-bold flex flex-row gap-2 items-center">
 					<Link href="/" className="flex flex-row items-center gap-2">
-						<Logo className="size-12" />
+						<Logo
+							className="size-12"
+							logoUrl={
+								whitelabeling?.loginLogoUrl ||
+								whitelabeling?.logoUrl ||
+								undefined
+							}
+						/>
 					</Link>
 					Reset Password
 				</CardTitle>

apps/dokploy/pages/send-reset-password.tsx

@@ -22,6 +22,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { authClient } from "@/lib/auth-client";
+import { useWhitelabelingPublic } from "@/utils/hooks/use-whitelabeling";
 
 const loginSchema = z.object({
 	email: z
@@ -42,6 +43,7 @@ type AuthResponse = {
 };
 
 export default function Home() {
+	const { config: whitelabeling } = useWhitelabelingPublic();
 	const [temp, _setTemp] = useState<AuthResponse>({
 		is2FAEnabled: false,
 		authId: "",
@@ -81,8 +83,14 @@ export default function Home() {
 		<div className="flex w-full items-center justify-center ">
 			<div className="flex flex-col items-center gap-4 w-full">
 				<Link href="/" className="flex flex-row items-center gap-2">
-					<Logo />
-					<span className="font-medium text-sm">Dokploy</span>
+					<Logo
+						logoUrl={
+							whitelabeling?.loginLogoUrl || whitelabeling?.logoUrl || undefined
+						}
+					/>
+					<span className="font-medium text-sm">
+						{whitelabeling?.appName || "Dokploy"}
+					</span>
 				</Link>
 				<CardTitle className="text-2xl font-bold">Reset Password</CardTitle>
 				<CardDescription>

apps/dokploy/pages/swagger.tsx

@@ -98,19 +98,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 		},
 		transformer: superjson,
 	});
-	if (user.role === "member") {
-		const userR = await helpers.user.one.fetch({
-			userId: user.id,
-		});
+	const userPermissions = await helpers.user.getPermissions.fetch();
 
-		if (!userR?.canAccessToAPI) {
-			return {
-				redirect: {
-					permanent: true,
-					destination: "/",
-				},
-			};
-		}
+	if (!userPermissions?.api.read) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
 	}
 
 	return {

apps/dokploy/server/api/root.ts

@@ -23,8 +23,11 @@ import { mysqlRouter } from "./routers/mysql";
 import { notificationRouter } from "./routers/notification";
 import { organizationRouter } from "./routers/organization";
 import { patchRouter } from "./routers/patch";
+import { auditLogRouter } from "./routers/proprietary/audit-log";
+import { customRoleRouter } from "./routers/proprietary/custom-role";
 import { licenseKeyRouter } from "./routers/proprietary/license-key";
 import { ssoRouter } from "./routers/proprietary/sso";
+import { whitelabelingRouter } from "./routers/proprietary/whitelabeling";
 import { portRouter } from "./routers/port";
 import { postgresRouter } from "./routers/postgres";
 import { previewDeploymentRouter } from "./routers/preview-deployment";
@@ -87,6 +90,9 @@ export const appRouter = createTRPCRouter({
 	organization: organizationRouter,
 	licenseKey: licenseKeyRouter,
 	sso: ssoRouter,
+	whitelabeling: whitelabelingRouter,
+	customRole: customRoleRouter,
+	auditLog: auditLogRouter,
 	schedule: scheduleRouter,
 	rollback: rollbackRouter,
 	volumeBackups: volumeBackupsRouter,

apps/dokploy/server/api/routers/ai.ts

@@ -21,7 +21,7 @@ import { findProjectById } from "@dokploy/server/services/project";
 import {
 	addNewService,
 	checkServiceAccess,
-} from "@dokploy/server/services/user";
+} from "@dokploy/server/services/permission";
 import {
 	getProviderHeaders,
 	getProviderName,
@@ -38,17 +38,10 @@ import {
 import { generatePassword } from "@/templates/utils";
 
 export const aiRouter = createTRPCRouter({
-	one: protectedProcedure
+	one: adminProcedure
 		.input(z.object({ aiId: z.string() }))
-		.query(async ({ ctx, input }) => {
-			const aiSetting = await getAiSettingById(input.aiId);
-			if (aiSetting.organizationId !== ctx.session.activeOrganizationId) {
-				throw new TRPCError({
-					code: "UNAUTHORIZED",
-					message: "You don't have access to this AI configuration",
-				});
-			}
-			return aiSetting;
+		.query(async ({ input }) => {
+			return await getAiSettingById(input.aiId);
 		}),
 
 	getModels: protectedProcedure
@@ -159,11 +152,9 @@ export const aiRouter = createTRPCRouter({
 		return await saveAiSettings(ctx.session.activeOrganizationId, input);
 	}),
 
-	update: protectedProcedure
-		.input(apiUpdateAi)
-		.mutation(async ({ ctx, input }) => {
-			return await saveAiSettings(ctx.session.activeOrganizationId, input);
-		}),
+	update: adminProcedure.input(apiUpdateAi).mutation(async ({ ctx, input }) => {
+		return await saveAiSettings(ctx.session.activeOrganizationId, input);
+	}),
 
 	getAll: adminProcedure.query(async ({ ctx }) => {
 		return await getAiSettingsByOrganizationId(
@@ -171,29 +162,15 @@ export const aiRouter = createTRPCRouter({
 		);
 	}),
 
-	get: protectedProcedure
+	get: adminProcedure
 		.input(z.object({ aiId: z.string() }))
-		.query(async ({ ctx, input }) => {
-			const aiSetting = await getAiSettingById(input.aiId);
-			if (aiSetting.organizationId !== ctx.session.activeOrganizationId) {
-				throw new TRPCError({
-					code: "UNAUTHORIZED",
-					message: "You don't have access to this AI configuration",
-				});
-			}
-			return aiSetting;
+		.query(async ({ input }) => {
+			return await getAiSettingById(input.aiId);
 		}),
 
-	delete: protectedProcedure
+	delete: adminProcedure
 		.input(z.object({ aiId: z.string() }))
-		.mutation(async ({ ctx, input }) => {
-			const aiSetting = await getAiSettingById(input.aiId);
-			if (aiSetting.organizationId !== ctx.session.activeOrganizationId) {
-				throw new TRPCError({
-					code: "UNAUTHORIZED",
-					message: "You don't have access to this AI configuration",
-				});
-			}
+		.mutation(async ({ input }) => {
 			return await deleteAiSettings(input.aiId);
 		}),
 
@@ -223,13 +200,7 @@ export const aiRouter = createTRPCRouter({
 		.mutation(async ({ ctx, input }) => {
 			const environment = await findEnvironmentById(input.environmentId);
 			const project = await findProjectById(environment.projectId);
-			if (ctx.user.role === "member") {
-				await checkServiceAccess(
-					ctx.session.activeOrganizationId,
-					environment.projectId,
-					"create",
-				);
-			}
+			await checkServiceAccess(ctx, environment.projectId, "create");
 
 			if (IS_CLOUD && !input.serverId) {
 				throw new TRPCError({
@@ -275,13 +246,7 @@ export const aiRouter = createTRPCRouter({
 				}
 			}
 
-			if (ctx.user.role === "member") {
-				await addNewService(
-					ctx.session.activeOrganizationId,
-					ctx.user.ownerId,
-					compose.composeId,
-				);
-			}
+			await addNewService(ctx, compose.composeId);
 
 			return null;
 		}),