feat(dokploy): add welcome modal to dokploy cloud

apps/dokploy/components/dashboard/settings/billing/show-billing.tsx

@@ -1,3 +1,4 @@
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { NumberInput } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
@@ -148,6 +149,11 @@ export const ShowBilling = () => {
 											: "lg:py-8",
 									)}
 								>
+									{isAnnual && (
+										<div className="mb-4 flex flex-row items-center gap-2">
+											<Badge>Recommended 🚀</Badge>
+										</div>
+									)}
 									{isAnnual ? (
 										<div className="flex flex-row gap-2 items-center">
 											<p className=" text-2xl font-semibold tracking-tight text-primary ">

apps/dokploy/components/dashboard/settings/billing/show-welcome-dokploy.tsx

@@ -0,0 +1,62 @@
+import { ShowBilling } from "@/components/dashboard/settings/billing/show-billing";
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { api } from "@/utils/api";
+import type React from "react";
+import { useEffect, useState } from "react";
+
+export const ShowWelcomeDokploy = () => {
+	const { data } = api.auth.get.useQuery();
+	const [open, setOpen] = useState(false);
+
+	const { data: isCloud, isLoading } = api.settings.isCloud.useQuery();
+
+	if (!isCloud || data?.rol !== "admin") {
+		return null;
+	}
+
+	useEffect(() => {
+		if (
+			!isLoading &&
+			isCloud &&
+			!localStorage.getItem("hasSeenCloudWelcomeModal") &&
+			data?.rol === "admin"
+		) {
+			setOpen(true);
+		}
+	}, [isCloud, isLoading]);
+
+	const handleClose = (isOpen: boolean) => {
+		if (data?.rol === "admin") {
+			setOpen(isOpen);
+			if (!isOpen) {
+				localStorage.setItem("hasSeenCloudWelcomeModal", "true"); // Establece el flag al cerrar el modal
+			}
+		}
+	};
+
+	return (
+		<>
+			<Dialog open={open} onOpenChange={handleClose}>
+				<DialogContent className="sm:max-w-xl max-h-screen overflow-y-auto">
+					<DialogHeader>
+						<DialogTitle className="text-2xl font-semibold text-center">
+							Welcome to Dokploy Cloud 🎉
+						</DialogTitle>
+						<p className="text-center text-sm text-muted-foreground mt-2">
+							Unlock powerful features to streamline your deployments and manage
+							projects effortlessly.
+						</p>
+					</DialogHeader>
+					<div className="mt-4 space-y-3 text-sm text-primary ">
+						<ShowBilling />
+					</div>
+				</DialogContent>
+			</Dialog>
+		</>
+	);
+};