Update how billing is presented for license keys

src/app/[orgId]/settings/(private)/billing/page.tsx

@@ -749,12 +749,6 @@ export default function BillingPage() {
         return 0;
     };
 
-    // Get license key count
-    const getLicenseKeyCount = (): number => {
-        if (!licenseSubscription?.items) return 0;
-        return licenseSubscription.items.length;
-    };
-
     // Check if downgrading to a tier would violate current usage limits
     const checkLimitViolations = (
         targetTier: Tier | "basic"
@@ -1545,7 +1539,7 @@ export default function BillingPage() {
             </SettingsSection>
 
             {/* Paid License Keys Section */}
-            {(licenseSubscription || getLicenseKeyCount() > 0) && (
+            {licenseSubscription && (
                 <SettingsSection>
                     <SettingsSectionHeader>
                         <SettingsSectionTitle>
@@ -1561,22 +1555,6 @@ export default function BillingPage() {
                             <SettingsFormGrid>
                                 <SettingsFormCell span="full">
                                     <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border rounded-lg p-4">
-                                        <div>
-                                            <div className="text-sm text-muted-foreground mb-1">
-                                                {t("billingCurrentKeys") ||
-                                                    "Current Keys"}
-                                            </div>
-                                            <div className="flex items-baseline gap-2">
-                                                <span className="text-3xl font-semibold">
-                                                    {getLicenseKeyCount()}
-                                                </span>
-                                                <span className="text-lg">
-                                                    {getLicenseKeyCount() === 1
-                                                        ? "key"
-                                                        : "keys"}
-                                                </span>
-                                            </div>
-                                        </div>
                                         <Button
                                             variant="outline"
                                             onClick={handleModifySubscription}

src/app/[orgId]/settings/(private)/license/page.tsx

@@ -1,4 +1,5 @@
 import GenerateLicenseKeysTable from "@app/components/GenerateLicenseKeysTable";
+import LicenseBillingBanner from "@app/components/LicenseBillingBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListGeneratedLicenseKeysResponse } from "@server/routers/generatedLicense/types";
@@ -26,5 +27,16 @@ export default async function Page({ params }: Props) {
         licenseKeys = data.data.data;
     } catch {}
 
-    return <GenerateLicenseKeysTable licenseKeys={licenseKeys} orgId={orgId} />;
+    const hasNonPersonalLicenseKey = licenseKeys.some(
+        (key) => key.tier !== "personal"
+    );
+
+    return (
+        <>
+            {hasNonPersonalLicenseKey && (
+                <LicenseBillingBanner orgId={orgId} />
+            )}
+            <GenerateLicenseKeysTable licenseKeys={licenseKeys} orgId={orgId} />
+        </>
+    );
 }