From a7983f32a6eb6f28aac9a8b1b5c7fd751d20d013 Mon Sep 17 00:00:00 2001
From: 190km <botmiley@gmail.com>
Date: Mon, 30 Dec 2024 20:05:44 +0100
Subject: [PATCH] style: added gap for cards title & gap for tls status &
 availability

---
 .../dashboard/swarm/details/details-card.tsx  |   2 +-
 .../dashboard/swarm/monitoring-card.tsx       | 108 ++++++++++--------
 2 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/apps/dokploy/components/dashboard/swarm/details/details-card.tsx b/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
index 2de0901a..eb06e79c 100644
--- a/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
@@ -63,7 +63,7 @@ export function NodeCard({ node, serverId }: Props) {
       </CardHeader>
       <CardContent>
         <div className="space-y-6">
-          <div className="flex flex-wrap items-center justify-between">
+          <div className="flex flex-wrap gap-y-2 items-center justify-between">
             <div className="flex items-center space-x-4 p-2 rounded-xl border">
               <div className={`h-2.5 w-2.5 rounded-full ${node.Status === "Ready" ? "bg-green-500" : "bg-red-500"}`} />
               <div className="font-medium">{node.Hostname}</div>
diff --git a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
index bd8570db..16d2532c 100644
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -8,13 +8,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { api } from "@/utils/api";
-import {
-  Activity,
-  Loader2,
-  Monitor,
-  Settings,
-  Server,
-} from "lucide-react";
+import { Activity, Loader2, Monitor, Settings, Server } from "lucide-react";
 import { NodeCard } from "./details/details-card";
 
 interface Props {
@@ -26,46 +20,62 @@ export default function SwarmMonitorCard({ serverId }: Props) {
     serverId,
   });
 
-	if (isLoading) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-					<div className="flex items-center justify-center h-full text-muted-foreground">
-						<Loader2 className="h-6 w-6 animate-spin" />
-					</div>
-				</div>
-			</div>
-		);
-	}
+  if (isLoading) {
+    return (
+      <div className="w-full max-w-7xl mx-auto">
+        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+          <div className="flex items-center justify-center h-full text-muted-foreground">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        </div>
+      </div>
+    );
+  }
 
-	if (!nodes) {
-		return (
-			<div className="w-full max-w-7xl mx-auto">
-				<div className="mb-6 border min-h-[55vh] rounded-lg h-full">
-					<div className="flex items-center justify-center h-full  text-destructive">
-						<span>Failed to load data</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
+  if (!nodes) {
+    return (
+      <div className="w-full max-w-7xl mx-auto">
+        <div className="mb-6 border min-h-[55vh] rounded-lg h-full">
+          <div className="flex items-center justify-center h-full  text-destructive">
+            <span>Failed to load data</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   const totalNodes = nodes.length;
-  const activeNodesCount = nodes.filter((node) => node.Status === "Ready").length;
-  const managerNodesCount = nodes.filter((node) =>node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable").length;
+  const activeNodesCount = nodes.filter(
+    (node) => node.Status === "Ready"
+  ).length;
+  const managerNodesCount = nodes.filter(
+    (node) =>
+      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
+  ).length;
   const activeNodes = nodes.filter((node) => node.Status === "Ready");
-  const managerNodes = nodes.filter((node) => node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable");
+  const managerNodes = nodes.filter(
+    (node) =>
+      node.ManagerStatus === "Leader" || node.ManagerStatus === "Reachable"
+  );
 
   return (
     <div className="min-h-screen">
       <div className="w-full max-w-7xl mx-auto space-y-6 py-4">
         <header className="flex items-center justify-between">
           <div className="space-y-1">
-            <h1 className="text-2xl font-semibold tracking-tight">Docker Swarm Overview</h1>
-            <p className="text-sm text-muted-foreground">Monitor and manage your Docker Swarm cluster</p>
+            <h1 className="text-2xl font-semibold tracking-tight">
+              Docker Swarm Overview
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              Monitor and manage your Docker Swarm cluster
+            </p>
           </div>
           {!serverId && (
-            <Button onClick={() => window.location.replace("/dashboard/settings/cluster")}>
+            <Button
+              onClick={() =>
+                window.location.replace("/dashboard/settings/cluster")
+              }
+            >
               <Settings className="mr-2 h-4 w-4" />
               Manage Cluster
             </Button>
@@ -87,12 +97,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 
           <Card className="bg-background">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Active Nodes
-                <Badge variant="green">
-                  Online
-                </Badge>
-              </CardTitle>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-sm font-medium">
+                  Active Nodes
+                </CardTitle>
+                <Badge variant="green">Online</Badge>
+
+              </div>
               <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
                 <Activity className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
               </div>
@@ -121,12 +132,13 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 
           <Card className="bg-background">
             <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">
-                Manager Nodes
-                <Badge variant="green">
-                  Online
-                </Badge>
-              </CardTitle>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-sm font-medium">
+                  Manager Nodes
+                </CardTitle>
+                <Badge variant="green">Online</Badge>
+
+              </div>
               <div className="p-2 bg-emerald-600/20 text-emerald-600 rounded-md">
                 <Monitor className="h-4 w-4 text-muted-foreground dark:text-emerald-600" />
               </div>
@@ -162,4 +174,4 @@ export default function SwarmMonitorCard({ serverId }: Props) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}