feat(format): add locales support to number formatting

web/default/src/features/dashboard/components/models/log-stat-cards.tsx

@@ -17,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 For commercial licensing, please contact support@quantumnous.com
 */
 */
 import { useEffect, useState } from 'react'
 import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useAuthStore } from '@/stores/auth-store'
 import { useAuthStore } from '@/stores/auth-store'
 import { formatCompactNumber, formatNumber, formatQuota } from '@/lib/format'
 import { formatCompactNumber, formatNumber, formatQuota } from '@/lib/format'
 import { computeTimeRange } from '@/lib/time'
 import { computeTimeRange } from '@/lib/time'
@@ -41,11 +42,11 @@ interface LogStatCardsProps {
 
 
 const MAX_INLINE_STAT_CHARS = 9
 const MAX_INLINE_STAT_CHARS = 9
 
 
-function formatStatNumber(value: number) {
-  const fullValue = formatNumber(value)
+function formatStatNumber(value: number, locale: Intl.LocalesArgument) {
+  const fullValue = formatNumber(value, locale)
   const displayValue =
   const displayValue =
     fullValue.length > MAX_INLINE_STAT_CHARS
     fullValue.length > MAX_INLINE_STAT_CHARS
-      ? formatCompactNumber(value)
+      ? formatCompactNumber(value, locale)
       : fullValue
       : fullValue
 
 
   return {
   return {
@@ -55,6 +56,7 @@ function formatStatNumber(value: number) {
 }
 }
 
 
 export function LogStatCards(props: LogStatCardsProps) {
 export function LogStatCards(props: LogStatCardsProps) {
+  const { i18n } = useTranslation()
   const statCardsConfig = useModelStatCardsConfig()
   const statCardsConfig = useModelStatCardsConfig()
   const user = useAuthStore((state) => state.auth.user)
   const user = useAuthStore((state) => state.auth.user)
   const isAdmin = !!(user?.role && user.role >= 10)
   const isAdmin = !!(user?.role && user.role >= 10)
@@ -118,13 +120,14 @@ export function LogStatCards(props: LogStatCardsProps) {
 
 
   const items = statCardsConfig.map((config) => {
   const items = statCardsConfig.map((config) => {
     const rawValue = config.getValue(adaptedStats, timeRangeMinutes)
     const rawValue = config.getValue(adaptedStats, timeRangeMinutes)
+    const locale = i18n.resolvedLanguage || i18n.language
     const formatted =
     const formatted =
       config.key === 'quota'
       config.key === 'quota'
         ? {
         ? {
             displayValue: formatQuota(rawValue),
             displayValue: formatQuota(rawValue),
             fullValue: formatQuota(rawValue),
             fullValue: formatQuota(rawValue),
           }
           }
-        : formatStatNumber(rawValue)
+        : formatStatNumber(rawValue, locale)
 
 
     return {
     return {
       title: config.title,
       title: config.title,

web/default/src/lib/format.ts

@@ -27,16 +27,22 @@ import {
 // Number Formatting
 // Number Formatting
 // ============================================================================
 // ============================================================================
 
 
-export function formatNumber(value: number | null | undefined): string {
+export function formatNumber(
+  value: number | null | undefined,
+  locales?: Intl.LocalesArgument
+): string {
   if (value == null || Number.isNaN(value as number)) return '-'
   if (value == null || Number.isNaN(value as number)) return '-'
-  return Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(
+  return Intl.NumberFormat(locales, { maximumFractionDigits: 2 }).format(
     value as number
     value as number
   )
   )
 }
 }
 
 
-export function formatCompactNumber(value: number | null | undefined): string {
+export function formatCompactNumber(
+  value: number | null | undefined,
+  locales?: Intl.LocalesArgument
+): string {
   if (value == null || Number.isNaN(value as number)) return '-'
   if (value == null || Number.isNaN(value as number)) return '-'
-  return Intl.NumberFormat(undefined, {
+  return Intl.NumberFormat(locales, {
     notation: 'compact',
     notation: 'compact',
     maximumFractionDigits: 1,
     maximumFractionDigits: 1,
   }).format(value as number)
   }).format(value as number)