From 7d4126ad4ea58bff78835e8ed617bbea9b70c5f8 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:50:28 +0200
Subject: [PATCH] fix: unify tier color mapping, fix feature badge colors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/DashboardPage.tsx | 39 ++++++++++------------------------
 ui/src/pages/LicensePage.tsx   | 13 ++----------
 ui/src/utils/tier.ts           | 20 +++++++++++++++++
 3 files changed, 33 insertions(+), 39 deletions(-)
 create mode 100644 ui/src/utils/tier.ts

diff --git a/ui/src/pages/DashboardPage.tsx b/ui/src/pages/DashboardPage.tsx
index a6a9488..f67d1e5 100644
--- a/ui/src/pages/DashboardPage.tsx
+++ b/ui/src/pages/DashboardPage.tsx
@@ -9,15 +9,7 @@ import {
 import { useAuth } from '../auth/useAuth';
 import { useTenant, useLicense } from '../api/hooks';
 import styles from '../styles/platform.module.css';
-
-function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
-  switch (tier?.toLowerCase()) {
-    case 'enterprise': return 'success';
-    case 'pro': return 'primary';
-    case 'starter': return 'warning';
-    default: return 'primary';
-  }
-}
+import { tierColor } from '../utils/tier';
 
 export function DashboardPage() {
   const { tenantId } = useAuth();
@@ -67,25 +59,16 @@ export function DashboardPage() {
   return (
     <div className="space-y-6 p-6">
       {/* Tenant Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <h1 className={styles.heading}>
-            {tenant?.name ?? tenantId}
-          </h1>
-          {tenant?.tier && (
-            <Badge
-              label={tenant.tier.toUpperCase()}
-              color={tierColor(tenant.tier)}
-            />
-          )}
-        </div>
-        <Button
-          variant="primary"
-          size="sm"
-          onClick={() => window.open('/server/', '_blank', 'noopener')}
-        >
-          Open Server Dashboard
-        </Button>
+      <div className="flex items-center gap-3">
+        <h1 className={styles.heading}>
+          {tenant?.name ?? tenantId}
+        </h1>
+        {tenant?.tier && (
+          <Badge
+            label={tenant.tier.toUpperCase()}
+            color={tierColor(tenant.tier)}
+          />
+        )}
       </div>
 
       {/* KPI Strip */}
diff --git a/ui/src/pages/LicensePage.tsx b/ui/src/pages/LicensePage.tsx
index 5a25bf8..04fbfd3 100644
--- a/ui/src/pages/LicensePage.tsx
+++ b/ui/src/pages/LicensePage.tsx
@@ -8,6 +8,7 @@ import {
 import { useAuth } from '../auth/useAuth';
 import { useLicense } from '../api/hooks';
 import styles from '../styles/platform.module.css';
+import { tierColor } from '../utils/tier';
 
 const FEATURE_LABELS: Record<string, string> = {
   topology: 'Topology',
@@ -23,16 +24,6 @@ const LIMIT_LABELS: Record<string, string> = {
   max_environments: 'Max Environments',
 };
 
-function tierColor(tier: string): 'primary' | 'success' | 'warning' | 'error' {
-  switch (tier?.toUpperCase()) {
-    case 'BUSINESS': return 'success';
-    case 'HIGH': return 'primary';
-    case 'MID': return 'warning';
-    case 'LOW': return 'error';
-    default: return 'primary';
-  }
-}
-
 function daysRemaining(expiresAt: string): number {
   const now = Date.now();
   const exp = new Date(expiresAt).getTime();
@@ -127,7 +118,7 @@ export function LicensePage() {
                 <span className={styles.kvLabel}>{label}</span>
                 <Badge
                   label={enabled ? 'Enabled' : 'Not included'}
-                  color={enabled ? 'success' : 'auto'}
+                  color={enabled ? 'success' : 'warning'}
                 />
               </div>
             );
diff --git a/ui/src/utils/tier.ts b/ui/src/utils/tier.ts
new file mode 100644
index 0000000..13c02b7
--- /dev/null
+++ b/ui/src/utils/tier.ts
@@ -0,0 +1,20 @@
+export type TierColor = 'primary' | 'success' | 'warning' | 'error' | 'auto';
+
+export function tierColor(tier: string): TierColor {
+  switch (tier?.toUpperCase()) {
+    case 'BUSINESS':
+    case 'ENTERPRISE':
+      return 'success';
+    case 'HIGH':
+    case 'PRO':
+      return 'primary';
+    case 'MID':
+    case 'STARTER':
+      return 'warning';
+    case 'LOW':
+    case 'FREE':
+      return 'auto';
+    default:
+      return 'auto';
+  }
+}