feat: vendor console — tenant list, create wizard, detail page

Implements Task 9: shared components (ServerStatusBadge, UsageIndicator,
platform.module.css, tierColor utility) and full vendor console pages
(VendorTenantsPage, CreateTenantPage, TenantDetailPage). Build passes cleanly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 21:56:33 +02:00
parent bf3aa57274
commit d2f6b02a5f
7 changed files with 586 additions and 36 deletions

View File

@@ -0,0 +1,17 @@
import { Badge } from '@cameleer/design-system';
interface Props {
state: string;
}
const config: Record<string, { color: 'success' | 'error' | 'warning' | 'auto'; label: string }> = {
RUNNING: { color: 'success', label: 'Running' },
STOPPED: { color: 'error', label: 'Stopped' },
NOT_FOUND: { color: 'auto', label: 'No Server' },
ERROR: { color: 'error', label: 'Error' },
};
export function ServerStatusBadge({ state }: Props) {
const c = config[state] ?? { color: 'auto' as const, label: state };
return <Badge color={c.color} label={c.label} />;
}

View File

@@ -0,0 +1,27 @@
import styles from '../styles/platform.module.css';
interface Props {
used: number;
limit: number;
label: string;
}
export function UsageIndicator({ used, limit, label }: Props) {
const unlimited = limit < 0;
const pct = unlimited ? 0 : Math.min((used / limit) * 100, 100);
const color = pct >= 100 ? 'var(--error)' : pct >= 80 ? 'var(--warning)' : 'var(--success)';
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
<div className={styles.kvRow}>
<span className={styles.kvLabel}>{label}</span>
<span className={styles.kvValue}>{used} / {unlimited ? '\u221e' : limit}</span>
</div>
{!unlimited && (
<div style={{ height: 4, borderRadius: 2, background: 'var(--bg-inset)', overflow: 'hidden' }}>
<div style={{ width: `${pct}%`, height: '100%', borderRadius: 2, background: color, transition: 'width 0.3s' }} />
</div>
)}
</div>
);
}