chore: use tabular nums

This commit is contained in:
Shivam Mishra
2026-06-29 17:38:52 +05:30
parent 65e5a9dbf1
commit 3d066333eb
4 changed files with 16 additions and 10 deletions
@@ -37,13 +37,13 @@ const bars = computed(() => {
{{ $t('CAPTAIN.OVERVIEW.CREDITS.TITLE') }}
</h3>
<div class="flex items-baseline gap-2">
<span class="text-2xl font-semibold text-n-slate-12">
<span class="text-2xl font-semibold tabular-nums text-n-slate-12">
{{ creditUsage.total }}
</span>
<span class="text-sm text-n-slate-11">
{{ $t('CAPTAIN.OVERVIEW.CREDITS.UNIT') }}
</span>
<span class="text-sm font-medium text-n-slate-11">
<span class="text-sm font-medium tabular-nums text-n-slate-11">
{{ creditUsage.trend }}
</span>
</div>
@@ -22,7 +22,7 @@ const approvedPct = computed(() => {
<span class="text-sm font-medium text-n-slate-12">
{{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.TITLE') }}
</span>
<span class="text-sm text-n-slate-11">
<span class="text-sm tabular-nums text-n-slate-11">
{{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.COVERAGE', { pct: approvedPct }) }}
</span>
</div>
@@ -34,7 +34,7 @@ const approvedPct = computed(() => {
</div>
<div class="grid grid-cols-3 gap-3">
<div class="flex flex-col gap-1">
<span class="text-xl font-semibold text-n-slate-12">
<span class="text-xl font-semibold tabular-nums text-n-slate-12">
{{ knowledge.approved }}
</span>
<span class="text-xs text-n-slate-11">
@@ -42,7 +42,7 @@ const approvedPct = computed(() => {
</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xl font-semibold text-n-slate-12">
<span class="text-xl font-semibold tabular-nums text-n-slate-12">
{{ knowledge.pending }}
</span>
<span class="text-xs text-n-slate-11">
@@ -50,7 +50,7 @@ const approvedPct = computed(() => {
</span>
</div>
<div class="flex flex-col gap-1">
<span class="text-xl font-semibold text-n-slate-12">
<span class="text-xl font-semibold tabular-nums text-n-slate-12">
{{ knowledge.documents }}
</span>
<span class="text-xs text-n-slate-11">
@@ -27,10 +27,14 @@ const trendClass = computed(() => {
/>
</div>
<div class="flex items-end justify-between gap-2">
<span class="text-3xl font-semibold tracking-tight text-n-slate-12">
<span
class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
>
{{ value }}
</span>
<span class="text-sm font-medium" :class="trendClass">{{ trend }}</span>
<span class="text-sm font-medium tabular-nums" :class="trendClass">
{{ trend }}
</span>
</div>
</div>
</template>
@@ -46,7 +46,7 @@ const rate = '1.3%';
<span class="text-sm font-medium text-n-slate-12">
{{ $t('CAPTAIN.OVERVIEW.FLAGGED.TITLE') }}
</span>
<span class="text-sm text-n-slate-11">
<span class="text-sm tabular-nums text-n-slate-11">
{{ $t('CAPTAIN.OVERVIEW.FLAGGED.TOTAL', { count: total, rate }) }}
</span>
</div>
@@ -65,7 +65,9 @@ const rate = '1.3%';
:style="{ width: `${Math.round((reason.count / total) * 100)}%` }"
/>
</div>
<span class="w-6 text-xs font-medium text-right text-n-slate-12">
<span
class="w-6 text-xs font-medium text-right tabular-nums text-n-slate-12"
>
{{ reason.count }}
</span>
</div>