chore: remove tables and add new cards

apps/dokploy/components/dashboard/swarm/applications/data-table.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import {
+	type ColumnDef,
 	type ColumnFiltersState,
 	type SortingState,
 	type VisibilityState,
-  type ColumnDef,
 	flexRender,
 	getCoreRowModel,
 	getFilteredRowModel,
@@ -13,6 +13,13 @@ import {
 	useReactTable,
 } from "@tanstack/react-table";
 
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
 import {
 	Table,
 	TableBody,
@@ -21,16 +28,9 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import React from "react";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-} from "@/components/ui/dropdown-menu";
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import { Button } from "@/components/ui/button";
 import { ChevronDown } from "lucide-react";
-import { Input } from "@/components/ui/input";
+import React from "react";
 
 interface DataTableProps<TData, TValue> {
 	columns: ColumnDef<TData, TValue>[];
@@ -43,11 +43,15 @@ export function DataTable<TData, TValue>({
 }: DataTableProps<TData, TValue>) {
 	const [sorting, setSorting] = React.useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+		[],
 	);
 	const [columnVisibility, setColumnVisibility] =
 		React.useState<VisibilityState>({});
 	const [rowSelection, setRowSelection] = React.useState({});
+	const [pagination, setPagination] = React.useState({
+		pageIndex: 0, //initial page index
+		pageSize: 8, //default page size
+	});
 
 	const table = useReactTable({
 		data,
@@ -118,7 +122,7 @@ export function DataTable<TData, TValue>({
 												? null
 												: flexRender(
 														header.column.columnDef.header,
-                            header.getContext()
+														header.getContext(),
 													)}
 										</TableHead>
 									);
@@ -137,7 +141,7 @@ export function DataTable<TData, TValue>({
 										<TableCell key={cell.id}>
 											{flexRender(
 												cell.column.columnDef.cell,
-                        cell.getContext()
+												cell.getContext(),
 											)}
 										</TableCell>
 									))}
@@ -164,78 +168,7 @@ export function DataTable<TData, TValue>({
 						)}
 					</TableBody>
 				</Table>
-        {/* <div className="rounded-md border">
+
-          {isLoading ? (
-            <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-              <span className="text-muted-foreground text-lg font-medium">
-                Loading...
-              </span>
-            </div>
-          ) : data?.length === 0 ? (
-            <div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
-              <span className="text-muted-foreground text-lg font-medium">
-                No results.
-              </span>
-            </div>
-          ) : (
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id}>
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      );
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-              <TableBody>
-                {table?.getRowModel()?.rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      data-state={row.getIsSelected() && "selected"}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id}>
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      className="h-24 text-center"
-                    >
-                      {isLoading ? (
-                        <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-                          <span className="text-muted-foreground text-lg font-medium">
-                            Loading...
-                          </span>
-                        </div>
-                      ) : (
-                        <>No results.</>
-                      )}
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          )}
-        </div> */}
 				{data && data?.length > 0 && (
 					<div className="flex items-center justify-end space-x-2 py-4">
 						<div className="space-x-2 flex flex-wrap">

apps/dokploy/components/dashboard/swarm/applications/show-applications.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -7,11 +7,12 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
-import { api } from "@/utils/api";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { DataTable } from "./data-table";
+import { api } from "@/utils/api";
+import { Layers, LoaderIcon } from "lucide-react";
+import React from "react";
 import { columns } from "./columns";
-import { LoaderIcon } from "lucide-react";
+import { DataTable } from "./data-table";
 
 interface Props {
 	nodeName: string;
@@ -48,13 +49,9 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 		return (
 			<Dialog>
 				<DialogTrigger asChild>
-          <DropdownMenuItem
+					<Button variant="outline" size="sm" className="w-full">
-            className="w-full cursor-pointer"
+						<LoaderIcon className="h-4 w-4 mr-2 animate-spin" />
-            disabled
+					</Button>
-            onSelect={(e) => e.preventDefault()}
-          >
-            <LoaderIcon className="animate-spin h-5 w-5" />
-          </DropdownMenuItem>
 				</DialogTrigger>
 			</Dialog>
 		);
@@ -67,7 +64,7 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 	const combinedData: ApplicationList[] = NodeApps.flatMap((app) => {
 		const appDetails =
 			NodeAppDetails?.filter((detail) =>
-        detail.Name.startsWith(`${app.Name}.`)
+				detail.Name.startsWith(`${app.Name}.`),
 			) || [];
 
 		if (appDetails.length === 0) {
@@ -96,12 +93,10 @@ const ShowNodeApplications = ({ nodeName }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-        <DropdownMenuItem
+				<Button variant="outline" size="sm" className="w-full">
-          className="w-full cursor-pointer"
+					<Layers className="h-4 w-4 mr-2" />
-          onSelect={(e) => e.preventDefault()}
+					Services
-        >
+				</Button>
-          Show Applications
-        </DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>

apps/dokploy/components/dashboard/swarm/containers/columns.tsx

@@ -0,0 +1,139 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import type { Badge } from "@/components/ui/badge";
+import { ShowNodeConfig } from "../details/show-node";
+// import { ShowContainerConfig } from "../config/show-container-config";
+// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
+// import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
+// import type { Container } from "./show-containers";
+
+export interface ContainerList {
+	containerId: string;
+	name: string;
+	image: string;
+	ports: string;
+	state: string;
+	status: string;
+	serverId: string | null | undefined;
+}
+
+export const columns: ColumnDef<ContainerList>[] = [
+	{
+		accessorKey: "ID",
+		accessorFn: (row) => row.containerId,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					ID
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("containerId")}</div>;
+		},
+	},
+	{
+		accessorKey: "Name",
+		accessorFn: (row) => row.name,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Name
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("name")}</div>;
+		},
+	},
+	{
+		accessorKey: "Image",
+		accessorFn: (row) => row.image,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Image
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("image")}</div>;
+		},
+	},
+	{
+		accessorKey: "Ports",
+		accessorFn: (row) => row.ports,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Ports
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("ports")}</div>;
+		},
+	},
+	{
+		accessorKey: "State",
+		accessorFn: (row) => row.state,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					State
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("state")}</div>;
+		},
+	},
+	{
+		accessorKey: "Status",
+		accessorFn: (row) => row.status,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Status
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("status")}</div>;
+		},
+	},
+];

apps/dokploy/components/dashboard/swarm/containers/data-table.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import {
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { ChevronDown } from "lucide-react";
+import React from "react";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+	isLoading: boolean;
+}
+
+export function DataTable<TData, TValue>({
+	columns,
+	data,
+	isLoading,
+}: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[],
+	);
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = React.useState({});
+
+	const table = useReactTable({
+		data,
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
+	return (
+		<div className="mt-6 grid gap-4 pb-20 w-full">
+			<div className="flex flex-col gap-4  </div>w-full overflow-auto">
+				<div className="flex items-center gap-2 max-sm:flex-wrap">
+					<Input
+						placeholder="Filter by name..."
+						value={(table.getColumn("Name")?.getFilterValue() as string) ?? ""}
+						onChange={(event) =>
+							table.getColumn("Name")?.setFilterValue(event.target.value)
+						}
+						className="md:max-w-sm"
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="sm:ml-auto max-sm:w-full">
+								Columns <ChevronDown className="ml-2 h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{table
+								.getAllColumns()
+								.filter((column) => column.getCanHide())
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+
+				<div className="rounded-md border">
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
+									</TableRow>
+								))}
+							</TableHeader>
+							<TableBody>
+								{table?.getRowModel()?.rows?.length ? (
+									table.getRowModel().rows.map((row) => (
+										<TableRow
+											key={row.id}
+											data-state={row.getIsSelected() && "selected"}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<TableCell key={cell.id}>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</TableCell>
+											))}
+										</TableRow>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											{isLoading ? (
+												<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<span className="text-muted-foreground text-lg font-medium">
+														Loading...
+													</span>
+												</div>
+											) : (
+												<>No results.</>
+											)}
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					)}
+				</div>
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/dashboard/swarm/containers/show-container.tsx

@@ -0,0 +1,48 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+import React from "react";
+import { ShowContainers } from "../../docker/show/show-containers";
+import { columns } from "./columns";
+import { DataTable } from "./data-table";
+// import { columns } from "./columns";
+// import { DataTable } from "./data-table";
+
+interface Props {
+	serverId: string;
+}
+
+const ShowNodeContainers = ({ serverId }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Show Container
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Node Container</DialogTitle>
+					<DialogDescription>
+						See all containers running on this node
+					</DialogDescription>
+				</DialogHeader>
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card max-h-[90vh] overflow-auto ">
+					<ShowContainers serverId={serverId} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default ShowNodeContainers;

apps/dokploy/components/dashboard/swarm/details/show-node.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { CodeEditor } from "@/components/shared/code-editor";
+import { Button } from "@/components/ui/button";
 import {
 	Dialog,
 	DialogContent,
@@ -8,8 +9,9 @@ import {
 	DialogTrigger,
 } from "@/components/ui/dialog";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { CodeEditor } from "@/components/shared/code-editor";
 import { api } from "@/utils/api";
+import { Settings } from "lucide-react";
+import React from "react";
 
 interface Props {
 	nodeId: string;
@@ -20,12 +22,16 @@ export const ShowNodeConfig = ({ nodeId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-        <DropdownMenuItem
+				{/* <DropdownMenuItem
 					className="w-full cursor-pointer"
 					onSelect={(e) => e.preventDefault()}
 				>
-          View Config
+					Show Config
-        </DropdownMenuItem>
+				</DropdownMenuItem> */}
+				<Button variant="outline" size="sm" className="w-full">
+					<Settings className="h-4 w-4 mr-2" />
+					Config
+				</Button>
 			</DialogTrigger>
 			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
 				<DialogHeader>

apps/dokploy/components/dashboard/swarm/servers/columns.tsx

@@ -0,0 +1,168 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+import type { Badge } from "@/components/ui/badge";
+import { ShowContainers } from "../../docker/show/show-containers";
+import ShowNodeContainers from "../containers/show-container";
+import { ShowNodeConfig } from "../details/show-node";
+// import { ShowContainerConfig } from "../config/show-container-config";
+// import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
+// import { DockerTerminalModal } from "../terminal/docker-terminal-modal";
+// import type { Container } from "./show-containers";
+
+export interface ServerList {
+	totalSum: number;
+	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;
+}
+
+export const columns: ColumnDef<ServerList>[] = [
+	{
+		accessorKey: "serverId",
+		accessorFn: (row) => row.serverId,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Server ID
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("serverId")}</div>;
+		},
+	},
+	{
+		accessorKey: "name",
+		accessorFn: (row) => row.name,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Name
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("name")}</div>;
+		},
+	},
+	{
+		accessorKey: "ipAddress",
+		accessorFn: (row) => row.ipAddress,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					IP Address
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("ipAddress")}</div>;
+		},
+	},
+	{
+		accessorKey: "port",
+		accessorFn: (row) => row.port,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Port
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("port")}</div>;
+		},
+	},
+	{
+		accessorKey: "username",
+		accessorFn: (row) => row.username,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Username
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("username")}</div>;
+		},
+	},
+	{
+		accessorKey: "createdAt",
+		accessorFn: (row) => row.createdAt,
+		header: ({ column }) => {
+			return (
+				<Button
+					variant="ghost"
+					onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+				>
+					Created at
+					<ArrowUpDown className="ml-2 h-4 w-4" />
+				</Button>
+			);
+		},
+		cell: ({ row }) => {
+			return <div>{row.getValue("createdAt")}</div>;
+		},
+	},
+	{
+		id: "actions",
+		enableHiding: false,
+		cell: ({ row }) => {
+			return (
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" className="h-8 w-8 p-0">
+							<span className="sr-only">Open menu</span>
+							<MoreHorizontal className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuLabel>Actions</DropdownMenuLabel>
+						<ShowNodeContainers serverId={row.original.serverId} />
+					</DropdownMenuContent>
+				</DropdownMenu>
+			);
+		},
+	},
+];

apps/dokploy/components/dashboard/swarm/servers/data-table.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import {
+	type ColumnDef,
+	type ColumnFiltersState,
+	type SortingState,
+	type VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table";
+
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { ChevronDown } from "lucide-react";
+import React from "react";
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[];
+	data: TData[];
+	isLoading: boolean;
+}
+
+export function DataTable<TData, TValue>({
+	columns,
+	data,
+	isLoading,
+}: DataTableProps<TData, TValue>) {
+	const [sorting, setSorting] = React.useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[],
+	);
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({});
+	const [rowSelection, setRowSelection] = React.useState({});
+
+	const table = useReactTable({
+		data,
+		columns,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+		},
+	});
+
+	return (
+		<div className="mt-6 grid gap-4 pb-20 w-full">
+			<div className="flex flex-col gap-4  </div>w-full overflow-auto">
+				<div className="flex items-center gap-2 max-sm:flex-wrap">
+					<Input
+						placeholder="Filter by name..."
+						value={(table.getColumn("Name")?.getFilterValue() as string) ?? ""}
+						onChange={(event) =>
+							table.getColumn("Name")?.setFilterValue(event.target.value)
+						}
+						className="md:max-w-sm"
+					/>
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<Button variant="outline" className="sm:ml-auto max-sm:w-full">
+								Columns <ChevronDown className="ml-2 h-4 w-4" />
+							</Button>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="end">
+							{table
+								.getAllColumns()
+								.filter((column) => column.getCanHide())
+								.map((column) => {
+									return (
+										<DropdownMenuCheckboxItem
+											key={column.id}
+											className="capitalize"
+											checked={column.getIsVisible()}
+											onCheckedChange={(value) =>
+												column.toggleVisibility(!!value)
+											}
+										>
+											{column.id}
+										</DropdownMenuCheckboxItem>
+									);
+								})}
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</div>
+
+				<div className="rounded-md border">
+					{isLoading ? (
+						<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								Loading...
+							</span>
+						</div>
+					) : data?.length === 0 ? (
+						<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+							<span className="text-muted-foreground text-lg font-medium">
+								No results.
+							</span>
+						</div>
+					) : (
+						<Table>
+							<TableHeader>
+								{table.getHeaderGroups().map((headerGroup) => (
+									<TableRow key={headerGroup.id}>
+										{headerGroup.headers.map((header) => {
+											return (
+												<TableHead key={header.id}>
+													{header.isPlaceholder
+														? null
+														: flexRender(
+																header.column.columnDef.header,
+																header.getContext(),
+															)}
+												</TableHead>
+											);
+										})}
+									</TableRow>
+								))}
+							</TableHeader>
+							<TableBody>
+								{table?.getRowModel()?.rows?.length ? (
+									table.getRowModel().rows.map((row) => (
+										<TableRow
+											key={row.id}
+											data-state={row.getIsSelected() && "selected"}
+										>
+											{row.getVisibleCells().map((cell) => (
+												<TableCell key={cell.id}>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</TableCell>
+											))}
+										</TableRow>
+									))
+								) : (
+									<TableRow>
+										<TableCell
+											colSpan={columns.length}
+											className="h-24 text-center"
+										>
+											{isLoading ? (
+												<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+													<span className="text-muted-foreground text-lg font-medium">
+														Loading...
+													</span>
+												</div>
+											) : (
+												<>No results.</>
+											)}
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					)}
+				</div>
+				{data && data?.length > 0 && (
+					<div className="flex items-center justify-end space-x-2 py-4">
+						<div className="space-x-2 flex flex-wrap">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.previousPage()}
+								disabled={!table.getCanPreviousPage()}
+							>
+								Previous
+							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={() => table.nextPage()}
+								disabled={!table.getCanNextPage()}
+							>
+								Next
+							</Button>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

apps/dokploy/components/dashboard/swarm/servers/show-server.tsx

@@ -0,0 +1,16 @@
+import { api } from "@/utils/api";
+import React from "react";
+import { columns } from "./columns";
+import { DataTable } from "./data-table";
+
+function ShowApplicationServers() {
+	const { data, isLoading } = api.server.all.useQuery();
+
+	console.log(data);
+
+	return (
+		<DataTable columns={columns} data={data ?? []} isLoading={isLoading} />
+	);
+}
+
+export default ShowApplicationServers;

apps/dokploy/components/dashboard/swarm/show/columns.tsx

@@ -11,8 +11,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 import { Badge } from "@/components/ui/badge";
-import { ShowNodeConfig } from "../details/show-node";
 import ShowNodeApplications from "../applications/show-applications";
+import ShowContainers from "../containers/show-container";
+import { ShowNodeConfig } from "../details/show-node";
 // import { ShowContainerConfig } from "../config/show-container-config";
 // import { ShowDockerModalLogs } from "../logs/show-docker-modal-logs";
 // import { DockerTerminalModal } from "../terminal/docker-terminal-modal";

apps/dokploy/components/dashboard/swarm/show/deatils-card.tsx

@@ -0,0 +1,124 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	AlertCircle,
+	CheckCircle,
+	HelpCircle,
+	Layers,
+	Settings,
+} from "lucide-react";
+import { useState } from "react";
+import ShowNodeApplications from "../applications/show-applications";
+import { ShowNodeConfig } from "../details/show-node";
+
+export interface SwarmList {
+	ID: string;
+	Hostname: string;
+	Availability: string;
+	EngineVersion: string;
+	Status: string;
+	ManagerStatus: string;
+	TLSStatus: string;
+}
+
+interface NodeCardProps {
+	node: SwarmList;
+}
+
+export function NodeCard({ node }: NodeCardProps) {
+	const [showConfig, setShowConfig] = useState(false);
+	const [showServices, setShowServices] = useState(false);
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "Ready":
+				return <CheckCircle className="h-4 w-4 text-green-500" />;
+			case "Down":
+				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">
+			<CardHeader>
+				<CardTitle className="flex items-center justify-between">
+					<span className="flex items-center gap-2">
+						{getStatusIcon(node.Status)}
+						{node.Hostname}
+					</span>
+					<Badge variant="outline" className="text-xs">
+						{node.ManagerStatus || "Worker"}
+					</Badge>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				<div className="grid gap-2 text-sm">
+					<div className="flex justify-between">
+						<span className="font-medium">Status:</span>
+						<span>{node.Status}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Availability:</span>
+						<span>{node.Availability}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">Engine Version:</span>
+						<span>{node.EngineVersion}</span>
+					</div>
+					<div className="flex justify-between">
+						<span className="font-medium">TLS Status:</span>
+						<span>{node.TLSStatus}</span>
+					</div>
+				</div>
+				<div className="flex gap-2 mt-4">
+					<ShowNodeConfig nodeId={node.ID} />
+					{/* <Dialog open={showConfig} onOpenChange={setShowConfig}>
+						<DialogTrigger asChild>
+							<Button variant="outline" size="sm" className="w-full">
+								<Settings className="h-4 w-4 mr-2" />
+								Config
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Node Configuration</DialogTitle>
+							</DialogHeader>
+							<div className="mt-4">
+								<pre className="bg-gray-100 p-4 rounded-md overflow-auto">
+									{JSON.stringify(node, null, 2)}
+								</pre>
+							</div>
+						</DialogContent>
+					</Dialog> */}
+					<ShowNodeApplications nodeName="node.Hostname" />
+					{/* <Dialog open={showServices} onOpenChange={setShowServices}>
+						<DialogTrigger asChild>
+							<Button variant="outline" size="sm" className="w-full">
+								<Layers className="h-4 w-4 mr-2" />
+								Services
+							</Button>
+						</DialogTrigger>
+						<DialogContent>
+							<DialogHeader>
+								<DialogTitle>Node Services</DialogTitle>
+							</DialogHeader>
+							<div className="mt-4">
+								<p>Service information would be displayed here.</p>
+							</div>
+						</DialogContent>
+					</Dialog> */}
+				</div>
+			</CardContent>
+		</Card>
+	);
+}

apps/dokploy/components/layouts/navigation-tabs.tsx

@@ -62,8 +62,8 @@ const getTabMaps = (isCloud: boolean) => {
 				type: "docker",
 			},
 			{
-        label: "Swarm",
+				label: "Swarm & Server",
-        description: "Manage your docker swarm",
+				description: "Manage your docker swarm and Servers",
 				index: "/dashboard/swarm",
 				isShow: ({ rol, user }) => {
 					return Boolean(rol === "admin" || user?.canAccessToDocker);
@@ -78,7 +78,7 @@ const getTabMaps = (isCloud: boolean) => {
 					return Boolean(rol === "admin" || user?.canAccessToDocker);
 				},
 				type: "requests",
-      }
+			},
 		);
 	}
 
@@ -111,7 +111,7 @@ export const NavigationTabs = ({ tab, children }: Props) => {
 		},
 		{
 			enabled: !!data?.id && data?.rol === "user",
-    }
+		},
 	);
 
 	useEffect(() => {

apps/dokploy/pages/dashboard/swarm.tsx

@@ -1,6 +1,11 @@
+import { ShowServers } from "@/components/dashboard/settings/servers/show-servers";
+import SwarmMonitorCard from "@/components/dashboard/swarm/monitoring-card";
+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";
+import { Separator } from "@/components/ui/separator";
 import { appRouter } from "@/server/api/root";
+import { api } from "@/utils/api";
 import { IS_CLOUD, validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
@@ -8,7 +13,19 @@ import React, { type ReactElement } from "react";
 import superjson from "superjson";
 
 const Dashboard = () => {
-	return <ShowSwarmNodes />;
+	return (
+		<>
+			<div className="flex flex-wrap gap-4 py-4">
+				<SwarmMonitorCard />
+			</div>
+
+			{/* <h1>Swarm Nodes</h1>
+			<ShowSwarmNodes />
+			<Separator />
+			<h1 className="mt-24">Server Nodes</h1>
+			<ShowApplicationServers /> */}
+		</>
+	);
 };
 
 export default Dashboard;