refactor(networks): streamline network management and enhance validation

- Simplified the network form schema by removing unnecessary fields and enforcing validation rules for IP settings.
- Updated the HandleNetwork component to eliminate the edit functionality, focusing on network creation only.
- Improved the ShowNetworks component by adding a delete action for network management, enhancing user experience.
- Introduced a new SQL migration for the network schema, establishing necessary constraints and types.
- Cleaned up the API by removing the update network functionality, reflecting the immutable nature of Docker networks.

apps/dokploy/components/dashboard/networks/handle-network.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
-import { Network, Pencil, Plus, Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Network, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
@@ -36,17 +36,10 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { api } from "@/utils/api";
 
-const networkDriverEnum = [
-	"bridge",
-	"host",
-	"overlay",
-	"macvlan",
-	"none",
-	"ipvlan",
-] as const;
+// Only bridge and overlay can be created: "host"/"none" are Docker
+// singletons and macvlan/ipvlan need driver options we don't expose.
+const networkDriverEnum = ["bridge", "overlay"] as const;
 
-/** Sentinel for "no scope" */
-const SCOPE_EMPTY = "__scope_none__";
 /** Sentinel for the local Dokploy server (no serverId) */
 const SERVER_LOCAL = "__server_local__";
 
@@ -56,32 +49,45 @@ const ipamConfigEntrySchema = z.object({
 	gateway: z.string().optional(),
 });
 
-const networkFormSchema = z.object({
-	name: z.string().min(1, "Name is required"),
-	driver: z.enum(networkDriverEnum),
-	scope: z.string().optional(),
-	serverId: z.string().optional(),
-	internal: z.boolean(),
-	attachable: z.boolean(),
-	ingress: z.boolean(),
-	configOnly: z.boolean(),
-	enableIPv4: z.boolean(),
-	enableIPv6: z.boolean(),
-	ipamDriver: z.string().optional(),
-	ipamConfig: z.array(ipamConfigEntrySchema),
-});
+const networkFormSchema = z
+	.object({
+		name: z.string().min(1, "Name is required"),
+		driver: z.enum(networkDriverEnum),
+		serverId: z.string().optional(),
+		internal: z.boolean(),
+		attachable: z.boolean(),
+		enableIPv4: z.boolean(),
+		enableIPv6: z.boolean(),
+		ipamDriver: z.string().optional(),
+		ipamConfig: z.array(ipamConfigEntrySchema),
+	})
+	.superRefine((input, ctx) => {
+		if (!input.enableIPv4 && !input.enableIPv6) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ["enableIPv4"],
+				message: "IPv4 or IPv6 must be enabled",
+			});
+		}
+		for (const [index, entry] of input.ipamConfig.entries()) {
+			if (!entry.subnet && (entry.gateway || entry.ipRange)) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ["ipamConfig", index, "subnet"],
+					message: "Gateway and IP range require a subnet",
+				});
+			}
+		}
+	});
 
 type NetworkFormValues = z.infer<typeof networkFormSchema>;
 
 const defaultValues: NetworkFormValues = {
 	name: "",
 	driver: "bridge",
-	scope: SCOPE_EMPTY,
 	serverId: undefined,
 	internal: false,
 	attachable: false,
-	ingress: false,
-	configOnly: false,
 	enableIPv4: true,
 	enableIPv6: false,
 	ipamDriver: "",
@@ -97,7 +103,8 @@ const toggleOptions = [
 	{
 		name: "attachable",
 		label: "Attachable",
-		description: "Allow standalone containers to attach to this network.",
+		description:
+			"Allow standalone containers to attach (overlay networks only).",
 	},
 	{
 		name: "enableIPv4",
@@ -109,41 +116,21 @@ const toggleOptions = [
 		label: "Enable IPv6",
 		description: "Enable IPv6 addressing on the network.",
 	},
-	{
-		name: "ingress",
-		label: "Ingress",
-		description: "Use as the routing-mesh network in Swarm mode.",
-	},
-	{
-		name: "configOnly",
-		label: "Config only",
-		description: "Placeholder network whose config is reused by others.",
-	},
 ] as const;
 
 interface HandleNetworkProps {
-	networkId?: string;
 	children?: React.ReactNode;
 }
 
-export const HandleNetwork = ({ networkId, children }: HandleNetworkProps) => {
+// Docker networks are immutable, so this dialog only creates them;
+// changing a network means deleting and recreating it.
+export const HandleNetwork = ({ children }: HandleNetworkProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const utils = api.useUtils();
-	const isEdit = !!networkId;
 
 	const { data: servers } = api.server.all.useQuery();
-	const { data: network, isLoading: isLoadingNetwork } =
-		api.network.one.useQuery(
-			{ networkId: networkId! },
-			{ enabled: isEdit && !!networkId },
-		);
-
-	const createMutation = api.network.create.useMutation();
-	const updateMutation = api.network.update.useMutation();
-	const isPending = isEdit
-		? updateMutation.isPending
-		: createMutation.isPending;
+	const { mutateAsync, isPending } = api.network.create.useMutation();
 
 	const form = useForm<NetworkFormValues>({
 		resolver: zodResolver(networkFormSchema),
@@ -155,83 +142,39 @@ export const HandleNetwork = ({ networkId, children }: HandleNetworkProps) => {
 		name: "ipamConfig",
 	});
 
-	useEffect(() => {
-		if (isEdit && network && isOpen) {
-			const ipam = network.ipam ?? {};
-			const ipamConfigArr = (ipam.config ?? []).map((c) => ({
-				subnet: c.subnet ?? "",
-				ipRange: c.ipRange ?? "",
-				gateway: c.gateway ?? "",
-			}));
-			form.reset({
-				...defaultValues,
-				name: network.name,
-				driver: network.driver,
-				scope: network.scope ?? SCOPE_EMPTY,
-				serverId: network.serverId || undefined,
-				internal: network.internal,
-				attachable: network.attachable,
-				enableIPv4: network.enableIPv4,
-				enableIPv6: network.enableIPv6,
-				ipamDriver: ipam.driver ?? "",
-				ipamConfig: ipamConfigArr,
-				ingress: network.ingress,
-				configOnly: network.configOnly,
-			});
-		}
-	}, [isEdit, isOpen, network, form]);
-
 	const onSubmit = async (data: NetworkFormValues) => {
-		const scope =
-			data.scope && data.scope !== SCOPE_EMPTY ? data.scope : undefined;
-
-		const payload = {
-			name: data.name,
-			driver: data.driver,
-			scope,
-			serverId: data.serverId || undefined,
-			internal: data.internal,
-			attachable: data.attachable,
-			ingress: data.ingress,
-			configOnly: data.configOnly,
-			enableIPv4: data.enableIPv4,
-			enableIPv6: data.enableIPv6,
-			ipam: {
-				driver: data.ipamDriver,
-				config: data.ipamConfig,
-			},
-		};
-
 		try {
-			if (isEdit && networkId) {
-				await updateMutation.mutateAsync({ networkId, ...payload });
-			} else {
-				await createMutation.mutateAsync(payload);
-			}
+			await mutateAsync({
+				name: data.name,
+				driver: data.driver,
+				serverId: data.serverId || undefined,
+				internal: data.internal,
+				attachable: data.attachable,
+				enableIPv4: data.enableIPv4,
+				enableIPv6: data.enableIPv6,
+				ipam: {
+					driver: data.ipamDriver || undefined,
+					config: data.ipamConfig,
+				},
+			});
 
-			toast.success(isEdit ? "Network updated" : "Network created");
+			toast.success("Network created");
 			await utils.network.all.invalidate();
-			if (networkId) await utils.network.one.invalidate({ networkId });
 			setIsOpen(false);
 			form.reset(defaultValues);
-		} catch {
-			toast.error(isEdit ? "Error updating network" : "Error creating network");
+		} catch (error) {
+			toast.error("Error creating network", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			});
 		}
 	};
 
-	const trigger =
-		children ??
-		(isEdit ? (
-			<Button size="sm" variant="outline">
-				<Pencil className=" size-4" />
-				Edit
-			</Button>
-		) : (
-			<Button>
-				<Plus className=" size-4" />
-				Add network
-			</Button>
-		));
+	const trigger = children ?? (
+		<Button>
+			<Plus className=" size-4" />
+			Add network
+		</Button>
+	);
 
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -240,274 +183,237 @@ export const HandleNetwork = ({ networkId, children }: HandleNetworkProps) => {
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2">
 						<Network className="size-5 text-muted-foreground" />
-						{isEdit ? "Edit network" : "Add network"}
+						Add network
 					</DialogTitle>
 					<DialogDescription>
-						{isEdit
-							? "Update this Docker network. Changes apply to name, driver, and server assignment."
-							: "Create a new Docker network for your organization. You can optionally assign it to a server."}
+						Create a new Docker network for your organization. Networks are
+						immutable: to change one, delete it and create it again.
 					</DialogDescription>
 				</DialogHeader>
-				{isEdit && isLoadingNetwork ? (
-					<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
-						Loading network…
-					</div>
-				) : (
-					<Form {...form}>
-						<form
-							onSubmit={form.handleSubmit(onSubmit)}
-							className="flex w-full flex-col gap-6"
-						>
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Name</FormLabel>
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="flex w-full flex-col gap-6"
+					>
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Name</FormLabel>
+										<FormControl>
+											<Input placeholder="my-network" {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="driver"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Driver</FormLabel>
+										<Select onValueChange={field.onChange} value={field.value}>
 											<FormControl>
-												<Input placeholder="my-network" {...field} />
+												<SelectTrigger>
+													<SelectValue placeholder="Select driver" />
+												</SelectTrigger>
 											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="driver"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Driver</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												value={field.value}
-											>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select driver" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													{networkDriverEnum.map((d) => (
-														<SelectItem key={d} value={d}>
-															{d}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</div>
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-								<FormField
-									control={form.control}
-									name="serverId"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Server</FormLabel>
-											<Select
-												onValueChange={(value) =>
-													field.onChange(
-														value === SERVER_LOCAL ? undefined : value,
-													)
-												}
-												value={
-													field.value ?? (isCloud ? undefined : SERVER_LOCAL)
-												}
-											>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select server" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													{!isCloud && (
-														<SelectItem value={SERVER_LOCAL}>
-															Dokploy server
-														</SelectItem>
-													)}
-													{servers?.map((server) => (
-														<SelectItem
-															key={server.serverId}
-															value={server.serverId}
-														>
-															{server.name}
-														</SelectItem>
-													))}
-												</SelectContent>
-											</Select>
-											<FormDescription className="text-muted-foreground">
-												{isCloud
-													? "Server where this network will be created."
-													: "Dokploy server is the default local server."}
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<FormField
-									control={form.control}
-									name="scope"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Scope (optional)</FormLabel>
-											<Select
-												onValueChange={field.onChange}
-												value={field.value ?? SCOPE_EMPTY}
-											>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select scope" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													<SelectItem value={SCOPE_EMPTY}>None</SelectItem>
-													<SelectItem value="local">local</SelectItem>
-													<SelectItem value="swarm">swarm</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</div>
-							<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-								{toggleOptions.map((option) => (
-									<FormField
-										key={option.name}
-										control={form.control}
-										name={option.name}
-										render={({ field }) => (
-											<FormItem className="flex flex-row items-start justify-between gap-3 space-y-0 rounded-lg border p-4">
-												<div className="space-y-1 pr-1">
-													<FormLabel>{option.label}</FormLabel>
-													<FormDescription className="text-muted-foreground">
-														{option.description}
-													</FormDescription>
-												</div>
-												<FormControl>
-													<Switch
-														checked={field.value}
-														onCheckedChange={field.onChange}
-													/>
-												</FormControl>
-											</FormItem>
-										)}
-									/>
-								))}
-							</div>
-							<div className="space-y-4 rounded-lg border p-4">
-								<div className="space-y-1">
-									<FormLabel>IPAM</FormLabel>
-									<p className="text-sm text-muted-foreground">
-										IP address management settings for this network.
-									</p>
-								</div>
-								<FormField
-									control={form.control}
-									name="ipamDriver"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel className="text-muted-foreground">
-												Driver (optional)
-											</FormLabel>
-											<FormControl>
-												<Input {...field} placeholder="default" />
-											</FormControl>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-								<div className="space-y-2">
-									<FormLabel className="text-muted-foreground">
-										Config (subnet / gateway / IP range)
-									</FormLabel>
-									{ipamConfigFieldArray.fields.map((field, index) => (
-										<div key={field.id} className="flex flex-wrap gap-2">
-											<FormField
-												control={form.control}
-												name={`ipamConfig.${index}.subnet`}
-												render={({ field: f }) => (
-													<FormItem className="min-w-[140px] flex-1">
-														<FormControl>
-															<Input
-																{...f}
-																placeholder="Subnet (e.g. 172.20.0.0/16)"
-															/>
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-											<FormField
-												control={form.control}
-												name={`ipamConfig.${index}.ipRange`}
-												render={({ field: f }) => (
-													<FormItem className="min-w-[120px] flex-1">
-														<FormControl>
-															<Input {...f} placeholder="IP range" />
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-											<FormField
-												control={form.control}
-												name={`ipamConfig.${index}.gateway`}
-												render={({ field: f }) => (
-													<FormItem className="min-w-[120px] flex-1">
-														<FormControl>
-															<Input {...f} placeholder="Gateway" />
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-											<Button
-												type="button"
-												variant="outline"
-												size="icon"
-												aria-label="Remove IPAM config"
-												onClick={() => ipamConfigFieldArray.remove(index)}
-											>
-												<Trash2 className="size-4" />
-											</Button>
-										</div>
-									))}
-									<Button
-										type="button"
-										variant="outline"
-										size="sm"
-										onClick={() =>
-											ipamConfigFieldArray.append({
-												subnet: "",
-												ipRange: "",
-												gateway: "",
-											})
+											<SelectContent>
+												{networkDriverEnum.map((d) => (
+													<SelectItem key={d} value={d}>
+														{d}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+										<FormDescription className="text-muted-foreground">
+											bridge for single-server containers; overlay for Swarm
+											services.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<FormField
+							control={form.control}
+							name="serverId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<Select
+										onValueChange={(value) =>
+											field.onChange(value === SERVER_LOCAL ? undefined : value)
 										}
+										value={field.value ?? (isCloud ? undefined : SERVER_LOCAL)}
 									>
-										<Plus className="size-4" />
-										Add IPAM config
-									</Button>
-								</div>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Select server" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											{!isCloud && (
+												<SelectItem value={SERVER_LOCAL}>
+													Dokploy server
+												</SelectItem>
+											)}
+											{servers?.map((server) => (
+												<SelectItem
+													key={server.serverId}
+													value={server.serverId}
+												>
+													{server.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormDescription className="text-muted-foreground">
+										{isCloud
+											? "Server where this network will be created."
+											: "Dokploy server is the default local server."}
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							{toggleOptions.map((option) => (
+								<FormField
+									key={option.name}
+									control={form.control}
+									name={option.name}
+									render={({ field }) => (
+										<FormItem className="flex flex-row items-start justify-between gap-3 space-y-0 rounded-lg border p-4">
+											<div className="space-y-1 pr-1">
+												<FormLabel>{option.label}</FormLabel>
+												<FormDescription className="text-muted-foreground">
+													{option.description}
+												</FormDescription>
+											</div>
+											<FormControl>
+												<Switch
+													checked={field.value}
+													onCheckedChange={field.onChange}
+												/>
+											</FormControl>
+										</FormItem>
+									)}
+								/>
+							))}
+						</div>
+						<div className="space-y-4 rounded-lg border p-4">
+							<div className="space-y-1">
+								<FormLabel>IPAM</FormLabel>
+								<p className="text-sm text-muted-foreground">
+									IP address management settings for this network.
+								</p>
 							</div>
-							<DialogFooter>
+							<FormField
+								control={form.control}
+								name="ipamDriver"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-muted-foreground">
+											Driver (optional)
+										</FormLabel>
+										<FormControl>
+											<Input {...field} placeholder="default" />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<div className="space-y-2">
+								<FormLabel className="text-muted-foreground">
+									Config (subnet / gateway / IP range)
+								</FormLabel>
+								{ipamConfigFieldArray.fields.map((field, index) => (
+									<div key={field.id} className="flex flex-wrap gap-2">
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.subnet`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[140px] flex-1">
+													<FormControl>
+														<Input
+															{...f}
+															placeholder="Subnet (e.g. 172.20.0.0/16)"
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.ipRange`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[120px] flex-1">
+													<FormControl>
+														<Input {...f} placeholder="IP range" />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name={`ipamConfig.${index}.gateway`}
+											render={({ field: f }) => (
+												<FormItem className="min-w-[120px] flex-1">
+													<FormControl>
+														<Input {...f} placeholder="Gateway" />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<Button
+											type="button"
+											variant="outline"
+											size="icon"
+											aria-label="Remove IPAM config"
+											onClick={() => ipamConfigFieldArray.remove(index)}
+										>
+											<Trash2 className="size-4" />
+										</Button>
+									</div>
+								))}
 								<Button
 									type="button"
 									variant="outline"
-									onClick={() => setIsOpen(false)}
+									size="sm"
+									onClick={() =>
+										ipamConfigFieldArray.append({
+											subnet: "",
+											ipRange: "",
+											gateway: "",
+										})
+									}
 								>
-									Cancel
+									<Plus className="size-4" />
+									Add IPAM config
 								</Button>
-								<Button type="submit" isLoading={isPending}>
-									{isEdit ? "Update network" : "Create network"}
-								</Button>
-							</DialogFooter>
-						</form>
-					</Form>
-				)}
+							</div>
+						</div>
+						<DialogFooter>
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => setIsOpen(false)}
+							>
+								Cancel
+							</Button>
+							<Button type="submit" isLoading={isPending}>
+								Create network
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
 			</DialogContent>
 		</Dialog>
 	);

apps/dokploy/components/dashboard/networks/show-networks.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { Loader2, Network, Pencil } from "lucide-react";
+import { Loader2, Network, Trash2 } from "lucide-react";
+import { toast } from "sonner";
 import { HandleNetwork } from "@/components/dashboard/networks/handle-network";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -23,7 +25,9 @@ import {
 import { api } from "@/utils/api";
 
 export const ShowNetworks = () => {
+	const utils = api.useUtils();
 	const { data: networks, isLoading } = api.network.all.useQuery();
+	const { mutateAsync: removeNetwork } = api.network.remove.useMutation();
 
 	return (
 		<div className="w-full">
@@ -91,7 +95,7 @@ export const ShowNetworks = () => {
 													<Badge variant="outline">{n.driver}</Badge>
 												</TableCell>
 												<TableCell className="text-muted-foreground">
-													{n.scope ?? "—"}
+													{n.driver === "overlay" ? "swarm" : "local"}
 												</TableCell>
 												<TableCell className="text-muted-foreground">
 													{n.internal ? "Yes" : "No"}
@@ -106,15 +110,34 @@ export const ShowNetworks = () => {
 													{new Date(n.createdAt).toLocaleDateString()}
 												</TableCell>
 												<TableCell className="text-right">
-													<HandleNetwork networkId={n.networkId}>
+													<DialogAction
+														title="Delete network"
+														description={`The network "${n.name}" will be removed from Docker and Dokploy. This action cannot be undone.`}
+														onClick={async () => {
+															try {
+																await removeNetwork({
+																	networkId: n.networkId,
+																});
+																toast.success("Network deleted");
+																await utils.network.all.invalidate();
+															} catch (error) {
+																toast.error("Error deleting network", {
+																	description:
+																		error instanceof Error
+																			? error.message
+																			: "Unknown error",
+																});
+															}
+														}}
+													>
 														<Button
 															variant="ghost"
 															size="icon-xs"
-															aria-label="Edit network"
+															aria-label="Delete network"
 														>
-															<Pencil className="size-4" />
+															<Trash2 className="size-4 text-destructive" />
 														</Button>
-													</HandleNetwork>
+													</DialogAction>
 												</TableCell>
 											</TableRow>
 										))}