docs: Dosu updates for PR #3868

Feat/show org deployment level

apps/api/.env.example

@@ -1,2 +1,11 @@
 LEMON_SQUEEZY_API_KEY=""
-LEMON_SQUEEZY_STORE_ID=""
+LEMON_SQUEEZY_STORE_ID=""
+
+# Inngest (for GET /jobs - list deployment queue). Self-hosted example:
+# INNGEST_BASE_URL="http://localhost:8288"
+# Production: INNGEST_BASE_URL="https://dev-inngest.dokploy.com"
+# INNGEST_SIGNING_KEY="your-signing-key"
+# Optional: only events after this RFC3339 timestamp. If unset, no date filter is applied.
+# INNGEST_EVENTS_RECEIVED_AFTER="2024-01-01T00:00:00Z"
+# Max events to fetch when listing jobs (paginates with cursor). Default 100, max 10000.
+# INNGEST_JOBS_MAX_EVENTS=100

apps/api/README.md

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

apps/api/src/index.ts

@@ -10,6 +10,7 @@ import {
 	type DeployJob,
 	deployJobSchema,
 } from "./schema.js";
+import { fetchDeploymentJobs } from "./service.js";
 import { deploy } from "./utils.js";
 
 const app = new Hono();
@@ -118,7 +119,6 @@ app.post("/deploy", zValidator("json", deployJobSchema), async (c) => {
 			200,
 		);
 	} catch (error) {
-		console.log("error", error);
 		logger.error("Failed to send deployment event", error);
 		return c.json(
 			{
@@ -176,6 +176,29 @@ app.get("/health", async (c) => {
 	return c.json({ status: "ok" });
 });
 
+// List deployment jobs (Inngest runs) for a server - same shape as BullMQ queue for the UI
+app.get("/jobs", async (c) => {
+	const serverId = c.req.query("serverId");
+	if (!serverId) {
+		return c.json({ message: "serverId is required" }, 400);
+	}
+
+	try {
+		const rows = await fetchDeploymentJobs(serverId);
+		return c.json(rows);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		if (message.includes("INNGEST_BASE_URL")) {
+			return c.json(
+				{ message: "INNGEST_BASE_URL is required to list deployment jobs" },
+				503,
+			);
+		}
+		logger.error("Failed to fetch jobs from Inngest", { serverId, error });
+		return c.json([], 200);
+	}
+});
+
 // Serve Inngest functions endpoint
 app.on(
 	["GET", "POST", "PUT"],

apps/api/src/service.ts

@@ -0,0 +1,239 @@
+import { logger } from "./logger";
+
+const baseUrl = process.env.INNGEST_BASE_URL ?? "";
+const signingKey = process.env.INNGEST_SIGNING_KEY ?? "";
+
+const DEFAULT_MAX_EVENTS = 500;
+const MAX_EVENTS = DEFAULT_MAX_EVENTS;
+
+/** Event shape from GET /v1/events (https://api.inngest.com/v1/events) */
+type InngestEventRow = {
+	internal_id?: string;
+	accountID?: string;
+	environmentID?: string;
+	source?: string;
+	sourceID?: string | null;
+	/** RFC3339 timestamp – API uses receivedAt, dev server may use received_at */
+	receivedAt?: string;
+	received_at?: string;
+	id: string;
+	name: string;
+	data: Record<string, unknown>;
+	user?: unknown;
+	ts: number;
+	v?: string | null;
+	metadata?: {
+		fetchedAt: string;
+		cachedUntil: string | null;
+	};
+};
+
+/** Run shape from GET /v1/events/{eventId}/runs – the actual job execution */
+type InngestRun = {
+	run_id: string;
+	event_id: string;
+	status: string; // "Running" | "Completed" | "Failed" | "Cancelled" | "Queued"?
+	run_started_at?: string;
+	ended_at?: string | null;
+	output?: unknown;
+	// dev server / API may use different casing
+	run_started_at_ms?: number;
+};
+
+function getEventReceivedAt(ev: InngestEventRow): string | undefined {
+	return ev.receivedAt ?? ev.received_at;
+}
+
+/** Map Inngest run status to BullMQ-style state for the UI */
+function runStatusToState(
+	status: string,
+): "pending" | "active" | "completed" | "failed" | "cancelled" {
+	const s = status.toLowerCase();
+	if (s === "running") return "active";
+	if (s === "completed") return "completed";
+	if (s === "failed") return "failed";
+	if (s === "cancelled") return "cancelled";
+	if (s === "queued") return "pending";
+	return "pending";
+}
+
+export const fetchInngestEvents = async () => {
+	const maxEvents = MAX_EVENTS;
+	const all: InngestEventRow[] = [];
+	let cursor: string | undefined;
+
+	do {
+		const params = new URLSearchParams({ limit: "100" });
+		if (cursor) {
+			params.set("cursor", cursor);
+		}
+
+		const res = await fetch(`${baseUrl}/v1/events?${params}`, {
+			headers: {
+				Authorization: `Bearer ${signingKey}`,
+				"Content-Type": "application/json",
+			},
+		});
+
+		if (!res.ok) {
+			logger.warn("Inngest API error", {
+				status: res.status,
+				body: await res.text(),
+			});
+			break;
+		}
+
+		const body = (await res.json()) as {
+			data?: InngestEventRow[];
+			cursor?: string;
+			nextCursor?: string;
+		};
+		const data = Array.isArray(body.data) ? body.data : [];
+		all.push(...data);
+
+		// Next page: API may return cursor/nextCursor, or use last event's internal_id (per API docs)
+		const nextCursor =
+			body.cursor ?? body.nextCursor ?? data[data.length - 1]?.internal_id;
+		const hasMore = data.length === 100 && nextCursor && all.length < maxEvents;
+		cursor = hasMore ? nextCursor : undefined;
+	} while (cursor);
+
+	return all.slice(0, maxEvents);
+};
+
+/** Fetch runs for a single event (GET /v1/events/{eventId}/runs) – runs are the actual jobs */
+export const fetchInngestRunsForEvent = async (
+	eventId: string,
+): Promise<InngestRun[]> => {
+	const res = await fetch(
+		`${baseUrl}/v1/events/${encodeURIComponent(eventId)}/runs`,
+		{
+			headers: {
+				Authorization: `Bearer ${signingKey}`,
+				"Content-Type": "application/json",
+			},
+		},
+	);
+	if (!res.ok) {
+		logger.warn("Inngest runs API error", {
+			eventId,
+			status: res.status,
+			body: await res.text(),
+		});
+		return [];
+	}
+	const body = (await res.json()) as { data?: InngestRun[] };
+	return Array.isArray(body.data) ? body.data : [];
+};
+
+/** One row for the queue UI (BullMQ-compatible shape) */
+export type DeploymentJobRow = {
+	id: string;
+	name: string;
+	data: Record<string, unknown>;
+	timestamp: number;
+	processedOn?: number;
+	finishedOn?: number;
+	failedReason?: string;
+	state: string;
+};
+
+/** Build queue rows from events + their runs (one row per run, or pending if no run yet) */
+function buildDeploymentRowsFromRuns(
+	events: InngestEventRow[],
+	runsByEventId: Map<string, InngestRun[]>,
+	serverId: string,
+): DeploymentJobRow[] {
+	const requested = events.filter(
+		(e) =>
+			e.name === "deployment/requested" &&
+			(e.data as Record<string, unknown>)?.serverId === serverId,
+	);
+	const rows: DeploymentJobRow[] = [];
+
+	for (const ev of requested) {
+		const data = (ev.data ?? {}) as Record<string, unknown>;
+		const runs = runsByEventId.get(ev.id) ?? [];
+
+		if (runs.length === 0) {
+			// Queued: event received but no run yet
+			rows.push({
+				id: ev.id,
+				name: ev.name,
+				data,
+				timestamp: ev.ts,
+				processedOn: ev.ts,
+				finishedOn: undefined,
+				failedReason: undefined,
+				state: "pending",
+			});
+			continue;
+		}
+
+		for (const run of runs) {
+			const state = runStatusToState(run.status);
+			const runStartedMs =
+				run.run_started_at_ms ??
+				(run.run_started_at ? new Date(run.run_started_at).getTime() : ev.ts);
+			const endedMs = run.ended_at
+				? new Date(run.ended_at).getTime()
+				: undefined;
+			const failedReason =
+				state === "failed" &&
+				run.output &&
+				typeof run.output === "object" &&
+				"error" in run.output
+					? String((run.output as { error?: unknown }).error)
+					: undefined;
+
+			rows.push({
+				id: run.run_id,
+				name: ev.name,
+				data,
+				timestamp: runStartedMs,
+				processedOn: runStartedMs,
+				finishedOn:
+					state === "completed" || state === "failed" || state === "cancelled"
+						? endedMs
+						: undefined,
+				failedReason,
+				state,
+			});
+		}
+	}
+
+	return rows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+}
+
+/** Fetch deployment jobs for a server: events → runs → rows (correct model: runs = jobs) */
+export const fetchDeploymentJobs = async (
+	serverId: string,
+): Promise<DeploymentJobRow[]> => {
+	if (!signingKey) {
+		logger.warn("INNGEST_SIGNING_KEY not set, returning empty jobs list");
+		return [];
+	}
+	if (!baseUrl) {
+		throw new Error("INNGEST_BASE_URL is required to list deployment jobs");
+	}
+
+	const events = await fetchInngestEvents();
+
+	const requestedForServer = events.filter(
+		(e) =>
+			e.name === "deployment/requested" &&
+			(e.data as Record<string, unknown>)?.serverId === serverId,
+	);
+	// Limit to avoid too many run fetches
+	const toFetch = requestedForServer.slice(0, 50);
+	const runsByEventId = new Map<string, InngestRun[]>();
+
+	await Promise.all(
+		toFetch.map(async (ev) => {
+			const runs = await fetchInngestRunsForEvent(ev.id);
+			runsByEventId.set(ev.id, runs);
+		}),
+	);
+
+	return buildDeploymentRowsFromRuns(toFetch, runsByEventId, serverId);
+};

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

@@ -0,0 +1,613 @@
+"use client";
+
+import {
+	type ColumnFiltersState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	type PaginationState,
+	type SortingState,
+	useReactTable,
+} from "@tanstack/react-table";
+import type { inferRouterOutputs } from "@trpc/server";
+import {
+	ArrowUpDown,
+	Boxes,
+	ChevronLeft,
+	ChevronRight,
+	ExternalLink,
+	Loader2,
+	Rocket,
+	Server,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type DeploymentRow =
+	inferRouterOutputs<AppRouter>["deployment"]["allCentralized"][number];
+
+const statusVariants: Record<
+	string,
+	| "default"
+	| "secondary"
+	| "destructive"
+	| "outline"
+	| "yellow"
+	| "green"
+	| "red"
+> = {
+	running: "yellow",
+	done: "green",
+	error: "red",
+	cancelled: "outline",
+};
+
+function getServiceInfo(d: DeploymentRow) {
+	const app = d.application;
+	const comp = d.compose;
+	if (app?.environment?.project && app.environment) {
+		return {
+			type: "Application" as const,
+			name: app.name,
+			projectId: app.environment.project.projectId,
+			environmentId: app.environment.environmentId,
+			projectName: app.environment.project.name,
+			environmentName: app.environment.name,
+			serviceId: app.applicationId,
+			href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
+		};
+	}
+	if (comp?.environment?.project && comp.environment) {
+		return {
+			type: "Compose" as const,
+			name: comp.name,
+			projectId: comp.environment.project.projectId,
+			environmentId: comp.environment.environmentId,
+			projectName: comp.environment.project.name,
+			environmentName: comp.environment.name,
+			serviceId: comp.composeId,
+			href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
+		};
+	}
+	return null;
+}
+
+export function ShowDeploymentsTable() {
+	const [sorting, setSorting] = useState<SortingState>([
+		{ id: "createdAt", desc: true },
+	]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [globalFilter, setGlobalFilter] = useState("");
+	const [statusFilter, setStatusFilter] = useState<string>("all");
+	const [typeFilter, setTypeFilter] = useState<string>("all");
+	const [pagination, setPagination] = useState<PaginationState>({
+		pageIndex: 0,
+		pageSize: 50,
+	});
+
+	const { data: deploymentsList, isLoading } =
+		api.deployment.allCentralized.useQuery(undefined, {
+			refetchInterval: 5000,
+		});
+
+	const filteredData = useMemo(() => {
+		if (!deploymentsList) return [];
+		let list = deploymentsList;
+		if (statusFilter !== "all") {
+			list = list.filter((d) => d.status === statusFilter);
+		}
+		if (typeFilter === "application") {
+			list = list.filter((d) => d.applicationId != null);
+		} else if (typeFilter === "compose") {
+			list = list.filter((d) => d.composeId != null);
+		}
+		if (globalFilter.trim()) {
+			const q = globalFilter.toLowerCase();
+			list = list.filter((d) => {
+				const info = getServiceInfo(d);
+				const serverName =
+					d.server?.name ??
+					d.application?.server?.name ??
+					d.compose?.server?.name ??
+					"";
+				const buildServerName =
+					d.buildServer?.name ?? d.application?.buildServer?.name ?? "";
+				if (!info) return false;
+				return (
+					info.name.toLowerCase().includes(q) ||
+					info.projectName.toLowerCase().includes(q) ||
+					info.environmentName.toLowerCase().includes(q) ||
+					(d.title?.toLowerCase().includes(q) ?? false) ||
+					serverName.toLowerCase().includes(q) ||
+					buildServerName.toLowerCase().includes(q)
+				);
+			});
+		}
+		return list;
+	}, [deploymentsList, statusFilter, typeFilter, globalFilter]);
+
+	const columns = useMemo(
+		() => [
+			{
+				id: "serviceName",
+				accessorFn: (row: DeploymentRow) => getServiceInfo(row)?.name ?? "",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Service
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const info = getServiceInfo(row.original);
+					if (!info) return <span className="text-muted-foreground">—</span>;
+					return (
+						<div className="flex items-center gap-2">
+							{info.type === "Application" ? (
+								<Rocket className="size-4 text-muted-foreground shrink-0" />
+							) : (
+								<Boxes className="size-4 text-muted-foreground shrink-0" />
+							)}
+							<div className="flex flex-col min-w-0">
+								<span className="font-medium truncate">{info.name}</span>
+								<Badge variant="outline" className="w-fit text-[10px]">
+									{info.type}
+								</Badge>
+							</div>
+						</div>
+					);
+				},
+			},
+			{
+				id: "projectName",
+				accessorFn: (row: DeploymentRow) =>
+					getServiceInfo(row)?.projectName ?? "",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Project
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const info = getServiceInfo(row.original);
+					return (
+						<span className="text-muted-foreground">
+							{info?.projectName ?? "—"}
+						</span>
+					);
+				},
+			},
+			{
+				id: "environmentName",
+				accessorFn: (row: DeploymentRow) =>
+					getServiceInfo(row)?.environmentName ?? "",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Environment
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const info = getServiceInfo(row.original);
+					return (
+						<span className="text-muted-foreground">
+							{info?.environmentName ?? "—"}
+						</span>
+					);
+				},
+			},
+			{
+				id: "serverName",
+				accessorFn: (row: DeploymentRow) =>
+					row.server?.name ??
+					row.application?.server?.name ??
+					row.compose?.server?.name ??
+					"",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Server
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const d = row.original;
+					const serverName =
+						d.server?.name ??
+						d.application?.server?.name ??
+						d.compose?.server?.name ??
+						null;
+					const serverType =
+						d.server?.serverType ??
+						d.application?.server?.serverType ??
+						d.compose?.server?.serverType ??
+						null;
+					const buildServerName =
+						d.buildServer?.name ?? d.application?.buildServer?.name ?? null;
+					const buildServerType =
+						d.buildServer?.serverType ??
+						d.application?.buildServer?.serverType ??
+						null;
+					const showBuild =
+						buildServerName != null && buildServerName !== serverName;
+					if (!serverName && !showBuild) {
+						return <span className="text-muted-foreground">—</span>;
+					}
+					return (
+						<div className="flex flex-col gap-0.5 text-sm">
+							{serverName && (
+								<div className="flex items-center gap-1.5 flex-wrap">
+									<Server className="size-3.5 text-muted-foreground shrink-0" />
+									<span className="truncate">{serverName}</span>
+									{serverType && (
+										<Badge
+											variant="outline"
+											className="text-[10px] font-normal"
+										>
+											{serverType}
+										</Badge>
+									)}
+								</div>
+							)}
+							{showBuild && buildServerName && (
+								<div className="flex items-center gap-1.5 text-muted-foreground flex-wrap">
+									<span className="text-[10px]">Build:</span>
+									<span className="truncate text-xs">{buildServerName}</span>
+									{buildServerType && (
+										<Badge
+											variant="outline"
+											className="text-[10px] font-normal"
+										>
+											{buildServerType}
+										</Badge>
+									)}
+								</div>
+							)}
+						</div>
+					);
+				},
+			},
+			{
+				accessorKey: "title",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Title
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => (
+					<span className="text-sm truncate max-w-[200px] block">
+						{row.original.title || "—"}
+					</span>
+				),
+			},
+			{
+				accessorKey: "status",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Status
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const status = row.original.status ?? "running";
+					return (
+						<Badge variant={statusVariants[status] ?? "secondary"}>
+							{status}
+						</Badge>
+					);
+				},
+			},
+			{
+				accessorKey: "createdAt",
+				header: ({
+					column,
+				}: {
+					column: {
+						getIsSorted: () => false | "asc" | "desc";
+						toggleSorting: (asc: boolean) => void;
+					};
+				}) => (
+					<Button
+						variant="ghost"
+						className="-ml-3 h-8"
+						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+					>
+						Created
+						<ArrowUpDown className="ml-2 size-4" />
+					</Button>
+				),
+				cell: ({ row }: { row: { original: DeploymentRow } }) => (
+					<span className="text-muted-foreground text-sm whitespace-nowrap">
+						{row.original.createdAt
+							? new Date(row.original.createdAt).toLocaleString()
+							: "—"}
+					</span>
+				),
+			},
+			{
+				header: "",
+				id: "actions",
+				enableSorting: false,
+				cell: ({ row }: { row: { original: DeploymentRow } }) => {
+					const info = getServiceInfo(row.original);
+					if (!info) return null;
+					return (
+						<Button variant="ghost" size="sm" asChild>
+							<Link href={info.href} className="gap-1">
+								<ExternalLink className="size-4" />
+								Open
+							</Link>
+						</Button>
+					);
+				},
+			},
+		],
+		[],
+	);
+
+	const table = useReactTable({
+		data: filteredData,
+		columns,
+		state: {
+			sorting,
+			columnFilters,
+			globalFilter,
+			pagination,
+		},
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onGlobalFilterChange: setGlobalFilter,
+		onPaginationChange: setPagination,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+	});
+
+	return (
+		<div className="space-y-2">
+			<div className="flex flex-wrap items-center gap-2">
+				<Input
+					placeholder="Search by name, project, environment, server..."
+					value={globalFilter}
+					onChange={(e) => setGlobalFilter(e.target.value)}
+					className="max-w-xs"
+				/>
+				<Select value={statusFilter} onValueChange={setStatusFilter}>
+					<SelectTrigger className="w-[140px]">
+						<SelectValue placeholder="Status" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">All statuses</SelectItem>
+						<SelectItem value="running">Running</SelectItem>
+						<SelectItem value="done">Done</SelectItem>
+						<SelectItem value="error">Error</SelectItem>
+						<SelectItem value="cancelled">Cancelled</SelectItem>
+					</SelectContent>
+				</Select>
+				<Select value={typeFilter} onValueChange={setTypeFilter}>
+					<SelectTrigger className="w-[140px]">
+						<SelectValue placeholder="Type" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="all">All types</SelectItem>
+						<SelectItem value="application">Application</SelectItem>
+						<SelectItem value="compose">Compose</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+			<div className="px-0">
+				{isLoading ? (
+					<div className="flex gap-4 w-full items-center justify-center min-h-[45vh] text-muted-foreground">
+						<Loader2 className="size-4 animate-spin" />
+						<span>Loading deployments...</span>
+					</div>
+				) : (
+					<>
+						<div className="rounded-md border overflow-x-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>
+									{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=" text-center"
+											>
+												<div className="flex flex-col min-h-[45vh] items-center justify-center gap-2 text-muted-foreground">
+													<Rocket className="size-8" />
+													<p className="font-medium">No deployments found</p>
+													<p className="text-sm">
+														Deployments from applications and compose will
+														appear here.
+													</p>
+												</div>
+											</TableCell>
+										</TableRow>
+									)}
+								</TableBody>
+							</Table>
+						</div>
+						<div className="flex flex-col gap-4 px-4 py-4 border-t sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex items-center gap-2 flex-wrap">
+								<span className="text-sm text-muted-foreground whitespace-nowrap">
+									Rows per page
+								</span>
+								<Select
+									value={String(pagination.pageSize)}
+									onValueChange={(value) => {
+										setPagination((p) => ({
+											...p,
+											pageSize: Number(value),
+											pageIndex: 0,
+										}));
+									}}
+								>
+									<SelectTrigger className="h-8 w-[70px]">
+										<SelectValue />
+									</SelectTrigger>
+									<SelectContent side="top">
+										{[10, 25, 50, 100].map((size) => (
+											<SelectItem key={size} value={String(size)}>
+												{size}
+											</SelectItem>
+										))}
+									</SelectContent>
+								</Select>
+								<span className="text-sm text-muted-foreground whitespace-nowrap">
+									Showing{" "}
+									{filteredData.length === 0
+										? 0
+										: pagination.pageIndex * pagination.pageSize + 1}{" "}
+									to{" "}
+									{Math.min(
+										(pagination.pageIndex + 1) * pagination.pageSize,
+										filteredData.length,
+									)}{" "}
+									of {filteredData.length} entries
+								</span>
+							</div>
+							<div className="flex items-center gap-2">
+								<Button
+									variant="outline"
+									size="sm"
+									className="h-8"
+									onClick={() => table.previousPage()}
+									disabled={!table.getCanPreviousPage()}
+								>
+									<ChevronLeft className="size-4" />
+									Previous
+								</Button>
+								<Button
+									variant="outline"
+									size="sm"
+									className="h-8"
+									onClick={() => table.nextPage()}
+									disabled={!table.getCanNextPage()}
+								>
+									Next
+									<ChevronRight className="size-4" />
+								</Button>
+							</div>
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/dashboard/deployments/show-queue-table.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import type { inferRouterOutputs } from "@trpc/server";
+import Link from "next/link";
+import { ArrowRight, ListTodo, Loader2, XCircle } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import type { AppRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
+
+type QueueRow =
+	inferRouterOutputs<AppRouter>["deployment"]["queueList"][number];
+
+const stateVariants: Record<
+	string,
+	| "default"
+	| "secondary"
+	| "destructive"
+	| "outline"
+	| "yellow"
+	| "green"
+	| "red"
+> = {
+	pending: "secondary",
+	waiting: "secondary",
+	active: "yellow",
+	delayed: "outline",
+	completed: "green",
+	failed: "destructive",
+	cancelled: "outline",
+	paused: "outline",
+};
+
+function formatTs(ts?: number): string {
+	if (ts == null) return "—";
+	const d = new Date(ts);
+	return d.toLocaleString();
+}
+
+function getJobLabel(row: QueueRow): string {
+	const d = row.data as {
+		applicationType?: string;
+		applicationId?: string;
+		composeId?: string;
+		previewDeploymentId?: string;
+		titleLog?: string;
+		type?: string;
+	};
+	if (!d) return String(row.id);
+	const type = d.applicationType ?? "job";
+	const title = d.titleLog ?? "";
+	if (title) return title;
+	if (d.applicationId) return `Application ${d.applicationId.slice(0, 8)}…`;
+	if (d.composeId) return `Compose ${d.composeId.slice(0, 8)}…`;
+	if (d.previewDeploymentId)
+		return `Preview ${d.previewDeploymentId.slice(0, 8)}…`;
+	return `${type} ${String(row.id)}`;
+}
+
+export function ShowQueueTable(props: { embedded?: boolean }) {
+	const { embedded: _embedded = false } = props;
+	const { data: queueList, isLoading } = api.deployment.queueList.useQuery(
+		undefined,
+		{ refetchInterval: 3000 },
+	);
+	const { data: isCloud } = api.settings.isCloud.useQuery();
+	const utils = api.useUtils();
+	const {
+		mutateAsync: cancelApplicationDeployment,
+		isPending: isCancellingApp,
+	} = api.application.cancelDeployment.useMutation({
+		onSuccess: () => void utils.deployment.queueList.invalidate(),
+	});
+	const {
+		mutateAsync: cancelComposeDeployment,
+		isPending: isCancellingCompose,
+	} = api.compose.cancelDeployment.useMutation({
+		onSuccess: () => void utils.deployment.queueList.invalidate(),
+	});
+	const isCancelling = isCancellingApp || isCancellingCompose;
+
+	return (
+		<div className="px-0">
+			{isLoading ? (
+				<div className="flex gap-4 w-full items-center justify-center min-h-[30vh] text-muted-foreground">
+					<Loader2 className="size-4 animate-spin" />
+					<span>Loading queue...</span>
+				</div>
+			) : (
+				<div className="rounded-md border overflow-x-auto">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Job ID</TableHead>
+								<TableHead>Label</TableHead>
+								<TableHead>Type</TableHead>
+								<TableHead>State</TableHead>
+								<TableHead>Added</TableHead>
+								<TableHead>Processed</TableHead>
+								<TableHead>Finished</TableHead>
+								<TableHead>Error</TableHead>
+								<TableHead className="w-[100px]">Actions</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{queueList?.length ? (
+								queueList.map((row) => {
+									const d = row.data as Record<string, unknown>;
+									const appType = d?.applicationType as string | undefined;
+									const pathInfo = row.servicePath;
+									const hasLink = pathInfo?.href != null;
+									return (
+										<TableRow key={String(row.id)}>
+											<TableCell className="font-mono text-xs">
+												{String(row.id)}
+											</TableCell>
+											<TableCell className="max-w-[200px] truncate">
+												{getJobLabel(row)}
+											</TableCell>
+											<TableCell>{appType ?? row.name ?? "—"}</TableCell>
+											<TableCell>
+												<Badge variant={stateVariants[row.state] ?? "outline"}>
+													{row.state}
+												</Badge>
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs">
+												{formatTs(row.timestamp)}
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs">
+												{formatTs(row.processedOn)}
+											</TableCell>
+											<TableCell className="text-muted-foreground text-xs">
+												{formatTs(row.finishedOn)}
+											</TableCell>
+											<TableCell className="max-w-[180px] truncate text-xs text-destructive">
+												{row.failedReason ?? "—"}
+											</TableCell>
+											<TableCell>
+												<div className="flex items-center gap-1">
+													{hasLink ? (
+														<Button variant="ghost" size="sm" asChild>
+															<Link href={pathInfo!.href!}>
+																<ArrowRight className="size-4 mr-1" />
+																Service
+															</Link>
+														</Button>
+													) : (
+														<span className="text-muted-foreground text-xs">
+															—
+														</span>
+													)}
+													{isCloud &&
+														row.state === "active" &&
+														(d?.applicationId != null ||
+															d?.composeId != null) && (
+															<Button
+																variant="ghost"
+																size="sm"
+																className="text-destructive hover:text-destructive"
+																disabled={isCancelling}
+																onClick={() => {
+																	const appId =
+																		typeof d.applicationId === "string"
+																			? d.applicationId
+																			: undefined;
+																	const compId =
+																		typeof d.composeId === "string"
+																			? d.composeId
+																			: undefined;
+																	if (appId) {
+																		void cancelApplicationDeployment({
+																			applicationId: appId,
+																		});
+																	} else if (compId) {
+																		void cancelComposeDeployment({
+																			composeId: compId,
+																		});
+																	}
+																}}
+															>
+																<XCircle className="size-4 mr-1" />
+																Cancel
+															</Button>
+														)}
+												</div>
+											</TableCell>
+										</TableRow>
+									);
+								})
+							) : (
+								<TableRow>
+									<TableCell colSpan={9} className="text-center py-12">
+										<div className="flex flex-col items-center justify-center gap-2 text-muted-foreground min-h-[30vh]">
+											<ListTodo className="size-8" />
+											<p className="font-medium">Queue is empty</p>
+											<p className="text-sm">
+												Deployment jobs will appear here when they are queued.
+											</p>
+										</div>
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
+			)}
+		</div>
+	);
+}

apps/dokploy/components/dashboard/search-command.tsx

@@ -174,6 +174,14 @@ export const SearchCommand = () => {
 						>
 							Projects
 						</CommandItem>
+						<CommandItem
+							onSelect={() => {
+								router.push("/dashboard/deployments");
+								setOpen(false);
+							}}
+						>
+							Deployments
+						</CommandItem>
 						{!isCloud && (
 							<>
 								<CommandItem

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

@@ -1,7 +1,6 @@
-import { Package, Trash2 } from "lucide-react";
+import { Loader2, Package, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { DialogAction } from "@/components/shared/dialog-action";
-import { WhaleLoader } from "@/components/shared/whale-loader";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -32,9 +31,10 @@ export const ShowRegistry = () => {
 						</CardDescription>
 					</CardHeader>
 					<CardContent className="space-y-2 py-8 border-t">
-						{isLoading ? (
-							<div className="flex flex-row items-center justify-center min-h-[25vh]">
-								<WhaleLoader />
+						{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>
 						) : (
 							<>

apps/dokploy/components/layouts/side.tsx

@@ -25,6 +25,7 @@ import {
 	type LucideIcon,
 	Package,
 	PieChart,
+	Rocket,
 	Server,
 	ShieldCheck,
 	Star,
@@ -145,6 +146,12 @@ const MENU: Menu = {
 			url: "/dashboard/projects",
 			icon: Folder,
 		},
+		{
+			isSingle: true,
+			title: "Deployments",
+			url: "/dashboard/deployments",
+			icon: Rocket,
+		},
 		{
 			isSingle: true,
 			title: "Monitoring",

apps/dokploy/components/shared/whale-loader.tsx

@@ -1,57 +0,0 @@
-import { cn } from "@/lib/utils";
-
-const WHALE_PATHS = [
-	"M390 56v12c.1 2.3.5 4 1 6a73 73 0 0 0 12 24c2 2.3 5.7 4 7 7 4 3.4 9.6 6.8 14 9 1.7.6 5.7 1.1 7 2 1.9 1.3 2.9 2.3 0 4v1c-.6 1.8-1.9 3.5-3 5q-3 4-7 7c-4.3 3.2-9.5 6.8-15 7h-1q-2 1.6-5 2h-4c-5.2.7-12.9 2.2-18 0h-6c-1.6 0-3-.8-4-1h-3a17 17 0 0 1-6-2h-1c-2.5-.1-4-1.2-6-2l-4-1c-8.4-2-20.3-6.6-27-12h-1c-4.6-1-9.5-4.3-13.7-6.3s-10.5-3-13.3-6.7h-1c-4-1-8.9-3.5-12-6h-1c-6.8-1.6-13.6-6-20-9-6.5-2.8-14.6-5.7-20-10h-1c-7-1.2-15.4-4-22-6h-97c-5.3 4.3-13.7 4.3-18.7 10.3S90.8 101 88 108c-.4 1.5-.8 2.3-1 4-.2 1.6-.8 4-1 5v51c.2 1.2.8 3.2 1 5 .2 2 .5 3.2 1 5a79 79 0 0 0 6 12c.8.7 1.4 2.2 2 3 1.8 2 4.9 3.4 6 6 9.5 8.3 23.5 10.3 33 18h1c5.1 1.2 12 4.8 16 8h1c4 1 8.9 3.5 12 6h1q4.6 1.2 8 4h1c2 .1 2.6 1.3 4 2 1.6.8 2.7.7 4 2h1q2.5.3 4 2h1c3 .7 6.7 2 9 4h1c4.7.8 13.4 3.1 17 6h1c2.5.1 4 1.3 6 2 1.8.4 3 .8 5 1q3 .4 5 1c1.6-.2 2 0 3 1h1q2.5-.5 4 1h1q2.5-.5 4 1h1c2.2-.2 4.5-.3 6 1h1q4-.4 7 1h45c1.2-.2 3.1-1 5-1h6c1.5-.6 2.9-1.3 5-1h1q1.5-1.4 4-1h1q1.5-1.4 4-1h1c2.4-1.3 5-1.6 8-2l5-1c2-.7 3.6-1.6 6-2 4-.7 7.2-1.7 11-3 2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.9-2 6-3q2.9-1.6 6-3a95 95 0 0 0 11-5c4.4-2.8 8.9-6 14-8 0 0 .6.2 1 0 1.8-2.8 7-4.8 10-6 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.5-2.4 5.3-4 8-5 0 0 .6.2 1 0 1.3-2 3.8-3.1 6-4 0 0 .6.2 1 0 2-3 7.7-5.6 11-7l5-2c6.3-3.8 11.8-9.6 18-14v-1c0-1.9-.4-4.2 0-6-1-4.5-3.9-5.5-7-8h-1c-1.2 0-2.8-.2-4 0-8.9 1.7-16.5 11.3-25.2 14.8-8.8 3.4-16.9 10.7-25.8 14.2h-1c-10.9 10.6-29.2 16-42.7 23.3S343.7 234.6 328 235h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-1.5 1.3-3.9 1.2-6 1h-1c-1.7 1.3-4.6 1.2-7 1-1 .2-2.4 1-4 1h-5c-6.6 0-13.4.4-20 0-1.9-.1-2.7.3-4-1h-8c-2.8-.2-5.7-1.3-8-2h-2q-5.7.4-10-2h-1q-4.5 0-8-2h-1a10 10 0 0 1-6-2h-1c-5.9-.2-12-3.8-17-6l-4-1c-1.7-.5-2.8-.7-4-2h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-3.5-.8-7.3-2.9-10-5h-1c-1.7 0-2.2-.7-3-2h-1c-11.6-2.7-23.2-11.5-34.2-15.8-11-4.2-25.9-9.2-29.8-21.2h4c16.2 0 32.8-1 49 0 1.7.1 3 .8 4 1 2.1.4 3.4-.5 5 1h1c3.6.1 8.4 1.8 11 4h1a45 45 0 0 1 18 8h1q4.6 1.2 8 4h1c4.2 1 8.3 3.4 12 5q3.4 1.2 7 2c5.7 1.3 13 2.3 18 5h1c3.7-.2 7 1.1 10 2h9c1.6 0 3 .8 4 1h32c2.2-1.6 6-1 9-1h1a63 63 0 0 1 22-4 22 22 0 0 1 8-2c1.7-1.4 3.7-1.6 6-2a81 81 0 0 0 12-3c2.3-1 4.2-2.5 7-3h1q1.5-1.7 4-2h1c1.9-1.5 3.6-2.2 6-3l3-1c4.1-2.3 8.4-5.2 13-7 0 0 .6.2 1 0 1.5-2.4 6.3-5 9-6 0 0 .6.2 1 0 5.3-8.1 17.6-12.5 24.8-20.2C439.9 144 445 133 452 126v-1a12 12 0 0 1 2-5c2.1-2.2 8.9-1 12-1q2 .2 4 0c1-.2 2.3-1.2 4-1h1q2.1-1.5 5-2h1q2.1-1.9 5-3s.6.2 1 0c9-9.3 18-15.4 23-28 1.1-2.8 3.5-6.4 4-9 .2-1 .2-3 0-4-1.5-6-12.3-2.4-15.7 2.3S484.7 80 479 80h-7c-7.8 4.3-19.3 5.7-23 16a37 37 0 0 0-22-24c-1.5-.5-2.5-.7-4-1-2.1-.5-3.6-.2-5-2h-1a22 22 0 0 1-12-8c-2-2.9-3.4-6.5-6-9h-1c-3.9-.6-6.1 1-8 4m-181 45h1c2.2-.2 4.5-.3 6 1h1q2.5-.5 4 1h1a33 33 0 0 1 17 7h1c4.4 1 8.2 4.1 12 6 2.1 1 4.1 1.5 6 3h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1c4 1 8.9 3.5 12 6h1a61 61 0 0 1 21 10h1c3.5.8 7.3 2.9 10 5h1c6.1 1.4 12.3 5 18 7 1.8.4 3 .8 5 1 1.8.2 3.7.8 5 1q2.5-.5 4 1h6c2.5 0 4 .3 6 1h3q-.7 2.1-3 2a46 46 0 0 1-16 7l-10 3c-2 .8-3.4 1.9-6 2h-1c-2.6 2.1-7.5 3-11 3h-1c-3.1 2.5-10.7 3.5-15 3h-1c-1.5 1.3-3.9 1.2-6 1-1 .2-2.4 1-4 1h-11c-3.8.4-8.3.4-12 0h-9c-2.3 0-4.3-.7-6-1h-3c-1.8 0-2.9-.7-4-1-3.5-.8-7-.7-10-2h-1c-4.1-.7-9.8-1.4-13-4h-1q-4-.6-7-3h-1q-2.5-.2-4-2h-1q-3.4-.9-6-3h-1c-7.2-1.7-13.3-5.9-20.2-8.8-7-2.8-16.2-4.3-22.8-7.2h-11c-14 0-28.9.3-42-1-2.3 0-4.8.3-7 0a6 6 0 0 1-5-5c-1.8-4.8-.4-10.4 0-15 0-4.3-.4-8.7 0-13 .2-3.2 2.2-7.3 4-10q2-3 5-5c2.1-2 5.4-2.3 8-3 15.6-3.9 36.3-1 53-1 5.2 0 12-.5 17 0s12.2-1.8 16 1Z",
-	"M162 132v1c1.8 2.9 4.5 5.3 8 6 .3-.2 3.7-.2 4 0 7-1.4 9.2-8.8 7-15v-1a14 14 0 0 0-7-4c-.3.2-3.7.2-4 0-6.5 1.3-8.6 6.8-8 13Z",
-	"M465 211h-1c-18.2 14.6-41.2 24.6-60 39-19 14.2-42.7 29.3-66 34l-4 1c-2.4 1-4 2-7 2h-1q-3.5 2-8 2h-1c-1.3 1.2-3 1.1-5 1h-2q-2.6 1.1-6 1h-2c-3 1.2-6.5 1-10 1-6.3.6-13.8.6-20 0-3.4 0-8.4.9-11-1h-1c-2.2.2-4.5.3-6-1h-1c-2 .2-3.7.2-5-1h-1c-7.6.5-16.5-3.4-23-6l-4-1a129 129 0 0 1-36.2-15.8c-10.4-6.6-23.2-12.8-32.5-20.5-9.2-7.7-23.8-12.8-30.3-22.7h-1c-2.3-1.4-4.5-2.7-6-5h-1c-4-2.5-8.5-5.2-12-8h-9a9 9 0 0 0-6 7c.3 3.3 0 6.7 0 10v9c.2 1.6 1 3.8 1 6v3c.2 1 1.2 2.2 1 4v1c1.2 1.2.8 2.2 1 4 .8 6.7 3 12.6 5 19 1.7 4.3 4.2 9.1 5 14v1q1.8 1.5 2 4v1a36 36 0 0 1 5 10c.7 2 1 3 2 5 8 12.7 15.7 25.5 25.8 37.3 10 11.7 20.8 20.6 32.4 30.4 11.7 9.9 28.3 14 39.8 23.3h1q2.5.3 4 2h1c2.8.4 4.8 2 7 3l7 2c5.7 1.3 13 2.3 18 5h1c2.1-.3 3.6.8 5 1h3c2.8.2 5.8 1 8 2h8c2.1 0 4.6.8 6 1h21c1.2-.2 3.2-1 5-1h9c3.3-1 7-2.4 11-2h1c2.7-2.2 7.4-2.4 11-3a55 55 0 0 0 8-2c6.5-2.6 13.9-6.3 21-8h1c8.5-6.8 20.6-9.7 29.2-16.8 8.7-7 18.3-12.8 26.8-20.2 4.4-3.8 9-9 13-13 14.8-14.8 20.7-34.6 33-50v-1q.9-3.4 3-6v-1q.3-2.5 2-4v-1c.5-3.3 2-8.6 4-11v-1q0-3.5 2-6v-1c1.1-6.7 2.4-15 5-21v-1c-.2-2-.2-3.7 1-5v-8c0-5.3-.5-10.8 0-16a14 14 0 0 0-4-6c-1-.5-1.1-.4-2-1h-6q-2.1 1.5-5 2m-6 38c-2.1 13.4-21.2 20.3-31 30-10 9.5-23.7 19-35 27-11.5 8-25.1 19.7-39 23h-1a22 22 0 0 1-10 4h-1a25 25 0 0 1-12 4h-1q-3.5 2-8 2h-1c-1.1 1.1-2.3 1-4 1h-2c-1.2.4-2.2 1-4 1h-2c-1.8.7-3.6 1.3-6 1h-1c-1.2 1.2-2.3 1-4 1h-5c-5.7.6-12.3.8-18 0h-4c-1.9 0-2.7-.6-4-1h-6c-1.9 0-2.7.3-4-1h-1q-2.5.5-4-1h-1c-8.1.5-16.8-3.6-24.2-5.8S210 329.8 204 325h-1c-12.8-5-27.1-15.6-37.7-24.3S138.8 284.2 131 273c-.3-.2-1 0-1 0-5.7-4.4-16.6-10-19-17-.9-2.6-1-5.4-2-8-.8-2.2-2.5-5-2-8a667 667 0 0 0 88 56h1q3.4.9 6 3h1c2.8.4 4.8 2 7 3q5 1.8 10 3l6 2q2.9.6 6 1 3 .4 5 1c1.6-.2 2 0 3 1h1c2-.2 3.7-.2 5 1h1c2.2-.3 3.4.4 5 1h8c1.6 0 3 .9 4 1h40c1.8-1.3 4.6-1.2 7-1h1c1.2-1.2 3.2-1.2 5-1h1c1.2-1.2 3.2-1.2 5-1h1c1.1-1.1 2.3-1 4-1h2c3.5-1.7 6.9-2.3 11-3l4-1c3.4-1.4 7.1-3 11-4 1.5-.4 2.5-.5 4-1 1.4-.7 2-1.9 4-2h1q2.6-2.1 6-3h1c2.5-2 6-3.8 9-5l3-1c1.4-.9 2-2.5 4-3h1q1.4-2.2 4-3h1c7.3-7.7 19-13.2 27.7-19.3 8.8-6.1 18.2-15 28.3-18.7.4-.2 1 0 1 0q3.8-3.9 9-6c1.3 2.5-.5 6.7-1 10m-20 55c-.2.4 0 1 0 1-3.4 9.6-12.7 19-19 27a88 88 0 0 1-12 12 214 214 0 0 1-26.7 20.3c-9.5 5.8-20 14.8-31.3 16.7h-1a22 22 0 0 1-10 4h-1c-3.2 2.6-8.9 3.3-13 4h-1q-1.5 1.4-4 1h-1q-1.5 1.4-4 1h-1c-4.9 2.3-10.5 1-16 2-1 .2-2.5 1-4 1-6.2.4-12.8.3-19 0-1.8 0-3.8-.8-5-1h-4c-1.6 0-3-.9-4-1h-4c-3.9-.3-8.8-1.3-12-3h-1c-3.3-.5-7.5-1-10-3h-1c-3.6-.1-8.4-1.8-11-4h-1c-3.9-.6-8-2.6-11-5h-1c-16.1-3.8-32.2-18.9-45-29a200 200 0 0 1-40-51c17.7 11.5 35 25.5 52 38h1c4 1.6 12.8 5.4 15 9h1c4.6 1 10.4 4.1 14 7h1q2.5.3 4 2h1c3.3.5 8.6 2 11 4h1q3.5 0 6 2h1q2.5-.5 4 1h1q2.5-.5 4 1h1c3.8-.2 7.9 1 11 2h9c1.6 0 3 .8 4 1h32c1.2-.2 3.2-1 5-1h8a139 139 0 0 1 20-4l5-1c2-.7 3.7-1.5 6-2l4-1c1.5-.6 3-1.7 5-2h1q3-2.4 7-3h1q2.6-2.1 6-3h1c11.7-9.4 27.6-14.6 39-25 11.6-10.3 25-18.5 37-28a15 15 0 0 1-5 10Z",
-] as const;
-
-interface WhaleLoaderProps {
-	className?: string;
-}
-
-/** Loader using the Dokploy whale logo: draws the whale gradually and bobs up/down like a tide. */
-export const WhaleLoader = ({ className }: WhaleLoaderProps) => {
-	return (
-		<div
-			className={cn(
-				"flex flex-col items-center justify-center gap-3",
-				className,
-			)}
-			aria-label="Loading"
-		>
-			{/* animate-whale-tide */}
-			<div className="">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 559 446"
-					className="size-20 text-primary"
-					aria-hidden
-				>
-					<g
-						fill="currentColor"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						{WHALE_PATHS.map((d, i) => (
-							<path
-								key={i}
-								pathLength={1}
-								strokeDasharray={1}
-								strokeDashoffset={1}
-								className="animate-whale-draw"
-								style={{
-									animationDelay: `${i * 0.25}s`,
-								}}
-								d={d}
-							/>
-						))}
-					</g>
-				</svg>
-			</div>
-			<span className="text-sm text-muted-foreground">Loading...</span>
-		</div>
-	);
-};

apps/dokploy/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dokploy",
-	"version": "v0.28.2",
+	"version": "v0.28.3",
 	"private": true,
 	"license": "Apache-2.0",
 	"type": "module",

apps/dokploy/pages/dashboard/deployments.tsx

@@ -0,0 +1,94 @@
+import { validateRequest } from "@dokploy/server/lib/auth";
+import { Rocket } from "lucide-react";
+import type { GetServerSidePropsContext } from "next";
+import { useRouter } from "next/router";
+import type { ReactElement } from "react";
+import { ShowDeploymentsTable } from "@/components/dashboard/deployments/show-deployments-table";
+import { ShowQueueTable } from "@/components/dashboard/deployments/show-queue-table";
+import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import {
+	Card,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+const TAB_VALUES = ["deployments", "queue"] as const;
+type TabValue = (typeof TAB_VALUES)[number];
+
+function isValidTab(t: string): t is TabValue {
+	return TAB_VALUES.includes(t as TabValue);
+}
+
+function DeploymentsPage() {
+	const router = useRouter();
+	const tab =
+		router.query.tab && isValidTab(router.query.tab as string)
+			? (router.query.tab as TabValue)
+			: "deployments";
+
+	const setTab = (value: string) => {
+		if (!isValidTab(value)) return;
+		router.replace(
+			{ pathname: "/dashboard/deployments", query: { tab: value } },
+			undefined,
+			{ shallow: true },
+		);
+	};
+
+	return (
+		<div className="w-full">
+			<Card className="h-full bg-sidebar p-2.5 rounded-xl max-w-8xl mx-auto min-h-[45vh]">
+				<div className="rounded-xl bg-background shadow-md h-full">
+					<CardHeader>
+						<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+							<div>
+								<CardTitle className="text-xl font-bold flex items-center gap-2">
+									<Rocket className="size-5" />
+									Deployments
+								</CardTitle>
+								<CardDescription>
+									All application and compose deployments in one place.
+								</CardDescription>
+							</div>
+						</div>
+						<Tabs value={tab} onValueChange={setTab} className="w-full">
+							<TabsList className="mt-2">
+								<TabsTrigger value="deployments">Deployments</TabsTrigger>
+								<TabsTrigger value="queue">Queue</TabsTrigger>
+							</TabsList>
+							<TabsContent value="deployments" className="mt-0 pt-4">
+								<ShowDeploymentsTable />
+							</TabsContent>
+							<TabsContent value="queue" className="mt-0 pt-4">
+								<ShowQueueTable />
+							</TabsContent>
+						</Tabs>
+					</CardHeader>
+				</div>
+			</Card>
+		</div>
+	);
+}
+
+export default DeploymentsPage;
+
+DeploymentsPage.getLayout = (page: ReactElement) => {
+	return <DashboardLayout>{page}</DashboardLayout>;
+};
+
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
+	const { user } = await validateRequest(ctx.req);
+	if (!user) {
+		return {
+			redirect: {
+				permanent: true,
+				destination: "/",
+			},
+		};
+	}
+	return {
+		props: {},
+	};
+}

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

@@ -4,11 +4,15 @@ import {
 	findAllDeploymentsByApplicationId,
 	findAllDeploymentsByComposeId,
 	findAllDeploymentsByServerId,
+	findAllDeploymentsCentralized,
 	findApplicationById,
 	findComposeById,
 	findDeploymentById,
+	findMemberById,
 	findServerById,
+	IS_CLOUD,
 	removeDeployment,
+	resolveServicePath,
 	updateDeploymentStatus,
 } from "@dokploy/server";
 import { db } from "@dokploy/server/db";
@@ -21,7 +25,10 @@ import {
 	apiFindAllByServer,
 	apiFindAllByType,
 	deployments,
+	server,
 } from "@/server/db/schema";
+import { myQueue } from "@/server/queues/queueSetup";
+import { fetchDeployApiJobs, type QueueJobRow } from "@/server/utils/deploy";
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const deploymentRouter = createTRPCRouter({
@@ -68,6 +75,63 @@ export const deploymentRouter = createTRPCRouter({
 			}
 			return await findAllDeploymentsByServerId(input.serverId);
 		}),
+	allCentralized: protectedProcedure.query(async ({ ctx }) => {
+		const orgId = ctx.session.activeOrganizationId;
+		const accessedServices =
+			ctx.user.role === "member"
+				? (await findMemberById(ctx.user.id, orgId)).accessedServices
+				: null;
+		if (accessedServices !== null && accessedServices.length === 0) {
+			return [];
+		}
+		return findAllDeploymentsCentralized(orgId, accessedServices);
+	}),
+
+	queueList: protectedProcedure.query(async ({ ctx }) => {
+		const orgId = ctx.session.activeOrganizationId;
+		let rows: QueueJobRow[];
+
+		if (IS_CLOUD) {
+			const servers = await db.query.server.findMany({
+				where: eq(server.organizationId, orgId),
+				columns: { serverId: true },
+			});
+			const serverRowsArrays = await Promise.all(
+				servers.map(({ serverId }) => fetchDeployApiJobs(serverId)),
+			);
+			rows = serverRowsArrays.flat();
+			rows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+		} else {
+			const jobs = await myQueue.getJobs();
+			const jobRows = await Promise.all(
+				jobs.map(async (job) => {
+					const state = await job.getState();
+					return {
+						id: String(job.id),
+						name: job.name ?? undefined,
+						data: job.data as Record<string, unknown>,
+						timestamp: job.timestamp,
+						processedOn: job.processedOn,
+						finishedOn: job.finishedOn,
+						failedReason: job.failedReason ?? undefined,
+						state,
+					};
+				}),
+			);
+			jobRows.sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0));
+			rows = jobRows;
+		}
+
+		return Promise.all(
+			rows.map(async (row) => ({
+				...row,
+				servicePath: await resolveServicePath(
+					orgId,
+					(row.data ?? {}) as Record<string, unknown>,
+				),
+			})),
+		);
+	}),
 
 	allByType: protectedProcedure
 		.input(apiFindAllByType)
@@ -79,10 +143,8 @@ export const deploymentRouter = createTRPCRouter({
 					rollback: true,
 				},
 			});
-
 			return deploymentsList;
 		}),
-
 	killProcess: protectedProcedure
 		.input(
 			z.object({

apps/dokploy/server/utils/deploy.ts

@@ -50,3 +50,34 @@ export const cancelDeployment = async (cancelData: CancelDeploymentData) => {
 		throw error;
 	}
 };
+
+export type QueueJobRow = {
+	id: string;
+	name?: string;
+	data: Record<string, unknown>;
+	timestamp?: number;
+	processedOn?: number;
+	finishedOn?: number;
+	failedReason?: string;
+	state: string;
+};
+
+export const fetchDeployApiJobs = async (
+	serverId: string,
+): Promise<QueueJobRow[]> => {
+	try {
+		const res = await fetch(
+			`${process.env.SERVER_URL}/jobs?serverId=${encodeURIComponent(serverId)}`,
+			{
+				headers: {
+					"Content-Type": "application/json",
+					"X-API-Key": process.env.API_KEY || "NO-DEFINED",
+				},
+			},
+		);
+		if (!res.ok) return [];
+		return (await res.json()) as QueueJobRow[];
+	} catch {
+		return [];
+	}
+};

apps/dokploy/styles/globals.css

@@ -201,30 +201,6 @@
 .animate-heartbeat {
 	animation: heartbeat 2.5s infinite;
 }
-
-@keyframes whale-draw {
-	0% {
-		stroke-dashoffset: 1;
-		fill-opacity: 0;
-	}
-	45% {
-		stroke-dashoffset: 0;
-		fill-opacity: 1;
-	}
-	55% {
-		stroke-dashoffset: 0;
-		fill-opacity: 1;
-	}
-	100% {
-		stroke-dashoffset: 1;
-		fill-opacity: 0;
-	}
-}
-
-.animate-whale-draw {
-	animation: whale-draw 2.8s ease-in-out infinite;
-}
-
 @media (prefers-color-scheme: dark) {
 	.swagger-ui {
 		background-color: white;

apps/dokploy/tailwind.config.ts

@@ -106,16 +106,11 @@ const config = {
 						height: "0",
 					},
 				},
-				"whale-tide": {
-					"0%, 100%": { transform: "translateY(0)" },
-					"50%": { transform: "translateY(-8px)" },
-				},
 			},
 			animation: {
 				"caret-blink": "caret-blink 1.25s ease-out infinite",
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
-				"whale-tide": "whale-tide 2.2s ease-in-out infinite",
 			},
 		},
 	},

packages/server/src/services/deployment.ts

@@ -10,7 +10,11 @@ import {
 	type apiCreateDeploymentSchedule,
 	type apiCreateDeploymentServer,
 	type apiCreateDeploymentVolumeBackup,
+	applications,
+	compose,
 	deployments,
+	environments,
+	projects,
 } from "@dokploy/server/db/schema";
 import { removeDirectoryIfExistsContent } from "@dokploy/server/utils/filesystem/directory";
 import {
@@ -19,7 +23,7 @@ import {
 } from "@dokploy/server/utils/process/execAsync";
 import { TRPCError } from "@trpc/server";
 import { format } from "date-fns";
-import { desc, eq } from "drizzle-orm";
+import { desc, eq, and, inArray, or, sql } from "drizzle-orm";
 import type { z } from "zod";
 import {
 	type Application,
@@ -38,6 +42,41 @@ import { findScheduleById } from "./schedule";
 import { findServerById, type Server } from "./server";
 import { findVolumeBackupById } from "./volume-backups";
 
+export type ServicePath = { href: string | null; label: string };
+
+export async function resolveServicePath(
+	orgId: string,
+	data: Record<string, unknown>,
+): Promise<ServicePath> {
+	try {
+		const applicationId = data?.applicationId as string | undefined;
+		const composeId = data?.composeId as string | undefined;
+		if (applicationId) {
+			const app = await findApplicationById(applicationId);
+			if (app.environment.project.organizationId !== orgId) {
+				return { href: null, label: "Application" };
+			}
+			return {
+				href: `/dashboard/project/${app.environment.project.projectId}/environment/${app.environment.environmentId}/services/application/${app.applicationId}`,
+				label: "Application",
+			};
+		}
+		if (composeId) {
+			const comp = await findComposeById(composeId);
+			if (comp.environment.project.organizationId !== orgId) {
+				return { href: null, label: "Compose" };
+			}
+			return {
+				href: `/dashboard/project/${comp.environment.project.projectId}/environment/${comp.environment.environmentId}/services/compose/${comp.composeId}`,
+				label: "Compose",
+			};
+		}
+	} catch {
+		// not found or unauthorized
+	}
+	return { href: null, label: "—" };
+}
+
 export type Deployment = typeof deployments.$inferSelect;
 
 export const findDeploymentById = async (deploymentId: string) => {
@@ -738,6 +777,135 @@ export const findAllDeploymentsByComposeId = async (composeId: string) => {
 	return deploymentsList;
 };
 
+const centralizedDeploymentsWith = {
+	application: {
+		columns: { applicationId: true, name: true, appName: true },
+		with: {
+			environment: {
+				columns: { environmentId: true, name: true },
+				with: {
+					project: {
+						columns: { projectId: true, name: true },
+					},
+				},
+			},
+			server: {
+				columns: { serverId: true, name: true, serverType: true },
+			},
+			buildServer: {
+				columns: { serverId: true, name: true, serverType: true },
+			},
+		},
+	},
+	compose: {
+		columns: { composeId: true, name: true, appName: true },
+		with: {
+			environment: {
+				columns: { environmentId: true, name: true },
+				with: {
+					project: {
+						columns: { projectId: true, name: true },
+					},
+				},
+			},
+			server: {
+				columns: { serverId: true, name: true, serverType: true },
+			},
+		},
+	},
+	server: {
+		columns: { serverId: true, name: true, serverType: true },
+	},
+	buildServer: {
+		columns: { serverId: true, name: true, serverType: true },
+	},
+} as const;
+
+async function getApplicationIdsInOrg(
+	orgId: string,
+	accessedServices: string[] | null,
+): Promise<string[]> {
+	const rows = await db
+		.select({ applicationId: applications.applicationId })
+		.from(applications)
+		.innerJoin(
+			environments,
+			eq(applications.environmentId, environments.environmentId),
+		)
+		.innerJoin(projects, eq(environments.projectId, projects.projectId))
+		.where(
+			accessedServices !== null
+				? and(
+						eq(projects.organizationId, orgId),
+						inArray(applications.applicationId, accessedServices),
+					)
+				: eq(projects.organizationId, orgId),
+		);
+	return rows.map((r) => r.applicationId);
+}
+
+async function getComposeIdsInOrg(
+	orgId: string,
+	accessedServices: string[] | null,
+): Promise<string[]> {
+	const rows = await db
+		.select({ composeId: compose.composeId })
+		.from(compose)
+		.innerJoin(
+			environments,
+			eq(compose.environmentId, environments.environmentId),
+		)
+		.innerJoin(projects, eq(environments.projectId, projects.projectId))
+		.where(
+			accessedServices !== null
+				? and(
+						eq(projects.organizationId, orgId),
+						inArray(compose.composeId, accessedServices),
+					)
+				: eq(projects.organizationId, orgId),
+		);
+	return rows.map((r) => r.composeId);
+}
+
+/**
+ * All deployments for applications and compose in the org.
+ * Pass accessedServices for members (only those services), null for owner/admin.
+ */
+export const findAllDeploymentsCentralized = async (
+	orgId: string,
+	accessedServices: string[] | null,
+) => {
+	if (accessedServices !== null && accessedServices.length === 0) {
+		return [];
+	}
+
+	const [appIds, compIds] = await Promise.all([
+		getApplicationIdsInOrg(orgId, accessedServices),
+		getComposeIdsInOrg(orgId, accessedServices),
+	]);
+
+	if (appIds.length === 0 && compIds.length === 0) {
+		return [];
+	}
+
+	const conditions = [
+		...(appIds.length > 0 ? [inArray(deployments.applicationId, appIds)] : []),
+		...(compIds.length > 0 ? [inArray(deployments.composeId, compIds)] : []),
+	];
+	const whereClause =
+		conditions.length === 0
+			? sql`1 = 0`
+			: conditions.length === 1
+				? conditions[0]
+				: or(...conditions);
+
+	return db.query.deployments.findMany({
+		where: whereClause,
+		orderBy: desc(deployments.createdAt),
+		with: centralizedDeploymentsWith,
+	});
+};
+
 export const updateDeployment = async (
 	deploymentId: string,
 	deploymentData: Partial<Deployment>,