fix(ui): clean up tenant pages and add license inspection
All checks were successful
CI / build (push) Successful in 2m6s
CI / docker (push) Successful in 1m28s

- Remove tier badge from tenant license page header
- Remove tier badge and Tier KPI card from tenant dashboard
- Add "Inspect License" toggle on vendor tenant detail to view all limits

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-27 07:51:29 +02:00
parent 3cd6bd5585
commit f0dda0d2ee
3 changed files with 26 additions and 10 deletions

View File

@@ -13,7 +13,6 @@ import { useTenantDashboard, useRestartServer, useUpgradeServer } from '../../ap
import { errorMessage } from '../../api/client';
import { ServerStatusBadge } from '../../components/ServerStatusBadge';
import { UsageIndicator } from '../../components/UsageIndicator';
import { tierColor } from '../../utils/tier';
import styles from '../../styles/platform.module.css';
function statusColor(status: string): 'success' | 'error' | 'warning' | 'auto' {
@@ -64,7 +63,6 @@ export function TenantDashboardPage() {
{/* Header */}
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>{data.name}</h1>
<Badge label={data.tier} color={tierColor(data.tier)} />
<Badge label={data.status} color={statusColor(data.status)} />
</div>
@@ -78,7 +76,6 @@ export function TenantDashboardPage() {
{/* KPI strip */}
<KpiStrip
items={[
{ label: 'Tier', value: data.tier },
{ label: 'Status', value: data.status },
{ label: 'Server', value: data.serverHealthy ? 'Healthy' : 'Down' },
{ label: 'License', value: daysRemaining > 0 ? `${daysRemaining}d remaining` : 'Expired' },

View File

@@ -10,7 +10,6 @@ import {
import { Copy, Eye, EyeOff } from 'lucide-react';
import { useTenantLicense } from '../../api/tenant-hooks';
import { UsageIndicator } from '../../components/UsageIndicator';
import { tierColor } from '../../utils/tier';
import styles from '../../styles/platform.module.css';
const LIMIT_LABELS: Record<string, string> = {
@@ -92,10 +91,7 @@ export function TenantLicensePage() {
return (
<div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>License</h1>
<Badge label={data.tier} color={tierColor(data.tier)} />
</div>
<h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>License</h1>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
<Card title="Validity">

View File

@@ -9,7 +9,7 @@ import {
Spinner,
useToast,
} from '@cameleer/design-system';
import { ArrowLeft, ArrowUpCircle, Check, Clipboard, RefreshCw, Send, Trash2 } from 'lucide-react';
import { ArrowLeft, ArrowUpCircle, Check, Clipboard, Eye, RefreshCw, Send, Trash2 } from 'lucide-react';
import {
useVendorTenant,
useSuspendTenant,
@@ -114,6 +114,7 @@ export function TenantDetailPage() {
const { data: presets } = useLicensePresets();
const [deleteOpen, setDeleteOpen] = useState(false);
const [inspectOpen, setInspectOpen] = useState(false);
const [mintOpen, setMintOpen] = useState(false);
const [selectedTier, setSelectedTier] = useState('');
const [limits, setLimits] = useState<Record<string, number>>({});
@@ -325,7 +326,14 @@ export function TenantDetailPage() {
<span className={styles.kvLabel}>Grace period</span>
<span className={styles.kvValue}>{license.gracePeriodDays}d</span>
</div>
<div style={{ paddingTop: 8 }}>
<div style={{ paddingTop: 8, display: 'flex', gap: 8 }}>
<Button
variant="secondary"
onClick={() => setInspectOpen((v) => !v)}
>
<Eye size={14} style={{ marginRight: 6, verticalAlign: -2 }} />
{inspectOpen ? 'Hide Limits' : 'Inspect License'}
</Button>
<Button
variant="secondary"
onClick={() => { setMintOpen(true); setLastBundle(null); }}
@@ -334,6 +342,21 @@ export function TenantDetailPage() {
Mint New License
</Button>
</div>
{inspectOpen && (
<div style={{ paddingTop: 8 }}>
<div style={{ fontSize: 12, fontWeight: 500, color: 'var(--text-muted)', marginBottom: 6 }}>All Limits</div>
<div className={styles.dividerList}>
{LIMIT_KEYS.map(key => (
<div key={key} className={styles.kvRow}>
<span className={styles.kvLabel}>{LIMIT_LABELS[key]}</span>
<span className={styles.kvValue} style={{ fontVariantNumeric: 'tabular-nums' }}>
{(license.limits[key] ?? 0).toLocaleString()}
</span>
</div>
))}
</div>
</div>
)}
</div>
) : (
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>