docs: reorganize README with improved structure and clarity

feat(notification): add volumeBackup parameter to notification creati…

.github/workflows/pr-quality.yml

@@ -16,7 +16,6 @@ jobs:
     steps:
       - uses: peakoss/anti-slop@v0
         with:
-          max-failures: 4
           blocked-commit-authors: "claude,copilot"
           require-description: true
           min-account-age: 5

CONTRIBUTING.md

@@ -99,7 +99,14 @@ pnpm run dokploy:build
 
 ## Docker
 
-To build the docker image
+To build the docker image first run commands to copy .env files
+
+```bash
+cp apps/dokploy/.env.production.example .env.production
+cp apps/dokploy/.env.production.example apps/dokploy/.env.production
+```
+
+then run build command
 
 ```bash
 pnpm run docker:build

README.md

@@ -19,8 +19,8 @@ Dokploy is a free, self-hostable Platform as a Service (PaaS) that simplifies th
 Dokploy includes multiple features to make your life easier.
 
 - **Applications**: Deploy any type of application (Node.js, PHP, Python, Go, Ruby, etc.).
-- **Databases**: Create and manage databases with support for MySQL, PostgreSQL, MongoDB, MariaDB, and Redis.
+- **Databases**: Create and manage databases with support for MySQL, PostgreSQL, MongoDB, MariaDB, libsql, and Redis.
-- **Backups**: Automate backups for databases to an external storage destination.
+- **Backups**: Automate backups for databases to external storage destinations (S3, SFTP, FTP, Google Drive).
 - **Docker Compose**: Native support for Docker Compose to manage complex applications.
 - **Multi Node**: Scale applications to multiple nodes using Docker Swarm to manage the cluster.
 - **Templates**: Deploy open-source templates (Plausible, Pocketbase, Calcom, etc.) with a single click.

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,79 @@
+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",
+	"tag",
+	"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/cluster/modify-swarm-settings.tsx

@@ -110,16 +110,16 @@ const menuItems: MenuItem[] = [
 	},
 ];
 
-const hasStopGracePeriodSwarm = (
-	value: unknown,
-): value is { stopGracePeriodSwarm: bigint | number | string | null } =>
-	typeof value === "object" &&
-	value !== null &&
-	"stopGracePeriodSwarm" in value;
-
 interface Props {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "application"
+		| "libsql"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "postgres"
+		| "redis";
 }
 
 export const AddSwarmSettings = ({ id, type }: Props) => {

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

@@ -37,7 +37,7 @@ import { AddSwarmSettings } from "./modify-swarm-settings";
 
 interface Props {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type: "application" | "mariadb" | "mongo" | "mysql" | "postgres" | "redis";
 }
 
 const AddRedirectchema = z.object({
@@ -49,15 +49,15 @@ type AddCommand = z.infer<typeof AddRedirectchema>;
 
 export const ShowClusterSettings = ({ id, type }: Props) => {
 	const queryMap = {
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
 		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -65,12 +65,13 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 	const { data: registries } = api.registry.all.useQuery();
 
 	const mutationMap = {
+		application: () => api.application.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
 		postgres: () => api.postgres.update.useMutation(),
 		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
 	};
 
 	const { mutateAsync, isPending } = mutationMap[type]
@@ -105,11 +106,11 @@ export const ShowClusterSettings = ({ id, type }: Props) => {
 	const onSubmit = async (data: AddCommand) => {
 		await mutateAsync({
 			applicationId: id || "",
-			postgresId: id || "",
-			redisId: id || "",
-			mysqlId: id || "",
 			mariadbId: id || "",
 			mongoId: id || "",
+			mysqlId: id || "",
+			postgresId: id || "",
+			redisId: id || "",
 			...(type === "application"
 				? {
 						registryId:

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/endpoint-spec-form.tsx

@@ -28,7 +28,14 @@ export const endpointSpecFormSchema = z.object({
 
 interface EndpointSpecFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
@@ -44,6 +51,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -56,6 +64,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -94,6 +103,7 @@ export const EndpointSpecForm = ({ id, type }: EndpointSpecFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				endpointSpecSwarm: hasAnyValue ? formData : null,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/health-check-form.tsx

@@ -26,7 +26,14 @@ export const healthCheckFormSchema = z.object({
 
 interface HealthCheckFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
@@ -42,6 +49,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -54,6 +62,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -104,6 +113,7 @@ export const HealthCheckForm = ({ id, type }: HealthCheckFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				healthCheckSwarm: hasAnyValue ? formData : null,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/labels-form.tsx

@@ -29,7 +29,14 @@ export const labelsFormSchema = z.object({
 
 interface LabelsFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const LabelsForm = ({ id, type }: LabelsFormProps) => {
@@ -45,6 +52,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -57,6 +65,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -112,6 +121,7 @@ export const LabelsForm = ({ id, type }: LabelsFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				labelsSwarm: labelsToSend,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/mode-form.tsx

@@ -23,7 +23,14 @@ import { api } from "@/utils/api";
 
 interface ModeFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const ModeForm = ({ id, type }: ModeFormProps) => {
@@ -39,6 +46,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -51,6 +59,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -95,6 +104,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
 					mysqlId: id || "",
 					mariadbId: id || "",
 					mongoId: id || "",
+					libsqlId: id || "",
 					modeSwarm: null,
 				});
 				toast.success("Mode updated successfully");
@@ -122,6 +132,7 @@ export const ModeForm = ({ id, type }: ModeFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				modeSwarm: modeData,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/network-form.tsx

@@ -35,7 +35,14 @@ export const networkFormSchema = z.object({
 
 interface NetworkFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const NetworkForm = ({ id, type }: NetworkFormProps) => {
@@ -51,6 +58,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -63,6 +71,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -132,6 +141,7 @@ export const NetworkForm = ({ id, type }: NetworkFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				networkSwarm: networksToSend,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/placement-form.tsx

@@ -34,7 +34,14 @@ export const placementFormSchema = z.object({
 
 interface PlacementFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const PlacementForm = ({ id, type }: PlacementFormProps) => {
@@ -50,6 +57,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -62,6 +70,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -114,6 +123,7 @@ export const PlacementForm = ({ id, type }: PlacementFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				placementSwarm: hasAnyValue
 					? {
 							...formData,

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/restart-policy-form.tsx

@@ -32,7 +32,14 @@ export const restartPolicyFormSchema = z.object({
 
 interface RestartPolicyFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
@@ -48,6 +55,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -60,6 +68,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -104,6 +113,7 @@ export const RestartPolicyForm = ({ id, type }: RestartPolicyFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				restartPolicySwarm: hasAnyValue ? formData : null,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/rollback-config-form.tsx

@@ -34,7 +34,14 @@ export const rollbackConfigFormSchema = z.object({
 
 interface RollbackConfigFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
@@ -50,6 +57,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -62,6 +70,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -103,6 +112,7 @@ export const RollbackConfigForm = ({ id, type }: RollbackConfigFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				rollbackConfigSwarm: (hasAnyValue ? formData : null) as any,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/stop-grace-period-form.tsx

@@ -23,7 +23,14 @@ const hasStopGracePeriodSwarm = (
 
 interface StopGracePeriodFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
@@ -39,6 +46,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -51,6 +59,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -88,6 +97,7 @@ export const StopGracePeriodForm = ({ id, type }: StopGracePeriodFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				stopGracePeriodSwarm: formData.value,
 			});
 

apps/dokploy/components/dashboard/application/advanced/cluster/swarm-forms/update-config-form.tsx

@@ -34,7 +34,14 @@ export const updateConfigFormSchema = z.object({
 
 interface UpdateConfigFormProps {
 	id: string;
-	type: "postgres" | "mariadb" | "mongo" | "mysql" | "redis" | "application";
+	type:
+		| "postgres"
+		| "mariadb"
+		| "mongo"
+		| "mysql"
+		| "redis"
+		| "application"
+		| "libsql";
 }
 
 export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
@@ -50,6 +57,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -62,6 +70,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 	};
 
 	const { mutateAsync } = mutationMap[type]
@@ -109,6 +118,7 @@ export const UpdateConfigForm = ({ id, type }: UpdateConfigFormProps) => {
 				mysqlId: id || "",
 				mariadbId: id || "",
 				mongoId: id || "",
+				libsqlId: id || "",
 				updateConfigSwarm: (hasAnyValue ? formData : null) as any,
 			});
 

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

@@ -89,12 +89,13 @@ const ULIMIT_PRESETS = [
 ];
 
 export type ServiceType =
-	| "postgres"
+	| "application"
-	| "mongo"
+	| "libsql"
-	| "redis"
-	| "mysql"
 	| "mariadb"
-	| "application";
+	| "mongo"
+	| "mysql"
+	| "postgres"
+	| "redis";
 
 interface Props {
 	id: string;
@@ -105,27 +106,29 @@ type AddResources = z.infer<typeof addResourcesSchema>;
 
 export const ShowResources = ({ id, type }: Props) => {
 	const queryMap = {
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
 		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 
 	const mutationMap = {
+		application: () => api.application.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
+		mariadb: () => api.mariadb.update.useMutation(),
+		mongo: () => api.mongo.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
 		postgres: () => api.postgres.update.useMutation(),
 		redis: () => api.redis.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
-		mariadb: () => api.mariadb.update.useMutation(),
-		application: () => api.application.update.useMutation(),
-		mongo: () => api.mongo.update.useMutation(),
 	};
 
 	const { mutateAsync, isPending } = mutationMap[type]
@@ -155,19 +158,20 @@ export const ShowResources = ({ id, type }: Props) => {
 				cpuReservation: data?.cpuReservation || undefined,
 				memoryLimit: data?.memoryLimit || undefined,
 				memoryReservation: data?.memoryReservation || undefined,
-				ulimitsSwarm: data?.ulimitsSwarm || [],
+				ulimitsSwarm: (data as any)?.ulimitsSwarm || [],
 			});
 		}
 	}, [data, form, form.reset]);
 
 	const onSubmit = async (formData: AddResources) => {
 		await mutateAsync({
+			applicationId: id || "",
+			libsqlId: id || "",
+			mariadbId: id || "",
 			mongoId: id || "",
+			mysqlId: id || "",
 			postgresId: id || "",
 			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			applicationId: id || "",
 			cpuLimit: formData.cpuLimit || null,
 			cpuReservation: formData.cpuReservation || null,
 			memoryLimit: formData.memoryLimit || null,

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>
+			{canWrite && (
-				<Button isLoading={isPending}>Modify</Button>
+				<DialogTrigger asChild>
-			</DialogTrigger>
+					<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/add-volumes.tsx

@@ -34,13 +34,13 @@ interface Props {
 	serviceId: string;
 	serviceType:
 		| "application"
-		| "postgres"
+		| "compose"
-		| "redis"
+		| "libsql"
-		| "mongo"
-		| "redis"
-		| "mysql"
 		| "mariadb"
-		| "compose";
+		| "mongo"
+		| "mysql"
+		| "postgres"
+		| "redis";
 	refetch: () => void;
 	children?: React.ReactNode;
 }

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

@@ -21,24 +21,33 @@ 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 = {
+		application: () =>
+			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
+		compose: () =>
+			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
+		mariadb: () =>
+			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 		postgres: () =>
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
 		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-		mariadb: () =>
-			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
-		application: () =>
-			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
-		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-		compose: () =>
-			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
 		: api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id });
 	const { mutateAsync: deleteVolume, isPending: isRemoving } =
 		api.mounts.remove.useMutation();
+
 	return (
 		<Card className="bg-background">
 			<CardHeader className="flex flex-row justify-between flex-wrap gap-4">
@@ -50,7 +59,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 +72,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}>
+						{canCreate && (
-							Add Volume
+							<AddVolumes serviceId={id} refetch={refetch} serviceType={type}>
-						</AddVolumes>
+								Add Volume
+							</AddVolumes>
+						)}
 					</div>
 				) : (
 					<div className="flex flex-col pt-2 gap-4">
@@ -130,38 +141,42 @@ export const ShowVolumes = ({ id, type }: Props) => {
 											</div>
 										</div>
 										<div className="flex flex-row gap-1">
-											<UpdateVolume
+											{canCreate && (
-												mountId={mount.mountId}
+												<UpdateVolume
-												type={mount.type}
+													mountId={mount.mountId}
-												refetch={refetch}
+													type={mount.type}
-												serviceType={type}
+													refetch={refetch}
-											/>
+													serviceType={type}
-											<DialogAction
+												/>
-												title="Delete Volume"
+											)}
-												description="Are you sure you want to delete this volume?"
+											{canDelete && (
-												type="destructive"
+												<DialogAction
-												onClick={async () => {
+													title="Delete Volume"
-													await deleteVolume({
+													description="Are you sure you want to delete this volume?"
-														mountId: mount.mountId,
+													type="destructive"
-													})
+													onClick={async () => {
-														.then(() => {
+														await deleteVolume({
-															refetch();
+															mountId: mount.mountId,
-															toast.success("Volume deleted successfully");
 														})
-														.catch(() => {
+															.then(() => {
-															toast.error("Error deleting volume");
+																refetch();
-														});
+																toast.success("Volume deleted successfully");
-												}}
+															})
-											>
+															.catch(() => {
-												<Button
+																toast.error("Error deleting volume");
-													variant="ghost"
+															});
-													size="icon"
+													}}
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
 												>
-													<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+													<Button
-												</Button>
+														variant="ghost"
-											</DialogAction>
+														size="icon"
+														className="group hover:bg-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/advanced/volumes/update-volume.tsx

@@ -67,13 +67,13 @@ interface Props {
 	refetch: () => void;
 	serviceType:
 		| "application"
-		| "postgres"
+		| "compose"
-		| "redis"
+		| "libsql"
-		| "mongo"
-		| "redis"
-		| "mysql"
 		| "mariadb"
-		| "compose";
+		| "mongo"
+		| "mysql"
+		| "postgres"
+		| "redis";
 }
 
 export const UpdateVolume = ({
@@ -253,7 +253,7 @@ export const UpdateVolume = ({
 										control={form.control}
 										name="content"
 										render={({ field }) => (
-											<FormItem className="max-w-full max-w-[45rem]">
+											<FormItem className="w-full max-w-[45rem]">
 												<FormLabel>Content</FormLabel>
 												<FormControl>
 													<FormControl>

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">
+								<Badge
-									{`${url}/api/deploy${
+									role="button"
-										type === "compose" ? "/compose" : ""
+									tabIndex={0}
-									}/${refreshToken}`}
+									aria-label="Copy webhook URL to clipboard"
-								</span>
+									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">
+							{canCreateDomain && (
-								<AddDomain id={id} type={type}>
+								<div className="flex flex-row gap-4 flex-wrap">
-									<Button>
+									<AddDomain id={id} type={type}>
-										<GlobeIcon className="size-4" /> Add Domain
+										<Button>
-									</Button>
+											<GlobeIcon className="size-4" /> Add Domain
-								</AddDomain>
+										</Button>
-							</div>
+									</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
+														{canCreateDomain && (
-															id={id}
+															<AddDomain
-															type={type}
+																id={id}
-															domainId={item.domainId}
+																type={type}
-														>
+																domainId={item.domainId}
-															<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
-															</Button>
+																	variant="ghost"
-														</AddDomain>
+																	size="icon"
-														<DialogAction
+																	className="group hover:bg-blue-500/10"
-															title="Delete Domain"
+																>
-															description="Are you sure you want to delete this domain?"
+																	<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
-															type="destructive"
+																</Button>
-															onClick={async () => {
+															</AddDomain>
-																await deleteDomain({
+														)}
-																	domainId: item.domainId,
+														{canDeleteDomain && (
-																})
+															<DialogAction
-																	.then((_data) => {
+																title="Delete Domain"
-																		refetch();
+																description="Are you sure you want to delete this domain?"
-																		toast.success(
+																type="destructive"
-																			"Domain deleted successfully",
+																onClick={async () => {
-																		);
+																	await deleteDomain({
+																		domainId: item.domainId,
 																	})
-																	.catch(() => {
+																		.then((_data) => {
-																		toast.error("Error deleting domain");
+																			refetch();
-																	});
+																			toast.success(
-															}}
+																				"Domain deleted successfully",
-														>
+																			);
-															<Button
+																		})
-																variant="ghost"
+																		.catch(() => {
-																size="icon"
+																			toast.error("Error deleting domain");
-																className="group hover:bg-red-500/10"
+																		});
-																isLoading={isRemoving}
+																}}
 															>
-																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																<Button
-															</Button>
+																	variant="ghost"
-														</DialogAction>
+																	size="icon"
+																	className="group hover:bg-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,16 +36,19 @@ interface Props {
 }
 
 export const ShowEnvironment = ({ id, type }: Props) => {
+	const { data: permissions } = api.user.getPermissions.useQuery();
+	const canWrite = permissions?.envVars.write ?? false;
 	const queryMap = {
-		postgres: () =>
+		compose: () =>
-			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
-		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
-		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 		mariadb: () =>
 			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
-		compose: () =>
+		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
-			api.compose.one.useQuery({ composeId: id }, { enabled: !!id }),
+		postgres: () =>
+			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
 	};
 	const { data, refetch } = queryMap[type]
 		? queryMap[type]()
@@ -53,12 +56,13 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 	const [isEnvVisible, setIsEnvVisible] = useState(true);
 
 	const mutationMap = {
-		postgres: () => api.postgres.update.useMutation(),
+		compose: () => api.compose.update.useMutation(),
-		redis: () => api.redis.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
-		mysql: () => api.mysql.update.useMutation(),
 		mariadb: () => api.mariadb.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
-		compose: () => api.compose.update.useMutation(),
+		mysql: () => api.mysql.update.useMutation(),
+		postgres: () => api.postgres.update.useMutation(),
+		redis: () => api.redis.update.useMutation(),
 	};
 	const { mutateAsync, isPending } = mutationMap[type]
 		? mutationMap[type]()
@@ -85,12 +89,13 @@ export const ShowEnvironment = ({ id, type }: Props) => {
 
 	const onSubmit = async (formData: EnvironmentSchema) => {
 		mutateAsync({
+			composeId: id || "",
+			libsqlId: id || "",
+			mariadbId: id || "",
 			mongoId: id || "",
+			mysqlId: id || "",
 			postgresId: id || "",
 			redisId: id || "",
-			mysqlId: id || "",
-			mariadbId: id || "",
-			composeId: id || "",
 			env: formData.environment,
 		})
 			.then(async () => {
@@ -185,25 +190,27 @@ PORT=3000
 								)}
 							/>
 
-							<div className="flex flex-row justify-end gap-2">
+							{canWrite && (
-								{hasChanges && (
+								<div className="flex flex-row justify-end gap-2">
+									{hasChanges && (
+										<Button
+											type="button"
+											variant="outline"
+											onClick={handleCancel}
+										>
+											Cancel
+										</Button>
+									)}
 									<Button
-										type="button"
+										isLoading={isPending}
-										variant="outline"
+										className="w-fit"
-										onClick={handleCancel}
+										type="submit"
+										disabled={!hasChanges}
 									>
-										Cancel
+										Save
 									</Button>
-								)}
+								</div>
-								<Button
+							)}
-									isLoading={isPending}
-									className="w-fit"
-									type="submit"
-									disabled={!hasChanges}
-								>
-									Save
-								</Button>
-							</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">
+					{canWrite && (
-						{hasChanges && (
+						<div className="flex flex-row justify-end gap-2">
-							<Button type="button" variant="outline" onClick={handleCancel}>
+							{hasChanges && (
-								Cancel
+								<Button type="button" variant="outline" onClick={handleCancel}>
+									Cancel
+								</Button>
+							)}
+							<Button
+								isLoading={isPending}
+								className="w-fit"
+								type="submit"
+								disabled={!hasChanges}
+							>
+								Save
 							</Button>
-						)}
+						</div>
-						<Button
+					)}
-							isLoading={isPending}
-							className="w-fit"
-							type="submit"
-							disabled={!hasChanges}
-						>
-							Save
-						</Button>
-					</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>
+												<TooltipTrigger asChild>
-													<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+													<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-														?
-													</div>
 												</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>
+											<TooltipTrigger asChild>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-													?
-												</div>
 											</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
+						{canDeploy && (
-							title="Deploy Application"
+							<DialogAction
-							description="Are you sure you want to deploy this application?"
+								title="Deploy Application"
-							type="default"
+								description="Are you sure you want to deploy this application?"
-							onClick={async () => {
+								type="default"
-								await deploy({
+								onClick={async () => {
-									applicationId: applicationId,
+									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`,
-										);
 									})
-									.catch(() => {
+										.then(() => {
-										toast.error("Error deploying application");
+											toast.success("Application deployed successfully");
-									});
+											refetch();
-							}}
+											router.push(
-						>
+												`/dashboard/project/${data?.environment.projectId}/environment/${data?.environmentId}/services/application/${applicationId}?tab=deployments`,
-							<Button
+											);
-								variant="default"
+										})
-								isLoading={data?.applicationStatus === "running"}
+										.catch(() => {
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
+											toast.error("Error deploying application");
+										});
+								}}
 							>
-								<Tooltip>
+								<Button
-									<TooltipTrigger asChild>
+									variant="default"
-										<div className="flex items-center">
+									isLoading={data?.applicationStatus === "running"}
-											<Rocket className="size-4 mr-1" />
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-											Deploy
+								>
-										</div>
+									<Tooltip>
-									</TooltipTrigger>
+										<TooltipTrigger asChild>
-									<TooltipPrimitive.Portal>
+											<div className="flex items-center">
-										<TooltipContent sideOffset={5} className="z-[60]">
+												<Rocket className="size-4 mr-1" />
-											<p>
+												Deploy
-												Downloads the source code and performs a complete build
+											</div>
-											</p>
+										</TooltipTrigger>
-										</TooltipContent>
+										<TooltipPrimitive.Portal>
-									</TooltipPrimitive.Portal>
+											<TooltipContent sideOffset={5} className="z-[60]">
-								</Tooltip>
+												<p>
-							</Button>
+													Downloads the source code and performs a complete
-						</DialogAction>
+													build
-						<DialogAction
+												</p>
-							title="Reload Application"
+											</TooltipContent>
-							description="Are you sure you want to reload this application?"
+										</TooltipPrimitive.Portal>
-							type="default"
+									</Tooltip>
-							onClick={async () => {
+								</Button>
-								await reload({
+							</DialogAction>
-									applicationId: applicationId,
+						)}
-									appName: data?.appName || "",
+						{canDeploy && (
-								})
+							<DialogAction
-									.then(() => {
+								title="Reload Application"
-										toast.success("Application reloaded successfully");
+								description="Are you sure you want to reload this application?"
-										refetch();
+								type="default"
+								onClick={async () => {
+									await reload({
+										applicationId: applicationId,
+										appName: data?.appName || "",
 									})
-									.catch(() => {
+										.then(() => {
-										toast.error("Error reloading application");
+											toast.success("Application reloaded successfully");
-									});
+											refetch();
-							}}
+										})
-						>
+										.catch(() => {
-							<Button
+											toast.error("Error reloading application");
-								variant="secondary"
+										});
-								isLoading={isReloading}
+								}}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 							>
-								<Tooltip>
+								<Button
-									<TooltipTrigger asChild>
+									variant="secondary"
-										<div className="flex items-center">
+									isLoading={isReloading}
-											<RefreshCcw className="size-4 mr-1" />
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-											Reload
+								>
-										</div>
+									<Tooltip>
-									</TooltipTrigger>
+										<TooltipTrigger asChild>
-									<TooltipPrimitive.Portal>
+											<div className="flex items-center">
-										<TooltipContent sideOffset={5} className="z-[60]">
+												<RefreshCcw className="size-4 mr-1" />
-											<p>Reload the application without rebuilding it</p>
+												Reload
-										</TooltipContent>
+											</div>
-									</TooltipPrimitive.Portal>
+										</TooltipTrigger>
-								</Tooltip>
+										<TooltipPrimitive.Portal>
-							</Button>
+											<TooltipContent sideOffset={5} className="z-[60]">
-						</DialogAction>
+												<p>Reload the application without rebuilding it</p>
-						<DialogAction
+											</TooltipContent>
-							title="Rebuild Application"
+										</TooltipPrimitive.Portal>
-							description="Are you sure you want to rebuild this application?"
+									</Tooltip>
-							type="default"
+								</Button>
-							onClick={async () => {
+							</DialogAction>
-								await redeploy({
+						)}
-									applicationId: applicationId,
+						{canDeploy && (
-								})
+							<DialogAction
-									.then(() => {
+								title="Rebuild Application"
-										toast.success("Application rebuilt successfully");
+								description="Are you sure you want to rebuild this application?"
-										refetch();
+								type="default"
+								onClick={async () => {
+									await redeploy({
+										applicationId: applicationId,
 									})
-									.catch(() => {
+										.then(() => {
-										toast.error("Error rebuilding application");
+											toast.success("Application rebuilt successfully");
-									});
+											refetch();
-							}}
+										})
-						>
+										.catch(() => {
-							<Button
+											toast.error("Error rebuilding application");
-								variant="secondary"
+										});
-								isLoading={data?.applicationStatus === "running"}
+								}}
-								className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
 							>
-								<Tooltip>
+								<Button
-									<TooltipTrigger asChild>
+									variant="secondary"
-										<div className="flex items-center">
+									isLoading={data?.applicationStatus === "running"}
-											<Hammer className="size-4 mr-1" />
+									className="flex items-center gap-1.5 group focus-visible:ring-2 focus-visible:ring-offset-2"
-											Rebuild
+								>
-										</div>
+									<Tooltip>
-									</TooltipTrigger>
+										<TooltipTrigger asChild>
-									<TooltipPrimitive.Portal>
+											<div className="flex items-center">
-										<TooltipContent sideOffset={5} className="z-[60]">
+												<Hammer className="size-4 mr-1" />
-											<p>
+												Rebuild
-												Only rebuilds the application without downloading new
+											</div>
-												code
+										</TooltipTrigger>
-											</p>
+										<TooltipPrimitive.Portal>
-										</TooltipContent>
+											<TooltipContent sideOffset={5} className="z-[60]">
-									</TooltipPrimitive.Portal>
+												<p>
-								</Tooltip>
+													Only rebuilds the application without downloading new
-							</Button>
+													code
-						</DialogAction>
+												</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">
+					{canUpdateService && (
-						<span className="text-sm font-medium">Autodeploy</span>
+						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<Switch
+							<span className="text-sm font-medium">Autodeploy</span>
-							aria-label="Toggle autodeploy"
+							<Switch
-							checked={data?.autoDeploy || false}
+								aria-label="Toggle autodeploy"
-							onCheckedChange={async (enabled) => {
+								checked={data?.autoDeploy || false}
-								await update({
+								onCheckedChange={async (enabled) => {
-									applicationId,
+									await update({
-									autoDeploy: enabled,
+										applicationId,
-								})
+										autoDeploy: enabled,
-									.then(async () => {
-										toast.success("Auto Deploy Updated");
-										await refetch();
 									})
-									.catch(() => {
+										.then(async () => {
-										toast.error("Error updating Auto Deploy");
+											toast.success("Auto Deploy Updated");
-									});
+											await refetch();
-							}}
+										})
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+										.catch(() => {
-						/>
+											toast.error("Error updating Auto Deploy");
-					</div>
+										});
+								}}
+								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">
+					{canUpdateService && (
-						<span className="text-sm font-medium">Clean Cache</span>
+						<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-						<Switch
+							<span className="text-sm font-medium">Clean Cache</span>
-							aria-label="Toggle clean cache"
+							<Switch
-							checked={data?.cleanCache || false}
+								aria-label="Toggle clean cache"
-							onCheckedChange={async (enabled) => {
+								checked={data?.cleanCache || false}
-								await update({
+								onCheckedChange={async (enabled) => {
-									applicationId,
+									await update({
-									cleanCache: enabled,
+										applicationId,
-								})
+										cleanCache: enabled,
-									.then(async () => {
-										toast.success("Clean Cache Updated");
-										await refetch();
 									})
-									.catch(() => {
+										.then(async () => {
-										toast.error("Error updating Clean Cache");
+											toast.success("Clean Cache Updated");
-									});
+											await refetch();
-							}}
+										})
-							className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+										.catch(() => {
-						/>
+											toast.error("Error updating Clean Cache");
-					</div>
+										});
+								}}
+								className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+							/>
+						</div>
+					)}
 				</CardContent>
 			</Card>
 			<ShowProviderForm applicationId={applicationId} />

apps/dokploy/components/dashboard/application/volume-backups/handle-volume-backups.tsx

@@ -71,6 +71,7 @@ const formSchema = z
 			"mongo",
 			"mysql",
 			"redis",
+			"libsql",
 		]),
 		serviceName: z.string(),
 		destinationId: z.string().min(1, "Destination required"),

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 = {
@@ -55,6 +57,7 @@ export const DeleteService = ({ id, type }: Props) => {
 		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 		mariadb: () =>
 			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 		application: () =>
 			api.application.one.useQuery({ applicationId: id }, { enabled: !!id }),
 		mongo: () => api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
@@ -70,6 +73,7 @@ export const DeleteService = ({ id, type }: Props) => {
 		redis: () => api.redis.remove.useMutation(),
 		mysql: () => api.mysql.remove.useMutation(),
 		mariadb: () => api.mariadb.remove.useMutation(),
+		libsql: () => api.libsql.remove.useMutation(),
 		application: () => api.application.delete.useMutation(),
 		mongo: () => api.mongo.remove.useMutation(),
 		compose: () => api.compose.delete.useMutation(),
@@ -96,6 +100,7 @@ export const DeleteService = ({ id, type }: Props) => {
 				redisId: id || "",
 				mysqlId: id || "",
 				mariadbId: id || "",
+				libsqlId: id || "",
 				applicationId: id || "",
 				composeId: id || "",
 				deleteVolumes,
@@ -123,6 +128,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
+				{canDeploy && (
-					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" ? (
 					<DialogAction
-						title="Start Compose"
+						title="Deploy Compose"
-						description="Are you sure you want to start this 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"
+							variant="default"
-							isLoading={isStarting}
+							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" />
+										<Rocket className="size-4 mr-1" />
-										Start
+										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"
+						title="Reload Compose"
-						description="Are you sure you want to stop this 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"
+							variant="secondary"
-							isLoading={isStopping}
+							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" />
+										<RefreshCcw className="size-4 mr-1" />
-										Stop
+										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">
+			{canUpdateService && (
-				<span className="text-sm font-medium">Autodeploy</span>
+				<div className="flex flex-row items-center gap-2 rounded-md px-4 py-2 border">
-				<Switch
+					<span className="text-sm font-medium">Autodeploy</span>
-					aria-label="Toggle autodeploy"
+					<Switch
-					checked={data?.autoDeploy || false}
+						aria-label="Toggle autodeploy"
-					onCheckedChange={async (enabled) => {
+						checked={data?.autoDeploy || false}
-						await update({
+						onCheckedChange={async (enabled) => {
-							composeId,
+							await update({
-							autoDeploy: enabled,
+								composeId,
-						})
+								autoDeploy: enabled,
-							.then(async () => {
-								toast.success("Auto Deploy Updated");
-								await refetch();
 							})
-							.catch(() => {
+								.then(async () => {
-								toast.error("Error updating Auto Deploy");
+									toast.success("Auto Deploy Updated");
-							});
+									await refetch();
-					}}
+								})
-					className="flex flex-row gap-2 items-center data-[state=checked]:bg-primary"
+								.catch(() => {
-				/>
+									toast.error("Error updating Auto Deploy");
-			</div>
+								});
+						}}
+						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
+					{canUpdate && (
-						type="submit"
+						<Button
-						form="hook-form-save-compose-file"
+							type="submit"
-						isLoading={isPending}
+							form="hook-form-save-compose-file"
-						className="lg:w-fit w-full"
+							isLoading={isPending}
-					>
+							className="lg:w-fit w-full"
-						Save
+						>
-					</Button>
+							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>
+											<TooltipTrigger asChild>
-												<div className="size-4 rounded-full bg-muted flex items-center justify-center text-[10px] font-bold">
+												<HelpCircle className="size-4 text-muted-foreground hover:text-foreground transition-colors cursor-pointer" />
-													?
-												</div>
 											</TooltipTrigger>
 											<TooltipContent className="max-w-[300px]">
 												<p>

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

@@ -65,7 +65,13 @@ import { ScheduleFormField } from "../../application/schedules/handle-schedules"
 
 type CacheType = "cache" | "fetch";
 
-type DatabaseType = "postgres" | "mariadb" | "mysql" | "mongo" | "web-server";
+type DatabaseType =
+	| "postgres"
+	| "mariadb"
+	| "mysql"
+	| "mongo"
+	| "web-server"
+	| "libsql";
 
 const Schema = z
 	.object({
@@ -77,7 +83,7 @@ const Schema = z
 		keepLatestCount: z.coerce.number().optional(),
 		serviceName: z.string().nullable(),
 		databaseType: z
-			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
+			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server", "libsql"])
 			.optional(),
 		backupType: z.enum(["database", "compose"]),
 		metadata: z
@@ -209,7 +215,12 @@ export const HandleBackup = ({
 
 	const form = useForm({
 		defaultValues: {
-			database: databaseType === "web-server" ? "dokploy" : "",
+			database:
+				databaseType === "web-server"
+					? "dokploy"
+					: databaseType === "libsql"
+						? "iku.db"
+						: "",
 			destinationId: "",
 			enabled: true,
 			prefix: "/",
@@ -246,7 +257,9 @@ export const HandleBackup = ({
 				? backup?.database
 				: databaseType === "web-server"
 					? "dokploy"
-					: "",
+					: databaseType === "libsql"
+						? "iku.db"
+						: "",
 			destinationId: backup?.destinationId ?? "",
 			enabled: backup?.enabled ?? true,
 			prefix: backup?.prefix ?? "/",
@@ -281,11 +294,15 @@ export const HandleBackup = ({
 								? {
 										mongoId: id,
 									}
-								: databaseType === "web-server"
+								: databaseType === "libsql"
 									? {
-											userId: id,
+											libsqlId: id,
 										}
-									: undefined;
+									: databaseType === "web-server"
+										? {
+												userId: id,
+											}
+										: undefined;
 
 		await createBackup({
 			destinationId: data.destinationId,
@@ -568,7 +585,10 @@ export const HandleBackup = ({
 											<FormLabel>Database</FormLabel>
 											<FormControl>
 												<Input
-													disabled={databaseType === "web-server"}
+													disabled={
+														databaseType === "web-server" ||
+														databaseType === "libsql"
+													}
 													placeholder={"dokploy"}
 													{...field}
 												/>

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

@@ -88,7 +88,7 @@ const RestoreBackupSchema = z
 			message: "Database name is required",
 		}),
 		databaseType: z
-			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server"])
+			.enum(["postgres", "mariadb", "mysql", "mongo", "web-server", "libsql"])
 			.optional(),
 		backupType: z.enum(["database", "compose"]).default("database"),
 		metadata: z
@@ -211,7 +211,12 @@ export const RestoreBackup = ({
 		defaultValues: {
 			destinationId: "",
 			backupFile: "",
-			databaseName: databaseType === "web-server" ? "dokploy" : "",
+			databaseName:
+				databaseType === "web-server"
+					? "dokploy"
+					: databaseType === "libsql"
+						? "iku.db"
+						: "",
 			databaseType:
 				backupType === "compose" ? ("postgres" as DatabaseType) : databaseType,
 			backupType: backupType,
@@ -523,7 +528,10 @@ export const RestoreBackup = ({
 										<Input
 											placeholder="Enter database name"
 											{...field}
-											disabled={databaseType === "web-server"}
+											disabled={
+												databaseType === "web-server" ||
+												databaseType === "libsql"
+											}
 										/>
 									</FormControl>
 									<FormMessage />

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

@@ -53,14 +53,16 @@ export const ShowBackups = ({
 	const queryMap =
 		backupType === "database"
 			? {
-					postgres: () =>
-						api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
-					mysql: () =>
-						api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
 					mariadb: () =>
 						api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
 					mongo: () =>
 						api.mongo.one.useQuery({ mongoId: id }, { enabled: !!id }),
+					mysql: () =>
+						api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+					postgres: () =>
+						api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
+					libsql: () =>
+						api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 					"web-server": () => api.user.getBackups.useQuery(),
 				}
 			: {
@@ -77,10 +79,11 @@ export const ShowBackups = ({
 	const mutationMap =
 		backupType === "database"
 			? {
-					postgres: api.backup.manualBackupPostgres.useMutation(),
-					mysql: api.backup.manualBackupMySql.useMutation(),
 					mariadb: api.backup.manualBackupMariadb.useMutation(),
 					mongo: api.backup.manualBackupMongo.useMutation(),
+					mysql: api.backup.manualBackupMySql.useMutation(),
+					postgres: api.backup.manualBackupPostgres.useMutation(),
+					libsql: api.backup.manualBackupLibsql.useMutation(),
 					"web-server": api.backup.manualBackupWebServer.useMutation(),
 				}
 			: {

apps/dokploy/components/dashboard/docker/remove/remove-container.tsx

@@ -0,0 +1,66 @@
+import { toast } from "sonner";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+
+interface Props {
+	containerId: string;
+	serverId?: string;
+}
+
+export const RemoveContainerDialog = ({ containerId, serverId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, isPending } = api.docker.removeContainer.useMutation();
+
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Remove Container
+				</DropdownMenuItem>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This will permanently remove the container{" "}
+						<span className="font-semibold">{containerId}</span>. If the
+						container is running, it will be forcefully stopped and removed.
+						This action cannot be undone.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						disabled={isPending}
+						onClick={async () => {
+							await mutateAsync({ containerId, serverId })
+								.then(async () => {
+									toast.success("Container removed successfully");
+									await utils.docker.getContainers.invalidate();
+								})
+								.catch((err) => {
+									toast.error(err.message);
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

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

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ShowContainerConfig } from "../config/show-container-config";
 import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
+import { RemoveContainerDialog } from "../remove/remove-container";
 import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
 import type { Container } from "./show-containers";
 
@@ -127,6 +128,10 @@ export const columns: ColumnDef<Container>[] = [
 						>
 							Terminal
 						</DockerTerminalModal>
+						<RemoveContainerDialog
+							containerId={container.containerId}
+							serverId={container.serverId ?? undefined}
+						/>
 					</DropdownMenuContent>
 				</DropdownMenu>
 			);

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/libsql/general/show-external-libsql-credentials.tsx

@@ -0,0 +1,251 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { api } from "@/utils/api";
+
+const DockerProviderSchema = z.object({
+	externalPort: z.preprocess((a) => {
+		if (a === null || a === undefined || a === "") return null;
+		const parsed = Number.parseInt(String(a), 10);
+		return Number.isNaN(parsed) ? null : parsed;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
+	externalGRPCPort: z.preprocess((a) => {
+		if (a === null || a === undefined || a === "") return null;
+		const parsed = Number.parseInt(String(a), 10);
+		return Number.isNaN(parsed) ? null : parsed;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
+	externalAdminPort: z.preprocess((a) => {
+		if (a === null || a === undefined || a === "") return null;
+		const parsed = Number.parseInt(String(a), 10);
+		return Number.isNaN(parsed) ? null : parsed;
+	}, z
+		.number()
+		.gte(0, "Range must be 0 - 65535")
+		.lte(65535, "Range must be 0 - 65535")
+		.nullable()),
+});
+
+type DockerProvider = z.infer<typeof DockerProviderSchema>;
+
+interface Props {
+	libsqlId: string;
+}
+export const ShowExternalLibsqlCredentials = ({ libsqlId }: Props) => {
+	const { data: ip } = api.settings.getIp.useQuery();
+	const { data, refetch } = api.libsql.one.useQuery({ libsqlId });
+	const { mutateAsync, isPending } = api.libsql.saveExternalPorts.useMutation();
+	const [connectionUrl, setConnectionUrl] = useState("");
+	const [connectionGRPCUrl, setGRPCConnectionUrl] = useState("");
+	const getIp = data?.server?.ipAddress || ip;
+
+	const form = useForm({
+		defaultValues: {},
+		resolver: zodResolver(DockerProviderSchema),
+	});
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				externalPort: data.externalPort,
+				externalGRPCPort: data.externalGRPCPort,
+				externalAdminPort: data.externalAdminPort,
+			});
+		}
+	}, [form.reset, data, form]);
+
+	const onSubmit = async (values: DockerProvider) => {
+		await mutateAsync({
+			externalPort: values.externalPort,
+			externalGRPCPort: values.externalGRPCPort,
+			externalAdminPort: values.externalAdminPort,
+			libsqlId,
+		})
+			.then(async () => {
+				toast.success("External port/ports updated");
+				await refetch();
+			})
+			.catch((error: Error) => {
+				toast.error(error?.message || "Error saving the external port/ports");
+			});
+	};
+
+	useEffect(() => {
+		const port = form.watch("externalPort") || data?.externalPort;
+		setConnectionUrl(
+			`http://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${port}`,
+		);
+
+		if (data?.sqldNode !== "replica") {
+			const grpcPort = form.watch("externalGRPCPort") || data?.externalGRPCPort;
+			setGRPCConnectionUrl(
+				`http://${data?.databaseUser}:${data?.databasePassword}@${getIp}:${grpcPort}`,
+			);
+		}
+	}, [
+		data?.externalGRPCPort,
+		data?.databasePassword,
+		form,
+		data?.databaseUser,
+		getIp,
+	]);
+
+	return (
+		<div className="flex w-full flex-col gap-5">
+			<Card className="bg-background">
+				<CardHeader>
+					<CardTitle className="text-xl">External Credentials</CardTitle>
+					<CardDescription>
+						In order to make the database reachable through the internet, you
+						must set a port and ensure that the port is not being used by
+						another application or database
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="flex w-full flex-col gap-4">
+					{!getIp && (
+						<AlertBlock type="warning">
+							You need to set an IP address in your{" "}
+							<Link href="/dashboard/settings/server" className="text-primary">
+								{data?.serverId
+									? "Remote Servers -> Server -> Edit Server -> Update IP Address"
+									: "Web Server -> Server -> Update Server IP"}
+							</Link>{" "}
+							to fix the database url connection.
+						</AlertBlock>
+					)}
+					<Form {...form}>
+						<form
+							onSubmit={form.handleSubmit(onSubmit)}
+							className="flex flex-col gap-4"
+						>
+							<div className="grid grid-cols-2 gap-4">
+								<div className="col-span-2 space-y-4">
+									<FormField
+										control={form.control}
+										name="externalPort"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>External Port (Internet)</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="8080"
+														{...field}
+														value={field.value as string}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+							</div>
+							{!!data?.externalPort && (
+								<div className="grid w-full gap-8">
+									<div className="flex flex-col gap-3">
+										<Label>External Host</Label>
+										<ToggleVisibilityInput value={connectionUrl} disabled />
+									</div>
+								</div>
+							)}
+
+							<div className="grid grid-cols-2 gap-4">
+								<div className="col-span-2 space-y-4">
+									<FormField
+										control={form.control}
+										name="externalAdminPort"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>External Admin Port (Internet)</FormLabel>
+												<FormControl>
+													<Input
+														placeholder="5000"
+														{...field}
+														value={field.value as string}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+							</div>
+
+							{data?.sqldNode !== "replica" && (
+								<>
+									<div className="grid grid-cols-2 gap-4">
+										<div className="col-span-2 space-y-4">
+											<FormField
+												control={form.control}
+												name="externalGRPCPort"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>External GRPC Port (Internet)</FormLabel>
+														<FormControl>
+															<Input
+																placeholder="5001"
+																{...field}
+																value={field.value as string}
+															/>
+														</FormControl>
+														<FormMessage />
+													</FormItem>
+												)}
+											/>
+										</div>
+									</div>
+									{!!data?.externalGRPCPort && (
+										<div className="grid w-full gap-8">
+											<div className="flex flex-col gap-3">
+												<Label>External GRPC Host</Label>
+												<ToggleVisibilityInput
+													value={connectionGRPCUrl}
+													disabled
+												/>
+											</div>
+										</div>
+									)}
+								</>
+							)}
+
+							<div className="flex justify-end">
+								<Button type="submit" isLoading={isPending}>
+									Save
+								</Button>
+							</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

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

@@ -0,0 +1,268 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Ban, CheckCircle2, RefreshCcw, Rocket, Terminal } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { DrawerLogs } from "@/components/shared/drawer-logs";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { api } from "@/utils/api";
+import { type LogLine, parseLogs } from "../../docker/logs/utils";
+import { DockerTerminalModal } from "../../settings/web-server/docker-terminal-modal";
+
+interface Props {
+	libsqlId: string;
+}
+
+export const ShowGeneralLibsql = ({ libsqlId }: Props) => {
+	const { data, refetch } = api.libsql.one.useQuery(
+		{
+			libsqlId,
+		},
+		{ enabled: !!libsqlId },
+	);
+
+	const { mutateAsync: reload, isPending: isReloading } =
+		api.libsql.reload.useMutation();
+
+	const { mutateAsync: start, isPending: isStarting } =
+		api.libsql.start.useMutation();
+
+	const { mutateAsync: stop, isPending: isStopping } =
+		api.libsql.stop.useMutation();
+
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const [filteredLogs, setFilteredLogs] = useState<LogLine[]>([]);
+	const [isDeploying, setIsDeploying] = useState(false);
+	api.libsql.deployWithLogs.useSubscription(
+		{
+			libsqlId: libsqlId,
+		},
+		{
+			enabled: isDeploying,
+			onData(log) {
+				if (!isDrawerOpen) {
+					setIsDrawerOpen(true);
+				}
+
+				if (log === "Deployment completed successfully!") {
+					setIsDeploying(false);
+				}
+				const parsedLogs = parseLogs(log);
+				setFilteredLogs((prev) => [...prev, ...parsedLogs]);
+			},
+			onError(error) {
+				console.error("Deployment logs error:", error);
+				setIsDeploying(false);
+			},
+		},
+	);
+
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Deploy Settings</CardTitle>
+					</CardHeader>
+					<CardContent className="flex flex-row gap-4 flex-wrap">
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Deploy Libsql"
+								description="Are you sure you want to deploy this Libsql?"
+								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 Libsql database</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						</TooltipProvider>
+						<TooltipProvider delayDuration={0}>
+							<DialogAction
+								title="Reload Libsql"
+								description="Are you sure you want to reload this libsql?"
+								type="default"
+								onClick={async () => {
+									await reload({
+										libsqlId: libsqlId,
+										appName: data?.appName || "",
+									})
+										.then(() => {
+											toast.success("Libsql reloaded successfully");
+											refetch();
+										})
+										.catch(() => {
+											toast.error("Error reloading Libsql");
+										});
+								}}
+							>
+								<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 Libsql service without rebuilding</p>
+											</TooltipContent>
+										</TooltipPrimitive.Portal>
+									</Tooltip>
+								</Button>
+							</DialogAction>
+						</TooltipProvider>
+						{data?.applicationStatus === "idle" ? (
+							<TooltipProvider delayDuration={0}>
+								<DialogAction
+									title="Start Libsql"
+									description="Are you sure you want to start this Libsql?"
+									type="default"
+									onClick={async () => {
+										await start({
+											libsqlId: libsqlId,
+										})
+											.then(() => {
+												toast.success("Libsql started successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error starting Libsql");
+											});
+									}}
+								>
+									<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 Libsql database (requires a previous
+														successful setup)
+													</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							</TooltipProvider>
+						) : (
+							<TooltipProvider delayDuration={0}>
+								<DialogAction
+									title="Stop Libsql"
+									description="Are you sure you want to stop this Libsql?"
+									onClick={async () => {
+										await stop({
+											libsqlId: libsqlId,
+										})
+											.then(() => {
+												toast.success("Libsql stopped successfully");
+												refetch();
+											})
+											.catch(() => {
+												toast.error("Error stopping Libsql");
+											});
+									}}
+								>
+									<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 Libsql database</p>
+												</TooltipContent>
+											</TooltipPrimitive.Portal>
+										</Tooltip>
+									</Button>
+								</DialogAction>
+							</TooltipProvider>
+						)}
+						<DockerTerminalModal
+							appName={data?.appName || ""}
+							serverId={data?.serverId || ""}
+						>
+							<Button
+								variant="outline"
+								className="flex items-center gap-1.5 focus-visible:ring-2 focus-visible:ring-offset-2"
+							>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<div className="flex items-center">
+											<Terminal className="size-4 mr-1" />
+											Open Terminal
+										</div>
+									</TooltipTrigger>
+									<TooltipPrimitive.Portal>
+										<TooltipContent sideOffset={5} className="z-[60]">
+											<p>Open a terminal to the Libsql container</p>
+										</TooltipContent>
+									</TooltipPrimitive.Portal>
+								</Tooltip>
+							</Button>
+						</DockerTerminalModal>
+					</CardContent>
+				</Card>
+				<DrawerLogs
+					isOpen={isDrawerOpen}
+					onClose={() => {
+						setIsDrawerOpen(false);
+						setFilteredLogs([]);
+						setIsDeploying(false);
+						refetch();
+					}}
+					filteredLogs={filteredLogs}
+				/>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,121 @@
+import { SelectGroup } from "@radix-ui/react-select";
+import { ToggleVisibilityInput } from "@/components/shared/toggle-visibility-input";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { api } from "@/utils/api";
+
+interface Props {
+	libsqlId: string;
+}
+export const ShowInternalLibsqlCredentials = ({ libsqlId }: Props) => {
+	const { data } = api.libsql.one.useQuery({ libsqlId });
+	return (
+		<>
+			<div className="flex w-full flex-col gap-5 ">
+				<Card className="bg-background">
+					<CardHeader>
+						<CardTitle className="text-xl">Internal Credentials</CardTitle>
+					</CardHeader>
+					<CardContent className="flex w-full flex-row gap-4">
+						<div className="grid w-full md:grid-cols-2 gap-4 md:gap-8">
+							<div className="flex flex-col gap-2">
+								<Label>User</Label>
+								<Input disabled value={data?.databaseUser} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Sqld Node</Label>
+								<Select value={data?.sqldNode} disabled>
+									<SelectTrigger>
+										<SelectValue placeholder="Select Node type" />
+									</SelectTrigger>
+									<SelectContent>
+										{["primary", "replica"].map((node) => (
+											<SelectItem key={node} value={node}>
+												{node.charAt(0).toUpperCase() + node.slice(1)}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Password</Label>
+								<div className="flex flex-row gap-4">
+									<ToggleVisibilityInput
+										disabled
+										value={data?.databasePassword}
+									/>
+								</div>
+							</div>
+
+							<div className="flex flex-row gap-2">
+								<div className="w-full flex flex-col gap-2">
+									<Label>Internal Port (Container)</Label>
+									<Input disabled value="8080" />
+								</div>
+								<div className="w-full flex flex-col gap-2">
+									<Label>Internal GRPC Port (Container)</Label>
+									<Input disabled value="5001" />
+								</div>
+								<div className="w-full flex flex-col gap-2">
+									<Label>Internal Admin Port (Container)</Label>
+									<Input disabled value="5000" />
+								</div>
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Internal Host</Label>
+								<Input disabled value={data?.appName} />
+							</div>
+							<div className="flex flex-col gap-2">
+								<Label>Enable Namespaces</Label>
+								<Select
+									disabled
+									defaultValue={
+										data?.enableNamespaces
+											? String(data?.enableNamespaces)
+											: "false"
+									}
+								>
+									<SelectTrigger>
+										<SelectValue placeholder={"false"} />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											{["false", "true"].map((node) => (
+												<SelectItem key={node} value={node}>
+													{node.charAt(0).toUpperCase() + node.slice(1)}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+								</Select>
+							</div>
+
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<Label>Internal Connection URL </Label>
+								<ToggleVisibilityInput
+									disabled
+									value={`http://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:8080`}
+								/>
+							</div>
+							<div className="flex flex-col gap-2 md:col-span-2">
+								<Label>Internal Replication Connection URL </Label>
+								<ToggleVisibilityInput
+									disabled
+									value={`http://${data?.databaseUser}:${data?.databasePassword}@${data?.appName}:5001`}
+								/>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,163 @@
+import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
+import { PenBoxIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	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";
+
+const updateLibsqlSchema = z.object({
+	name: z.string().min(1, {
+		message: "Name is required",
+	}),
+	description: z.string().optional(),
+});
+
+type UpdateLibsql = z.infer<typeof updateLibsqlSchema>;
+
+interface Props {
+	libsqlId: string;
+}
+
+export const UpdateLibsql = ({ libsqlId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync, error, isError, isPending } =
+		api.libsql.update.useMutation();
+	const { data } = api.libsql.one.useQuery(
+		{
+			libsqlId,
+		},
+		{
+			enabled: !!libsqlId,
+		},
+	);
+	const form = useForm<UpdateLibsql>({
+		defaultValues: {
+			description: data?.description ?? "",
+			name: data?.name ?? "",
+		},
+		resolver: zodResolver(updateLibsqlSchema),
+	});
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				description: data.description ?? "",
+				name: data.name,
+			});
+		}
+	}, [data, form, form.reset]);
+
+	const onSubmit = async (formData: UpdateLibsql) => {
+		await mutateAsync({
+			name: formData.name,
+			libsqlId: libsqlId,
+			description: formData.description || "",
+		})
+			.then(() => {
+				toast.success("Libsql updated successfully");
+				utils.libsql.one.invalidate({
+					libsqlId: libsqlId,
+				});
+			})
+			.catch(() => {
+				toast.error("Error updating the Libsql");
+			})
+			.finally(() => {});
+	};
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<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>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>Modify Libsql</DialogTitle>
+					<DialogDescription>Update the Libsql data</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+
+				<div className="grid gap-4">
+					<div className="grid items-center gap-4">
+						<Form {...form}>
+							<form
+								onSubmit={form.handleSubmit(onSubmit)}
+								id="hook-form-update-libsql"
+								className="grid w-full gap-4 "
+							>
+								<FormField
+									control={form.control}
+									name="name"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Vandelay Industries" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<FormField
+									control={form.control}
+									name="description"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Description</FormLabel>
+											<FormControl>
+												<Textarea
+													placeholder="Description about your project..."
+													className="resize-none"
+													{...field}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								<DialogFooter>
+									<Button
+										isLoading={isPending}
+										form="hook-form-update-libsql"
+										type="submit"
+									>
+										Update
+									</Button>
+								</DialogFooter>
+							</form>
+						</Form>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

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}>
+						{canDeploy && (
-							<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" ? (
 							<TooltipProvider delayDuration={0}>
 								<DialogAction
-									title="Start Mariadb"
+									title="Deploy Mariadb"
-									description="Are you sure you want to start this mariadb?"
+									description="Are you sure you want to deploy this mariadb?"
 									type="default"
 									onClick={async () => {
-										await start({
+										setIsDeploying(true);
-											mariadbId: mariadbId,
+										await new Promise((resolve) => setTimeout(resolve, 1000));
-										})
+										refetch();
-											.then(() => {
-												toast.success("Mariadb started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Mariadb");
-											});
 									}}
 								>
 									<Button
-										variant="secondary"
+										variant="default"
-										isLoading={isStarting}
+										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" />
+													<Rocket className="size-4 mr-1" />
-													Start
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
+													<p>Downloads and sets up the MariaDB database</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>
@@ -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
+							{canDeploy && (
-								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" ? (
 								<DialogAction
-									title="Start Mongo"
+									title="Deploy Mongo"
-									description="Are you sure you want to start this mongo?"
+									description="Are you sure you want to deploy this mongo?"
 									type="default"
 									onClick={async () => {
-										await start({
+										setIsDeploying(true);
-											mongoId: mongoId,
+										await new Promise((resolve) => setTimeout(resolve, 1000));
-										})
+										refetch();
-											.then(() => {
-												toast.success("Mongo started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Mongo");
-											});
 									}}
 								>
 									<Button
-										variant="secondary"
+										variant="default"
-										isLoading={isStarting}
+										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" />
+													<Rocket className="size-4 mr-1" />
-													Start
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
+													<p>Downloads and sets up the MongoDB database</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>
 							)}
+							{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
+							{canDeploy && (
-								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" ? (
 								<DialogAction
-									title="Start MySQL"
+									title="Deploy MySQL"
-									description="Are you sure you want to start this mysql?"
+									description="Are you sure you want to deploy this mysql?"
 									type="default"
 									onClick={async () => {
-										await start({
+										setIsDeploying(true);
-											mysqlId: mysqlId,
+										await new Promise((resolve) => setTimeout(resolve, 1000));
-										})
+										refetch();
-											.then(() => {
-												toast.success("MySQL started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting MySQL");
-											});
 									}}
 								>
 									<Button
-										variant="secondary"
+										variant="default"
-										isLoading={isStarting}
+										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" />
+													<Rocket className="size-4 mr-1" />
-													Start
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
+													<p>Downloads and sets up the MySQL database</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>
 							)}
+							{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/advanced/show-custom-command.tsx

@@ -42,6 +42,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 			api.postgres.one.useQuery({ postgresId: id }, { enabled: !!id }),
 		redis: () => api.redis.one.useQuery({ redisId: id }, { enabled: !!id }),
 		mysql: () => api.mysql.one.useQuery({ mysqlId: id }, { enabled: !!id }),
+		libsql: () => api.libsql.one.useQuery({ libsqlId: id }, { enabled: !!id }),
 		mariadb: () =>
 			api.mariadb.one.useQuery({ mariadbId: id }, { enabled: !!id }),
 		application: () =>
@@ -56,6 +57,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 		postgres: () => api.postgres.update.useMutation(),
 		redis: () => api.redis.update.useMutation(),
 		mysql: () => api.mysql.update.useMutation(),
+		libsql: () => api.libsql.update.useMutation(),
 		mariadb: () => api.mariadb.update.useMutation(),
 		application: () => api.application.update.useMutation(),
 		mongo: () => api.mongo.update.useMutation(),
@@ -84,7 +86,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 			form.reset({
 				dockerImage: data.dockerImage,
 				command: data.command || "",
-				args: data.args?.map((arg) => ({ value: arg })) || [],
+				args: (data as any).args?.map((arg: string) => ({ value: arg })) || [],
 			});
 		}
 	}, [data, form]);
@@ -95,6 +97,7 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 			postgresId: id || "",
 			redisId: id || "",
 			mysqlId: id || "",
+			libsqlId: id || "",
 			mariadbId: id || "",
 			dockerImage: formData?.dockerImage,
 			command: formData?.command,
@@ -144,7 +147,14 @@ export const ShowCustomCommand = ({ id, type }: Props) => {
 										<FormItem>
 											<FormLabel>Command</FormLabel>
 											<FormControl>
-												<Input placeholder="/bin/sh" {...field} />
+												<Input
+													placeholder={
+														type === "libsql"
+															? "sqld --db-path iku.db --http-listen-addr 0.0.0.0:8080 --grpc-listen-addr 0.0.0.0:5001 --admin-listen-addr 0.0.0.0:5000"
+															: "Custom command"
+													}
+													{...field}
+												/>
 											</FormControl>
 
 											<FormMessage />

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
+							{canDeploy && (
-								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" ? (
 								<DialogAction
-									title="Start PostgreSQL"
+									title="Deploy PostgreSQL"
-									description="Are you sure you want to start this postgres?"
+									description="Are you sure you want to deploy this postgres?"
 									type="default"
 									onClick={async () => {
-										await start({
+										setIsDeploying(true);
-											postgresId: postgresId,
+										await new Promise((resolve) => setTimeout(resolve, 1000));
-										})
+										refetch();
-											.then(() => {
-												toast.success("PostgreSQL started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting PostgreSQL");
-											});
 									}}
 								>
 									<Button
-										variant="secondary"
+										variant="default"
-										isLoading={isStarting}
+										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" />
+													<Rocket className="size-4 mr-1" />
-													Start
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
+													<p>Downloads and sets up the PostgreSQL database</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>
 							)}
+							{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/add-compose.tsx

@@ -79,7 +79,7 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 		api.compose.create.useMutation();
 
 	// Get environment data to extract projectId
-	const { data: environment } = api.environment.one.useQuery({ environmentId });
+	// const { data: environment } = api.environment.one.useQuery({ environmentId });
 
 	const hasServers = servers && servers.length > 0;
 	// Show dropdown logic based on cloud environment
@@ -117,6 +117,8 @@ export const AddCompose = ({ environmentId, projectName }: Props) => {
 				await utils.environment.one.invalidate({
 					environmentId,
 				});
+				// Invalidate the project query to refresh the project data for the advance-breadcrumb
+				await utils.project.all.invalidate();
 			})
 			.catch(() => {
 				toast.error("Error creating the compose");

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

@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import {
+	LibsqlIcon,
 	MariadbIcon,
 	MongodbIcon,
 	MysqlIcon,
@@ -55,6 +56,7 @@ import { api } from "@/utils/api";
 type DbType = z.infer<typeof mySchema>["type"];
 
 const dockerImageDefaultPlaceholder: Record<DbType, string> = {
+	libsql: "ghcr.io/tursodatabase/libsql-server:v0.24.32",
 	mongo: "mongo:7",
 	mariadb: "mariadb:11",
 	mysql: "mysql:8",
@@ -66,8 +68,9 @@ const databasesUserDefaultPlaceholder: Record<
 	Exclude<DbType, "redis">,
 	string
 > = {
-	mongo: "mongo",
+	libsql: "libsql",
 	mariadb: "mariadb",
+	mongo: "mongo",
 	mysql: "mysql",
 	postgres: "postgres",
 };
@@ -94,56 +97,88 @@ const baseDatabaseSchema = z.object({
 	serverId: z.string().nullable(),
 });
 
-const mySchema = z.discriminatedUnion("type", [
+const mySchema = z
-	z
+	.discriminatedUnion("type", [
-		.object({
+		z
-			type: z.literal("postgres"),
+			.object({
-			databaseName: z.string().default("postgres"),
+				type: z.literal("libsql"),
-			databaseUser: z.string().default("postgres"),
+				dockerImage: z
-		})
+					.string()
-		.merge(baseDatabaseSchema),
+					.default("ghcr.io/tursodatabase/libsql-server:v0.24.32"),
-	z
+				databaseUser: z.string().default("libsql"),
-		.object({
+				sqldNode: z.enum(["primary", "replica"]).default("primary"),
-			type: z.literal("mongo"),
+				sqldPrimaryUrl: z.string().optional(),
-			databaseUser: z.string().default("mongo"),
+				enableNamespaces: z.boolean().default(false),
-			replicaSets: z.boolean().default(false),
+			})
-		})
+			.merge(baseDatabaseSchema),
-		.merge(baseDatabaseSchema),
+		z
-	z
+			.object({
-		.object({
+				type: z.literal("mariadb"),
-			type: z.literal("redis"),
+				dockerImage: z.string().default("mariadb:4"),
-		})
+				databaseRootPassword: z
-		.merge(baseDatabaseSchema),
+					.string()
-	z
+					.regex(/^[a-zA-Z0-9@#%^&*()_+\-=[\]{}|;:,.<>?~`]*$/, {
-		.object({
+						message:
-			type: z.literal("mysql"),
+							"Password contains invalid characters. Please avoid: $ ! ' \" \\ / and space characters for database compatibility",
-			databaseRootPassword: z
+					})
-				.string()
+					.optional(),
-				.regex(/^[a-zA-Z0-9@#%^&*()_+\-=[\]{}|;:,.<>?~`]*$/, {
+				databaseUser: z.string().default("mariadb"),
+				databaseName: z.string().default("mariadb"),
+			})
+			.merge(baseDatabaseSchema),
+		z
+			.object({
+				type: z.literal("mongo"),
+				databaseUser: z.string().default("mongo"),
+				replicaSets: z.boolean().default(false),
+			})
+			.merge(baseDatabaseSchema),
+		z
+			.object({
+				type: z.literal("mysql"),
+				databaseRootPassword: z
+					.string()
+					.regex(/^[a-zA-Z0-9@#%^&*()_+\-=[\]{}|;:,.<>?~`]*$/, {
+						message:
+							"Password contains invalid characters. Please avoid: $ ! ' \" \\ / and space characters for database compatibility",
+					})
+					.optional(),
+				databaseUser: z.string().default("mysql"),
+				databaseName: z.string().default("mysql"),
+			})
+			.merge(baseDatabaseSchema),
+		z
+			.object({
+				type: z.literal("postgres"),
+				databaseName: z.string().default("postgres"),
+				databaseUser: z.string().default("postgres"),
+			})
+			.merge(baseDatabaseSchema),
+		z
+			.object({
+				type: z.literal("redis"),
+			})
+			.merge(baseDatabaseSchema),
+	])
+	.superRefine((data, ctx) => {
+		if (data.type === "libsql") {
+			if (data.sqldNode === "replica" && !data.sqldPrimaryUrl) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["sqldPrimaryUrl"],
+					message: "sqldPrimaryUrl is required when sqldNode is 'replica'.",
+				});
+			}
+			if (data.sqldNode !== "replica" && data.sqldPrimaryUrl) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["sqldPrimaryUrl"],
 					message:
-						"Password contains invalid characters. Please avoid: $ ! ' \" \\ / and space characters for database compatibility",
+						"sqldPrimaryUrl should not be provided when sqldNode is not 'replica'.",
-				})
+				});
-				.optional(),
+			}
-			databaseUser: z.string().default("mysql"),
+		}
-			databaseName: z.string().default("mysql"),
+	});
-		})
-		.merge(baseDatabaseSchema),
-	z
-		.object({
-			type: z.literal("mariadb"),
-			dockerImage: z.string().default("mariadb:4"),
-			databaseRootPassword: z
-				.string()
-				.regex(/^[a-zA-Z0-9@#%^&*()_+\-=[\]{}|;:,.<>?~`]*$/, {
-					message:
-						"Password contains invalid characters. Please avoid: $ ! ' \" \\ / and space characters for database compatibility",
-				})
-				.optional(),
-			databaseUser: z.string().default("mariadb"),
-			databaseName: z.string().default("mariadb"),
-		})
-		.merge(baseDatabaseSchema),
-]);
 
 const databasesMap = {
 	postgres: {
@@ -166,6 +201,10 @@ const databasesMap = {
 		icon: <RedisIcon />,
 		label: "Redis",
 	},
+	libsql: {
+		icon: <LibsqlIcon className="size-10" />,
+		label: "libSQL",
+	},
 };
 
 type AddDatabase = z.infer<typeof mySchema>;
@@ -181,11 +220,12 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 	const slug = slugify(projectName);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: servers } = api.server.withSSHKey.useQuery();
-	const postgresMutation = api.postgres.create.useMutation();
+	const libsqlMutation = api.libsql.create.useMutation();
-	const mongoMutation = api.mongo.create.useMutation();
-	const redisMutation = api.redis.create.useMutation();
 	const mariadbMutation = api.mariadb.create.useMutation();
+	const mongoMutation = api.mongo.create.useMutation();
 	const mysqlMutation = api.mysql.create.useMutation();
+	const postgresMutation = api.postgres.create.useMutation();
+	const redisMutation = api.redis.create.useMutation();
 
 	// Get environment data to extract projectId
 	const { data: environment } = api.environment.one.useQuery({ environmentId });
@@ -210,13 +250,15 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 		},
 		resolver: zodResolver(mySchema),
 	});
+	const sqldNode = form.watch("sqldNode");
 	const type = form.watch("type");
 	const activeMutation = {
-		postgres: postgresMutation,
+		libsql: libsqlMutation,
-		mongo: mongoMutation,
-		redis: redisMutation,
 		mariadb: mariadbMutation,
+		mongo: mongoMutation,
 		mysql: mysqlMutation,
+		postgres: postgresMutation,
+		redis: redisMutation,
 	};
 
 	const onSubmit = async (data: AddDatabase) => {
@@ -233,12 +275,23 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 			description: data.description,
 		};
 
-		if (data.type === "postgres") {
+		if (data.type === "libsql") {
-			promise = postgresMutation.mutateAsync({
+			promise = libsqlMutation.mutateAsync({
+				...commonParams,
+				sqldNode: data.sqldNode,
+				sqldPrimaryUrl: data.sqldPrimaryUrl ?? null,
+				enableNamespaces: data.enableNamespaces,
+				databasePassword: data.databasePassword,
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				serverId: data.serverId === "dokploy" ? null : data.serverId,
+			});
+		} else if (data.type === "mariadb") {
+			promise = mariadbMutation.mutateAsync({
 				...commonParams,
 				databasePassword: data.databasePassword,
-				databaseName: data.databaseName || "postgres",
+				databaseRootPassword: data.databaseRootPassword || "",
-
+				databaseName: data.databaseName || "mariadb",
 				databaseUser:
 					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
 				serverId: data.serverId === "dokploy" ? null : data.serverId,
@@ -252,22 +305,6 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 				serverId: data.serverId === "dokploy" ? null : data.serverId,
 				replicaSets: data.replicaSets,
 			});
-		} else if (data.type === "redis") {
-			promise = redisMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				serverId: data.serverId === "dokploy" ? null : data.serverId,
-			});
-		} else if (data.type === "mariadb") {
-			promise = mariadbMutation.mutateAsync({
-				...commonParams,
-				databasePassword: data.databasePassword,
-				databaseRootPassword: data.databaseRootPassword || "",
-				databaseName: data.databaseName || "mariadb",
-				databaseUser:
-					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
-				serverId: data.serverId === "dokploy" ? null : data.serverId,
-			});
 		} else if (data.type === "mysql") {
 			promise = mysqlMutation.mutateAsync({
 				...commonParams,
@@ -278,6 +315,21 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 				serverId: data.serverId === "dokploy" ? null : data.serverId,
 				databaseRootPassword: data.databaseRootPassword || "",
 			});
+		} else if (data.type === "postgres") {
+			promise = postgresMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				databaseName: data.databaseName || "postgres",
+				databaseUser:
+					data.databaseUser || databasesUserDefaultPlaceholder[data.type],
+				serverId: data.serverId === "dokploy" ? null : data.serverId,
+			});
+		} else if (data.type === "redis") {
+			promise = redisMutation.mutateAsync({
+				...commonParams,
+				databasePassword: data.databasePassword,
+				serverId: data.serverId === "dokploy" ? null : data.serverId,
+			});
 		}
 
 		if (promise) {
@@ -305,6 +357,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 				});
 		}
 	};
+
 	return (
 		<Dialog open={visible} onOpenChange={setVisible}>
 			<DialogTrigger className="w-full">
@@ -506,8 +559,8 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 										</FormItem>
 									)}
 								/>
-								{(type === "mysql" ||
+								{(type === "mariadb" ||
-									type === "mariadb" ||
+									type === "mysql" ||
 									type === "postgres") && (
 									<FormField
 										control={form.control}
@@ -524,10 +577,101 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 										)}
 									/>
 								)}
-								{(type === "mysql" ||
+
+								{type === "libsql" && (
+									<FormField
+										control={form.control}
+										name="sqldNode"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Sqld Node</FormLabel>
+												<Select
+													onValueChange={field.onChange}
+													defaultValue={field.value || "primary"}
+												>
+													<SelectTrigger>
+														<SelectValue placeholder={"primary"} />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectGroup>
+															{["primary", "replica"].map((node) => (
+																<SelectItem key={node} value={node}>
+																	{node.charAt(0).toUpperCase() + node.slice(1)}
+																</SelectItem>
+															))}
+														</SelectGroup>
+													</SelectContent>
+												</Select>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								{type === "libsql" && sqldNode === "replica" && (
+									<FormField
+										control={form.control}
+										name="sqldPrimaryUrl"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Sqld Primary URL</FormLabel>
+												<FormControl>
+													<Input
+														placeholder={"https://<host>:<port>"}
+														autoComplete="off"
+														{...field}
+													/>
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+								{type === "libsql" && (
+									<FormField
+										control={form.control}
+										name="enableNamespaces"
+										render={({ field }) => {
+											console.log(field.value);
+											return (
+												<FormItem>
+													<FormLabel>Enable Namespaces</FormLabel>
+													<FormControl>
+														<Select
+															onValueChange={(value) =>
+																field.onChange(Boolean(value))
+															}
+															defaultValue={
+																field.value ? String(field.value) : "false"
+															}
+														>
+															<SelectTrigger>
+																<SelectValue placeholder={"false"} />
+															</SelectTrigger>
+															<SelectContent>
+																<SelectGroup>
+																	{["false", "true"].map((node) => (
+																		<SelectItem key={node} value={node}>
+																			{node.charAt(0).toUpperCase() +
+																				node.slice(1)}
+																		</SelectItem>
+																	))}
+																</SelectGroup>
+															</SelectContent>
+														</Select>
+													</FormControl>
+
+													<FormMessage />
+												</FormItem>
+											);
+										}}
+									/>
+								)}
+								{(type === "libsql" ||
 									type === "mariadb" ||
-									type === "postgres" ||
+									type === "mongo" ||
-									type === "mongo") && (
+									type === "mysql" ||
+									type === "postgres") && (
 									<FormField
 										control={form.control}
 										name="databaseUser"
@@ -568,7 +712,7 @@ export const AddDatabase = ({ environmentId, projectName }: Props) => {
 										</FormItem>
 									)}
 								/>
-								{(type === "mysql" || type === "mariadb") && (
+								{(type === "mariadb" || type === "mysql") && (
 									<FormField
 										control={form.control}
 										name="databaseRootPassword"

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

@@ -332,6 +332,7 @@ export const AddTemplate = ({ environmentId, baseUrl }: Props) => {
 												viewMode === "detailed" && "border-b",
 											)}
 										>
+											{/** biome-ignore lint/performance/noImgElement: this is a valid use for img tag */}
 											<img
 												src={`${customBaseUrl || "https://templates.dokploy.com/"}/blueprints/${template?.id}/${template?.logo}`}
 												className={cn(

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 =
+	const canCreateEnvironments = !!permissions?.environment.create;
-		currentUser?.role === "owner" ||
-		currentUser?.role === "admin" ||
-		currentUser?.canCreateEnvironments === true;
 
 	// Check if user can delete environments
-	const canDeleteEnvironments =
+	const canDeleteEnvironments = !!permissions?.environment.delete;
-		currentUser?.role === "owner" ||
-		currentUser?.role === "admin" ||
-		currentUser?.canDeleteEnvironments === true;
 
 	const haveServices =
 		selectedEnvironment &&
@@ -98,6 +92,8 @@ export const AdvancedEnvironmentSelector = ({
 
 			toast.success("Environment created successfully");
 			utils.environment.byProjectId.invalidate({ projectId });
+			// Invalidate the project query to refresh the project data for the advance-breadcrumb
+			utils.project.all.invalidate();
 			setIsCreateDialogOpen(false);
 			setName("");
 			setDescription("");

apps/dokploy/components/dashboard/project/duplicate-project.tsx

@@ -28,13 +28,14 @@ export type Services = {
 	serverId?: string | null;
 	name: string;
 	type:
-		| "mariadb"
 		| "application"
-		| "postgres"
+		| "compose"
-		| "mysql"
+		| "libsql"
+		| "mariadb"
 		| "mongo"
-		| "redis"
+		| "mysql"
-		| "compose";
+		| "postgres"
+		| "redis";
 	description?: string | null;
 	id: string;
 	createdAt: string;

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>
+								{canWrite && (
-									<Button isLoading={isPending} type="submit">
+									<DialogFooter>
-										Update
+										<Button isLoading={isPending} type="submit">
-									</Button>
+											Update
-								</DialogFooter>
+										</Button>
+									</DialogFooter>
+								)}
 							</form>
 						</Form>
 					</div>

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

@@ -7,6 +7,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
+import { TagSelector } from "@/components/shared/tag-selector";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -62,6 +63,7 @@ interface Props {
 export const HandleProject = ({ projectId }: Props) => {
 	const utils = api.useUtils();
 	const [isOpen, setIsOpen] = useState(false);
+	const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
 
 	const { mutateAsync, error, isError } = projectId
 		? api.project.update.useMutation()
@@ -75,6 +77,10 @@ export const HandleProject = ({ projectId }: Props) => {
 			enabled: !!projectId,
 		},
 	);
+
+	const { data: availableTags = [] } = api.tag.all.useQuery();
+	const bulkAssignMutation = api.tag.bulkAssign.useMutation();
+
 	const router = useRouter();
 	const form = useForm<AddProject>({
 		defaultValues: {
@@ -89,6 +95,13 @@ export const HandleProject = ({ projectId }: Props) => {
 			description: data?.description ?? "",
 			name: data?.name ?? "",
 		});
+		// Load existing tags when editing a project
+		if (data?.projectTags) {
+			const tagIds = data.projectTags.map((pt) => pt.tagId);
+			setSelectedTagIds(tagIds);
+		} else {
+			setSelectedTagIds([]);
+		}
 	}, [form, form.reset, form.formState.isSubmitSuccessful, data]);
 
 	const onSubmit = async (data: AddProject) => {
@@ -98,12 +111,26 @@ export const HandleProject = ({ projectId }: Props) => {
 			projectId: projectId || "",
 		})
 			.then(async (data) => {
+				// Assign tags to the project (both create and update)
+				const projectIdToUse =
+					projectId ||
+					(data && "project" in data ? data.project.projectId : undefined);
+
+				if (projectIdToUse) {
+					try {
+						await bulkAssignMutation.mutateAsync({
+							projectId: projectIdToUse,
+							tagIds: selectedTagIds,
+						});
+					} catch (error) {
+						toast.error("Failed to assign tags to project");
+					}
+				}
+
 				await utils.project.all.invalidate();
 				toast.success(projectId ? "Project Updated" : "Project Created");
 				setIsOpen(false);
 				if (!projectId) {
-					const projectIdToUse =
-						data && "project" in data ? data.project.projectId : undefined;
 					const environmentIdToUse =
 						data && "environment" in data
 							? data.environment.environmentId
@@ -190,6 +217,20 @@ export const HandleProject = ({ projectId }: Props) => {
 								</FormItem>
 							)}
 						/>
+
+						<div className="space-y-2">
+							<FormLabel>Tags</FormLabel>
+							<TagSelector
+								tags={availableTags.map((tag) => ({
+									id: tag.tagId,
+									name: tag.name,
+									color: tag.color ?? undefined,
+								}))}
+								selectedTags={selectedTagIds}
+								onTagsChange={setSelectedTagIds}
+								placeholder="Select tags..."
+							/>
+						</div>
 					</form>
 
 					<DialogFooter>

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>
+								{canWrite && (
-									<Button isLoading={isPending} type="submit">
+									<DialogFooter>
-										Update
+										<Button isLoading={isPending} type="submit">
-									</Button>
+											Update
-								</DialogFooter>
+										</Button>
+									</DialogFooter>
+								)}
 							</form>
 						</Form>
 					</div>

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

@@ -15,6 +15,8 @@ import { toast } from "sonner";
 import { BreadcrumbSidebar } from "@/components/shared/breadcrumb-sidebar";
 import { DateTooltip } from "@/components/shared/date-tooltip";
 import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
+import { TagBadge } from "@/components/shared/tag-badge";
+import { TagFilter } from "@/components/shared/tag-filter";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -49,7 +51,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { TimeBadge } from "@/components/ui/time-badge";
 import { api } from "@/utils/api";
 import { useDebounce } from "@/utils/hooks/use-debounce";
 import { HandleProject } from "./handle-project";
@@ -61,7 +62,9 @@ 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 { data: availableTags } = api.tag.all.useQuery();
 
 	const [searchQuery, setSearchQuery] = useState(
 		router.isReady && typeof router.query.q === "string" ? router.query.q : "",
@@ -75,10 +78,31 @@ export const ShowProjects = () => {
 		return "createdAt-desc";
 	});
 
+	const [selectedTagIds, setSelectedTagIds] = useState<string[]>(() => {
+		if (typeof window !== "undefined") {
+			const saved = localStorage.getItem("projectsTagFilter");
+			return saved ? JSON.parse(saved) : [];
+		}
+		return [];
+	});
+
 	useEffect(() => {
 		localStorage.setItem("projectsSort", sortBy);
 	}, [sortBy]);
 
+	useEffect(() => {
+		localStorage.setItem("projectsTagFilter", JSON.stringify(selectedTagIds));
+	}, [selectedTagIds]);
+
+	useEffect(() => {
+		if (!availableTags) return;
+		const validIds = new Set(availableTags.map((t) => t.tagId));
+		setSelectedTagIds((prev) => {
+			const filtered = prev.filter((id) => validIds.has(id));
+			return filtered.length === prev.length ? prev : filtered;
+		});
+	}, [availableTags]);
+
 	useEffect(() => {
 		if (!router.isReady) return;
 		const urlQuery = typeof router.query.q === "string" ? router.query.q : "";
@@ -106,7 +130,7 @@ export const ShowProjects = () => {
 	const filteredProjects = useMemo(() => {
 		if (!data) return [];
 
-		const filtered = data.filter(
+		let filtered = data.filter(
 			(project) =>
 				project.name
 					.toLowerCase()
@@ -116,6 +140,15 @@ export const ShowProjects = () => {
 					.includes(debouncedSearchQuery.toLowerCase()),
 		);
 
+		// Filter by selected tags (OR logic: show projects with ANY selected tag)
+		if (selectedTagIds.length > 0) {
+			filtered = filtered.filter((project) =>
+				project.projectTags?.some((pt) =>
+					selectedTagIds.includes(pt.tag.tagId),
+				),
+			);
+		}
+
 		// Then sort the filtered results
 		const [field, direction] = sortBy.split("-");
 		return [...filtered].sort((a, b) => {
@@ -161,18 +194,13 @@ export const ShowProjects = () => {
 			}
 			return direction === "asc" ? comparison : -comparison;
 		});
-	}, [data, debouncedSearchQuery, sortBy]);
+	}, [data, debouncedSearchQuery, sortBy, selectedTagIds]);
 
 	return (
 		<>
 			<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 +214,7 @@ export const ShowProjects = () => {
 									Create and manage your projects
 								</CardDescription>
 							</CardHeader>
-							{(auth?.role === "owner" ||
+							{permissions?.project.create && (
-								auth?.role === "admin" ||
-								auth?.canCreateProjects) && (
 								<div className="">
 									<HandleProject />
 								</div>
@@ -214,29 +240,44 @@ export const ShowProjects = () => {
 
 											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 										</div>
-										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
+										<div className="flex items-center gap-2">
-											<ArrowUpDown className="size-4 text-muted-foreground" />
+											<TagFilter
-											<Select value={sortBy} onValueChange={setSortBy}>
+												tags={
-												<SelectTrigger className="w-full">
+													availableTags?.map((tag) => ({
-													<SelectValue placeholder="Sort by..." />
+														id: tag.tagId,
-												</SelectTrigger>
+														name: tag.name,
-												<SelectContent>
+														color: tag.color || undefined,
-													<SelectItem value="name-asc">Name (A-Z)</SelectItem>
+													})) || []
-													<SelectItem value="name-desc">Name (Z-A)</SelectItem>
+												}
-													<SelectItem value="createdAt-desc">
+												selectedTags={selectedTagIds}
-														Newest first
+												onTagsChange={setSelectedTagIds}
-													</SelectItem>
+											/>
-													<SelectItem value="createdAt-asc">
+											<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
-														Oldest first
+												<ArrowUpDown className="size-4 text-muted-foreground" />
-													</SelectItem>
+												<Select value={sortBy} onValueChange={setSortBy}>
-													<SelectItem value="services-desc">
+													<SelectTrigger className="w-full">
-														Most services
+														<SelectValue placeholder="Sort by..." />
-													</SelectItem>
+													</SelectTrigger>
-													<SelectItem value="services-asc">
+													<SelectContent>
-														Least services
+														<SelectItem value="name-asc">Name (A-Z)</SelectItem>
-													</SelectItem>
+														<SelectItem value="name-desc">
-												</SelectContent>
+															Name (Z-A)
-											</Select>
+														</SelectItem>
+														<SelectItem value="createdAt-desc">
+															Newest first
+														</SelectItem>
+														<SelectItem value="createdAt-asc">
+															Oldest first
+														</SelectItem>
+														<SelectItem value="services-desc">
+															Most services
+														</SelectItem>
+														<SelectItem value="services-asc">
+															Least services
+														</SelectItem>
+													</SelectContent>
+												</Select>
+											</div>
 										</div>
 									</div>
 									{filteredProjects?.length === 0 && (
@@ -253,26 +294,27 @@ export const ShowProjects = () => {
 												.map(
 													(env) =>
 														env.applications.length === 0 &&
+														env.compose.length === 0 &&
+														env.libsql.length === 0 &&
 														env.mariadb.length === 0 &&
 														env.mongo.length === 0 &&
 														env.mysql.length === 0 &&
 														env.postgres.length === 0 &&
-														env.redis.length === 0 &&
+														env.redis.length === 0,
-														env.applications.length === 0 &&
-														env.compose.length === 0,
 												)
 												.every(Boolean);
 
 											const totalServices = project?.environments
 												.map(
 													(env) =>
+														env.applications.length +
+														env.compose.length +
+														env.libsql.length +
 														env.mariadb.length +
 														env.mongo.length +
 														env.mysql.length +
 														env.postgres.length +
-														env.redis.length +
+														env.redis.length,
-														env.applications.length +
-														env.compose.length,
 												)
 												.reduce((acc, curr) => acc + curr, 0);
 
@@ -315,6 +357,19 @@ export const ShowProjects = () => {
 																			{project.description}
 																		</span>
 
+																		{project.projectTags &&
+																			project.projectTags.length > 0 && (
+																				<div className="flex flex-wrap gap-1.5 mt-2">
+																					{project.projectTags.map((pt) => (
+																						<TagBadge
+																							key={pt.tag.tagId}
+																							name={pt.tag.name}
+																							color={pt.tag.color}
+																						/>
+																					))}
+																				</div>
+																			)}
+
 																		{hasNoEnvironments && (
 																			<div className="flex flex-row gap-2 items-center rounded-lg bg-yellow-50 p-2 mt-2 dark:bg-yellow-950">
 																				<AlertTriangle className="size-4 text-yellow-600 dark:text-yellow-400 shrink-0" />
@@ -361,8 +416,7 @@ export const ShowProjects = () => {
 																				<div
 																					onClick={(e) => e.stopPropagation()}
 																				>
-																					{(auth?.role === "owner" ||
+																					{permissions?.project.delete && (
-																						auth?.canDeleteProjects) && (
 																						<AlertDialog>
 																							<AlertDialogTrigger className="w-full">
 																								<DropdownMenuItem
@@ -436,7 +490,7 @@ export const ShowProjects = () => {
 																</CardTitle>
 															</CardHeader>
 															<CardFooter className="pt-4">
-																<div className="space-y-1 text-sm flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
+																<div className="space-y-1 text-xs flex flex-row justify-between max-sm:flex-wrap w-full gap-2 sm:gap-4">
 																	<DateTooltip date={project.createdAt}>
 																		Created
 																	</DateTooltip>

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
+							{canDeploy && (
-								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" ? (
 								<DialogAction
-									title="Start Redis"
+									title="Deploy Redis"
-									description="Are you sure you want to start this redis?"
+									description="Are you sure you want to deploy this redis?"
 									type="default"
 									onClick={async () => {
-										await start({
+										setIsDeploying(true);
-											redisId: redisId,
+										await new Promise((resolve) => setTimeout(resolve, 1000));
-										})
+										refetch();
-											.then(() => {
-												toast.success("Redis started successfully");
-												refetch();
-											})
-											.catch(() => {
-												toast.error("Error starting Redis");
-											});
 									}}
 								>
 									<Button
-										variant="secondary"
+										variant="default"
-										isLoading={isStarting}
+										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" />
+													<Rocket className="size-4 mr-1" />
-													Start
+													Deploy
 												</div>
 											</TooltipTrigger>
 											<TooltipPrimitive.Portal>
 												<TooltipContent sideOffset={5} className="z-[60]">
-													<p>
+													<p>Downloads and sets up the Redis database</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>
 							)}
+							{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(
+															{calculatePrice(
-																2,
+																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">
+															{permissions?.certificate.delete && (
-																<DialogAction
+																<div className="flex flex-row gap-1">
-																	title="Delete Certificate"
+																	<DialogAction
-																	description="Are you sure you want to delete this certificate?"
+																		title="Delete Certificate"
-																	type="destructive"
+																		description="Are you sure you want to delete this certificate?"
-																	onClick={async () => {
+																		type="destructive"
-																		await mutateAsync({
+																		onClick={async () => {
-																			certificateId: certificate.certificateId,
+																			await mutateAsync({
-																		})
+																				certificateId:
-																			.then(() => {
+																					certificate.certificateId,
-																				toast.success(
-																					"Certificate deleted successfully",
-																				);
-																				refetch();
 																			})
-																			.catch(() => {
+																				.then(() => {
-																				toast.error(
+																					toast.success(
-																					"Error deleting certificate",
+																						"Certificate deleted successfully",
-																				);
+																					);
-																			});
+																					refetch();
-																	}}
+																				})
-																>
+																				.catch(() => {
-																	<Button
+																					toast.error(
-																		variant="ghost"
+																						"Error deleting certificate",
-																		size="icon"
+																					);
-																		className="group hover:bg-red-500/10 "
+																				});
-																		isLoading={isRemoving}
+																		}}
 																	>
-																		<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																		<Button
-																	</Button>
+																			variant="ghost"
-																</DialogAction>
+																			size="icon"
-															</div>
+																			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">
+										{permissions?.certificate.create && (
-											<AddCertificate />
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-										</div>
+												<AddCertificate />
+											</div>
+										)}
 									</div>
 								)}
 							</>

apps/dokploy/components/dashboard/settings/certificates/utils.ts

@@ -14,13 +14,13 @@ export const extractExpirationDate = (certData: string): Date | null => {
 
 		// Helper: read ASN.1 length field
 		function readLength(pos: number): { length: number; offset: number } {
-			// biome-ignore lint/style/noParameterAssign: <explanation>
+			// biome-ignore lint/style/noParameterAssign: this is for dynamic length calculation
 			let len = der[pos++];
 			if (len & 0x80) {
 				const bytes = len & 0x7f;
 				len = 0;
 				for (let i = 0; i < bytes; i++) {
-					// biome-ignore lint/style/noParameterAssign: <explanation>
+					// biome-ignore lint/style/noParameterAssign: this is for dynamic length calculation
 					len = (len << 8) + der[pos++];
 				}
 			}

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
+															{permissions?.registry.delete && (
-																title="Delete Registry"
+																<DialogAction
-																description="Are you sure you want to delete this registry configuration?"
+																	title="Delete Registry"
-																type="destructive"
+																	description="Are you sure you want to delete this registry configuration?"
-																onClick={async () => {
+																	type="destructive"
-																	await mutateAsync({
+																	onClick={async () => {
-																		registryId: registry.registryId,
+																		await mutateAsync({
-																	})
+																			registryId: registry.registryId,
-																		.then(() => {
-																			toast.success(
-																				"Registry configuration deleted successfully",
-																			);
-																			refetch();
 																		})
-																		.catch(() => {
+																			.then(() => {
-																			toast.error(
+																				toast.success(
-																				"Error deleting registry configuration",
+																					"Registry configuration deleted successfully",
-																			);
+																				);
-																		});
+																				refetch();
-																}}
+																			})
-															>
+																			.catch(() => {
-																<Button
+																				toast.error(
-																	variant="ghost"
+																					"Error deleting registry configuration",
-																	size="icon"
+																				);
-																	className="group hover:bg-red-500/10 "
+																			});
-																	isLoading={isRemoving}
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	<Button
-																</Button>
+																		variant="ghost"
-															</DialogAction>
+																		size="icon"
+																		className="group hover:bg-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">
+										{permissions?.registry.create && (
-											<HandleRegistry />
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-										</div>
+												<HandleRegistry />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -1,7 +1,7 @@
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { PenBoxIcon, PlusIcon } from "lucide-react";
+import { PenBoxIcon, PlusIcon, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
@@ -35,6 +35,10 @@ import {
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
 import { api } from "@/utils/api";
+import {
+	ADDITIONAL_FLAG_ERROR,
+	ADDITIONAL_FLAG_REGEX,
+} from "@dokploy/server/db/validations/destination";
 import { S3_PROVIDERS } from "./constants";
 
 const addDestination = z.object({
@@ -46,6 +50,16 @@ const addDestination = z.object({
 	region: z.string(),
 	endpoint: z.string().min(1, "Endpoint is required"),
 	serverId: z.string().optional(),
+	additionalFlags: z
+		.array(
+			z.object({
+				value: z
+					.string()
+					.min(1, "Flag cannot be empty")
+					.regex(ADDITIONAL_FLAG_REGEX, ADDITIONAL_FLAG_ERROR),
+			}),
+		)
+		.optional(),
 });
 
 type AddDestination = z.infer<typeof addDestination>;
@@ -89,9 +103,16 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 			region: "",
 			secretAccessKey: "",
 			endpoint: "",
+			additionalFlags: [],
 		},
 		resolver: zodResolver(addDestination),
 	});
+
+	const { fields, append, remove } = useFieldArray({
+		control: form.control,
+		name: "additionalFlags",
+	});
+
 	useEffect(() => {
 		if (destination) {
 			form.reset({
@@ -102,6 +123,8 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 				bucket: destination.bucket,
 				region: destination.region,
 				endpoint: destination.endpoint,
+				additionalFlags:
+					destination.additionalFlags?.map((f) => ({ value: f })) ?? [],
 			});
 		} else {
 			form.reset();
@@ -118,6 +141,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 			region: data.region,
 			secretAccessKey: data.secretAccessKey,
 			destinationId: destinationId || "",
+			additionalFlags: data.additionalFlags?.map((f) => f.value) ?? [],
 		})
 			.then(async () => {
 				toast.success(`Destination ${destinationId ? "Updated" : "Created"}`);
@@ -127,9 +151,12 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 				}
 				setOpen(false);
 			})
-			.catch(() => {
+			.catch((e) => {
 				toast.error(
 					`Error ${destinationId ? "Updating" : "Creating"} the Destination`,
+					{
+						description: e.message,
+					},
 				);
 			});
 	};
@@ -141,6 +168,7 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 			"secretAccessKey",
 			"bucket",
 			"endpoint",
+			"additionalFlags",
 		]);
 
 		if (!result) {
@@ -179,6 +207,8 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 			region,
 			secretAccessKey: secretKey,
 			serverId,
+			additionalFlags:
+				form.getValues("additionalFlags")?.map((f) => f.value) ?? [],
 		})
 			.then(() => {
 				toast.success("Connection Success");
@@ -358,6 +388,48 @@ export const HandleDestinations = ({ destinationId }: Props) => {
 								</FormItem>
 							)}
 						/>
+						<div className="flex flex-col gap-2">
+							<div className="flex items-center justify-between">
+								<FormLabel>Additional Flags (Optional)</FormLabel>
+								<Button
+									type="button"
+									variant="ghost"
+									size="sm"
+									onClick={() => append({ value: "" })}
+								>
+									<PlusIcon className="size-4" />
+									Add Flag
+								</Button>
+							</div>
+							{fields.map((field, index) => (
+								<FormField
+									key={field.id}
+									control={form.control}
+									name={`additionalFlags.${index}.value`}
+									render={({ field }) => (
+										<FormItem>
+											<div className="flex items-center gap-2">
+												<FormControl>
+													<Input
+														placeholder="--s3-sign-accept-encoding=false"
+														{...field}
+													/>
+												</FormControl>
+												<Button
+													type="button"
+													variant="ghost"
+													size="icon"
+													onClick={() => remove(index)}
+												>
+													<Trash2 className="size-4 text-muted-foreground" />
+												</Button>
+											</div>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							))}
+						</div>
 					</form>
 
 					<DialogFooter

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
+															{permissions?.destination.delete && (
-																title="Delete Destination"
+																<DialogAction
-																description="Are you sure you want to delete this destination?"
+																	title="Delete Destination"
-																type="destructive"
+																	description="Are you sure you want to delete this destination?"
-																onClick={async () => {
+																	type="destructive"
-																	await mutateAsync({
+																	onClick={async () => {
-																		destinationId: destination.destinationId,
+																		await mutateAsync({
-																	})
+																			destinationId: destination.destinationId,
-																		.then(() => {
-																			toast.success(
-																				"Destination deleted successfully",
-																			);
-																			refetch();
 																		})
-																		.catch(() => {
+																			.then(() => {
-																			toast.error("Error deleting destination");
+																				toast.success(
-																		});
+																					"Destination deleted successfully",
-																}}
+																				);
-															>
+																				refetch();
-																<Button
+																			})
-																	variant="ghost"
+																			.catch(() => {
-																	size="icon"
+																				toast.error(
-																	className="group hover:bg-red-500/10 "
+																					"Error deleting destination",
-																	isLoading={isRemoving}
+																				);
+																			});
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	<Button
-																</Button>
+																		variant="ghost"
-															</DialogAction>
+																		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">
+										{permissions?.destination.create && (
-											<HandleDestinations />
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-										</div>
+												<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/organizations/${organizationName}/settings/apps/new?state=gh_init:${activeOrganization?.id}:${session?.user?.id ?? ""}`
-										: `https://github.com/settings/apps/new?state=gh_init:${activeOrganization?.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

@@ -12,6 +12,7 @@ import { toast } from "sonner";
 import { z } from "zod";
 import {
 	DiscordIcon,
+	MattermostIcon,
 	GotifyIcon,
 	LarkIcon,
 	NtfyIcon,
@@ -134,6 +135,14 @@ export const notificationSchema = z.discriminatedUnion("type", [
 			priority: z.number().min(1).max(5).default(3),
 		})
 		.merge(notificationBaseSchema),
+	z
+		.object({
+			type: z.literal("mattermost"),
+			webhookUrl: z.string().min(1, { message: "Webhook URL is required" }),
+			channel: z.string().optional(),
+			username: z.string().optional(),
+		})
+		.merge(notificationBaseSchema),
 	z
 		.object({
 			type: z.literal("pushover"),
@@ -210,6 +219,10 @@ export const notificationsMap = {
 		icon: <NtfyIcon />,
 		label: "ntfy",
 	},
+	mattermost: {
+		icon: <MattermostIcon />,
+		label: "Mattermost",
+	},
 	pushover: {
 		icon: <PushoverIcon />,
 		label: "Pushover",
@@ -253,14 +266,16 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 		api.notification.testGotifyConnection.useMutation();
 	const { mutateAsync: testNtfyConnection, isPending: isLoadingNtfy } =
 		api.notification.testNtfyConnection.useMutation();
+	const {
+		mutateAsync: testMattermostConnection,
+		isPending: isLoadingMattermost,
+	} = api.notification.testMattermostConnection.useMutation();
 	const { mutateAsync: testLarkConnection, isPending: isLoadingLark } =
 		api.notification.testLarkConnection.useMutation();
 	const { mutateAsync: testTeamsConnection, isPending: isLoadingTeams } =
 		api.notification.testTeamsConnection.useMutation();
-
 	const { mutateAsync: testCustomConnection, isPending: isLoadingCustom } =
 		api.notification.testCustomConnection.useMutation();
-
 	const { mutateAsync: testPushoverConnection, isPending: isLoadingPushover } =
 		api.notification.testPushoverConnection.useMutation();
 
@@ -288,6 +303,9 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 	const ntfyMutation = notificationId
 		? api.notification.updateNtfy.useMutation()
 		: api.notification.createNtfy.useMutation();
+	const mattermostMutation = notificationId
+		? api.notification.updateMattermost.useMutation()
+		: api.notification.createMattermost.useMutation();
 	const larkMutation = notificationId
 		? api.notification.updateLark.useMutation()
 		: api.notification.createLark.useMutation();
@@ -438,6 +456,21 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					dockerCleanup: notification.dockerCleanup,
 					serverThreshold: notification.serverThreshold,
 				});
+			} else if (notification.notificationType === "mattermost") {
+				form.reset({
+					appBuildError: notification.appBuildError,
+					appDeploy: notification.appDeploy,
+					dokployRestart: notification.dokployRestart,
+					databaseBackup: notification.databaseBackup,
+					volumeBackup: notification.volumeBackup,
+					type: notification.notificationType,
+					webhookUrl: notification.mattermost?.webhookUrl,
+					channel: notification.mattermost?.channel || "",
+					username: notification.mattermost?.username || "",
+					name: notification.name,
+					dockerCleanup: notification.dockerCleanup,
+					serverThreshold: notification.serverThreshold,
+				});
 			} else if (notification.notificationType === "lark") {
 				form.reset({
 					appBuildError: notification.appBuildError,
@@ -516,6 +549,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 		resend: resendMutation,
 		gotify: gotifyMutation,
 		ntfy: ntfyMutation,
+		mattermost: mattermostMutation,
 		lark: larkMutation,
 		teams: teamsMutation,
 		custom: customMutation,
@@ -646,6 +680,22 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 				notificationId: notificationId || "",
 				ntfyId: notification?.ntfyId || "",
 			});
+		} else if (data.type === "mattermost") {
+			promise = mattermostMutation.mutateAsync({
+				appBuildError: appBuildError,
+				appDeploy: appDeploy,
+				dokployRestart: dokployRestart,
+				databaseBackup: databaseBackup,
+				volumeBackup: volumeBackup,
+				webhookUrl: data.webhookUrl,
+				channel: data.channel || undefined,
+				username: data.username || undefined,
+				name: data.name,
+				dockerCleanup: dockerCleanup,
+				notificationId: notificationId || "",
+				mattermostId: notification?.mattermostId || "",
+				serverThreshold: serverThreshold,
+			});
 		} else if (data.type === "lark") {
 			promise = larkMutation.mutateAsync({
 				appBuildError: appBuildError,
@@ -737,6 +787,9 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 					});
 					setVisible(false);
 					await utils.notification.all.invalidate();
+					if (notificationId) {
+						await utils.notification.one.invalidate({ notificationId });
+					}
 				})
 				.catch(() => {
 					toast.error(
@@ -1403,6 +1456,62 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										/>
 									</>
 								)}
+
+								{type === "mattermost" && (
+									<>
+										<FormField
+											control={form.control}
+											name="webhookUrl"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Webhook URL</FormLabel>
+													<FormControl>
+														<Input
+															placeholder="https://your-mattermost.com/hooks/xxx-generatedkey-xxx"
+															{...field}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="channel"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Channel</FormLabel>
+													<FormControl>
+														<Input placeholder="deployments" {...field} />
+													</FormControl>
+													<FormDescription>
+														Optional. Channel to post to (without #).
+													</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+
+										<FormField
+											control={form.control}
+											name="username"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Username</FormLabel>
+													<FormControl>
+														<Input placeholder="Dokploy" {...field} />
+													</FormControl>
+													<FormDescription>
+														Optional. Display name for the webhook.
+													</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</>
+								)}
+
 								{type === "custom" && (
 									<div className="space-y-4">
 										<FormField
@@ -1489,6 +1598,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 										</div>
 									</div>
 								)}
+
 								{type === "lark" && (
 									<>
 										<FormField
@@ -1849,6 +1959,7 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 								isLoadingResend ||
 								isLoadingGotify ||
 								isLoadingNtfy ||
+								isLoadingMattermost ||
 								isLoadingLark ||
 								isLoadingTeams ||
 								isLoadingCustom ||
@@ -1908,6 +2019,12 @@ export const HandleNotifications = ({ notificationId }: Props) => {
 											accessToken: data.accessToken || "",
 											priority: data.priority ?? 0,
 										});
+									} else if (data.type === "mattermost") {
+										await testMattermostConnection({
+											webhookUrl: data.webhookUrl,
+											channel: data.channel || undefined,
+											username: data.username || undefined,
+										});
 									} else if (data.type === "lark") {
 										await testLarkConnection({
 											webhookUrl: data.webhookUrl,

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

@@ -4,6 +4,7 @@ import {
 	DiscordIcon,
 	GotifyIcon,
 	LarkIcon,
+	MattermostIcon,
 	NtfyIcon,
 	ResendIcon,
 	SlackIcon,
@@ -26,6 +27,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 +58,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]">
@@ -118,6 +122,12 @@ export const ShowNotifications = () => {
 																	<TeamsIcon className="size-7 text-muted-foreground" />
 																</div>
 															)}
+															{notification.notificationType ===
+																"mattermost" && (
+																<div className="flex  items-center justify-center rounded-lg">
+																	<MattermostIcon className="size-7" />
+																</div>
+															)}
 
 															{notification.name}
 														</span>
@@ -126,45 +136,50 @@ export const ShowNotifications = () => {
 																notificationId={notification.notificationId}
 															/>
 
-															<DialogAction
+															{permissions?.notification.delete && (
-																title="Delete Notification"
+																<DialogAction
-																description="Are you sure you want to delete this notification?"
+																	title="Delete Notification"
-																type="destructive"
+																	description="Are you sure you want to delete this notification?"
-																onClick={async () => {
+																	type="destructive"
-																	await mutateAsync({
+																	onClick={async () => {
-																		notificationId: notification.notificationId,
+																		await mutateAsync({
-																	})
+																			notificationId:
-																		.then(() => {
+																				notification.notificationId,
-																			toast.success(
-																				"Notification deleted successfully",
-																			);
-																			refetch();
 																		})
-																		.catch(() => {
+																			.then(() => {
-																			toast.error(
+																				toast.success(
-																				"Error deleting notification",
+																					"Notification deleted successfully",
-																			);
+																				);
-																		});
+																				refetch();
-																}}
+																			})
-															>
+																			.catch(() => {
-																<Button
+																				toast.error(
-																	variant="ghost"
+																					"Error deleting notification",
-																	size="icon"
+																				);
-																	className="group hover:bg-red-500/10 "
+																			});
-																	isLoading={isRemoving}
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	<Button
-																</Button>
+																		variant="ghost"
-															</DialogAction>
+																		size="icon"
+																		className="group hover:bg-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">
+										{permissions?.notification.create && (
-											<HandleNotifications />
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-										</div>
+												<HandleNotifications />
+											</div>
+										)}
 									</div>
 								)}
 							</>

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

@@ -20,6 +20,7 @@ import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
 	FormLabel,
@@ -409,7 +410,10 @@ export const HandleServers = ({ serverId, asButton = false }: Props) => {
 									<FormControl>
 										<Input placeholder="root" {...field} />
 									</FormControl>
-
+									<FormDescription>
+										Use &quot;root&quot; or a non-root user with passwordless
+										sudo access.
+									</FormDescription>
 									<FormMessage />
 								</FormItem>
 							)}

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

@@ -118,9 +118,10 @@ export const SetupServer = ({ serverId, asButton = false }: Props) => {
 					</div>
 				) : (
 					<div id="hook-form-add-gitlab" className="grid w-full gap-4">
-						<AlertBlock type="warning">
+						<AlertBlock type="info">
-							Using a root user is required to ensure everything works as
+							You can connect as root or as a non-root user with passwordless
-							expected.
+							sudo access. If using a non-root user, ensure passwordless sudo is
+							configured.
 						</AlertBlock>
 
 						<Tabs defaultValue="ssh-keys">

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>
+																				{permissions?.server.delete && (
-																					<TooltipTrigger asChild>
+																					<Tooltip>
-																						<div>
+																						<TooltipTrigger asChild>
-																							<DialogAction
+																							<div>
-																								disabled={!canDelete}
+																								<DialogAction
-																								title={
+																									disabled={!canDelete}
-																									canDelete
+																									title={
-																										? "Delete Server"
+																										canDelete
-																										: "Server has active services"
+																											? "Delete Server"
-																								}
+																											: "Server has active services"
-																								description={
+																									}
-																									canDelete ? (
+																									description={
-																										"This will delete the server and all associated data"
+																										canDelete ? (
-																									) : (
+																											"This will delete the server and all associated data"
-																										<div className="flex flex-col gap-2">
+																										) : (
-																											You can not delete this
+																											<div className="flex flex-col gap-2">
-																											server because it has
+																												You can not delete this
-																											active services.
+																												server because it has
-																											<AlertBlock type="warning">
+																												active services.
-																												You have active services
+																												<AlertBlock type="warning">
-																												associated with this
+																													You have active
-																												server, please delete
+																													services associated
-																												them first.
+																													with this server,
-																											</AlertBlock>
+																													please delete them
-																										</div>
+																													first.
-																									)
+																												</AlertBlock>
-																								}
+																											</div>
-																								onClick={async () => {
+																										)
-																									await mutateAsync({
+																									}
-																										serverId: server.serverId,
+																									onClick={async () => {
-																									})
+																										await mutateAsync({
-																										.then(() => {
+																											serverId: server.serverId,
-																											refetch();
-																											toast.success(
-																												`Server ${server.name} deleted successfully`,
-																											);
 																										})
-																										.catch((err) => {
+																											.then(() => {
-																											toast.error(err.message);
+																												refetch();
-																										});
+																												toast.success(
-																								}}
+																													`Server ${server.name} deleted successfully`,
-																							>
+																												);
-																								<Button
+																											})
-																									variant="ghost"
+																											.catch((err) => {
-																									size="icon"
+																												toast.error(
-																									className={`h-9 w-9 ${canDelete ? "text-destructive hover:text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"}`}
+																													err.message,
+																												);
+																											});
+																									}}
 																								>
-																									<Trash2 className="h-4 w-4" />
+																									<Button
-																								</Button>
+																										variant="ghost"
-																							</DialogAction>
+																										size="icon"
-																						</div>
+																										className={`h-9 w-9 ${canDelete ? "text-destructive hover:text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-muted"}`}
-																					</TooltipTrigger>
+																									>
-																					<TooltipContent>
+																										<Trash2 className="h-4 w-4" />
-																						<p>
+																									</Button>
-																							{canDelete
+																								</DialogAction>
-																								? "Delete Server"
+																							</div>
-																								: "Cannot delete - has active services"}
+																						</TooltipTrigger>
-																						</p>
+																						<TooltipContent>
-																					</TooltipContent>
+																							<p>
-																				</Tooltip>
+																								{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">
+												{permissions?.server.create && (
-													{data && data?.length > 0 && (
+													<div className="flex flex-row gap-2 flex-wrap w-full justify-end mt-4">
-														<div>
+														{data && data?.length > 0 && (
-															<HandleServers />
+															<div>
-														</div>
+																<HandleServers />
-													)}
+															</div>
-												</div>
+														)}
+													</div>
+												)}
 											</div>
 										)}
 									</>

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

@@ -163,6 +163,29 @@ export const ValidateServer = ({ serverId }: Props) => {
 													: "Not Created"
 											}
 										/>
+										<StatusRow
+											label="Privilege Mode"
+											isEnabled={
+												data?.privilegeMode === "root" ||
+												data?.privilegeMode === "sudo"
+											}
+											description={
+												data?.privilegeMode === "root"
+													? "Running as root"
+													: data?.privilegeMode === "sudo"
+														? "Running with sudo"
+														: "No sudo access (required for non-root)"
+											}
+										/>
+										<StatusRow
+											label="Docker Group"
+											isEnabled={data?.dockerGroupMember}
+											description={
+												data?.dockerGroupMember
+													? "User is in docker group"
+													: "User is not in docker group"
+											}
+										/>
 									</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
+															{permissions?.sshKeys.delete && (
-																title="Delete SSH Key"
+																<DialogAction
-																description="Are you sure you want to delete this SSH Key?"
+																	title="Delete SSH Key"
-																type="destructive"
+																	description="Are you sure you want to delete this SSH Key?"
-																onClick={async () => {
+																	type="destructive"
-																	await mutateAsync({
+																	onClick={async () => {
-																		sshKeyId: sshKey.sshKeyId,
+																		await mutateAsync({
-																	})
+																			sshKeyId: sshKey.sshKeyId,
-																		.then(() => {
-																			toast.success(
-																				"SSH Key deleted successfully",
-																			);
-																			refetch();
 																		})
-																		.catch(() => {
+																			.then(() => {
-																			toast.error("Error deleting SSH Key");
+																				toast.success(
-																		});
+																					"SSH Key deleted successfully",
-																}}
+																				);
-															>
+																				refetch();
-																<Button
+																			})
-																	variant="ghost"
+																			.catch(() => {
-																	size="icon"
+																				toast.error("Error deleting SSH Key");
-																	className="group hover:bg-red-500/10 "
+																			});
-																	isLoading={isRemoving}
+																	}}
 																>
-																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																	<Button
-																</Button>
+																		variant="ghost"
-															</DialogAction>
+																		size="icon"
+																		className="group hover:bg-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">
+										{permissions?.sshKeys.create && (
-											<HandleSSHKeys />
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
-										</div>
+												<HandleSSHKeys />
+											</div>
+										)}
 									</div>
 								)}
 							</>

apps/dokploy/components/dashboard/settings/tags/handle-tag.tsx

@@ -0,0 +1,239 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Palette, PenBoxIcon, PlusIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { TagBadge } from "@/components/shared/tag-badge";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+
+const TagSchema = z.object({
+	name: z
+		.string()
+		.min(1, "Tag name is required")
+		.max(50, "Tag name must be less than 50 characters")
+		.refine(
+			(name) => {
+				const trimmedName = name.trim();
+				const validNameRegex =
+					/^[\p{L}\p{N}_-][\p{L}\p{N}\s_.-]*[\p{L}\p{N}_-]$/u;
+				return validNameRegex.test(trimmedName);
+			},
+			{
+				message:
+					"Tag name must start and end with a letter, number, hyphen or underscore. Spaces are allowed in between.",
+			},
+		)
+		.transform((name) => name.trim()),
+	color: z.string().optional(),
+});
+
+type Tag = z.infer<typeof TagSchema>;
+
+interface HandleTagProps {
+	tagId?: string;
+}
+
+export const HandleTag = ({ tagId }: HandleTagProps) => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const colorInputRef = useRef<HTMLInputElement>(null);
+
+	const { mutateAsync, error, isError } = tagId
+		? api.tag.update.useMutation()
+		: api.tag.create.useMutation();
+
+	const { data: tag } = api.tag.one.useQuery(
+		{
+			tagId: tagId || "",
+		},
+		{
+			enabled: !!tagId,
+		},
+	);
+
+	const form = useForm<Tag>({
+		defaultValues: {
+			name: "",
+			color: "#3b82f6",
+		},
+		resolver: zodResolver(TagSchema),
+	});
+
+	useEffect(() => {
+		if (tag) {
+			form.reset({
+				name: tag.name ?? "",
+				color: tag.color ?? "#3b82f6",
+			});
+		} else {
+			form.reset({
+				name: "",
+				color: "#3b82f6",
+			});
+		}
+	}, [form, form.reset, tag]);
+
+	const onSubmit = async (data: Tag) => {
+		await mutateAsync({
+			name: data.name,
+			color: data.color,
+			tagId: tagId || "",
+		})
+			.then(async () => {
+				await utils.tag.all.invalidate();
+				toast.success(tagId ? "Tag Updated" : "Tag Created");
+				setIsOpen(false);
+				form.reset();
+			})
+			.catch(() => {
+				toast.error(tagId ? "Error updating tag" : "Error creating tag");
+			});
+	};
+
+	const colorValue = form.watch("color");
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				{tagId ? (
+					<Button variant="ghost" size="icon" className="h-8 w-8">
+						<PenBoxIcon className="h-4 w-4" />
+					</Button>
+				) : (
+					<Button>
+						<PlusIcon className="h-4 w-4" />
+						Create Tag
+					</Button>
+				)}
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-lg">
+				<DialogHeader>
+					<DialogTitle>{tagId ? "Update" : "Create"} Tag</DialogTitle>
+					<DialogDescription>
+						{tagId
+							? "Update the tag name and color"
+							: "Create a new tag to organize your projects"}
+					</DialogDescription>
+				</DialogHeader>
+				{isError && <AlertBlock type="error">{error?.message}</AlertBlock>}
+				<Form {...form}>
+					<form
+						id="hook-form-tag"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input
+											placeholder="e.g., Production, Client, Internal"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="color"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Color (Optional)</FormLabel>
+									<FormControl>
+										<div className="flex items-center gap-3">
+											<FormLabel
+												className="relative flex items-center justify-center w-12 h-12 rounded-md border-2 cursor-pointer hover:opacity-80 transition-opacity"
+												style={{
+													backgroundColor: field.value || "#3b82f6",
+												}}
+												onClick={() => colorInputRef.current?.click()}
+											>
+												<div className="flex items-center justify-center">
+													{!field.value && (
+														<Palette className="h-5 w-5 text-white" />
+													)}
+												</div>
+												<input
+													ref={colorInputRef}
+													type="color"
+													className="absolute opacity-0 pointer-events-none w-12 h-12 top-0 left-0"
+													value={field.value || "#3b82f6"}
+													onChange={field.onChange}
+												/>
+											</FormLabel>
+											<div className="flex-1">
+												<Input
+													placeholder="#3b82f6"
+													{...field}
+													value={field.value || ""}
+													onChange={(e) => {
+														const value = e.target.value;
+														if (value.startsWith("#") || value === "") {
+															field.onChange(value);
+														}
+													}}
+												/>
+												<FormDescription className="mt-1">
+													Choose a color to easily identify this tag
+												</FormDescription>
+											</div>
+										</div>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{colorValue && (
+							<div className="flex items-center gap-2">
+								<span className="text-sm text-muted-foreground">Preview:</span>
+								<TagBadge
+									name={form.watch("name") || "Tag Name"}
+									color={colorValue}
+								/>
+							</div>
+						)}
+					</form>
+				</Form>
+
+				<DialogFooter>
+					<Button
+						isLoading={form.formState.isSubmitting}
+						form="hook-form-tag"
+						type="submit"
+					>
+						{tagId ? "Update" : "Create"}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/tags/tag-manager.tsx

@@ -0,0 +1,124 @@
+import { Loader2, TagIcon, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { TagBadge } from "@/components/shared/tag-badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { HandleTag } from "./handle-tag";
+
+export const TagManager = () => {
+	const utils = api.useUtils();
+	const { data: tags, isPending } = api.tag.all.useQuery();
+	const { mutateAsync: deleteTag, isPending: isRemoving } =
+		api.tag.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">
+				<div className="rounded-xl bg-background shadow-md">
+					<CardHeader>
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<TagIcon className="size-6 text-muted-foreground self-center" />
+							Tags
+						</CardTitle>
+						<CardDescription>
+							Create and manage tags to organize your projects
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2 py-8 border-t">
+						{isPending ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[25vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
+							</div>
+						) : (
+							<>
+								{!tags || tags.length === 0 ? (
+									<div className="flex flex-col items-center gap-3 min-h-[25vh] justify-center">
+										<TagIcon className="size-6 text-muted-foreground" />
+										<span className="text-base text-muted-foreground text-center">
+											No tags yet. Create your first tag to start organizing
+											projects.
+										</span>
+										{permissions?.tag.create && <HandleTag />}
+									</div>
+								) : (
+									<div className="flex flex-col gap-4 min-h-[25vh]">
+										<div className="flex flex-col gap-4 rounded-lg">
+											{tags.map((tag) => (
+												<div
+													key={tag.tagId}
+													className="flex items-center justify-between bg-sidebar p-1 w-full rounded-lg"
+												>
+													<div className="flex items-center justify-between p-3.5 rounded-lg bg-background border w-full">
+														<div className="flex items-center gap-3">
+															<TagBadge name={tag.name} color={tag.color} />
+															{tag.color && (
+																<span className="text-xs text-muted-foreground font-mono">
+																	{tag.color}
+																</span>
+															)}
+														</div>
+														<div className="flex flex-row gap-1 items-center">
+															{permissions?.tag.update && (
+																<HandleTag tagId={tag.tagId} />
+															)}
+															{permissions?.tag.delete && (
+																<DialogAction
+																	title="Delete Tag"
+																	description={`Are you sure you want to delete the tag "${tag.name}"? This will remove the tag from all projects. This action cannot be undone.`}
+																	type="destructive"
+																	onClick={async () => {
+																		await deleteTag({
+																			tagId: tag.tagId,
+																		})
+																			.then(async () => {
+																				await utils.tag.all.invalidate();
+																				toast.success(
+																					"Tag deleted successfully",
+																				);
+																			})
+																			.catch(() => {
+																				toast.error("Error deleting tag");
+																			});
+																	}}
+																>
+																	<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>
+
+										{permissions?.tag.create && (
+											<div className="flex flex-row gap-2 flex-wrap w-full justify-end mr-4">
+												<HandleTag />
+											</div>
+										)}
+									</div>
+								)}
+							</>
+						)}
+					</CardContent>
+				</div>
+			</Card>
+		</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);
+		try {
-		const result = await authClient.organization.inviteMember({
+			const result = await inviteMember({
-			email: data.email.toLowerCase(),
+				email: data.email.toLowerCase(),
-			role: data.role,
+				role: data.role,
-			organizationId: activeOrganization?.id,
+			});
-		});
 
-		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

@@ -46,7 +46,8 @@ export type Services = {
 		| "mysql"
 		| "mongo"
 		| "redis"
-		| "compose";
+		| "compose"
+		| "libsql";
 	description?: string | null;
 	id: string;
 	createdAt: string;
@@ -136,6 +137,18 @@ export const extractServices = (data: Environment | undefined) => {
 		serverId: item.serverId,
 	})) ?? []) as Services[];
 
+	const libsql: Services[] =
+		data?.libsql?.map((item) => ({
+			appName: item.appName,
+			name: item.name,
+			type: "libsql" as const,
+			id: item.libsqlId,
+			createdAt: item.createdAt,
+			status: item.applicationStatus,
+			description: item.description,
+			serverId: item.serverId,
+		})) || [];
+
 	applications.push(
 		...mysql,
 		...redis,
@@ -143,6 +156,7 @@ export const extractServices = (data: Environment | undefined) => {
 		...postgres,
 		...mariadb,
 		...compose,
+		...libsql,
 	);
 
 	applications.sort((a, b) => {
@@ -173,9 +187,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 +300,237 @@ export const AddUserPermissions = ({ userId }: Props) => {
 						onSubmit={form.handleSubmit(onSubmit)}
 						className="grid  grid-cols-1 md:grid-cols-2  w-full gap-4"
 					>
-						<FormField
+						{isCustomRole && (
-							control={form.control}
+							<div className="md:col-span-2 rounded-lg border p-3 bg-muted/50 text-sm text-muted-foreground">
-							name="canCreateProjects"
+								This user has a custom role assigned. Capabilities are defined
-							render={({ field }) => (
+								by the role. You can still manage which projects, environments,
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+								and services they can access below.
-									<div className="space-y-0.5">
+							</div>
-										<FormLabel>Create Projects</FormLabel>
+						)}
-										<FormDescription>
+						{!isCustomRole && (
-											Allow the user to create projects
+							<>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canCreateProjects"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Create Projects</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to create projects
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canDeleteProjects"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Delete Projects</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to delete projects
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canDeleteProjects"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Delete Projects</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to delete projects
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canCreateServices"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Create Services</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to create services
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canCreateServices"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Create Services</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to create services
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canDeleteServices"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Delete Services</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to delete services
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canDeleteServices"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Delete Services</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to delete services
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canCreateEnvironments"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Create Environments</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to create environments
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canCreateEnvironments"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Create Environments</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to create environments
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canDeleteEnvironments"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Delete Environments</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to delete environments
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canDeleteEnvironments"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Delete Environments</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to delete environments
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canAccessToTraefikFiles"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Access to Traefik Files</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to access to the Traefik Tab Files
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canAccessToTraefikFiles"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Access to Traefik Files</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to access to the Traefik Tab Files
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canAccessToDocker"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Access to Docker</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to access to the Docker Tab
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canAccessToDocker"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Access to Docker</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to access to the Docker Tab
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canAccessToAPI"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Access to API/CLI</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow the user to access to the API/CLI
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canAccessToAPI"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Access to API/CLI</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow the user to access to the API/CLI
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canAccessToSSHKeys"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Access to SSH Keys</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow to users to access to the SSH Keys section
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canAccessToSSHKeys"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Access to SSH Keys</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													Allow to users to access to the SSH Keys section
-							)}
+												</FormDescription>
-						/>
+											</div>
-						<FormField
+											<FormControl>
-							control={form.control}
+												<Switch
-							name="canAccessToGitProviders"
+													checked={field.value}
-							render={({ field }) => (
+													onCheckedChange={field.onChange}
-								<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+												/>
-									<div className="space-y-0.5">
+											</FormControl>
-										<FormLabel>Access to Git Providers</FormLabel>
+										</FormItem>
-										<FormDescription>
+									)}
-											Allow to users to access to the Git Providers section
+								/>
-										</FormDescription>
+								<FormField
-									</div>
+									control={form.control}
-									<FormControl>
+									name="canAccessToGitProviders"
-										<Switch
+									render={({ field }) => (
-											checked={field.value}
+										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-											onCheckedChange={field.onChange}
+											<div className="space-y-0.5">
-										/>
+												<FormLabel>Access to Git Providers</FormLabel>
-									</FormControl>
+												<FormDescription>
-								</FormItem>
+													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" &&
+														!isStaticAdminOrOwner &&
-														member.role === "member" &&
 														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
+													const canDeleteMember =
-													// - Owner: Can delete/unlink anyone (except themselves and owner can't be deleted)
+														permissions?.member.delete ?? false;
-													// - 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 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={
+																					currentRole={member.role}
-																						member.role as "admin" | "member"
-																					}
 																					userEmail={member.user.email}
 																				/>
 																			)}
@@ -189,6 +214,7 @@ export const ShowUsers = () => {
 																			{canEditPermissions && (
 																				<AddUserPermissions
 																					userId={member.user.id}
+																					role={member.role}
 																				/>
 																			)}
 

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

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

apps/dokploy/components/dashboard/shared/rebuild-database.tsx

@@ -17,17 +17,18 @@ import { api } from "@/utils/api";
 
 interface Props {
 	id: string;
-	type: "postgres" | "mysql" | "mariadb" | "mongo" | "redis";
+	type: "libsql" | "mariadb" | "mongo" | "mysql" | "postgres" | "redis";
 }
 
 export const RebuildDatabase = ({ id, type }: Props) => {
 	const utils = api.useUtils();
 
 	const mutationMap = {
-		postgres: () => api.postgres.rebuild.useMutation(),
+		libsql: () => api.libsql.rebuild.useMutation(),
-		mysql: () => api.mysql.rebuild.useMutation(),
 		mariadb: () => api.mariadb.rebuild.useMutation(),
 		mongo: () => api.mongo.rebuild.useMutation(),
+		mysql: () => api.mysql.rebuild.useMutation(),
+		postgres: () => api.postgres.rebuild.useMutation(),
 		redis: () => api.redis.rebuild.useMutation(),
 	};
 
@@ -36,10 +37,11 @@ export const RebuildDatabase = ({ id, type }: Props) => {
 	const handleRebuild = async () => {
 		try {
 			await mutateAsync({
-				postgresId: type === "postgres" ? id : "",
+				libsqlId: type === "libsql" ? id : "",
-				mysqlId: type === "mysql" ? id : "",
 				mariadbId: type === "mariadb" ? id : "",
 				mongoId: type === "mongo" ? id : "",
+				mysqlId: type === "mysql" ? id : "",
+				postgresId: type === "postgres" ? id : "",
 				redisId: type === "redis" ? id : "",
 			});
 			toast.success("Database rebuilt successfully");

apps/dokploy/components/dashboard/shared/show-database-advanced-settings.tsx

@@ -6,14 +6,20 @@ import { RebuildDatabase } from "./rebuild-database";
 
 interface Props {
 	id: string;
-	type: "postgres" | "mysql" | "mariadb" | "mongo" | "redis";
+	type: "libsql" | "mariadb" | "mongo" | "mysql" | "postgres" | "redis";
 }
 
 export const ShowDatabaseAdvancedSettings = ({ id, type }: Props) => {
 	return (
 		<div className="flex w-full flex-col gap-5">
 			<ShowCustomCommand id={id} type={type} />
-			<ShowClusterSettings id={id} type={type} />
+			{type === "mariadb" ||
+			type === "mongo" ||
+			type === "mysql" ||
+			type === "postgres" ||
+			type === "redis" ? (
+				<ShowClusterSettings id={id} type={type} />
+			) : null}
 			<ShowVolumes id={id} type={type} />
 			<ShowResources id={id} type={type} />
 			<RebuildDatabase id={id} type={type} />

apps/dokploy/components/icons/data-tools-icons.tsx

@@ -156,6 +156,61 @@ export const RedisIcon = ({ className }: Props) => {
 	);
 };
 
+export const LibsqlIcon = ({ className }: Props) => {
+	return (
+		<svg
+			aria-label="libsql"
+			height="1em"
+			width="1em"
+			viewBox="0 0 217.2 217.2"
+			className={className}
+		>
+			<path
+				style={{ fill: "#72f5cf", strokeWidth: "0px" }}
+				d="M118,87.2c.7,0,1.3,0,1.9.3.4.1.8.3,1.2.5.2.1.4.2.6.3.4.3.7.5,1.1.9l5.2,5.2c2.7,2.7,2.7,7,0,9.7l-95.1,95.1c-1.3,1.3-3.1,2-4.8,2s-3.5-.7-4.8-2l-5.2-5.2c-2.7-2.7-2.7-7,0-9.7l85.1-85.1,10-10c.3-.3.7-.6,1.1-.9.2-.1.4-.2.6-.3.4-.2.8-.4,1.2-.5.6-.2,1.3-.3,1.9-.3M118,71.2c-2.2,0-4.4.3-6.5.9-1.4.4-2.8,1-4.1,1.7-.7.4-1.3.7-2,1.2-1.3.8-2.5,1.8-3.6,2.9l-10,10L6.7,173c-8.9,8.9-8.9,23.4,0,32.3l5.2,5.2c4.3,4.3,10.1,6.7,16.2,6.7s11.8-2.4,16.2-6.7l95.1-95.1c4.3-4.3,6.7-10.1,6.7-16.2s-2.4-11.8-6.7-16.2l-5.2-5.2c-1.1-1.1-2.3-2.1-3.6-2.9-.6-.4-1.3-.8-1.9-1.2-1.3-.7-2.7-1.3-4.1-1.7-2.1-.6-4.3-.9-6.5-.9h0Z"
+			/>
+			<g>
+				<path
+					style={{ fill: "#72f5cf", strokeWidth: "0px" }}
+					d="M119.4,16c.3,0,.6,0,.9,0l66.5,3.8c5.8.3,10.3,4.9,10.7,10.7l3.8,66.5c.3,4.4-1.4,8.7-4.5,11.8l-79.7,79.7c-3,3-6.9,4.5-11,4.5s-3.3-.3-4.9-.8l-49.9-16.5c-4.7-1.5-8.3-5.2-9.8-9.8l-16.5-49.9c-1.8-5.6-.4-11.7,3.8-15.8L108.4,20.5c2.9-2.9,6.9-4.5,11-4.5M119.4,0c-8.4,0-16.3,3.3-22.3,9.2L17.4,88.9c-8.5,8.5-11.4,20.8-7.6,32.1l16.5,49.9c3.1,9.4,10.6,16.9,20,20l49.9,16.5c3.2,1.1,6.5,1.6,9.9,1.6,8.4,0,16.3-3.3,22.3-9.2l79.7-79.7c6.3-6.3,9.7-15.1,9.2-24.1l-3.8-66.5c-.8-13.9-11.9-24.9-25.7-25.7L121.2,0c-.6,0-1.2,0-1.8,0h0Z"
+				/>
+				<path
+					style={{ fill: "#a8f7d9", strokeWidth: "0px" }}
+					d="M24.9,116.1l16.5,49.9c1.5,4.7,5.2,8.3,9.8,9.8l49.9,16.5c5.6,1.8,11.7.4,15.8-3.8l79.7-79.7c3.1-3.1,4.8-7.4,4.5-11.8l-3.8-66.5c-.3-5.8-4.9-10.3-10.7-10.7l-66.5-3.8c-4.4-.3-8.7,1.4-11.8,4.5L28.7,100.3c-4.1,4.1-5.6,10.3-3.8,15.8Z"
+				/>
+				<path
+					style={{ fill: "#141b1f", strokeWidth: "0px" }}
+					d="M119.4,16c.3,0,.6,0,.9,0l66.5,3.8c5.8.3,10.3,4.9,10.7,10.7l3.8,66.5c.3,4.4-1.4,8.7-4.5,11.8l-79.7,79.7c-3,3-6.9,4.5-11,4.5s-3.3-.3-4.9-.8l-49.9-16.5c-4.7-1.5-8.3-5.2-9.8-9.8l-16.5-49.9c-1.8-5.6-.4-11.7,3.8-15.8L108.4,20.5c2.9-2.9,6.9-4.5,11-4.5M119.4,6c-6.8,0-13.2,2.7-18,7.5L21.6,93.2c-6.8,6.8-9.2,16.8-6.2,26l16.5,49.9c2.5,7.6,8.6,13.7,16.2,16.2l49.9,16.5c2.6.9,5.3,1.3,8,1.3,6.8,0,13.2-2.7,18-7.5l79.7-79.7c5.1-5.1,7.8-12.2,7.4-19.5l-3.8-66.5c-.6-10.8-9.3-19.5-20.1-20.1l-66.5-3.8c-.5,0-1,0-1.5,0h0Z"
+				/>
+				<path
+					style={{ fill: "#141b1f", strokeWidth: "0px" }}
+					d="M136.7,173.7l6.9-6.9c-.2-.1-.4-.2-.6-.3l-27.6-9.1-6.9,6.9,28.3,9.3Z"
+				/>
+				<path
+					style={{ fill: "#141b1f", strokeWidth: "0px" }}
+					d="M166.5,143.9l6.9-6.9c-.2-.1-.4-.2-.6-.3l-27.6-9.1-6.9,6.9,28.3,9.3Z"
+				/>
+				<path
+					style={{ fill: "#141b1f", strokeWidth: "0px" }}
+					d="M43.5,80.5l6.9-6.9c.1.2.2.4.3.6l9.1,27.6-6.9,6.9-9.3-28.3Z"
+				/>
+				<path
+					style={{ fill: "#141b1f", strokeWidth: "0px" }}
+					d="M73.3,50.7l6.9-6.9c.1.2.2.4.3.6l9.1,27.6-6.9,6.9-9.3-28.3Z"
+				/>
+			</g>
+			<path
+				style={{ fill: "#79ac91", strokeWidth: "0px" }}
+				d="M130.6,101.5l-97.7,97.7c-2.7,2.7-7,2.7-9.7,0l-5.2-5.2c-2.7-2.7-2.7-7,0-9.7l97.7-97.7c1.5-1.5,3.4-2.4,5.5-2.6l7.9-.8c2.8-.3,5.1,2.1,4.9,4.9l-.8,7.9c-.2,2.1-1.1,4-2.6,5.5Z"
+			/>
+			<path
+				style={{ fill: "#141b1f", strokeWidth: "0px" }}
+				d="M129.5,83.3c2.6,0,4.7,2.2,4.4,4.9l-.8,7.9c-.2,2.1-1.1,4-2.6,5.5l-97.7,97.7c-1.3,1.3-3.1,2-4.8,2s-3.5-.7-4.8-2l-5.2-5.2c-2.7-2.7-2.7-7,0-9.7l97.7-97.7c1.5-1.5,3.4-2.4,5.5-2.6l7.9-.8c.1,0,.3,0,.4,0M129.5,73.3h0c-.5,0-.9,0-1.4,0l-7.9.8c-4.4.4-8.5,2.4-11.5,5.5L10.9,177.3c-6.6,6.6-6.6,17.3,0,23.8l5.2,5.2c3.2,3.2,7.4,4.9,11.9,4.9s8.7-1.8,11.9-4.9l97.7-97.7c3.1-3.1,5-7.2,5.5-11.5l.8-7.9c.4-4-.9-8.1-3.7-11.1-2.7-3-6.6-4.7-10.7-4.7h0Z"
+			/>
+		</svg>
+	);
+};
+
 export const GitlabIcon = ({ className }: Props) => {
 	return (
 		<svg

apps/dokploy/components/icons/notification-icons.tsx

@@ -88,6 +88,21 @@ export const DiscordIcon = ({ className }: Props) => {
 		</svg>
 	);
 };
+
+export const MattermostIcon = ({ className }: Props) => {
+	return (
+		<svg
+			fill="#0061ff"
+			viewBox="0 0 501 501"
+			xmlns="http://www.w3.org/2000/svg"
+			className={cn("size-8", className)}
+		>
+			<path d="M236 .7C137.7 7.5 54 68.2 18.2 158.5c-32 81-19.6 172.8 33 242.5 39.8 53 97.2 87 164.3 97 16.5 2.7 48 3.2 63.5 1.2 48.7-6.3 92.2-24.6 129-54.2 13-10.5 33-31.2 42.2-43.7 26.4-35.5 42.8-75.8 49-120.3 1.6-12.3 1.6-48.7 0-61-4-28.3-12-54.8-24.2-79.5-12.8-26-26.5-45.3-46.8-65.8C417.8 64 400.2 49 398.4 49c-.6 0-.4 10.5.3 26l1.3 26 7 8.7c19 23.7 32.8 53.5 38.2 83 2.5 14 3 43 1 55.8-4.5 27.8-15.2 54-31 76.5-8.6 12.2-28 31.6-40.2 40.2-24 17-50 27.6-80 33-10 1.8-49 1.8-59 0-43-7.7-78.8-26-107.2-54.8-29.3-29.7-46.5-64-52.4-104.4-2-14-1.5-42 1-55C90 121.4 132 72 192 49.7c8-3 18.4-5.8 29.5-8.2 1.7-.4 34.4-38 35.3-40.6.3-1-10.2-1-20.8-.4z" />
+			<path d="M322.2 24.6c-1.3.8-8.4 9.3-16 18.7-7.4 9.5-22.4 28-33.2 41.2-51 62.2-66 81.6-70.6 91-6 12-8.4 21-9 33-1.2 19.8 5 36 19 50C222 268 230 273 243 277.2c9 3 10.4 3.2 24 3.2 13.8 0 15 0 22.6-3 23.2-9 39-28.4 45-55.7 2-8.2 2-28.7.4-79.7l-2-72c-1-36.8-1.4-41.8-3-44-2-3-4.8-3.6-7.8-1.4z" />
+		</svg>
+	);
+};
+
 export const TeamsIcon = ({ className }: Props) => {
 	return (
 		<svg

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" />
+					<Logo className="size-10" logoUrl={logoUrl} />
-					Dokploy
+					{appName}
 				</Link>
 				<div className="relative z-20 mt-auto">
 					<blockquote className="space-y-2">
-						<p className="text-lg text-primary">
+						<p className="text-lg text-primary">{appDescription}</p>
-							&ldquo;The Open Source alternative to Netlify, Vercel,
-							Heroku.&rdquo;
-						</p>
 					</blockquote>
 				</div>
 			</div>

apps/dokploy/components/layouts/side.tsx

@@ -11,6 +11,7 @@ import {
 	ChevronRight,
 	ChevronsUpDown,
 	CircleHelp,
+	ClipboardList,
 	Clock,
 	CreditCard,
 	Database,
@@ -24,11 +25,13 @@ import {
 	LogIn,
 	type LucideIcon,
 	Package,
+	Palette,
 	PieChart,
 	Rocket,
 	Server,
 	ShieldCheck,
 	Star,
+	Tags,
 	Trash2,
 	User,
 	Users,
@@ -91,13 +94,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 +122,7 @@ type NavItem =
 			title: string;
 			icon: LucideIcon;
 			items: SingleNavItem[];
-			isEnabled?: (opts: {
+			isEnabled?: (opts: EnabledOpts) => boolean;
-				auth?: AuthQueryOutput;
-				isCloud: boolean;
-			}) => boolean;
 	  };
 
 // ExternalLink type
@@ -123,7 +131,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 +159,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
+			// Only enabled in non-cloud environments and if user has monitoring.read
-			isEnabled: ({ isCloud }) => !isCloud,
+			isEnabled: ({ isCloud, permissions }) =>
+				!isCloud && !!permissions?.monitoring.read,
 		},
 		{
 			isSingle: true,
@@ -166,64 +176,44 @@ const MENU: Menu = {
 			url: "/dashboard/schedules",
 			icon: Clock,
 			// Only enabled in non-cloud environments
-			isEnabled: ({ isCloud, auth }) =>
+			isEnabled: ({ isCloud, permissions }) =>
-				!isCloud && (auth?.role === "owner" || auth?.role === "admin"),
+				!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
+			// Only enabled for users with access to Traefik files in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!(
+				!!(permissions?.traefikFiles.read && !isCloud),
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToTraefikFiles) &&
-					!isCloud
-				),
 		},
 		{
 			isSingle: true,
 			title: "Docker",
 			url: "/dashboard/docker",
 			icon: BlocksIcon,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
+			// Only enabled for users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!(
+				!!(permissions?.docker.read && !isCloud),
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
 		},
 		{
 			isSingle: true,
 			title: "Swarm",
 			url: "/dashboard/swarm",
 			icon: PieChart,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
+			// Only enabled for users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!(
+				!!(permissions?.docker.read && !isCloud),
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
 		},
 		{
 			isSingle: true,
 			title: "Requests",
 			url: "/dashboard/requests",
 			icon: Forward,
-			// Only enabled for admins and users with access to Docker in non-cloud environments
+			// Only enabled for users with access to Docker in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!(
+				!!(permissions?.docker.read && !isCloud),
-					(auth?.role === "owner" ||
-						auth?.role === "admin" ||
-						auth?.canAccessToDocker) &&
-					!isCloud
-				),
 		},
 
 		// Legacy unused menu, adjusted to the new structure
@@ -290,8 +280,8 @@ const MENU: Menu = {
 			url: "/dashboard/settings/server",
 			icon: Activity,
 			// Only enabled for admins in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
+				!!(permissions?.organization.update && !isCloud),
 		},
 		{
 			isSingle: true,
@@ -304,70 +294,66 @@ const MENU: Menu = {
 			title: "Remote Servers",
 			url: "/dashboard/settings/servers",
 			icon: Server,
-			// Only enabled for admins
+			isEnabled: ({ permissions }) => !!permissions?.server.read,
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
 		},
 		{
 			isSingle: true,
 			title: "Users",
 			icon: Users,
 			url: "/dashboard/settings/users",
-			// Only enabled for admins
+			// Only enabled for users with member.read permission
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.member.read,
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+		},
+		{
+			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
+			// Only enabled for users with access to SSH keys
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.sshKeys.read,
-				!!(
-					auth?.role === "owner" ||
-					auth?.canAccessToSSHKeys ||
-					auth?.role === "admin"
-				),
 		},
 		{
 			title: "AI",
 			icon: BotIcon,
 			url: "/dashboard/settings/ai",
 			isSingle: true,
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.organization.update,
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+		},
+		{
+			isSingle: true,
+			title: "Tags",
+			url: "/dashboard/settings/tags",
+			icon: Tags,
+			isEnabled: ({ permissions }) => !!permissions?.tag.read,
 		},
 		{
 			isSingle: true,
 			title: "Git",
 			url: "/dashboard/settings/git-providers",
 			icon: GitBranch,
-			// Only enabled for admins and users with access to Git providers
+			// Only enabled for users with access to Git providers
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.gitProviders.read,
-				!!(
-					auth?.role === "owner" ||
-					auth?.canAccessToGitProviders ||
-					auth?.role === "admin"
-				),
 		},
 		{
 			isSingle: true,
 			title: "Registry",
 			url: "/dashboard/settings/registry",
 			icon: Package,
-			// Only enabled for admins
+			isEnabled: ({ permissions }) => !!permissions?.registry.read,
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
 		},
 		{
 			isSingle: true,
 			title: "S3 Destinations",
 			url: "/dashboard/settings/destinations",
 			icon: Database,
-			// Only enabled for admins
+			isEnabled: ({ permissions }) => !!permissions?.destination.read,
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
 		},
 
 		{
@@ -375,9 +361,7 @@ const MENU: Menu = {
 			title: "Certificates",
 			url: "/dashboard/settings/certificates",
 			icon: ShieldCheck,
-			// Only enabled for admins
+			isEnabled: ({ permissions }) => !!permissions?.certificate.read,
-			isEnabled: ({ auth }) =>
-				!!(auth?.role === "owner" || auth?.role === "admin"),
 		},
 		{
 			isSingle: true,
@@ -385,24 +369,23 @@ const MENU: Menu = {
 			url: "/dashboard/settings/cluster",
 			icon: Boxes,
 			// Only enabled for admins in non-cloud environments
-			isEnabled: ({ auth, isCloud }) =>
+			isEnabled: ({ permissions, isCloud }) =>
-				!!((auth?.role === "owner" || auth?.role === "admin") && !isCloud),
+				!!(permissions?.organization.update && !isCloud),
 		},
 		{
 			isSingle: true,
 			title: "Notifications",
 			url: "/dashboard/settings/notifications",
 			icon: Bell,
-			// Only enabled for admins
+			// Only enabled for users with access to notifications
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.notification.read,
-				!!(auth?.role === "owner" || auth?.role === "admin"),
 		},
 		{
 			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 +393,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 +402,15 @@ const MENU: Menu = {
 			url: "/dashboard/settings/sso",
 			icon: LogIn,
 			// Enabled for admins in both cloud and self-hosted (enterprise)
-			isEnabled: ({ auth }) =>
+			isEnabled: ({ permissions }) => !!permissions?.organization.update,
-				!!(auth?.role === "owner" || auth?.role === "admin"),
+		},
+		{
+			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 +434,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
+		home: filterEnabled(MENU.home),
-		// Calls the `isEnabled` function if it exists to determine if the item should be displayed
+		settings: filterEnabled(MENU.settings),
-		home: MENU.home.filter((item) =>
+		help: helpItems,
-			!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,
-					}),
-		),
 	};
 }
 
@@ -546,7 +542,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 +553,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 +579,7 @@ function SidebarLogo() {
 				<SidebarMenu
 					className={cn(
 						"flex gap-2",
-						state === "collapsed"
+						isCollapsed ? "flex-col" : "flex-row justify-between items-center",
-							? "flex-col"
-							: "flex-row justify-between items-center",
 					)}
 				>
 					{/* Organization Logo and Selector */}
@@ -592,17 +587,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 +609,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 +617,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 +626,7 @@ function SidebarLogo() {
 										</div>
 									</div>
 									<ChevronsUpDown
-										className={cn("ml-auto", state === "collapsed" && "hidden")}
+										className={cn("ml-auto", isCollapsed && "hidden")}
 									/>
 								</SidebarMenuButton>
 							</DropdownMenuTrigger>
@@ -780,7 +775,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 +783,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 +879,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 +893,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],
@@ -911,6 +916,7 @@ export default function Page({ children }: Props) {
 			onOpenChange={(open) => {
 				setDefaultOpen(open);
 
+				// biome-ignore lint/suspicious/noDocumentCookie: this sets the cookie to keep the sidebar state.
 				document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}`;
 			}}
 			style={
@@ -1133,7 +1139,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 +1147,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">
-								<div className="px-3 text-xs text-muted-foreground text-center group-data-[collapsible=icon]:hidden">
+								Version {dokployVersion}
-									Version {dokployVersion}
+							</div>
-								</div>
-								<div className="hidden text-xs text-muted-foreground text-center group-data-[collapsible=icon]:block">
-									{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" ||
+							{permissions?.traefikFiles.read && (
-								data?.role === "admin" ||
-								data?.canAccessToTraefikFiles) && (
 								<DropdownMenuItem
 									className="cursor-pointer"
 									onClick={() => {
@@ -106,9 +105,7 @@ export const UserNav = () => {
 									Traefik
 								</DropdownMenuItem>
 							)}
-							{(data?.role === "owner" ||
+							{permissions?.docker.read && (
-								data?.role === "admin" ||
-								data?.canAccessToDocker) && (
 								<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/advance-breadcrumb.tsx

@@ -0,0 +1,635 @@
+import type { ServiceType } from "@dokploy/server/db/schema";
+import {
+	Check,
+	ChevronDown,
+	ChevronRight,
+	CircuitBoard,
+	FolderInput,
+	GlobeIcon,
+	X,
+} from "lucide-react";
+import { useRouter } from "next/router";
+import { type ComponentType, useEffect, useMemo, useState } from "react";
+import {
+	LibsqlIcon,
+	MariadbIcon,
+	MongodbIcon,
+	MysqlIcon,
+	PostgresqlIcon,
+	RedisIcon,
+} from "@/components/icons/data-tools-icons";
+import { Button } from "@/components/ui/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { api, type RouterOutputs } from "@/utils/api";
+
+type ProjectItem = RouterOutputs["project"]["all"][number];
+type ProjectEnvironment = ProjectItem["environments"][number];
+type EnvironmentDetails = RouterOutputs["environment"]["one"];
+
+type ServiceItem = {
+	id: string;
+	name: string;
+	type: ServiceType;
+};
+
+type NamedService = {
+	name: string;
+};
+
+type EnvironmentServiceCollections = {
+	applications: (NamedService & { applicationId: string })[];
+	compose: (NamedService & { composeId: string })[];
+	postgres: (NamedService & { postgresId: string })[];
+	mysql: (NamedService & { mysqlId: string })[];
+	mariadb: (NamedService & { mariadbId: string })[];
+	redis: (NamedService & { redisId: string })[];
+	mongo: (NamedService & { mongoId: string })[];
+	libsql: (NamedService & { libsqlId: string })[];
+};
+
+type ServiceCollections = Pick<
+	ProjectEnvironment,
+	| "applications"
+	| "compose"
+	| "postgres"
+	| "mysql"
+	| "mariadb"
+	| "redis"
+	| "mongo"
+	| "libsql"
+>;
+
+const SERVICE_COLLECTION_KEYS = [
+	"applications",
+	"compose",
+	"postgres",
+	"mysql",
+	"mariadb",
+	"redis",
+	"mongo",
+	"libsql",
+] as const satisfies ReadonlyArray<keyof ServiceCollections>;
+
+const SERVICE_QUERY_KEYS = [
+	"applicationId",
+	"composeId",
+	"postgresId",
+	"mysqlId",
+	"mariadbId",
+	"redisId",
+	"mongoId",
+	"libsqlId",
+] as const;
+
+const SERVICE_ICONS: Record<
+	ServiceType,
+	ComponentType<{ className?: string }>
+> = {
+	application: GlobeIcon,
+	compose: CircuitBoard,
+	postgres: PostgresqlIcon,
+	mysql: MysqlIcon,
+	mariadb: MariadbIcon,
+	redis: RedisIcon,
+	mongo: MongodbIcon,
+	libsql: LibsqlIcon,
+};
+
+const getStringQueryParam = (value: string | string[] | undefined) =>
+	typeof value === "string" ? value : null;
+
+const includesSearch = (value: string | null | undefined, search: string) =>
+	value?.toLowerCase().includes(search.toLowerCase()) ?? false;
+
+const getServiceIcon = (type: ServiceType, className = "size-4") => {
+	const Icon = SERVICE_ICONS[type];
+	return <Icon className={className} />;
+};
+
+const countEnvironmentServices = (environment: ServiceCollections): number =>
+	SERVICE_COLLECTION_KEYS.reduce(
+		(total, key) => total + environment[key].length,
+		0,
+	);
+
+const mapServices = <T extends { name: string }>(
+	items: readonly T[],
+	getId: (item: T) => string,
+	type: ServiceType,
+): ServiceItem[] =>
+	items.map((item) => ({
+		id: getId(item),
+		name: item.name,
+		type,
+	}));
+
+const extractServicesFromEnvironment = (
+	environment: EnvironmentDetails | null | undefined,
+): ServiceItem[] => {
+	if (!environment) return [];
+
+	const servicesByType =
+		environment as unknown as EnvironmentServiceCollections;
+
+	return [
+		...mapServices(
+			servicesByType.applications,
+			(item) => item.applicationId,
+			"application",
+		),
+		...mapServices(servicesByType.compose, (item) => item.composeId, "compose"),
+		...mapServices(
+			servicesByType.postgres,
+			(item) => item.postgresId,
+			"postgres",
+		),
+		...mapServices(servicesByType.mysql, (item) => item.mysqlId, "mysql"),
+		...mapServices(servicesByType.mariadb, (item) => item.mariadbId, "mariadb"),
+		...mapServices(servicesByType.redis, (item) => item.redisId, "redis"),
+		...mapServices(servicesByType.mongo, (item) => item.mongoId, "mongo"),
+		...mapServices(servicesByType.libsql, (item) => item.libsqlId, "libsql"),
+	];
+};
+
+const getTargetEnvironmentId = (
+	project: ProjectItem,
+	selectedEnvironmentId?: string,
+) => {
+	if (selectedEnvironmentId) return selectedEnvironmentId;
+
+	const productionEnvironment = project.environments.find(
+		(environment) => environment.name === "production",
+	);
+
+	return (
+		productionEnvironment?.environmentId ??
+		project.environments[0]?.environmentId
+	);
+};
+
+export const AdvanceBreadcrumb = () => {
+	const router = useRouter();
+	const { query } = router;
+
+	// Read IDs from URL (dynamic route segments)
+	const projectId = getStringQueryParam(query.projectId);
+	const environmentId = getStringQueryParam(query.environmentId);
+	const serviceId =
+		SERVICE_QUERY_KEYS.map((key) => getStringQueryParam(query[key])).find(
+			(value): value is string => !!value,
+		) ?? null;
+
+	const [projectOpen, setProjectOpen] = useState(false);
+	const [serviceOpen, setServiceOpen] = useState(false);
+	const [environmentOpen, setEnvironmentOpen] = useState(false);
+	const [projectSearch, setProjectSearch] = useState("");
+	const [serviceSearch, setServiceSearch] = useState("");
+	const [environmentSearch, setEnvironmentSearch] = useState("");
+	const [expandedProjectId, setExpandedProjectId] = useState<string | null>(
+		null,
+	);
+
+	// Fetch all projects
+	const { data: allProjects } = api.project.all.useQuery();
+
+	// Fetch current project data
+	const { data: currentProject } = api.project.one.useQuery(
+		{ projectId: projectId ?? "" },
+		{ enabled: !!projectId },
+	);
+
+	// Fetch current environment
+	const { data: currentEnvironment } = api.environment.one.useQuery(
+		{ environmentId: environmentId ?? "" },
+		{ enabled: !!environmentId },
+	);
+
+	// Fetch environments for current project
+	const { data: projectEnvironments } = api.environment.byProjectId.useQuery(
+		{ projectId: projectId ?? "" },
+		{ enabled: !!projectId },
+	);
+
+	// Close dropdowns on escape key
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") {
+				setProjectOpen(false);
+				setServiceOpen(false);
+				setEnvironmentOpen(false);
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, []);
+
+	const services = useMemo(
+		() => extractServicesFromEnvironment(currentEnvironment),
+		[currentEnvironment],
+	);
+
+	const currentService = useMemo(
+		() => services.find((service) => service.id === serviceId),
+		[serviceId, services],
+	);
+
+	// Navigate to project's default environment
+	const handleProjectSelect = (
+		selectedProjectId: string,
+		selectedEnvironmentId?: string,
+	) => {
+		const project = allProjects?.find((p) => p.projectId === selectedProjectId);
+		if (project) {
+			const targetEnvironmentId = getTargetEnvironmentId(
+				project,
+				selectedEnvironmentId,
+			);
+
+			if (targetEnvironmentId) {
+				router.push(
+					`/dashboard/project/${selectedProjectId}/environment/${targetEnvironmentId}`,
+				);
+			}
+		}
+		setProjectOpen(false);
+		setExpandedProjectId(null);
+	};
+
+	// Navigate to environment
+	const handleEnvironmentSelect = (envId: string) => {
+		router.push(`/dashboard/project/${projectId}/environment/${envId}`);
+		setEnvironmentOpen(false);
+	};
+
+	// Navigate to service
+	const handleServiceSelect = (service: ServiceItem) => {
+		if (!environmentId) return;
+
+		router.push(
+			`/dashboard/project/${projectId}/environment/${environmentId}/services/${service.type}/${service.id}`,
+		);
+		setServiceOpen(false);
+	};
+
+	const filteredProjects = useMemo(
+		() =>
+			(allProjects ?? []).filter(
+				(project) =>
+					includesSearch(project.name, projectSearch) ||
+					includesSearch(project.description, projectSearch),
+			),
+		[allProjects, projectSearch],
+	);
+
+	const filteredServices = useMemo(
+		() =>
+			services.filter((service) => includesSearch(service.name, serviceSearch)),
+		[serviceSearch, services],
+	);
+
+	const filteredEnvironments = useMemo(
+		() =>
+			(projectEnvironments ?? []).filter((environment) =>
+				includesSearch(environment.name, environmentSearch),
+			),
+		[environmentSearch, projectEnvironments],
+	);
+
+	// If we're just on the projects page, show simple breadcrumb
+	if (!projectId) {
+		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 gap-2">
+					<SidebarTrigger className="-ml-1" />
+					<Separator orientation="vertical" className="mr-2 h-4" />
+					<div className="flex items-center gap-2">
+						<FolderInput className="size-4 text-muted-foreground" />
+						<span className="font-medium">Projects</span>
+					</div>
+				</div>
+			</header>
+		);
+	}
+
+	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 gap-2">
+				<SidebarTrigger className="-ml-1" />
+				<Separator orientation="vertical" className="mr-2 h-4" />
+
+				<div className="flex items-center">
+					{/* Project Selector */}
+					<Popover open={projectOpen} onOpenChange={setProjectOpen}>
+						<PopoverTrigger asChild>
+							<Button
+								variant="ghost"
+								aria-expanded={projectOpen}
+								className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
+							>
+								<FolderInput className="size-4 text-muted-foreground" />
+								<span className="font-medium max-w-[150px] truncate">
+									{currentProject?.name || "Select Project"}
+								</span>
+								<ChevronDown className="size-4 text-muted-foreground" />
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent
+							className="w-[380px] p-0"
+							align="start"
+							sideOffset={8}
+						>
+							<Command shouldFilter={false}>
+								<div className="relative">
+									<CommandInput
+										placeholder="Find Project..."
+										value={projectSearch}
+										onValueChange={setProjectSearch}
+										className="w-full focus-visible:ring-0"
+									/>
+									<kbd className="pointer-events-none h-5 absolute right-2 top-1/2 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 flex">
+										Esc
+									</kbd>
+								</div>
+								<CommandList>
+									<CommandEmpty>No projects found.</CommandEmpty>
+									<CommandGroup>
+										<ScrollArea className="h-[300px]">
+											{filteredProjects.map((project) => {
+												const totalServices = project.environments.reduce(
+													(total, env) => total + countEnvironmentServices(env),
+													0,
+												);
+												const isSelected = project.projectId === projectId;
+												const isExpanded =
+													expandedProjectId === project.projectId;
+
+												return (
+													<div key={project.projectId}>
+														<CommandItem
+															value={project.projectId}
+															onSelect={() => {
+																if (project.environments.length > 1) {
+																	setExpandedProjectId(
+																		isExpanded ? null : project.projectId,
+																	);
+																} else {
+																	handleProjectSelect(project.projectId);
+																}
+															}}
+															className="flex items-center justify-between py-3 px-2 cursor-pointer"
+														>
+															<div className="flex items-center gap-3">
+																<div className="flex items-center justify-center size-8 rounded-md bg-muted text-xs font-semibold uppercase">
+																	{project.name.slice(0, 2)}
+																</div>
+																<div className="flex flex-col">
+																	<span className="font-medium">
+																		{project.name}
+																	</span>
+																	<span className="text-muted-foreground">
+																		{project.environments.length} env
+																		{project.environments.length !== 1
+																			? "s"
+																			: ""}{" "}
+																		· {totalServices} service
+																		{totalServices !== 1 ? "s" : ""}
+																	</span>
+																</div>
+															</div>
+															<div className="flex items-center gap-2">
+																{isSelected && (
+																	<Check className="size-4 text-primary" />
+																)}
+																{project.environments.length > 1 && (
+																	<ChevronRight
+																		className={`size-4 text-muted-foreground transition-transform ${isExpanded ? "rotate-90" : ""}`}
+																	/>
+																)}
+															</div>
+														</CommandItem>
+
+														{/* Expanded environments */}
+														{isExpanded && (
+															<div className="ml-11 border-l pl-3 py-1 space-y-1">
+																{project.environments.map((env) => {
+																	const envServices =
+																		countEnvironmentServices(env);
+																	const isEnvSelected =
+																		env.environmentId === environmentId;
+
+																	return (
+																		<CommandItem
+																			key={env.environmentId}
+																			value={env.environmentId}
+																			onSelect={() =>
+																				handleProjectSelect(
+																					project.projectId,
+																					env.environmentId,
+																				)
+																			}
+																			className="flex items-center justify-between py-2 px-2 cursor-pointer text-sm"
+																		>
+																			<div className="flex items-center gap-2">
+																				<p className="text-xs">{env.name}</p>
+																				<span className="text-xs text-muted-foreground">
+																					{envServices} service
+																					{envServices !== 1 ? "s" : ""}
+																				</span>
+																			</div>
+																			{isEnvSelected && (
+																				<Check className="size-3 text-primary" />
+																			)}
+																		</CommandItem>
+																	);
+																})}
+															</div>
+														)}
+													</div>
+												);
+											})}
+										</ScrollArea>
+									</CommandGroup>
+								</CommandList>
+							</Command>
+						</PopoverContent>
+					</Popover>
+
+					{/* Environment Selector */}
+					{projectEnvironments && projectEnvironments.length > 1 && (
+						<Popover open={environmentOpen} onOpenChange={setEnvironmentOpen}>
+							<PopoverTrigger asChild>
+								<Button
+									variant="ghost"
+									aria-expanded={environmentOpen}
+									className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
+								>
+									<span className="font-medium max-w-[150px] truncate">
+										{currentEnvironment?.name || "production"}
+									</span>
+									<ChevronDown className="size-4 text-muted-foreground" />
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent
+								className="w-[350px] p-0"
+								align="start"
+								sideOffset={8}
+							>
+								<Command shouldFilter={false}>
+									<div className="relative">
+										<CommandInput
+											placeholder="Find Environment..."
+											value={environmentSearch}
+											onValueChange={setEnvironmentSearch}
+											className="w-full focus-visible:ring-0"
+										/>
+										<kbd className="pointer-events-none h-5 absolute right-2 top-1/2 -translate-y-1/2 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 flex">
+											Esc
+										</kbd>
+									</div>
+									<CommandList>
+										<CommandEmpty>No environments found.</CommandEmpty>
+										<CommandGroup>
+											<ScrollArea className="h-[300px]">
+												{filteredEnvironments.map((env) => {
+													const isSelected =
+														env.environmentId === environmentId;
+													return (
+														<CommandItem
+															key={env.environmentId}
+															value={env.environmentId}
+															onSelect={() =>
+																handleEnvironmentSelect(env.environmentId)
+															}
+															className="flex items-center justify-between py-2 cursor-pointer"
+														>
+															<span className="font-medium">{env.name}</span>
+															{isSelected && (
+																<Check className="size-4 text-primary" />
+															)}
+														</CommandItem>
+													);
+												})}
+											</ScrollArea>
+										</CommandGroup>
+									</CommandList>
+								</Command>
+							</PopoverContent>
+						</Popover>
+					)}
+
+					{projectEnvironments && projectEnvironments.length === 1 && (
+						<p className="text-sm font-normal ml-1">
+							{currentEnvironment?.name || "production"}
+						</p>
+					)}
+
+					{/* Service Selector - only show when viewing a service */}
+					{serviceId && currentService && (
+						<>
+							<Separator orientation="vertical" className="mx-2 h-6" />
+
+							<Popover open={serviceOpen} onOpenChange={setServiceOpen}>
+								<PopoverTrigger asChild>
+									<Button
+										variant="ghost"
+										aria-expanded={serviceOpen}
+										className="h-auto px-2 py-1.5 hover:bg-accent gap-2"
+									>
+										{getServiceIcon(currentService.type)}
+										<span className="font-medium max-w-[150px] truncate">
+											{currentService.name}
+										</span>
+										<ChevronDown className="size-4 text-muted-foreground" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-[350px] p-0"
+									align="start"
+									sideOffset={8}
+								>
+									<Command shouldFilter={false}>
+										<div className="relative">
+											<CommandInput
+												placeholder="Find Service..."
+												value={serviceSearch}
+												onValueChange={setServiceSearch}
+												className="w-full focus-visible:ring-0"
+											/>
+											<kbd className="pointer-events-none h-5 select-none absolute right-2 top-1/2 -translate-y-1/2 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 flex">
+												Esc
+											</kbd>
+										</div>
+										<CommandList>
+											<CommandEmpty>No services found.</CommandEmpty>
+											<CommandGroup>
+												<ScrollArea className="h-[300px]">
+													{filteredServices.map((service) => {
+														const isSelected = service.id === serviceId;
+														return (
+															<CommandItem
+																key={service.id}
+																value={service.id}
+																onSelect={() => handleServiceSelect(service)}
+																className="flex items-center justify-between py-2 cursor-pointer"
+															>
+																<div className="flex items-center gap-3">
+																	<div className="flex items-center justify-center size-8 rounded-md bg-muted">
+																		{getServiceIcon(service.type)}
+																	</div>
+																	<div className="flex flex-col">
+																		<span className="font-medium">
+																			{service.name}
+																		</span>
+																		<span className="text-xs text-muted-foreground capitalize">
+																			{service.type}
+																		</span>
+																	</div>
+																</div>
+																{isSelected && (
+																	<Check className="size-4 text-primary" />
+																)}
+															</CommandItem>
+														);
+													})}
+												</ScrollArea>
+											</CommandGroup>
+										</CommandList>
+									</Command>
+								</PopoverContent>
+							</Popover>
+
+							{/* Close button to go back to environment */}
+							<Button
+								variant="ghost"
+								size="icon"
+								className="size-7 ml-1"
+								onClick={() => {
+									router.push(
+										`/dashboard/project/${projectId}/environment/${environmentId}`,
+									);
+								}}
+							>
+								<X className="size-4 text-muted-foreground" />
+							</Button>
+						</>
+					)}
+				</div>
+			</div>
+		</header>
+	);
+};