From 9e0529f73be1caf7791eff3cae40195781f9b69b Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Mon, 16 Mar 2026 09:52:34 +0100
Subject: [PATCH] feat: add plan badge to overview and settings pages

Show the active subscription plan pill (Founder/Teams/Solo) next to the
user's name on the overview greeting and in the settings page header.

Made-with: Cursor
---
 apps/main/src/pages/settings.tsx |  3 +++
 apps/main/src/pages/tablo.tsx    | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/main/src/pages/settings.tsx b/apps/main/src/pages/settings.tsx
index f121e98..6b1a1cc 100644
--- a/apps/main/src/pages/settings.tsx
+++ b/apps/main/src/pages/settings.tsx
@@ -78,6 +78,9 @@ export default function SettingsPage() {
   const organizationMembers = (organizationData?.members || []).filter(
     (member) => member.id !== user?.id
   );
+
+  console.log("organizationData", organizationData);
+
   const canManageMembers = organizationData?.is_billing_owner ?? false;
 
   const getDisplayName = (input: {
diff --git a/apps/main/src/pages/tablo.tsx b/apps/main/src/pages/tablo.tsx
index b291d17..3cbb044 100644
--- a/apps/main/src/pages/tablo.tsx
+++ b/apps/main/src/pages/tablo.tsx
@@ -42,7 +42,9 @@ import { DashboardTaskList } from "src/components/DashboardTaskList";
 import { InviteOrganizationModal } from "src/components/InviteOrganizationModal";
 import { TaskModal } from "src/components/kanban/TaskModal";
 import { ProjectCardList } from "src/components/ProjectCardList";
+import { Badge } from "@xtablo/ui/components/badge";
 import { useCanCreateTablo, useCreateTablo, useDeleteTablo, useTablosList } from "../hooks/tablos";
+import { useOrganization } from "../hooks/organization";
 import { useIsReadOnlyUser, useUser } from "../providers/UserStoreProvider";
 
 function getTabloIcon(color: string | null | undefined) {
@@ -104,6 +106,7 @@ export const TabloPage = () => {
   const canCreateTablo = useCanCreateTablo();
 
   const user = useUser();
+  const { data: organizationData } = useOrganization();
   const isReadOnly = isReadOnlyUser || !canCreateTablo;
 
   const getGreeting = () => {
@@ -510,7 +513,7 @@ export const TabloPage = () => {
         <p className="text-base text-[#475467] dark:text-gray-400 mb-2 font-medium">
           {formattedDate}
         </p>
-        <div className="flex items-center justify-between flex-wrap gap-4">
+        <div className="flex items-center gap-3 flex-wrap">
           <h1 className="text-[24px] font-medium text-[#475467] dark:text-gray-400">
             {getGreeting()},{" "}
             <span className="text-gray-900 dark:text-gray-100 font-medium">
@@ -518,6 +521,17 @@ export const TabloPage = () => {
             </span>
             !
           </h1>
+          {organizationData?.active_subscription_plan === "annual" && (
+            <Badge className="bg-linear-to-r from-purple-500 to-blue-500 text-white border-transparent">
+              Founder
+            </Badge>
+          )}
+          {organizationData?.active_subscription_plan === "team" && (
+            <Badge color="indigo">Teams</Badge>
+          )}
+          {organizationData?.active_subscription_plan === "solo" && (
+            <Badge color="zinc">Solo</Badge>
+          )}
         </div>
       </header>
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">