cameleer/cameleer-saas
2
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add license usage visualization with progress bars

Browse Source 
Split license limits into metered "Resource Usage" (with color-coded
progress bars) and static "Plan Limits" cards. Updated UsageIndicator
with 8px bars, green/amber/red thresholds, and tabular-nums formatting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-26 22:12:33 +02:00
parent 6afc337b16
commit d783040030
5 changed files with 140 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ui/src/components/UsageIndicator.tsx
View File

@@ -6,20 +6,30 @@ interface Props {
label: string;
}
function barColor(pct: number): string {
if (pct >= 100) return 'var(--error)';
if (pct >= 75) return 'var(--warning)';
return 'var(--success)';
}
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)';
const pct = unlimited ? 0 : limit === 0 ? 100 : Math.min((used / limit) * 100, 100);
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 className={styles.usageRow}>
<div className={styles.usageHeader}>
<span className={styles.usageLabel}>{label}</span>
<span className={styles.usageValue} style={pct >= 100 ? { color: 'var(--error)', fontWeight: 600 } : undefined}>
{used.toLocaleString()}{' / '}{unlimited ? '\u221e' : limit.toLocaleString()}
</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 className={styles.usageBarTrack}>
<div
className={styles.usageBarFill}
style={{ width: `${Math.max(pct, 2)}%`, background: barColor(pct) }}
/>
</div>
)}
</div>