fix: number formatting for queries at a glance

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')
+}

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>

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