From 9d497142db89d2571ef81a778eb5cd866d2a005d Mon Sep 17 00:00:00 2001
From: djknaeckebrot <dennis.lueke@pm.me>
Date: Wed, 18 Dec 2024 08:43:07 +0100
Subject: [PATCH] feat: add latest cards

---
 .../dashboard/swarm/server-card.tsx           | 122 ++++++++++++++++++
 .../swarm/servers/servers-overview.tsx        |  24 ++++
 apps/dokploy/pages/dashboard/swarm.tsx        |   5 +-
 3 files changed, 150 insertions(+), 1 deletion(-)
 create mode 100644 apps/dokploy/components/dashboard/swarm/server-card.tsx
 create mode 100644 apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx

diff --git a/apps/dokploy/components/dashboard/swarm/server-card.tsx b/apps/dokploy/components/dashboard/swarm/server-card.tsx
new file mode 100644
index 00000000..10029114
--- /dev/null
+++ b/apps/dokploy/components/dashboard/swarm/server-card.tsx
@@ -0,0 +1,122 @@
+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 { AlertCircle, CheckCircle, HelpCircle, ServerIcon } from "lucide-react";
+import { useState } from "react";
+import { ShowContainers } from "../docker/show/show-containers";
+// import type { Server } from "../types/server";
+// import { ShowServerContainers } from "./ShowServerContainers";
+
+export interface Server {
+	serverId: string;
+	name: string;
+	description: string | null;
+	ipAddress: string;
+	port: number;
+	username: string;
+	appName: string;
+	enableDockerCleanup: boolean;
+	createdAt: string;
+	adminId: string;
+	serverStatus: "active" | "inactive";
+	command: string;
+	sshKeyId: string | null;
+}
+
+interface ServerOverviewCardProps {
+	server: Server;
+}
+
+export function ServerOverviewCard({ server }: ServerOverviewCardProps) {
+	const [showContainers, setShowContainers] = useState(false);
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "active":
+				return <CheckCircle className="h-4 w-4 text-green-500" />;
+			case "inactive":
+				return <AlertCircle className="h-4 w-4 text-red-500" />;
+			default:
+				return <HelpCircle className="h-4 w-4 text-yellow-500" />;
+		}
+	};
+
+	return (
+		<Card className="w-full bg-transparent">
+			<CardHeader>
+				<CardTitle className="flex items-center justify-between">
+					<span className="flex items-center gap-2">
+						{getStatusIcon(server.serverStatus)}
+						{server.name}
+					</span>
+					<Badge
+						variant={
+							server.serverStatus === "active" ? "default" : "destructive"
+						}
+						className="text-xs"
+					>
+						{server.serverStatus}
+					</Badge>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="grid gap-2 text-sm">
+					<div className="flex justify-between">
+						<span className="font-medium">IP Address:</span>
+						<span>{server.ipAddress}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Port:</span>
+						<span>{server.port}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Username:</span>
+						<span>{server.username}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">App Name:</span>
+						<span>{server.appName}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Docker Cleanup:</span>
+						<span>{server.enableDockerCleanup ? "Enabled" : "Disabled"}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Created At:</span>
+						<span>{new Date(server.createdAt).toLocaleString()}</span>
+					</div>
+				</div>
+				<div className="mt-4">
+					<Dialog>
+						<DialogTrigger asChild>
+							<Button variant="outline" size="sm" className="w-full">
+								<ServerIcon className="h-4 w-4 mr-2" />
+								Show Containers
+							</Button>
+						</DialogTrigger>
+						<DialogContent
+							className={"sm:max-w-5xl overflow-y-auto max-h-screen"}
+						>
+							<ShowContainers serverId={server.serverId} />
+						</DialogContent>
+					</Dialog>
+					{/* <Button
+						variant="outline"
+						size="sm"
+						className="w-full"
+						onClick={() => setShowContainers(!showContainers)}
+					>
+						<ServerIcon className="h-4 w-4 mr-2" />
+						{showContainers ? "Hide" : "Show"} Containers
+					</Button> */}
+				</div>
+				{/* {showContainers && (
+					<div className="mt-4">
+						<ShowContainers serverId={server.serverId} />
+					</div>
+				)} */}
+			</CardContent>
+		</Card>
+	);
+}
diff --git a/apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx b/apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx
new file mode 100644
index 00000000..8768a88c
--- /dev/null
+++ b/apps/dokploy/components/dashboard/swarm/servers/servers-overview.tsx
@@ -0,0 +1,24 @@
+import { api } from "@/utils/api";
+import { ServerOverviewCard } from "../server-card";
+
+export default function ServersOverview() {
+	const { data: servers, isLoading } = api.server.all.useQuery();
+
+	if (isLoading) {
+		return <div>Loading...</div>;
+	}
+
+	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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+				{servers.map((server) => (
+					<ServerOverviewCard server={server} key={server.serverId} />
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/dokploy/pages/dashboard/swarm.tsx b/apps/dokploy/pages/dashboard/swarm.tsx
index 11035da7..24fa4326 100644
--- a/apps/dokploy/pages/dashboard/swarm.tsx
+++ b/apps/dokploy/pages/dashboard/swarm.tsx
@@ -1,5 +1,7 @@
 import { ShowServers } from "@/components/dashboard/settings/servers/show-servers";
 import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
+import { ServerOverviewCard } from "@/components/dashboard/swarm/server-card";
+import ServersOverview from "@/components/dashboard/swarm/servers/servers-overview";
 import ShowApplicationServers from "@/components/dashboard/swarm/servers/show-server";
 import ShowSwarmNodes from "@/components/dashboard/swarm/show/show-nodes";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
@@ -18,7 +20,8 @@ const Dashboard = () => {
 			<div className="flex flex-wrap gap-4 py-4">
 				<SwarmMonitorCard />
 			</div>
-
+			<ServersOverview />
+			{/* <ShowApplicationServers /> */}
 			{/* <h1>Swarm Nodes</h1>
 			<ShowSwarmNodes />
 			<Separator />