Lars
405abc1973
- Add api.getFeatureUsage() endpoint call - Create UsageBadge component (inline indicators) - Create FeatureUsageOverview component (Settings table) - Add "Kontingente" section to Settings page - Color-coded status (green/yellow/red) - Grouped by category - Shows reset period and next reset date Phase 3: Frontend Display Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
32 lines
761 B
JavaScript
32 lines
761 B
JavaScript
/**
|
|
* UsageBadge - Small inline usage indicator
|
|
*
|
|
* Shows usage quota in format: (used/limit)
|
|
* Color-coded: green (ok), yellow (warning), red (exceeded)
|
|
*
|
|
* Phase 3: Frontend Display
|
|
*/
|
|
import './UsageBadge.css'
|
|
|
|
export default function UsageBadge({ used, limit, remaining, allowed }) {
|
|
// Don't show badge if unlimited
|
|
if (limit === null || limit === undefined) {
|
|
return null
|
|
}
|
|
|
|
// Determine status for color coding
|
|
let status = 'ok'
|
|
if (!allowed || remaining < 0) {
|
|
status = 'exceeded'
|
|
} else if (limit > 0 && remaining <= Math.ceil(limit * 0.2)) {
|
|
// Warning at 20% or less remaining
|
|
status = 'warning'
|
|
}
|
|
|
|
return (
|
|
<span className={`usage-badge usage-badge--${status}`}>
|
|
({used}/{limit})
|
|
</span>
|
|
)
|
|
}
|