From 988f5b64d66b72463a1149c2933a4898e356ffda Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Tue, 8 Sep 2026 01:26:41 -0600
Subject: [PATCH] feat(trial-banner): add trial banner component to display
 trial status in sidebar

---
 .../dashboard/billing/trial-banner.tsx        | 34 +++++++++++++++++++
 apps/dokploy/components/layouts/side.tsx      |  2 ++
 2 files changed, 36 insertions(+)
 create mode 100644 apps/dokploy/components/dashboard/billing/trial-banner.tsx

diff --git a/apps/dokploy/components/dashboard/billing/trial-banner.tsx b/apps/dokploy/components/dashboard/billing/trial-banner.tsx
new file mode 100644
index 000000000..0c5bfdffb
--- /dev/null
+++ b/apps/dokploy/components/dashboard/billing/trial-banner.tsx
@@ -0,0 +1,34 @@
+import { Rocket } from "lucide-react";
+import { useRouter } from "next/router";
+import { Button } from "@/components/ui/button";
+import { api } from "@/utils/api";
+
+export const TrialBanner = () => {
+	const router = useRouter();
+	const { data: billingStatus } = api.stripe.getBillingStatus.useQuery();
+
+	if (!billingStatus?.isOnTrial) {
+		return null;
+	}
+
+	const daysRemaining = billingStatus.trialDaysRemaining ?? 0;
+
+	return (
+		<div className="sticky top-0 z-20 mx-4 mt-4 flex flex-wrap items-center justify-center gap-x-3 gap-y-2 rounded-lg border border-primary/20 bg-primary/10 px-4 py-2 text-sm">
+			<span className="flex items-center gap-2">
+				<Rocket className="h-4 w-4 text-primary shrink-0" />
+				{daysRemaining > 0
+					? `You have ${daysRemaining} day${daysRemaining === 1 ? "" : "s"} left in your free trial.`
+					: "Your free trial ends today."}
+			</span>
+			<Button
+				size="sm"
+				variant="default"
+				className="h-7"
+				onClick={() => router.push("/dashboard/settings/billing")}
+			>
+				Upgrade now
+			</Button>
+		</div>
+	);
+};
diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx
index 97e0706ba..1e20a0fbe 100644
--- a/apps/dokploy/components/layouts/side.tsx
+++ b/apps/dokploy/components/layouts/side.tsx
@@ -101,6 +101,7 @@ import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 import type { AppRouter } from "@/server/api/root";
 import { api } from "@/utils/api";
+import { TrialBanner } from "../dashboard/billing/trial-banner";
 import { AddOrganization } from "../dashboard/organization/handle-organization";
 import { DialogAction } from "../shared/dialog-action";
 import { Logo } from "../shared/logo";
@@ -1229,6 +1230,7 @@ export default function Page({ children }: Props) {
 				<SidebarRail />
 			</Sidebar>
 			<SidebarInset>
+				{isCloud === true && <TrialBanner />}
 				{!includesProjects && (
 					<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
 						<div className="flex items-center justify-between w-full px-4">