arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

feat: add plan badge to overview and settings pages

Browse source 
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
This commit is contained in:
Arthur Belleville 2026-03-16 09:52:34 +01:00
parent 65ea60a91c
commit 9e0529f73b
No known key found for this signature in database
2 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/main/src/pages/settings.tsx
View file

@ -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: {

16
apps/main/src/pages/tablo.tsx
View file

@ -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">