feat(dokploy): add welcome modal to dokploy cloud

apps/dokploy/components/dashboard/requests/show-requests.tsx

@@ -34,7 +34,7 @@ export const ShowRequests = () => {
 			<Card className="bg-transparent mt-10">
 				<CardHeader>
 					<CardTitle>Request Distribution</CardTitle>
-					<div className="flex justify-between gap-2">
+					<div className="flex  max-sm:flex-wrap justify-between gap-2">
 						<CardDescription>
 							<span>Showing web and API requests over time</span>
 						</CardDescription>

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

apps/dokploy/components/layouts/navbar.tsx

@@ -19,6 +19,7 @@ import { buttonVariants } from "../ui/button";
 export const Navbar = () => {
 	const router = useRouter();
 	const { data } = api.auth.get.useQuery();
+	const { data: isCloud } = api.settings.isCloud.useQuery();
 	const { data: user } = api.user.byAuthId.useQuery(
 		{
 			authId: data?.id || "",
@@ -130,6 +131,16 @@ export const Navbar = () => {
 									Settings
 								</DropdownMenuItem>
 							</DropdownMenuGroup>
+							{isCloud && data?.rol === "admin" && (
+								<DropdownMenuItem
+									className="cursor-pointer"
+									onClick={() => {
+										router.push("/dashboard/settings/billing");
+									}}
+								>
+									Billing
+								</DropdownMenuItem>
+							)}
 							<DropdownMenuSeparator />
 							<DropdownMenuItem
 								className="cursor-pointer"

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

@@ -136,7 +136,7 @@ export const NavigationTabs = ({ tab, children }: Props) => {
 						router.push(tab?.index || "");
 					}}
 				>
-					<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto border-b border-b-divider pb-1">
+					<div className="flex flex-row items-center justify-between w-full gap-4 max-sm:overflow-x-auto overflow-y-hidden border-b border-b-divider pb-1">
 						<TabsList className="bg-transparent relative px-0">
 							{tabMap.map((tab, index) => {
 								if (tab?.isShow && !tab?.isShow?.({ rol: data?.rol, user })) {

apps/dokploy/pages/dashboard/projects.tsx

@@ -1,14 +1,21 @@
 import { ShowProjects } from "@/components/dashboard/projects/show";
+import { ShowWelcomeDokploy } from "@/components/dashboard/settings/billing/show-welcome-dokploy";
 import { DashboardLayout } from "@/components/layouts/dashboard-layout";
 import { appRouter } from "@/server/api/root";
 import { validateRequest } from "@dokploy/server";
 import { createServerSideHelpers } from "@trpc/react-query/server";
 import type { GetServerSidePropsContext } from "next";
-import React, { type ReactElement } from "react";
+import type React from "react";
+import type { ReactElement } from "react";
 import superjson from "superjson";
 
 const Dashboard = () => {
-	return <ShowProjects />;
+	return (
+		<>
+			<ShowWelcomeDokploy />
+			<ShowProjects />
+		</>
+	);
 };
 
 export default Dashboard;
@@ -35,7 +42,7 @@ export async function getServerSideProps(
 	});
 
 	await helpers.settings.isCloud.prefetch();
-
+	await helpers.auth.get.prefetch();
 	if (!user) {
 		return {
 			redirect: {