feat: add table to show nodes and add dropdown to add manager & workers

components/dashboard/settings/cluster/nodes/workers/add-worker.tsx

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { api } from "@/utils/api";
+
+export const AddWorker = () => {
+	const { data } = api.cluster.addWorker.useQuery();
+
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="cursor-pointer flex flex-row gap-2 items-center"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Add Worker
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-4xl max-h-screen overflow-y-auto ">
+				<DialogHeader>
+					<DialogTitle>Add a new worker</DialogTitle>
+					<DialogDescription>Add a new worker</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4 text-sm">
+					<span>1. Go to your new server and run the following command</span>
+					<span className="bg-muted rounded-lg p-2">
+						curl https://get.docker.com | sh -s -- --version 24.0
+					</span>
+				</div>
+
+				<div className="flex flex-col gap-4 text-sm">
+					<span>
+						2. Run the following command to add the node(server) to your cluster
+					</span>
+					<span className="bg-muted rounded-lg p-2 ">{data}</span>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/nodes/workers/delete-worker.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+import { TrashIcon } from "lucide-react";
+import { toast } from "sonner";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+
+interface Props {
+	nodeId: string;
+}
+export const DeleteWorker = ({ nodeId }: Props) => {
+	const { mutateAsync, isLoading } = api.cluster.removeWorker.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+					Delete
+				</DropdownMenuItem>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						worker.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								nodeId,
+							})
+								.then(async () => {
+									utils.cluster.getNodes.invalidate();
+									toast.success("Worker deleted succesfully");
+								})
+								.catch(() => {
+									toast.error("Error to delete the worker");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};