From 61ea4a9783c4fc0960a99986a4e4bcb0ede7b1b7 Mon Sep 17 00:00:00 2001
From: kemal <hello@kemal.earth>
Date: Wed, 27 Aug 2025 15:59:30 +0100
Subject: [PATCH] fix: number formatting for queries at a glance

---
 .../QueryInsights/QueryInsights.utils.tsx     |  8 ++++++
 .../QueryInsights/QueryQuickGlance.tsx        | 25 ++++++++++---------
 .../project/[ref]/reports/query-insights.tsx  |  1 +
 3 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 apps/studio/components/interfaces/QueryInsights/QueryInsights.utils.tsx

diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsights.utils.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsights.utils.tsx
new file mode 100644
index 00000000000..b5cd405e19b
--- /dev/null
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsights.utils.tsx
@@ -0,0 +1,8 @@
+export const formatNumberWithCommas = (num: number | string | undefined | null): string => {
+  if (num === undefined || num === null) return '0'
+  const numberValue = typeof num === 'string' ? parseFloat(num) : num
+
+  if (isNaN(numberValue)) return '0'
+
+  return numberValue.toLocaleString('en-US')
+}
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx b/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx
index 2c5be49da6b..996d61f6b1c 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx
@@ -2,12 +2,13 @@ import { useMemo } from 'react'
 import { useQueryInsightsGlanceQuery } from 'data/query-insights/query-glance-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { Card, CardContent } from 'ui'
-import { Database, BarChart3, Clock, AlertCircle } from 'lucide-react'
+import { Database, Clock, AlertCircle } from 'lucide-react'
+import { formatNumberWithCommas } from './QueryInsights.utils'
 
 export const QueryQuickGlance = () => {
   const { data: project } = useSelectedProjectQuery()
 
-  // Memoize time range to prevent constant re-renders
+  // TEMP - Memoize time range to prevent constant re-renders
   const { startTime, endTime } = useMemo(() => {
     const endTime = new Date().toISOString()
     const startTime = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()
@@ -35,11 +36,11 @@ export const QueryQuickGlance = () => {
         values: [
           {
             label: 'Unique',
-            value: glanceData.unique_queries || 0,
+            value: formatNumberWithCommas(glanceData.unique_queries),
           },
           {
             label: 'Total',
-            value: glanceData.total_queries || 0,
+            value: formatNumberWithCommas(glanceData.total_queries),
           },
         ],
       },
@@ -49,11 +50,11 @@ export const QueryQuickGlance = () => {
         values: [
           {
             label: 'Average',
-            value: glanceData.avg_query_time?.toFixed(2) || 0,
+            value: glanceData.avg_query_time?.toFixed(2) + 'ms' || 0,
           },
           {
             label: 'Max',
-            value: glanceData.max_query_time?.toFixed(2) || 0,
+            value: glanceData.max_query_time?.toFixed(2) + 'ms' || 0,
           },
         ],
       },
@@ -67,7 +68,7 @@ export const QueryQuickGlance = () => {
           },
           {
             label: 'Rate',
-            value: glanceData.avg_error_rate?.toFixed(2) || 0,
+            value: glanceData.avg_error_rate?.toFixed(2) + '%' || 0 + '%',
           },
         ],
       },
@@ -78,7 +79,7 @@ export const QueryQuickGlance = () => {
     return (
       <div className="grid grid-cols-3 gap-4 w-full">
         {[...Array(3)].map((_, i) => (
-          <div key={i} className="h-[134px] bg-surface-100 animate-pulse rounded-lg" />
+          <div key={i} className="h-[130px] bg-surface-100 animate-pulse rounded-lg" />
         ))}
       </div>
     )
@@ -93,19 +94,19 @@ export const QueryQuickGlance = () => {
       {cards.map((card, index) => (
         <Card key={index}>
           <CardContent className="flex flex-col items-start gap-2">
-            <div className="flex gap-2 items-center text-foreground-light pt-1">
+            <div className="flex gap-2 items-center text-foreground-light">
               <span>{card.icon}</span>
               <span className="text-xs font-mono uppercase truncate max-w-[24ch]">
                 {card.title}
               </span>
             </div>
-            <div className="flex flex-col w-full divide-y divide-dashed">
+            <div className="flex flex-col w-full divide-y divide-dashed last:[&>div]:pb-0">
               {card.values.map((value, index) => (
-                <div key={index} className="text-sm py-2 flex justify-between items-center w-full">
+                <div key={index} className="text-xs py-2 flex justify-between items-center w-full">
                   <span className="font-mono text-foreground-lighter truncate max-w-[16ch]">
                     {value.label}{' '}
                   </span>
-                  <span>{value.value}</span>
+                  <span className="text-base">{value.value}</span>
                 </div>
               ))}
             </div>
diff --git a/apps/studio/pages/project/[ref]/reports/query-insights.tsx b/apps/studio/pages/project/[ref]/reports/query-insights.tsx
index 328487b2372..cf2bb25b582 100644
--- a/apps/studio/pages/project/[ref]/reports/query-insights.tsx
+++ b/apps/studio/pages/project/[ref]/reports/query-insights.tsx
@@ -45,6 +45,7 @@ const QueryInsights = () => {
     <>
       <ReportHeader title="Query Insights" />
       <ReportStickyNav
+        className="pb-0"
         content={
           <>
             <ButtonTooltip