18 lines
1.2 KiB
HTML
18 lines
1.2 KiB
HTML
<!-- Token Budget Indicator Component -->
|
|
<!-- Only shows if user has a budget limit set -->
|
|
<div v-if="tokenBudget && tokenBudget.has_budget"
|
|
class="hidden sm:flex items-center gap-1.5 px-2 py-1 rounded text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors cursor-default"
|
|
:title="t('adminDashboard.tokenUsage') + ': ' + (tokenBudget.usage || 0).toLocaleString() + ' / ' + (tokenBudget.budget || 0).toLocaleString()">
|
|
<i class="fas fa-coins text-[10px]"
|
|
:style="tokenBudget.percentage >= 100 ? {color: '#ef4444'} : tokenBudget.percentage >= 80 ? {color: '#f59e0b'} : {}"></i>
|
|
<span :style="tokenBudget.percentage >= 100 ? {color: '#ef4444'} : tokenBudget.percentage >= 80 ? {color: '#f59e0b'} : {}">${ tokenBudget.percentage }%</span>
|
|
<div class="w-12 h-1 bg-[var(--bg-tertiary)] rounded-full overflow-hidden">
|
|
<div class="h-full rounded-full transition-all duration-300 bg-[var(--text-accent)]"
|
|
:style="{
|
|
width: Math.min(tokenBudget.percentage, 100) + '%',
|
|
backgroundColor: tokenBudget.percentage >= 100 ? '#ef4444' : tokenBudget.percentage >= 80 ? '#f59e0b' : null
|
|
}">
|
|
</div>
|
|
</div>
|
|
</div>
|