fix: unify tier color mapping, fix feature badge colors
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -9,15 +9,7 @@ import {
|
|||||||
import { useAuth } from '../auth/useAuth';
|
import { useAuth } from '../auth/useAuth';
|
||||||
import { useTenant, useLicense } from '../api/hooks';
|
import { useTenant, useLicense } from '../api/hooks';
|
||||||
import styles from '../styles/platform.module.css';
|
import styles from '../styles/platform.module.css';
|
||||||
|
import { tierColor } from '../utils/tier';
|
||||||
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';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DashboardPage() {
|
export function DashboardPage() {
|
||||||
const { tenantId } = useAuth();
|
const { tenantId } = useAuth();
|
||||||
@@ -67,7 +59,6 @@ export function DashboardPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6 p-6">
|
<div className="space-y-6 p-6">
|
||||||
{/* Tenant Header */}
|
{/* Tenant Header */}
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<h1 className={styles.heading}>
|
<h1 className={styles.heading}>
|
||||||
{tenant?.name ?? tenantId}
|
{tenant?.name ?? tenantId}
|
||||||
@@ -79,14 +70,6 @@ export function DashboardPage() {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => window.open('/server/', '_blank', 'noopener')}
|
|
||||||
>
|
|
||||||
Open Server Dashboard
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* KPI Strip */}
|
{/* KPI Strip */}
|
||||||
<KpiStrip items={kpiItems} />
|
<KpiStrip items={kpiItems} />
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
import { useAuth } from '../auth/useAuth';
|
import { useAuth } from '../auth/useAuth';
|
||||||
import { useLicense } from '../api/hooks';
|
import { useLicense } from '../api/hooks';
|
||||||
import styles from '../styles/platform.module.css';
|
import styles from '../styles/platform.module.css';
|
||||||
|
import { tierColor } from '../utils/tier';
|
||||||
|
|
||||||
const FEATURE_LABELS: Record<string, string> = {
|
const FEATURE_LABELS: Record<string, string> = {
|
||||||
topology: 'Topology',
|
topology: 'Topology',
|
||||||
@@ -23,16 +24,6 @@ const LIMIT_LABELS: Record<string, string> = {
|
|||||||
max_environments: 'Max Environments',
|
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 {
|
function daysRemaining(expiresAt: string): number {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const exp = new Date(expiresAt).getTime();
|
const exp = new Date(expiresAt).getTime();
|
||||||
@@ -127,7 +118,7 @@ export function LicensePage() {
|
|||||||
<span className={styles.kvLabel}>{label}</span>
|
<span className={styles.kvLabel}>{label}</span>
|
||||||
<Badge
|
<Badge
|
||||||
label={enabled ? 'Enabled' : 'Not included'}
|
label={enabled ? 'Enabled' : 'Not included'}
|
||||||
color={enabled ? 'success' : 'auto'}
|
color={enabled ? 'success' : 'warning'}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
20
ui/src/utils/tier.ts
Normal file
20
ui/src/utils/tier.ts
Normal 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';
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user