refactor(networks): enhance network display and management interface

- Updated the ShowNetworks component to improve the layout and user experience.
- Introduced a new Pencil icon for editing networks and added a Badge component for displaying network drivers.
- Refactored loading and empty state handling for better visual feedback.
- Modified the API query to include server details for each network, enhancing the data returned for better context.

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

@@ -1,10 +1,12 @@
 "use client";
 
-import { Loader2, Network } from "lucide-react";
+import { Loader2, Network, Pencil } from "lucide-react";
 import { HandleNetwork } from "@/components/dashboard/networks/handle-network";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
+	CardAction,
 	CardContent,
 	CardDescription,
 	CardHeader,
@@ -27,89 +29,99 @@ export const ShowNetworks = () => {
 		<div className="w-full">
 			<Card className="h-full bg-sidebar p-2.5 rounded-xl">
 				<div className="rounded-xl bg-background shadow-md ">
-					<div className="flex flex-row justify-between items-center">
-						<CardHeader className="">
-							<CardTitle className="text-xl flex flex-row gap-2">
-								<Network className="size-6 text-muted-foreground self-center" />
-								Networks
-							</CardTitle>
-							<CardDescription>
-								Manage Docker networks for your organization. Networks can be
-								scoped to a server (optional).
-							</CardDescription>
-						</CardHeader>
-						{networks && networks?.length > 0 && <HandleNetwork />}
-					</div>
+					<CardHeader className="">
+						<CardTitle className="text-xl flex flex-row gap-2">
+							<Network className="size-6 text-muted-foreground self-center" />
+							Networks
+						</CardTitle>
+						<CardDescription>
+							Manage Docker networks for your organization. Networks can be
+							scoped to a server (optional).
+						</CardDescription>
+						{networks && networks.length > 0 && (
+							<CardAction className="self-center">
+								<HandleNetwork />
+							</CardAction>
+						)}
+					</CardHeader>
 
 					<CardContent className="space-y-2 py-8 border-t">
-						<div className="gap-4 pb-20 w-full">
-							<div className="flex flex-col gap-4 w-full overflow-auto">
-								<div className="rounded-md border">
-									{isLoading ? (
-										<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground h-[55vh]">
-											<span>Loading...</span>
-											<Loader2 className="animate-spin size-4" />
-										</div>
-									) : !networks?.length ? (
-										<div className="flex min-h-[55vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
-											<div className="rounded-full bg-muted p-4">
-												<Network className="size-10 text-muted-foreground" />
-											</div>
-											<div className="space-y-1 text-center">
-												<p className="text-sm font-medium">No networks yet</p>
-												<p className="max-w-sm text-sm text-muted-foreground">
-													Create Docker networks for your organization and
-													optionally attach them to a server. Add your first
-													network to get started.
-												</p>
-											</div>
-											<HandleNetwork />
-										</div>
-									) : (
-										<Table>
-											<TableHeader>
-												<TableRow>
-													<TableHead>Name</TableHead>
-													<TableHead>Driver</TableHead>
-													<TableHead>Scope</TableHead>
-													<TableHead>Internal</TableHead>
-													<TableHead>Attachable</TableHead>
-													<TableHead>Server</TableHead>
-													<TableHead>Created</TableHead>
-													<TableHead className="w-[80px]">Actions</TableHead>
-												</TableRow>
-											</TableHeader>
-											<TableBody>
-												{networks.map((n) => (
-													<TableRow key={n.networkId}>
-														<TableCell className="font-medium">
-															{n.name}
-														</TableCell>
-														<TableCell>{n.driver}</TableCell>
-														<TableCell>{n.scope ?? "—"}</TableCell>
-														<TableCell>{n.internal ? "Yes" : "No"}</TableCell>
-														<TableCell>{n.attachable ? "Yes" : "No"}</TableCell>
-														<TableCell>
-															{n.serverId ?? "Dokploy server"}
-														</TableCell>
-														<TableCell className="text-muted-foreground">
-															{new Date(n.createdAt).toLocaleDateString()}
-														</TableCell>
-														<TableCell>
-															<HandleNetwork networkId={n.networkId}>
-																<Button variant="ghost" size="sm">
-																	Edit
-																</Button>
-															</HandleNetwork>
-														</TableCell>
-													</TableRow>
-												))}
-											</TableBody>
-										</Table>
-									)}
-								</div>
+						{isLoading ? (
+							<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[45vh]">
+								<span>Loading...</span>
+								<Loader2 className="animate-spin size-4" />
 							</div>
-						</div>
+						) : !networks?.length ? (
+							<div className="flex min-h-[45vh] w-full flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-8">
+								<div className="rounded-full bg-muted p-4">
+									<Network className="size-10 text-muted-foreground" />
+								</div>
+								<div className="space-y-1 text-center">
+									<p className="text-sm font-medium">No networks yet</p>
+									<p className="max-w-sm text-sm text-muted-foreground">
+										Create Docker networks for your organization and optionally
+										attach them to a server. Add your first network to get
+										started.
+									</p>
+								</div>
+								<HandleNetwork />
+							</div>
+						) : (
+							<div className="rounded-md border overflow-x-auto">
+								<Table>
+									<TableHeader>
+										<TableRow>
+											<TableHead>Name</TableHead>
+											<TableHead>Driver</TableHead>
+											<TableHead>Scope</TableHead>
+											<TableHead>Internal</TableHead>
+											<TableHead>Attachable</TableHead>
+											<TableHead>Server</TableHead>
+											<TableHead>Created</TableHead>
+											<TableHead className="w-[80px] text-right">
+												Actions
+											</TableHead>
+										</TableRow>
+									</TableHeader>
+									<TableBody>
+										{networks.map((n) => (
+											<TableRow key={n.networkId}>
+												<TableCell className="font-medium">{n.name}</TableCell>
+												<TableCell>
+													<Badge variant="outline">{n.driver}</Badge>
+												</TableCell>
+												<TableCell className="text-muted-foreground">
+													{n.scope ?? "—"}
+												</TableCell>
+												<TableCell className="text-muted-foreground">
+													{n.internal ? "Yes" : "No"}
+												</TableCell>
+												<TableCell className="text-muted-foreground">
+													{n.attachable ? "Yes" : "No"}
+												</TableCell>
+												<TableCell>
+													{n.server?.name ?? "Dokploy Server"}
+												</TableCell>
+												<TableCell className="text-muted-foreground">
+													{new Date(n.createdAt).toLocaleDateString()}
+												</TableCell>
+												<TableCell className="text-right">
+													<HandleNetwork networkId={n.networkId}>
+														<Button
+															variant="ghost"
+															size="icon-xs"
+															aria-label="Edit network"
+														>
+															<Pencil className="size-4" />
+														</Button>
+													</HandleNetwork>
+												</TableCell>
+											</TableRow>
+										))}
+									</TableBody>
+								</Table>
+							</div>
+						)}
 					</CardContent>
 				</div>
 			</Card>

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

@@ -18,11 +18,18 @@ import {
 
 export const networkRouter = createTRPCRouter({
 	all: protectedProcedure.query(async ({ ctx }) => {
-		const rows = await db
-			.select()
-			.from(networkTable)
-			.where(eq(networkTable.organizationId, ctx.session.activeOrganizationId))
-			.orderBy(desc(networkTable.createdAt));
+		const rows = await db.query.network.findMany({
+			where: eq(networkTable.organizationId, ctx.session.activeOrganizationId),
+			with: {
+				server: {
+					columns: {
+						serverId: true,
+						name: true,
+					},
+				},
+			},
+			orderBy: desc(networkTable.createdAt),
+		});
 		return rows;
 	}),