v0.1.0 (#112)

* feat: add schema for registry and routes

* feat: add docker registry upload

* feat: add show cluster

* refactor: set the registry url in image in case we have a registry asociated

* feat: add update registry and fix the docker url markup

* chore: remove --advertise-ip on swarm script

* refactor: remove listen address of swarm initialize

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

* refactor: improve interface for cluster

* refactor: improve UI

* feat: add experimental swarm settings

* refactor: remove comments

* refactor: prettify json of each setting

* refactor: add interface tooltip

* refactor: delete static form self registry

* refactor: allow to se a empty registry

* fix: remove text area warnings

* feat: add network swarm json

* refactor: update ui

* revert: go back to swarm init config

* refactor: remove initialization on server, only on setup script

* Update LICENSE.MD

* feat: appearance theme support system config

* refactor: remove logs

* fix(README-ru): hyperlink-ed docs url

* feat: (#107) webhook listener filter docker events based on image tag.

Fixes #107

* refactor: simplify comparison docker tags

* refactor: remove return in res status

* refactor: prevent to updates download automatically

* feat: support code editor (#105)

* feat: support code editor

* Update codeblock

* refactor: remove unused class

---------

Co-authored-by: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>

* fix: select the right image from sourcetype (#109)

* chore: bump minor version

---------

Co-authored-by: hehehai <riverhohai@gmail.com>
Co-authored-by: Bayram Tagiev <bayram.tagiev.a@gmail.com>
Co-authored-by: Paulo Santana <30875229+hikinine@users.noreply.github.com>

components/dashboard/settings/appearance-form.tsx

@@ -25,7 +25,7 @@ import {
 } from "@/components/ui/card";
 
 const appearanceFormSchema = z.object({
-	theme: z.enum(["light", "dark"], {
+	theme: z.enum(["light", "dark", "system"], {
 		required_error: "Please select a theme.",
 	}),
 });
@@ -34,7 +34,7 @@ type AppearanceFormValues = z.infer<typeof appearanceFormSchema>;
 
 // This can come from your database or API.
 const defaultValues: Partial<AppearanceFormValues> = {
-	theme: "light",
+	theme: "system",
 };
 
 export function AppearanceForm() {
@@ -46,7 +46,7 @@ export function AppearanceForm() {
 
 	useEffect(() => {
 		form.reset({
-			theme: theme === "light" ? "light" : "dark",
+			theme: (theme ?? "system") as AppearanceFormValues["theme"],
 		});
 	}, [form, theme]);
 	function onSubmit(data: AppearanceFormValues) {
@@ -81,28 +81,15 @@ export function AppearanceForm() {
 											onValueChange={field.onChange}
 											defaultValue={field.value}
 											value={field.value}
-											className="grid max-w-md grid-cols-1 sm:grid-cols-2 gap-8 pt-2"
+											className="grid max-w-md md:max-w-lg grid-cols-1 sm:grid-cols-3 gap-8 pt-2"
 										>
 											<FormItem>
 												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
 													<FormControl>
 														<RadioGroupItem value="light" className="sr-only" />
 													</FormControl>
-													<div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
-														<div className="space-y-2 rounded-sm bg-[#ecedef] p-2">
-															<div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
-																<div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
-																<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-															</div>
-															<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-																<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
-																<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-															</div>
-															<div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
-																<div className="h-4 w-4 rounded-full bg-[#ecedef]" />
-																<div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
-															</div>
-														</div>
+													<div className="items-center rounded-md border-2 border-muted p-1 hover:bg-accent transition-colors cursor-pointer">
+														<img src="/images/theme-light.svg" alt="light" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
 														Light
@@ -114,27 +101,30 @@ export function AppearanceForm() {
 													<FormControl>
 														<RadioGroupItem value="dark" className="sr-only" />
 													</FormControl>
-													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
-														<div className="space-y-2 rounded-sm bg-slate-950 p-2">
-															<div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-																<div className="h-2 w-[80px] rounded-lg bg-slate-400" />
-																<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
-															</div>
-															<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-																<div className="h-4 w-4 rounded-full bg-slate-400" />
-																<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
-															</div>
-															<div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
-																<div className="h-4 w-4 rounded-full bg-slate-400" />
-																<div className="h-2 w-[100px] rounded-lg bg-slate-400" />
-															</div>
-														</div>
+													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
+														<img src="/images/theme-dark.svg" alt="dark" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
 														Dark
 													</span>
 												</FormLabel>
 											</FormItem>
+											<FormItem>
+												<FormLabel className="[&:has([data-state=checked])>div]:border-primary">
+													<FormControl>
+														<RadioGroupItem
+															value="system"
+															className="sr-only"
+														/>
+													</FormControl>
+													<div className="items-center rounded-md border-2 border-muted bg-popover p-1 transition-colors hover:bg-accent hover:text-accent-foreground cursor-pointer">
+														<img src="/images/theme-system.svg" alt="system" />
+													</div>
+													<span className="block w-full p-2 text-center font-normal">
+														System
+													</span>
+												</FormLabel>
+											</FormItem>
 										</RadioGroup>
 									</FormItem>
 								);

components/dashboard/settings/certificates/show-certificates.tsx

@@ -33,21 +33,23 @@ export const ShowCertificates = () => {
 						</div>
 					) : (
 						<div className="flex flex-col gap-6">
-							{data?.map((destination, index) => (
-								<div
-									key={destination.certificateId}
-									className="flex items-center justify-between"
-								>
-									<span className="text-sm text-muted-foreground">
-										{index + 1}. {destination.name}
-									</span>
-									<div className="flex flex-row gap-3">
-										<DeleteCertificate
-											certificateId={destination.certificateId}
-										/>
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+								{data?.map((destination, index) => (
+									<div
+										key={destination.certificateId}
+										className="flex items-center justify-between border p-4 rounded-lg"
+									>
+										<span className="text-sm text-muted-foreground">
+											{index + 1}. {destination.name}
+										</span>
+										<div className="flex flex-row gap-3">
+											<DeleteCertificate
+												certificateId={destination.certificateId}
+											/>
+										</div>
 									</div>
-								</div>
-							))}
+								))}
+							</div>
 							<div>
 								<AddCertificate />
 							</div>

components/dashboard/settings/cluster/nodes/add-node.tsx

@@ -0,0 +1,66 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, PlusIcon } from "lucide-react";
+import { AddWorker } from "./workers/add-worker";
+import { AddManager } from "./manager/add-manager";
+import Link from "next/link";
+
+export const AddNode = () => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button className="w-full cursor-pointer space-x-3">
+					<PlusIcon className="h-4 w-4" />
+					Add Node
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-4xl">
+				<DialogHeader>
+					<DialogTitle>Add Node</DialogTitle>
+					<DialogDescription className="flex flex-col gap-2">
+						Follow the steps to add a new node to your cluster, before you start
+						using this feature, you need to understand how docker swarm works.{" "}
+						<Link
+							href="https://docs.docker.com/engine/swarm/"
+							target="_blank"
+							className="text-primary flex flex-row gap-2 items-center"
+						>
+							Docker Swarm
+							<ExternalLink className="h-4 w-4" />
+						</Link>
+						<Link
+							href="https://docs.docker.com/engine/swarm/how-swarm-mode-works/nodes/"
+							target="_blank"
+							className="text-primary flex flex-row gap-2 items-center"
+						>
+							Architecture
+							<ExternalLink className="h-4 w-4" />
+						</Link>
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-2">
+					<Tabs defaultValue="worker">
+						<TabsList>
+							<TabsTrigger value="worker">Worker</TabsTrigger>
+							<TabsTrigger value="manager">Manager</TabsTrigger>
+						</TabsList>
+						<TabsContent value="worker" className="pt-4">
+							<AddWorker />
+						</TabsContent>
+						<TabsContent value="manager" className="pt-4">
+							<AddManager />
+						</TabsContent>
+					</Tabs>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/nodes/manager/add-manager.tsx

@@ -0,0 +1,63 @@
+import {
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { CardContent } from "@/components/ui/card";
+import { CopyIcon } from "lucide-react";
+import copy from "copy-to-clipboard";
+import { toast } from "sonner";
+
+export const AddManager = () => {
+	const { data } = api.cluster.addManager.useQuery();
+
+	return (
+		<>
+			<div>
+				<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+					<DialogHeader>
+						<DialogTitle>Add a new manager</DialogTitle>
+						<DialogDescription>Add a new manager</DialogDescription>
+					</DialogHeader>
+					<div className="flex flex-col gap-2.5 text-sm">
+						<span>1. Go to your new server and run the following command</span>
+						<span className="bg-muted rounded-lg p-2 flex justify-between">
+							curl https://get.docker.com | sh -s -- --version 24.0
+							<button
+								type="button"
+								className="self-center"
+								onClick={() => {
+									copy("curl https://get.docker.com | sh -s -- --version 24.0");
+									toast.success("Copied to clipboard");
+								}}
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
+
+					<div className="flex flex-col gap-2.5 text-sm">
+						<span>
+							2. Run the following command to add the node(manager) to your
+							cluster
+						</span>
+						<span className="bg-muted rounded-lg p-2  flex">
+							{data}
+							<button
+								type="button"
+								className="self-start"
+								onClick={() => {
+									copy(data || "");
+									toast.success("Copied to clipboard");
+								}}
+							>
+								<CopyIcon className="h-4 w-4 cursor-pointer" />
+							</button>
+						</span>
+					</div>
+				</CardContent>
+			</div>
+		</>
+	);
+};

components/dashboard/settings/cluster/nodes/show-node-data.tsx

@@ -0,0 +1,43 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+
+interface Props {
+	data: unknown;
+}
+
+export const ShowNodeData = ({ data }: Props) => {
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					View Config
+				</DropdownMenuItem>
+			</DialogTrigger>
+			<DialogContent className={"sm:max-w-5xl overflow-y-auto max-h-screen"}>
+				<DialogHeader>
+					<DialogTitle>Node Config</DialogTitle>
+					<DialogDescription>
+						See in detail the metadata of this node
+					</DialogDescription>
+				</DialogHeader>
+				<div className="text-wrap rounded-lg border p-4 text-sm sm:max-w-[59rem] bg-card">
+					<code>
+						<pre className="whitespace-pre-wrap break-words">
+							{JSON.stringify(data, null, 2)}
+						</pre>
+					</code>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/nodes/show-nodes.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { Badge } from "@/components/ui/badge";
+import { DeleteWorker } from "./workers/delete-worker";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { HelpCircle, LockIcon, MoreHorizontal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ShowNodeData } from "./show-node-data";
+import { AddNode } from "./add-node";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export const ShowNodes = () => {
+	const { data, isLoading } = api.cluster.getNodes.useQuery();
+	const { data: registry } = api.registry.all.useQuery();
+
+	const haveAtLeastOneRegistry = !!(registry && registry?.length > 0);
+	return (
+		<Card className="bg-transparent h-full">
+			<CardHeader className="flex flex-row gap-2 justify-between w-full items-center flex-wrap">
+				<div className="flex flex-col gap-2">
+					<CardTitle className="text-xl">Cluster</CardTitle>
+					<CardDescription>Add nodes to your cluster</CardDescription>
+				</div>
+				{haveAtLeastOneRegistry && (
+					<div className="flex flex-row gap-2">
+						<AddNode />
+					</div>
+				)}
+			</CardHeader>
+			<CardContent className="flex flex-col gap-4">
+				{haveAtLeastOneRegistry ? (
+					<div className="grid md:grid-cols-1 gap-4">
+						{isLoading && <div>Loading...</div>}
+						<Table>
+							<TableCaption>A list of your managers / workers.</TableCaption>
+							<TableHeader>
+								<TableRow>
+									<TableHead className="w-[100px]">Hostname</TableHead>
+									<TableHead className="text-right">Status</TableHead>
+									<TableHead className="text-right">Role</TableHead>
+									<TableHead className="text-right">Availability</TableHead>
+									<TableHead className="text-right">Engine Version</TableHead>
+									<TableHead className="text-right">Created</TableHead>
+
+									<TableHead className="text-right">Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{data?.map((node) => {
+									const isManager = node.Spec.Role === "manager";
+									return (
+										<TableRow key={node.ID}>
+											<TableCell className="w-[100px]">
+												{node.Description.Hostname}
+											</TableCell>
+											<TableCell className="text-right">
+												{node.Status.State}
+											</TableCell>
+											<TableCell className="text-right">
+												<Badge variant={isManager ? "default" : "secondary"}>
+													{node?.Spec?.Role}
+												</Badge>
+											</TableCell>
+											<TableCell className="text-right">
+												{node.Spec.Availability}
+											</TableCell>
+
+											<TableCell className="text-right">
+												{node?.Description.Engine.EngineVersion}
+											</TableCell>
+
+											<TableCell className="text-right">
+												<DateTooltip date={node.CreatedAt} className="text-sm">
+													Created{" "}
+												</DateTooltip>
+											</TableCell>
+											<TableCell className="text-right flex justify-end">
+												<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>
+														<ShowNodeData data={node} />
+														{!node?.ManagerStatus?.Leader && (
+															<DeleteWorker nodeId={node.ID} />
+														)}
+													</DropdownMenuContent>
+												</DropdownMenu>
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+					</div>
+				) : (
+					<div className="flex flex-col items-center gap-3">
+						<LockIcon className="size-8 text-muted-foreground" />
+						<div className="flex flex-row gap-2">
+							<span className="text-base text-muted-foreground ">
+								To add nodes to your cluster, you need to configure at least one
+								registry.
+							</span>
+							<TooltipProvider delayDuration={0}>
+								<Tooltip>
+									<TooltipTrigger className="self-center">
+										<HelpCircle className="size-5 text-muted-foreground " />
+									</TooltipTrigger>
+									<TooltipContent>
+										Nodes need a registry to pull images from.
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+
+						<ul className="list-disc list-inside text-sm text-muted-foreground border p-4 rounded-lg flex flex-col gap-1.5 mt-2.5">
+							<li>
+								<strong>Docker Registry:</strong> Use custom registries like
+								Docker Hub, DigitalOcean Registry, etc.
+							</li>
+							<li>
+								<strong>Self-Hosted Docker Registry:</strong> Automatically set
+								up a local registry to store all images.
+							</li>
+						</ul>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

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

@@ -0,0 +1,61 @@
+import { CardContent } from "@/components/ui/card";
+import {
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import copy from "copy-to-clipboard";
+import { CopyIcon } from "lucide-react";
+import { toast } from "sonner";
+
+export const AddWorker = () => {
+	const { data } = api.cluster.addWorker.useQuery();
+
+	return (
+		<div>
+			<CardContent className="sm:max-w-4xl max-h-screen overflow-y-auto flex flex-col gap-4 px-0">
+				<DialogHeader>
+					<DialogTitle>Add a new worker</DialogTitle>
+					<DialogDescription>Add a new worker</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-2.5 text-sm">
+					<span>1. Go to your new server and run the following command</span>
+					<span className="bg-muted rounded-lg p-2 flex justify-between">
+						curl https://get.docker.com | sh -s -- --version 24.0
+						<button
+							type="button"
+							className="self-center"
+							onClick={() => {
+								copy("curl https://get.docker.com | sh -s -- --version 24.0");
+								toast.success("Copied to clipboard");
+							}}
+						>
+							<CopyIcon className="h-4 w-4 cursor-pointer" />
+						</button>
+					</span>
+				</div>
+
+				<div className="flex flex-col gap-2.5 text-sm">
+					<span>
+						2. Run the following command to add the node(worker) to your cluster
+					</span>
+
+					<span className="bg-muted rounded-lg p-2  flex">
+						{data}
+						<button
+							type="button"
+							className="self-start"
+							onClick={() => {
+								copy(data || "");
+								toast.success("Copied to clipboard");
+							}}
+						>
+							<CopyIcon className="h-4 w-4 cursor-pointer" />
+						</button>
+					</span>
+				</div>
+			</CardContent>
+		</div>
+	);
+};

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>
+	);
+};

components/dashboard/settings/cluster/registry/add-docker-registry.tsx

@@ -0,0 +1,251 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Container } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddRegistrySchema = z.object({
+	registryName: z.string().min(1, {
+		message: "Registry name is required",
+	}),
+	username: z.string().min(1, {
+		message: "Username is required",
+	}),
+	password: z.string().min(1, {
+		message: "Password is required",
+	}),
+	registryUrl: z.string().min(1, {
+		message: "Registry URL is required",
+	}),
+	imagePrefix: z.string(),
+});
+
+type AddRegistry = z.infer<typeof AddRegistrySchema>;
+
+export const AddRegistry = () => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const { mutateAsync, error, isError } = api.registry.create.useMutation();
+	const { mutateAsync: testRegistry, isLoading } =
+		api.registry.testRegistry.useMutation();
+	const router = useRouter();
+	const form = useForm<AddRegistry>({
+		defaultValues: {
+			username: "",
+			password: "",
+			registryUrl: "",
+			imagePrefix: "",
+			registryName: "",
+		},
+		resolver: zodResolver(AddRegistrySchema),
+	});
+
+	const password = form.watch("password");
+	const username = form.watch("username");
+	const registryUrl = form.watch("registryUrl");
+	const registryName = form.watch("registryName");
+	const imagePrefix = form.watch("imagePrefix");
+
+	useEffect(() => {
+		form.reset({
+			username: "",
+			password: "",
+			registryUrl: "",
+			imagePrefix: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddRegistry) => {
+		await mutateAsync({
+			password: data.password,
+			registryName: data.registryName,
+			username: data.username,
+			registryUrl: data.registryUrl,
+			registryType: "cloud",
+			imagePrefix: data.imagePrefix,
+		})
+			.then(async (data) => {
+				await utils.registry.all.invalidate();
+				toast.success("Registry added");
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to add a registry");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button>
+					<Container className="h-4 w-4" />
+					Create Registry
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:m:max-w-lg ">
+				<DialogHeader>
+					<DialogTitle>Add a external registry</DialogTitle>
+					<DialogDescription>
+						Fill the next fields to add a external registry.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="registryName"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Registry Name</FormLabel>
+										<FormControl>
+											<Input placeholder="Registry Name" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="Username" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Password"
+												{...field}
+												type="password"
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="imagePrefix"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Image Prefix</FormLabel>
+										<FormControl>
+											<Input {...field} placeholder="Image Prefix" />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="registryUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Registry URL</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="aws_account_id.dkr.ecr.us-west-2.amazonaws.com"
+												{...field}
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter className="flex flex-row w-full sm:justify-between gap-4 flex-wrap">
+							<Button
+								type="button"
+								variant={"secondary"}
+								isLoading={isLoading}
+								onClick={async () => {
+									await testRegistry({
+										username: username,
+										password: password,
+										registryUrl: registryUrl,
+										registryName: registryName,
+										registryType: "cloud",
+										imagePrefix: imagePrefix,
+									})
+										.then((data) => {
+											if (data) {
+												toast.success("Registry Tested Successfully");
+											} else {
+												toast.error("Registry Test Failed");
+											}
+										})
+										.catch(() => {
+											toast.error("Error to test the registry");
+										});
+								}}
+							>
+								Test Registry
+							</Button>
+							<Button isLoading={form.formState.isSubmitting} type="submit">
+								Create
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/registry/add-self-docker-registry.tsx

@@ -0,0 +1,181 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Container } from "lucide-react";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AddRegistrySchema = z.object({
+	username: z
+		.string()
+		.min(1, {
+			message: "Username is required",
+		})
+		.regex(/^[a-zA-Z0-9]+$/, {
+			message: "Username can only contain letters and numbers",
+		}),
+	password: z.string().min(1, {
+		message: "Password is required",
+	}),
+	registryUrl: z.string().min(1, {
+		message: "Registry URL is required",
+	}),
+});
+
+type AddRegistry = z.infer<typeof AddRegistrySchema>;
+
+export const AddSelfHostedRegistry = () => {
+	const utils = api.useUtils();
+	const [isOpen, setIsOpen] = useState(false);
+	const { mutateAsync, error, isError, isLoading } =
+		api.registry.enableSelfHostedRegistry.useMutation();
+	const router = useRouter();
+	const form = useForm<AddRegistry>({
+		defaultValues: {
+			username: "",
+			password: "",
+			registryUrl: "",
+		},
+		resolver: zodResolver(AddRegistrySchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			registryUrl: "",
+			username: "",
+			password: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (data: AddRegistry) => {
+		await mutateAsync({
+			registryUrl: data.registryUrl,
+			username: data.username,
+			password: data.password,
+		})
+			.then(async (data) => {
+				await utils.registry.all.invalidate();
+				toast.success("Self Hosted Registry Created");
+				setIsOpen(false);
+			})
+			.catch(() => {
+				toast.error("Error to create a self hosted registry");
+			});
+	};
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button>
+					<Container className="h-4 w-4" />
+					Enable Self Hosted Registry
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:m:max-w-lg ">
+				<DialogHeader>
+					<DialogTitle>Add a self hosted registry</DialogTitle>
+					<DialogDescription>
+						Fill the next fields to add a self hosted registry.
+					</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+				<Form {...form}>
+					<form
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-4"
+					>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input placeholder="Username" {...field} />
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												placeholder="Password"
+												{...field}
+												type="password"
+											/>
+										</FormControl>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<div className="flex flex-col gap-4">
+							<FormField
+								control={form.control}
+								name="registryUrl"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Registry URL</FormLabel>
+										<FormControl>
+											<Input placeholder="registry.dokploy.com" {...field} />
+										</FormControl>
+										<FormDescription>
+											Point a DNS record to the VPS IP address.
+										</FormDescription>
+
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+						<DialogFooter>
+							<Button isLoading={isLoading} type="submit">
+								Create
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/cluster/registry/delete-registry.tsx

@@ -0,0 +1,61 @@
+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";
+
+interface Props {
+	registryId: string;
+}
+export const DeleteRegistry = ({ registryId }: Props) => {
+	const { mutateAsync, isLoading } = api.registry.remove.useMutation();
+	const utils = api.useUtils();
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button variant="ghost" isLoading={isLoading}>
+					<TrashIcon className="size-4  text-muted-foreground " />
+				</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This action cannot be undone. This will permanently delete the
+						registry.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction
+						onClick={async () => {
+							await mutateAsync({
+								registryId,
+							})
+								.then(async () => {
+									utils.registry.all.invalidate();
+									toast.success("Registry deleted");
+								})
+								.catch(() => {
+									toast.error("Error to delete the registry");
+								});
+						}}
+					>
+						Confirm
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
+};

components/dashboard/settings/cluster/registry/show-registry.tsx

@@ -0,0 +1,76 @@
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { api } from "@/utils/api";
+import { Server } from "lucide-react";
+import { AddRegistry } from "./add-docker-registry";
+import { AddSelfHostedRegistry } from "./add-self-docker-registry";
+import { DeleteRegistry } from "./delete-registry";
+import { UpdateDockerRegistry } from "./update-docker-registry";
+
+export const ShowRegistry = () => {
+	const { data } = api.registry.all.useQuery();
+
+	const haveSelfHostedRegistry = data?.some(
+		(registry) => registry.registryType === "selfHosted",
+	);
+
+	return (
+		<div className="h-full">
+			<Card className="bg-transparent h-full">
+				<CardHeader className="flex flex-row gap-2 flex-wrap justify-between w-full items-center">
+					<div className="flex flex-col gap-2">
+						<CardTitle className="text-xl">Registry</CardTitle>
+						<CardDescription>Add registry to your application.</CardDescription>
+					</div>
+
+					<div className="flex flex-row gap-2">
+						{data && data?.length > 0 && (
+							<>
+								{!haveSelfHostedRegistry && <AddSelfHostedRegistry />}
+
+								<AddRegistry />
+							</>
+						)}
+					</div>
+				</CardHeader>
+				<CardContent className="space-y-2 pt-4 h-full">
+					{data?.length === 0 ? (
+						<div className="flex flex-col items-center gap-3">
+							<Server className="size-8 self-center text-muted-foreground" />
+							<span className="text-base text-muted-foreground">
+								To create a cluster is required to set a registry.
+							</span>
+
+							<div className="flex flex-row gap-2">
+								<AddSelfHostedRegistry />
+								<AddRegistry />
+							</div>
+						</div>
+					) : (
+						<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6">
+							{data?.map((registry, index) => (
+								<div
+									key={registry.registryId}
+									className="flex items-center justify-between border p-4 rounded-lg"
+								>
+									<span className="text-sm text-muted-foreground">
+										{index + 1}. {registry.registryName}
+									</span>
+									<div className="flex flex-row gap-1">
+										<UpdateDockerRegistry registryId={registry.registryId} />
+										<DeleteRegistry registryId={registry.registryId} />
+									</div>
+								</div>
+							))}
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</div>
+	);
+};

components/dashboard/settings/cluster/registry/update-docker-registry.tsx

@@ -0,0 +1,275 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, PenBoxIcon } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const updateRegistry = z.object({
+	registryName: z.string().min(1, {
+		message: "Registry name is required",
+	}),
+	username: z.string().min(1, {
+		message: "Username is required",
+	}),
+	password: z.string(),
+	registryUrl: z.string().min(1, {
+		message: "Registry URL is required",
+	}),
+	imagePrefix: z.string(),
+});
+
+type UpdateRegistry = z.infer<typeof updateRegistry>;
+
+interface Props {
+	registryId: string;
+}
+
+export const UpdateDockerRegistry = ({ registryId }: Props) => {
+	const utils = api.useUtils();
+	const { mutateAsync: testRegistry, isLoading } =
+		api.registry.testRegistry.useMutation();
+	const { data, refetch } = api.registry.one.useQuery(
+		{
+			registryId,
+		},
+		{
+			enabled: !!registryId,
+		},
+	);
+
+	const isCloud = data?.registryType === "cloud";
+	const { mutateAsync, isError, error } = api.registry.update.useMutation();
+
+	const form = useForm<UpdateRegistry>({
+		defaultValues: {
+			imagePrefix: "",
+			registryName: "",
+			username: "",
+			password: "",
+			registryUrl: "",
+		},
+		resolver: zodResolver(updateRegistry),
+	});
+
+	const password = form.watch("password");
+	const username = form.watch("username");
+	const registryUrl = form.watch("registryUrl");
+	const registryName = form.watch("registryName");
+	const imagePrefix = form.watch("imagePrefix");
+
+	useEffect(() => {
+		if (data) {
+			form.reset({
+				imagePrefix: data.imagePrefix || "",
+				registryName: data.registryName || "",
+				username: data.username || "",
+				password: "",
+				registryUrl: data.registryUrl || "",
+			});
+		}
+	}, [form, form.reset, data]);
+
+	const onSubmit = async (data: UpdateRegistry) => {
+		await mutateAsync({
+			registryId,
+			...(data.password ? { password: data.password } : {}),
+			registryName: data.registryName,
+			username: data.username,
+			registryUrl: data.registryUrl,
+			imagePrefix: data.imagePrefix,
+		})
+			.then(async (data) => {
+				toast.success("Registry Updated");
+				await refetch();
+				await utils.registry.all.invalidate();
+			})
+			.catch(() => {
+				toast.error("Error to update the registry");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger className="" asChild>
+				<Button variant="ghost">
+					<PenBoxIcon className="size-4 text-muted-foreground" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
+				<DialogHeader>
+					<DialogTitle>Registry</DialogTitle>
+					<DialogDescription>Update the registry information</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+
+				<Form {...form}>
+					<form
+						id="hook-form"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid w-full gap-8 "
+					>
+						<div className="flex flex-col gap-4">
+							<div className="flex flex-col gap-2">
+								<FormField
+									control={form.control}
+									name="registryName"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Registry Name</FormLabel>
+											<FormControl>
+												<Input placeholder="Registry Name" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="username"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Username</FormLabel>
+											<FormControl>
+												<Input placeholder="Username" {...field} />
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+
+								<FormField
+									control={form.control}
+									name="password"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Password</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="Password"
+													{...field}
+													type="password"
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+								{isCloud && (
+									<FormField
+										control={form.control}
+										name="imagePrefix"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Image Prefix</FormLabel>
+												<FormControl>
+													<Input {...field} placeholder="Image Prefix" />
+												</FormControl>
+
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								)}
+
+								<FormField
+									control={form.control}
+									name="registryUrl"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel>Registry URL</FormLabel>
+											<FormControl>
+												<Input
+													placeholder="https://aws_account_id.dkr.ecr.us-west-2.amazonaws.com"
+													{...field}
+												/>
+											</FormControl>
+
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							</div>
+						</div>
+					</form>
+
+					<DialogFooter
+						className={cn(
+							isCloud ? "sm:justify-between " : "",
+							"flex flex-row w-full gap-4 flex-wrap",
+						)}
+					>
+						{isCloud && (
+							<Button
+								type="button"
+								variant={"secondary"}
+								isLoading={isLoading}
+								onClick={async () => {
+									await testRegistry({
+										username: username,
+										password: password,
+										registryUrl: registryUrl,
+										registryName: registryName,
+										registryType: "cloud",
+										imagePrefix: imagePrefix,
+									})
+										.then((data) => {
+											if (data) {
+												toast.success("Registry Tested Successfully");
+											} else {
+												toast.error("Registry Test Failed");
+											}
+										})
+										.catch(() => {
+											toast.error("Error to test the registry");
+										});
+								}}
+							>
+								Test Registry
+							</Button>
+						)}
+
+						<Button
+							isLoading={form.formState.isSubmitting}
+							form="hook-form"
+							type="submit"
+						>
+							Update
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/destination/show-destinations.tsx

@@ -34,16 +34,16 @@ export const ShowDestinations = () => {
 							<AddDestination />
 						</div>
 					) : (
-						<div className="flex flex-col gap-6">
+						<div className="flex flex-col gap-4">
 							{data?.map((destination, index) => (
 								<div
 									key={destination.destinationId}
-									className="flex items-center justify-between"
+									className="flex items-center justify-between border p-3.5 rounded-lg"
 								>
 									<span className="text-sm text-muted-foreground">
 										{index + 1}. {destination.name}
 									</span>
-									<div className="flex flex-row gap-3">
+									<div className="flex flex-row gap-1">
 										<UpdateDestination
 											destinationId={destination.destinationId}
 										/>

components/dashboard/settings/github/github-setup.tsx

@@ -87,10 +87,10 @@ export const GithubSetup = () => {
 				{haveGithubConfigured ? (
 					<div className="flex flex-col gap-2">
 						<div className="flex items-center gap-4">
-							<span className="text-muted-foreground">
+							<span className="text-muted-foreground text-sm">
 								Github account configured succesfully.
 							</span>
-							<BadgeCheck className="size-5 text-green-700" />
+							<BadgeCheck className="size-4 text-green-700" />
 						</div>
 						<div className="flex items-end">
 							<RemoveGithubApp />
@@ -101,9 +101,9 @@ export const GithubSetup = () => {
 						{data?.githubAppName ? (
 							<div className="flex w-fit flex-col gap-4">
 								<span className="text-muted-foreground">
-									Youve successfully created a GitHub app named
-									{data.githubAppName}! The next step is to install this app in
-									your GitHub account.
+									You've successfully created a github app named{" "}
+									<strong>{data.githubAppName}</strong>! The next step is to
+									install this app in your GitHub account.
 								</span>
 
 								<div className="flex flex-row gap-4">
@@ -121,12 +121,12 @@ export const GithubSetup = () => {
 						) : (
 							<div>
 								<div className="flex items-center gap-2">
-									<span className="text-muted-foreground">
-										To integrate your GitHub account with our services, youll
+									<p className="text-muted-foreground text-sm">
+										To integrate your GitHub account with our services, you'll
 										need to create and install a GitHub app. This process is
 										straightforward and only takes a few minutes. Click the
 										button below to get started.
-									</span>
+									</p>
 								</div>
 
 								<div className="mt-4 flex flex-col gap-4">

components/dashboard/settings/profile/profile-form.tsx

@@ -147,11 +147,11 @@ export const ProfileForm = () => {
 												}}
 												defaultValue={field.value}
 												value={field.value}
-												className="flex flex-row flex-wrap gap-2 max-xl:justify-cente"
+												className="flex flex-row flex-wrap gap-2 max-xl:justify-center"
 											>
 												{randomImages.map((image) => (
 													<FormItem key={image}>
-														<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px">
+														<FormLabel className="[&:has([data-state=checked])>img]:border-primary [&:has([data-state=checked])>img]:border-1 [&:has([data-state=checked])>img]:p-px cursor-pointer">
 															<FormControl>
 																<RadioGroupItem
 																	value={image}
@@ -163,7 +163,7 @@ export const ProfileForm = () => {
 																key={image}
 																src={image}
 																alt="avatar"
-																className="h-12 w-12 rounded-full border transition-transform"
+																className="h-12 w-12 rounded-full border hover:p-px hover:border-primary transition-transform"
 															/>
 														</FormLabel>
 													</FormItem>

components/dashboard/settings/users/add-permissions.tsx

@@ -23,11 +23,11 @@ import { extractServices } from "@/pages/dashboard/project/[projectId]";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ListTodo } from "lucide-react";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 
 const addPermissions = z.object({
 	accesedProjects: z.array(z.string()).optional(),
@@ -107,9 +107,12 @@ export const AddUserPermissions = ({ userId }: Props) => {
 	return (
 		<Dialog>
 			<DialogTrigger className="" asChild>
-				<Button variant="ghost">
-					<ListTodo className="size-4  text-muted-foreground " />
-				</Button>
+				<DropdownMenuItem
+					className="w-full cursor-pointer"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Add Permissions
+				</DropdownMenuItem>
 			</DialogTrigger>
 			<DialogContent className="max-h-[85vh]  overflow-y-auto sm:max-w-4xl">
 				<DialogHeader>

components/dashboard/settings/users/add-user.tsx

@@ -25,6 +25,7 @@ import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { PlusIcon } from "lucide-react";
 
 const addUser = z.object({
 	email: z
@@ -66,7 +67,9 @@ export const AddUser = () => {
 	return (
 		<Dialog>
 			<DialogTrigger className="" asChild>
-				<Button>Add User</Button>
+				<Button>
+					<PlusIcon className="h-4 w-4" /> Add User
+				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-h-screen  overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>

components/dashboard/settings/users/delete-user.tsx

@@ -14,6 +14,7 @@ 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 {
 	authId: string;
@@ -24,9 +25,12 @@ export const DeleteUser = ({ authId }: Props) => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button variant="ghost" isLoading={isLoading}>
-					<TrashIcon className="size-4  text-muted-foreground " />
-				</Button>
+				<DropdownMenuItem
+					className="w-full cursor-pointer text-red-500 hover:!text-red-600"
+					onSelect={(e) => e.preventDefault()}
+				>
+					Delete User
+				</DropdownMenuItem>
 			</AlertDialogTrigger>
 			<AlertDialogContent>
 				<AlertDialogHeader>

components/dashboard/settings/users/show-users.tsx

@@ -6,7 +6,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { api } from "@/utils/api";
-import { CopyIcon, Users } from "lucide-react";
+import { MoreHorizontal, Users } from "lucide-react";
 import { AddUser } from "./add-user";
 import { DeleteUser } from "./delete-user";
 import { format } from "date-fns";
@@ -14,7 +14,24 @@ import { useEffect, useState } from "react";
 import { AddUserPermissions } from "./add-permissions";
 import copy from "copy-to-clipboard";
 import { toast } from "sonner";
-import { UpdateUser } from "./update-user";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { Badge } from "@/components/ui/badge";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
 
 export const ShowUsers = () => {
 	const { data } = api.user.all.useQuery();
@@ -25,82 +42,109 @@ export const ShowUsers = () => {
 
 	return (
 		<div className="h-full col-span-2">
-			<Card className="bg-transparent h-full border-none">
-				<CardHeader>
-					<CardTitle className="text-xl">Users</CardTitle>
-					<CardDescription>Add, manage and delete users.</CardDescription>
+			<Card className="bg-transparent h-full ">
+				<CardHeader className="flex flex-row gap-2 justify-between w-full flex-wrap">
+					<div className="flex flex-col gap-2">
+						<CardTitle className="text-xl">Users</CardTitle>
+						<CardDescription>Add, manage and delete users.</CardDescription>
+					</div>
+
+					{data && data.length > 0 && (
+						<div className="flex flex-col gap-3 items-end">
+							<AddUser />
+						</div>
+					)}
 				</CardHeader>
 				<CardContent className="space-y-2 h-full">
 					{data?.length === 0 ? (
 						<div className="flex flex-col items-center gap-3">
 							<Users className="size-8 self-center text-muted-foreground" />
 							<span className="text-base text-muted-foreground">
-								To create a user is required to add
+								To create a user, you need to add:
 							</span>
 							<AddUser />
 						</div>
 					) : (
 						<div className="flex flex-col gap-6">
-							{data?.map((user) => {
-								return (
-									<div
-										key={user.userId}
-										className="flex gap-2 flex-col justify-start border p-4 rounded-lg"
-									>
-										<span className="text-sm text-foreground">
-											{user.auth.email}
-										</span>
-										{!user.isRegistered && (
-											<span className="text-sm text-muted-foreground">
-												Expire In{" "}
-												{format(new Date(user.expirationDate), "PPpp")}
-											</span>
-										)}
-
-										<span className="text-sm text-muted-foreground">
-											{user.isRegistered ? "Registered" : "Not Registered"}
-										</span>
-										{user.auth.is2FAEnabled && (
-											<span className="text-sm text-muted-foreground">
-												{user.auth.is2FAEnabled
-													? "2FA Enabled"
-													: "2FA Not Enabled"}
-											</span>
-										)}
-
-										<div className="flex flex-wrap flex-row gap-3">
-											{!user.isRegistered && (
-												<div className="overflow-x-auto flex flex-row gap-4 items-center">
-													<div className="overflow-x-auto">
-														<span className="text-sm text-muted-foreground ">
-															{`${url}/invitation?token=${user.token}`}
-														</span>
-													</div>
-													<button
-														type="button"
-														// className="absolute right-2 top-2"
-														onClick={() => {
-															copy(`${url}/invitation?token=${user.token}`);
-															toast.success("Invitation Copied to clipboard");
-														}}
+							<Table>
+								<TableCaption>See all users</TableCaption>
+								<TableHeader>
+									<TableRow>
+										<TableHead className="w-[100px]">Email</TableHead>
+										<TableHead className="text-center">Status</TableHead>
+										<TableHead className="text-center">2FA</TableHead>
+										<TableHead className="text-center">Expiration</TableHead>
+										<TableHead className="text-right">Actions</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{data?.map((user) => {
+										return (
+											<TableRow key={user.userId}>
+												<TableCell className="w-[100px]">
+													{user.auth.email}
+												</TableCell>
+												<TableCell className="text-center">
+													<Badge
+														variant={
+															user.isRegistered ? "default" : "secondary"
+														}
 													>
-														<CopyIcon className="size-4 text-muted-foreground" />
-													</button>
-												</div>
-											)}
+														{user.isRegistered
+															? "Registered"
+															: "Not Registered"}
+													</Badge>
+												</TableCell>
+												<TableCell className="text-center">
+													{user.auth.is2FAEnabled
+														? "2FA Enabled"
+														: "2FA Not Enabled"}
+												</TableCell>
+												<TableCell className="text-right">
+													<span className="text-sm text-muted-foreground">
+														{format(new Date(user.expirationDate), "PPpp")}
+													</span>
+												</TableCell>
 
-											{user.isRegistered && (
-												<AddUserPermissions userId={user.userId} />
-											)}
-											{user.isRegistered && <UpdateUser authId={user.authId} />}
-											<DeleteUser authId={user.authId} />
-										</div>
-									</div>
-								);
-							})}
-							<div className="flex flex-col justify-end gap-3 w-full items-end">
-								<AddUser />
-							</div>
+												<TableCell className="text-right flex justify-end">
+													<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>
+															{!user.isRegistered && (
+																<DropdownMenuItem
+																	className="w-full cursor-pointer"
+																	onSelect={(e) => {
+																		copy(
+																			`${origin}/invitation?token=${user.token}`,
+																		);
+																		toast.success(
+																			"Invitation Copied to clipboard",
+																		);
+																	}}
+																>
+																	Copy Invitation
+																</DropdownMenuItem>
+															)}
+
+															{user.isRegistered && (
+																<AddUserPermissions userId={user.userId} />
+															)}
+
+															<DeleteUser authId={user.authId} />
+														</DropdownMenuContent>
+													</DropdownMenu>
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</TableBody>
+							</Table>
 						</div>
 					)}
 				</CardContent>

components/dashboard/settings/web-server.tsx

@@ -27,10 +27,9 @@ import { DockerTerminalModal } from "./web-server/docker-terminal-modal";
 import { ShowMainTraefikConfig } from "./web-server/show-main-traefik-config";
 import { ShowServerTraefikConfig } from "./web-server/show-server-traefik-config";
 import { ShowServerMiddlewareConfig } from "./web-server/show-server-middleware-config";
-import { UpdateWebServer } from "./web-server/update-webserver";
+import { UpdateServer } from "./web-server/update-server";
 
 export const WebServer = () => {
-	const [fetchAfterFirstRender, setFetchAfterFirstRender] = useState(false);
 	const { data, refetch } = api.admin.one.useQuery();
 	const { mutateAsync: reloadServer, isLoading } =
 		api.settings.reloadServer.useMutation();
@@ -61,13 +60,6 @@ export const WebServer = () => {
 
 	const { mutateAsync: updateDockerCleanup } =
 		api.settings.updateDockerCleanup.useMutation();
-	const { data: query } = api.settings.checkAndUpdateImage.useQuery(void 0, {
-		enabled: fetchAfterFirstRender,
-	});
-
-	useEffect(() => {
-		setFetchAfterFirstRender(true);
-	}, []);
 
 	return (
 		<Card className="rounded-lg w-full bg-transparent">
@@ -279,7 +271,7 @@ export const WebServer = () => {
 						</DropdownMenuContent>
 					</DropdownMenu>
 
-					{query ? <UpdateWebServer /> : null}
+					<UpdateServer />
 				</div>
 
 				<div className="flex items-center flex-wrap justify-between gap-4">

components/dashboard/settings/web-server/show-main-traefik-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateMainTraefikConfigSchema = z.object({
@@ -105,8 +105,8 @@ export const ShowMainTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`providers:
     docker:
         defaultRule: 'Host('dokploy.com')'

components/dashboard/settings/web-server/show-server-middleware-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerMiddlewareConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerMiddlewareConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:

components/dashboard/settings/web-server/show-server-traefik-config.tsx

@@ -16,7 +16,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
 import { api } from "@/utils/api";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -24,6 +23,7 @@ import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { CodeEditor } from "@/components/shared/code-editor";
 import { validateAndFormatYAML } from "../../application/advanced/traefik/update-traefik-config";
 
 const UpdateServerTraefikConfigSchema = z.object({
@@ -98,7 +98,7 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 					<form
 						id="hook-form-update-server-traefik-config"
 						onSubmit={form.handleSubmit(onSubmit)}
-						className="grid w-full py-4 relative"
+						className="grid w-full py-4 relative overflow-auto"
 					>
 						<div className="flex flex-col">
 							<FormField
@@ -108,8 +108,8 @@ export const ShowServerTraefikConfig = ({ children }: Props) => {
 									<FormItem className="relative">
 										<FormLabel>Traefik config</FormLabel>
 										<FormControl>
-											<Textarea
-												className="h-[35rem] font-mono"
+											<CodeEditor
+												wrapperClassName="h-[35rem] font-mono"
 												placeholder={`http:
 routers:
     router-name:

components/dashboard/settings/web-server/terminal-modal.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type React from "react";
 import {
 	Dialog,
 	DialogContent,

components/dashboard/settings/web-server/update-server.tsx

@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { RefreshCcw } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import Link from "next/link";
+import { UpdateWebServer } from "./update-webserver";
+
+export const UpdateServer = () => {
+	const [isUpdateAvailable, setIsUpdateAvailable] = useState<null | boolean>(
+		null,
+	);
+	const { mutateAsync: checkAndUpdateImage, isLoading } =
+		api.settings.checkAndUpdateImage.useMutation();
+	const [isOpen, setIsOpen] = useState(false);
+
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="secondary">
+					<RefreshCcw className="h-4 w-4" />
+					Updates
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:m:max-w-lg ">
+				<DialogHeader>
+					<DialogTitle>Web Server Update</DialogTitle>
+					<DialogDescription>
+						Check new releases and update your dokploy
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="flex flex-col gap-4">
+					<span className="text-sm text-muted-foreground">
+						We suggest to update your dokploy to the latest version only if you:
+					</span>
+					<ul className="list-disc list-inside text-sm text-muted-foreground">
+						<li>Want to try the latest features</li>
+						<li>Some bug that is blocking to use some features</li>
+					</ul>
+					<AlertBlock type="info">
+						Please we recommend to see the latest version to see if there are
+						any breaking changes before updating. Go to{" "}
+						<Link
+							href="https://github.com/Dokploy/dokploy/releases"
+							target="_blank"
+							className="text-foreground"
+						>
+							Dokploy Releases
+						</Link>{" "}
+						to check the latest version.
+					</AlertBlock>
+
+					<div className="w-full flex flex-col gap-4">
+						{isUpdateAvailable === false && (
+							<div className="flex flex-col items-center gap-3">
+								<RefreshCcw className="size-6 self-center text-muted-foreground" />
+								<span className="text-sm text-muted-foreground">
+									You are using the latest version
+								</span>
+							</div>
+						)}
+						{isUpdateAvailable ? (
+							<UpdateWebServer />
+						) : (
+							<Button
+								className="w-full"
+								onClick={async () => {
+									await checkAndUpdateImage()
+										.then(async (e) => {
+											setIsUpdateAvailable(e);
+										})
+										.catch(() => {
+											setIsUpdateAvailable(false);
+											toast.error("Error to check updates");
+										});
+									toast.success("Check updates");
+								}}
+								isLoading={isLoading}
+							>
+								Check updates
+							</Button>
+						)}
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

components/dashboard/settings/web-server/update-webserver.tsx

@@ -19,7 +19,11 @@ export const UpdateWebServer = () => {
 	return (
 		<AlertDialog>
 			<AlertDialogTrigger asChild>
-				<Button className="relative" variant="secondary" isLoading={isLoading}>
+				<Button
+					className="relative w-full"
+					variant="secondary"
+					isLoading={isLoading}
+				>
 					<span className="absolute -right-1 -top-2 flex h-3 w-3">
 						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
 						<span className="relative inline-flex rounded-full h-3 w-3 bg-green-500" />