From 3d066333eb495c39e93520b8d6d0d55956c82d8c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 29 Jun 2026 17:38:52 +0530
Subject: [PATCH] chore: use tabular nums

---
 .../captain/pageComponents/overview/CreditUsageCard.vue   | 4 ++--
 .../captain/pageComponents/overview/KnowledgeCard.vue     | 8 ++++----
 .../captain/pageComponents/overview/MetricCard.vue        | 8 ++++++--
 .../pageComponents/overview/ResponseQualityCard.vue       | 6 ++++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/CreditUsageCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/CreditUsageCard.vue
index 7a990bb9d..e164cb8e3 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/CreditUsageCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/CreditUsageCard.vue
@@ -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>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue
index 4136d0c14..d46288326 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue
@@ -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">
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
index 6f366f66d..9f8a76f43 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue
@@ -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>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/overview/ResponseQualityCard.vue b/app/javascript/dashboard/components-next/captain/pageComponents/overview/ResponseQualityCard.vue
index 70a2d743a..2047c6da8 100644
--- a/app/javascript/dashboard/components-next/captain/pageComponents/overview/ResponseQualityCard.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/overview/ResponseQualityCard.vue
@@ -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>