chore: add seperator and make tittles big

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -1,4 +1,5 @@
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Tooltip,
@@ -15,6 +16,7 @@ import {
 	Loader2,
 	Server,
 } from "lucide-react";
+import Link from "next/link";
 import { NodeCard } from "./details/details-card";
 
 export interface SwarmList {
@@ -72,7 +74,6 @@ export default function SwarmMonitorCard() {
 		);
 	}
 
-	console.log(nodes);
 	const totalNodes = nodes.length;
 	const activeNodesCount = nodes.filter(
 		(node) => node.Status === "Ready",
@@ -103,23 +104,21 @@ export default function SwarmMonitorCard() {
 
 	return (
 		<div className="w-full max-w-7xl mx-auto">
+			<div className="flex justify-between items-center mb-4">
+				<h1 className="text-2xl font-bold">Docker Swarm Overview</h1>
+				<Button
+					type="button"
+					onClick={() => window.location.replace("/dashboard/settings/cluster")}
+				>
+					Manage Cluster
+				</Button>
+			</div>
 			<Card className="mb-6 bg-transparent">
 				<CardHeader className="flex flex-row items-center justify-between">
 					<CardTitle className="flex items-center gap-2">
 						<Server className="h-6 w-6" />
 						Docker Swarm Monitor
 					</CardTitle>
-					{/* <Button
-						variant="outline"
-						size="sm"
-						onClick={handleRefresh}
-						disabled={isRefreshing}
-					>
-						<RefreshCw
-							className={`h-4 w-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`}
-						/>
-						Refresh
-					</Button> */}
 				</CardHeader>
 				<CardContent>
 					<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx

@@ -1,19 +1,69 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { api } from "@/utils/api";
+import { LoaderIcon } from "lucide-react";
 import { ServerOverviewCard } from "./server-card";
 
 export default function ServersOverview() {
 	const { data: servers, isLoading } = api.server.all.useQuery();
 
 	if (isLoading) {
-		return <div>Loading...</div>;
+		return (
+			<>
+				<Card className="w-full bg-transparent">
+					<CardHeader>
+						<CardTitle className="flex items-center justify-between">
+							<span className="flex items-center gap-2">
+								<LoaderIcon />
+							</span>
+							<Badge className="text-xs">
+								<LoaderIcon />
+							</Badge>
+						</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<div className="grid gap-2 text-sm">
+							<div className="flex justify-between">
+								<span className="font-medium">IP Address:</span>
+							</div>
+							<div className="flex justify-between">
+								<span className="font-medium">Port:</span>
+							</div>
+							<div className="flex justify-between">
+								<span className="font-medium">Username:</span>
+							</div>
+							<div className="flex justify-between">
+								<span className="font-medium">App Name:</span>
+							</div>
+							<div className="flex justify-between">
+								<span className="font-medium">Docker Cleanup:</span>
+							</div>
+							<div className="flex justify-between">
+								<span className="font-medium">Created At:</span>
+							</div>
+						</div>
+					</CardContent>
+				</Card>
+			</>
+		);
 	}
 
 	if (!servers) {
 		return <div>No servers found</div>;
 	}
 	return (
-		<div className="container mx-auto p-2">
-			<h1 className="text-2xl font-bold mb-4">Server Overview</h1>
+		<div className="w-full max-w-7xl mx-auto">
+			<div className="flex justify-between items-center mb-4">
+				<h1 className="text-2xl font-bold">Server Overview</h1>
+				<Button
+					type="button"
+					onClick={() => window.location.replace("/dashboard/settings/servers")}
+				>
+					Manage Servers
+				</Button>
+			</div>
 			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 				{servers.map((server) => (
 					<ServerOverviewCard server={server} key={server.serverId} />

apps/dokploy/pages/dashboard/swarm.tsx

@@ -1,6 +1,7 @@
 import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
 import ServersOverview from "@/components/dashboard/swarm/servers/servers-overview";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
+import { Separator } from "@/components/ui/separator";
 import { appRouter } from "@/server/api/root";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
@@ -14,13 +15,10 @@ const Dashboard = () => {
 			<div className="flex flex-wrap gap-4 py-4">
 				<SwarmMonitorCard />
 			</div>
-			<ServersOverview />
-			{/* <ShowApplicationServers /> */}
-			{/* <h1>Swarm Nodes</h1>
-			<ShowSwarmNodes />
-			<Separator />
-			<h1 className="mt-24">Server Nodes</h1>
-			<ShowApplicationServers /> */}
+			<Separator className="my-8" />
+			<div className="flex flex-wrap gap-4 py-4">
+				<ServersOverview />
+			</div>
 		</>
 	);
 };