fix: unify tier color mapping, fix feature badge colors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 19:50:28 +02:00
parent e3d9a3bd18
commit 7d4126ad4e
3 changed files with 33 additions and 39 deletions

View File

@@ -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 */}

View File

@@ -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>
);

20
ui/src/utils/tier.ts Normal file
View File

@@ -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';
}
}