From 3e573ae27f9be3f7bb0c70d14d378b4e5b15bd0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 20 Jan 2026 17:41:58 +0100
Subject: [PATCH] fix: hide billing on self-hosted

---
 .../components/sidebar-organization-menu.tsx  | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/apps/start/src/components/sidebar-organization-menu.tsx b/apps/start/src/components/sidebar-organization-menu.tsx
index eb9818bb..bd46546b 100644
--- a/apps/start/src/components/sidebar-organization-menu.tsx
+++ b/apps/start/src/components/sidebar-organization-menu.tsx
@@ -7,11 +7,12 @@ import {
 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
+import { useAppContext } from '@/hooks/use-app-context';
 import { useAppParams } from '@/hooks/use-app-params';
 import { pushModal } from '@/modals';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import { Link, useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate, useRouteContext } from '@tanstack/react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ChevronDownIcon, PlusIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -28,6 +29,8 @@ export default function SidebarOrganizationMenu({
 }: {
   organization: RouterOutputs['organization']['list'][number];
 }) {
+  const { isSelfHosted } = useAppContext();
+
   return (
     <>
       <Link
@@ -52,21 +55,23 @@ export default function SidebarOrganizationMenu({
         <CogIcon size={20} />
         <div className="flex-1">Settings</div>
       </Link>
-      <Link
-        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-        )}
-        activeOptions={{ exact: true }}
-        to="/$organizationId/billing"
-        from="/$organizationId"
-      >
-        <CreditCardIcon size={20} />
-        <div className="flex-1">Billing</div>
-        {organization?.isTrial && <Badge>Trial</Badge>}
-        {organization?.isExpired && <Badge>Expired</Badge>}
-        {organization?.isWillBeCanceled && <Badge>Canceled</Badge>}
-        {organization?.isCanceled && <Badge>Canceled</Badge>}
-      </Link>
+      {!isSelfHosted && (
+        <Link
+          className={cn(
+            'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
+          )}
+          activeOptions={{ exact: true }}
+          to="/$organizationId/billing"
+          from="/$organizationId"
+        >
+          <CreditCardIcon size={20} />
+          <div className="flex-1">Billing</div>
+          {organization?.isTrial && <Badge>Trial</Badge>}
+          {organization?.isExpired && <Badge>Expired</Badge>}
+          {organization?.isWillBeCanceled && <Badge>Canceled</Badge>}
+          {organization?.isCanceled && <Badge>Canceled</Badge>}
+        </Link>
+      )}
       <Link
         className={cn(
           'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',