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:
27
ui/src/components/UsageIndicator.tsx
Normal file
27
ui/src/components/UsageIndicator.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user