From 396fb9f57f79f197636f6008aae88d42eca9ce10 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Sat, 4 Apr 2026 21:16:34 -0600
Subject: [PATCH] feat: enhance ShowSwarmOverviewModal with tabbed interface
 for containers and overview

- Introduced a tabbed layout in the ShowSwarmOverviewModal to separate the overview and containers views.
- Added ShowSwarmContainers component to the containers tab, improving the organization of information.
- Integrated Card component for better styling and presentation of the containers section.
---
 .../servers/show-swarm-overview-modal.tsx     | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx b/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
index 66d103013..0add73e70 100644
--- a/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
+++ b/apps/dokploy/components/dashboard/settings/servers/show-swarm-overview-modal.tsx
@@ -1,6 +1,9 @@
 import { useState } from "react";
+import { Card } from "@/components/ui/card";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ShowSwarmContainers } from "../../swarm/containers/show-swarm-containers";
 import SwarmMonitorCard from "../../swarm/monitoring-card";
 
 interface Props {
@@ -21,9 +24,24 @@ export const ShowSwarmOverviewModal = ({ serverId }: Props) => {
 				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="sm:max-w-7xl  ">
-				<div className="grid w-full gap-1">
-					<SwarmMonitorCard serverId={serverId} />
-				</div>
+				<Tabs defaultValue="overview">
+					<TabsList>
+						<TabsTrigger value="overview">Overview</TabsTrigger>
+						<TabsTrigger value="containers">Containers</TabsTrigger>
+					</TabsList>
+					<TabsContent value="overview">
+						<div className="grid w-full gap-1">
+							<SwarmMonitorCard serverId={serverId} />
+						</div>
+					</TabsContent>
+					<TabsContent value="containers">
+						<Card className="h-full bg-sidebar p-2.5 rounded-xl mx-auto w-full">
+							<div className="rounded-xl bg-background shadow-md p-6">
+								<ShowSwarmContainers serverId={serverId} />
+							</div>
+						</Card>
+					</TabsContent>
+				</Tabs>
 			</DialogContent>
 		</Dialog>
 	);