From ba1f4dbd3a76c0079de2ea28417a5dc243e2f577 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 23 Aug 2025 16:04:13 -0600
Subject: [PATCH 1/2] feat(ui): add bulk deploy functionality for services in
 project dashboard

---
 .../pages/dashboard/project/[projectId].tsx   | 103 ++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx
index a32bae06f..65f7d064d 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -10,6 +10,7 @@ import {
 	FolderInput,
 	GlobeIcon,
 	Loader2,
+	Play,
 	PlusIcon,
 	Search,
 	ServerIcon,
@@ -312,6 +313,7 @@ const Project = (
 		stop: api.compose.stop.useMutation(),
 		move: api.compose.move.useMutation(),
 		delete: api.compose.delete.useMutation(),
+		deploy: api.compose.deploy.useMutation(),
 	};
 
 	const applicationActions = {
@@ -319,6 +321,7 @@ const Project = (
 		stop: api.application.stop.useMutation(),
 		move: api.application.move.useMutation(),
 		delete: api.application.delete.useMutation(),
+		deploy: api.application.deploy.useMutation(),
 	};
 
 	const postgresActions = {
@@ -326,6 +329,7 @@ const Project = (
 		stop: api.postgres.stop.useMutation(),
 		move: api.postgres.move.useMutation(),
 		delete: api.postgres.remove.useMutation(),
+		deploy: api.postgres.deploy.useMutation(),
 	};
 
 	const mysqlActions = {
@@ -333,6 +337,7 @@ const Project = (
 		stop: api.mysql.stop.useMutation(),
 		move: api.mysql.move.useMutation(),
 		delete: api.mysql.remove.useMutation(),
+		deploy: api.mysql.deploy.useMutation(),
 	};
 
 	const mariadbActions = {
@@ -340,6 +345,7 @@ const Project = (
 		stop: api.mariadb.stop.useMutation(),
 		move: api.mariadb.move.useMutation(),
 		delete: api.mariadb.remove.useMutation(),
+		deploy: api.mariadb.deploy.useMutation(),
 	};
 
 	const redisActions = {
@@ -347,6 +353,7 @@ const Project = (
 		stop: api.redis.stop.useMutation(),
 		move: api.redis.move.useMutation(),
 		delete: api.redis.remove.useMutation(),
+		deploy: api.redis.deploy.useMutation(),
 	};
 
 	const mongoActions = {
@@ -354,6 +361,7 @@ const Project = (
 		stop: api.mongo.stop.useMutation(),
 		move: api.mongo.move.useMutation(),
 		delete: api.mongo.remove.useMutation(),
+		deploy: api.mongo.deploy.useMutation(),
 	};
 
 	const handleBulkStart = async () => {
@@ -586,6 +594,83 @@ const Project = (
 		setIsBulkActionLoading(false);
 	};
 
+	const handleBulkDeploy = async () => {
+		let success = 0;
+		let failed = 0;
+		setIsBulkActionLoading(true);
+
+		for (const serviceId of selectedServices) {
+			try {
+				const service = filteredServices.find((s) => s.id === serviceId);
+				if (!service) continue;
+
+				switch (service.type) {
+					case "application":
+						await applicationActions.deploy.mutateAsync({
+							applicationId: serviceId,
+						});
+						break;
+					case "compose":
+						await composeActions.deploy.mutateAsync({
+							composeId: serviceId,
+						});
+
+						break;
+					case "postgres":
+						await postgresActions.deploy.mutateAsync({
+							postgresId: serviceId,
+						});
+
+						break;
+					case "mysql":
+						await mysqlActions.deploy.mutateAsync({
+							mysqlId: serviceId,
+						});
+
+						break;
+					case "mariadb":
+						await mariadbActions.deploy.mutateAsync({
+							mariadbId: serviceId,
+						});
+
+						break;
+					case "redis":
+						await redisActions.deploy.mutateAsync({
+							redisId: serviceId,
+						});
+
+						break;
+					case "mongo":
+						await mongoActions.deploy.mutateAsync({
+							mongoId: serviceId,
+						});
+
+						break;
+				}
+				success++;
+			} catch (error) {
+				failed++;
+				toast.error(
+					`Error deploying service ${serviceId}: ${error instanceof Error ? error.message : "Unknown error"}`,
+				);
+			}
+		}
+		if (success > 0) {
+			toast.success(
+				`${success} service${success !== 1 ? "s" : ""} deployed successfully`,
+			);
+		}
+		if (failed > 0) {
+			toast.error(
+				`${failed} service${failed !== 1 ? "s" : ""} failed to deploy`,
+			);
+		}
+
+		setSelectedServices([]);
+		setIsDropdownOpen(false);
+		setIsBulkActionLoading(false);
+	};
+
 	const filteredServices = useMemo(() => {
 		if (!applications) return [];
 		const filtered = applications.filter(
@@ -729,6 +814,24 @@ const Project = (
 															Start
 														</Button>
 													</DialogAction>
+													<DialogAction
+														title="Deploy Services"
+														description={`Are you sure you want to deploy ${selectedServices.length} service${selectedServices.length !== 1 ? "s" : ""}? This will redeploy/restart the selected services.`}
+														onClick={handleBulkDeploy}
+														type="default"
+														disabled={
+															selectedServices.length === 0 ||
+															isBulkActionLoading
+														}
+													>
+														<Button
+															variant="ghost"
+															className="w-full justify-start"
+														>
+															<Play className="mr-2 h-4 w-4" />
+															Deploy
+														</Button>
+													</DialogAction>
 													<DialogAction
 														title="Stop Services"
 														description={`Are you sure you want to stop ${selectedServices.length} services?`}

From 2e3d4f1021aca34bb4d137bd7ffc9b60a3764db3 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Sat, 23 Aug 2025 16:06:25 -0600
Subject: [PATCH 2/2] feat(ui): implement bulk delete dialog for services in
 project dashboard

---
 .../pages/dashboard/project/[projectId].tsx   | 115 +++++++++++++++++-
 1 file changed, 112 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/pages/dashboard/project/[projectId].tsx b/apps/dokploy/pages/dashboard/project/[projectId].tsx
index 65f7d064d..3182f316a 100644
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -290,6 +290,8 @@ const Project = (
 	const [openCombobox, setOpenCombobox] = useState(false);
 	const [selectedServices, setSelectedServices] = useState<string[]>([]);
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
+	const [deleteVolumes, setDeleteVolumes] = useState(false);
 
 	const handleSelectAll = () => {
 		if (selectedServices.length === filteredServices.length) {
@@ -532,7 +534,7 @@ const Project = (
 		setIsBulkActionLoading(false);
 	};
 
-	const handleBulkDelete = async () => {
+	const handleBulkDelete = async (deleteVolumes = false) => {
 		let success = 0;
 		setIsBulkActionLoading(true);
 		for (const serviceId of selectedServices) {
@@ -549,7 +551,7 @@ const Project = (
 					case "compose":
 						await composeActions.delete.mutateAsync({
 							composeId: serviceId,
-							deleteVolumes: false,
+							deleteVolumes,
 						});
 						break;
 					case "postgres":
@@ -879,7 +881,7 @@ const Project = (
 																disabled={
 																	selectedServicesWithRunningStatus.length > 0
 																}
-																onClick={handleBulkDelete}
+																onClick={() => setIsBulkDeleteDialogOpen(true)}
 															>
 																<Button
 																	variant="ghost"
@@ -975,6 +977,113 @@ const Project = (
 															</DialogFooter>
 														</DialogContent>
 													</Dialog>
+
+													{/* Bulk Delete Dialog */}
+													<Dialog
+														open={isBulkDeleteDialogOpen}
+														onOpenChange={setIsBulkDeleteDialogOpen}
+													>
+														<DialogContent>
+															<DialogHeader>
+																<DialogTitle>Delete Services</DialogTitle>
+																<DialogDescription>
+																	Are you sure you want to delete{" "}
+																	{selectedServices.length} service
+																	{selectedServices.length !== 1 ? "s" : ""}?
+																	This action cannot be undone.
+																</DialogDescription>
+															</DialogHeader>
+
+															<div className="space-y-4">
+																{/* Show services to be deleted */}
+																<div className="max-h-40 overflow-y-auto space-y-2">
+																	{selectedServices.map((serviceId) => {
+																		const service = filteredServices.find(
+																			(s) => s.id === serviceId,
+																		);
+																		return service ? (
+																			<div
+																				key={serviceId}
+																				className="flex items-center space-x-2 text-sm"
+																			>
+																				<span className="px-2 py-1 text-xs bg-secondary rounded">
+																					{service.type}
+																				</span>
+																				<span>{service.name}</span>
+																			</div>
+																		) : null;
+																	})}
+																</div>
+
+																{/* Volume deletion option for compose services */}
+																{(() => {
+																	const servicesWithVolumeSupport =
+																		selectedServices.filter((serviceId) => {
+																			const service = filteredServices.find(
+																				(s) => s.id === serviceId,
+																			);
+																			// Currently only compose services support volume deletion
+																			return service?.type === "compose";
+																		});
+
+																	if (servicesWithVolumeSupport.length === 0)
+																		return null;
+
+																	return (
+																		<div className="space-y-2">
+																			<div className="flex items-center space-x-2">
+																				<Checkbox
+																					id="deleteVolumes"
+																					checked={deleteVolumes}
+																					onCheckedChange={(checked) =>
+																						setDeleteVolumes(checked === true)
+																					}
+																				/>
+																				<label
+																					htmlFor="deleteVolumes"
+																					className="text-sm font-medium"
+																				>
+																					Delete volumes associated with
+																					services
+																				</label>
+																			</div>
+																			<p className="text-xs text-muted-foreground">
+																				Volume deletion is available for:{" "}
+																				{servicesWithVolumeSupport.length}{" "}
+																				compose service
+																				{servicesWithVolumeSupport.length !== 1
+																					? "s"
+																					: ""}
+																			</p>
+																		</div>
+																	);
+																})()}
+															</div>
+
+															<DialogFooter>
+																<Button
+																	variant="outline"
+																	onClick={() => {
+																		setIsBulkDeleteDialogOpen(false);
+																		setDeleteVolumes(false); // Reset checkbox
+																	}}
+																>
+																	Cancel
+																</Button>
+																<Button
+																	variant="destructive"
+																	onClick={() => {
+																		handleBulkDelete(deleteVolumes);
+																		setIsBulkDeleteDialogOpen(false);
+																		setDeleteVolumes(false); // Reset checkbox
+																	}}
+																	disabled={isBulkActionLoading}
+																>
+																	Delete Services
+																</Button>
+															</DialogFooter>
+														</DialogContent>
+													</Dialog>
 												</DropdownMenuContent>
 											</DropdownMenu>
 										</div>