Improve Persian (fa-IR) support

- Add 12 missing translation keys to fa-IR.json
- Make formatNumber locale-aware via Intl.NumberFormat; abbreviated
  shorthand paths in formatLongNumber (1.2k, 575k, etc.) intentionally
  keep Latin digits and ASCII suffixes as they are universally understood
- Thread locale into MetricCard and PerformanceCard default formatters;
  tighten formatValue prop type from any to number in both components
- Set lang and dir on document.documentElement via useEffect on locale
  change, fixing the hardcoded lang="en" and ensuring both attributes
  are on the same element and applied on initial load

Author: mamal72

public/intl/messages/fa-IR.json

@@ -33,6 +33,7 @@
     "behavior": "رفتار",
     "block-selector": "انتخابگر بلوک",
     "boards": "بردها",
+    "board-type": "نوع برد",
     "bounce-rate": "نرخ ریزش",
     "breakdown": "تفکیک",
     "browser": "مرورگر",
@@ -201,6 +202,7 @@
     "number-of-records": "{x} {x, plural, one {رکورد} other {رکورد}}",
     "ok": "تایید",
     "online": "آنلاین",
+    "open": "ترکیبی",
     "organic-search": "جستجوی ارگانیک",
     "organic-shopping": "خرید ارگانیک",
     "organic-social": "شبکه اجتماعی ارگانیک",
@@ -256,6 +258,7 @@
     "replay": "پخش مجدد",
     "replay-enabled": "پخش مجدد فعال",
     "replay-id": "Replay ID",
+    "replay-code": "کد پخش مجدد نشست",
     "replays": "پخش‌های مجدد",
     "reports": "گزارش‌ها",
     "required": "ضروری",
@@ -272,6 +275,7 @@
     "sample-size": "اندازه نمونه",
     "save": "ذخیره",
     "save-cohort": "ذخیره گروه",
+    "save-replay": "ذخیره پخش مجدد",
     "save-segment": "ذخیره بخش",
     "screen": "صفحه نمایش",
     "screens": "صفحه",
@@ -282,6 +286,8 @@
     "select-component": "یک کامپوننت انتخاب کنید",
     "select-date": "انتخاب تاریخ",
     "select-filter": "انتخاب فیلتر",
+    "select-link": "انتخاب لینک",
+    "select-pixel": "انتخاب پیکسل",
     "select-role": "انتخاب نقش",
     "select-website": "انتخاب وب‌سایت",
     "session": "نشست",
@@ -338,8 +344,12 @@
     "unique-events": "رویدادهای یکتا",
     "unique-visitors": "بازدیدکننده‌های یکتا",
     "uniqueCustomers": "مشتریان یکتا",
+    "customers": "مشتریان",
+    "orders": "سفارش‌ها",
+    "saved": "ذخیره شد",
     "unknown": "ناشناخته",
     "untitled": "بدون عنوان",
+    "upgrade": "ارتقاء",
     "update": "به‌روزرسانی",
     "url": "URL",
     "user": "کاربر",
@@ -402,6 +412,7 @@
     "reset-website": "برای بازنشانی وب‌سایت، لطفاً {confirmation} را تایپ کنید.",
     "reset-website-warning": "تمامی آمارهای این وب‌سایت حذف خواهد شد اما کدهای رهگیری بدون تغییر باقی می‌ماند.",
     "saved": "ذخیره شد.",
+    "select-board-entity-first": "ابتدا یک وب‌سایت، پیکسل یا لینک انتخاب کنید.",
     "select-component-preview": "یک کامپوننت برای پیش‌نمایش انتخاب کنید",
     "select-website-first": "ابتدا یک وب‌سایت انتخاب کنید",
     "sever-error": "خطای سرور",
@@ -415,6 +426,7 @@
     "transfer-website": "مالکیت وب‌سایت را به حساب خودت یا یک تیم دیگر منتقل کنید.",
     "triggered-event": "رویداد فعال شده",
     "unauthorized": "غیرمجاز",
+    "upgrade-required": "این قابلیت نیاز به اشتراک پلن {plan} دارد.",
     "user-deleted": "کاربر حذف شد.",
     "viewed-page": "صفحه مشاهده شد",
     "visitor-log": "بازدیدکننده از کشور <b>{country}</b> با مروگر <b>{browser}</b> در <b>{os}</b> <b>{device}</b>"

src/components/hooks/useLocale.ts

@@ -47,6 +47,11 @@ export function useLocale() {
     }
   }, [locale]);
 
+  useEffect(() => {
+    document.documentElement.lang = locale.split('-')[0];
+    document.documentElement.setAttribute('dir', getTextDirection(locale));
+  }, [locale]);
+
   useEffect(() => {
     const url = new URL(window?.location?.href);
     const locale = url.searchParams.get('locale');

src/components/metrics/MetricCard.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { Info } from '@/components/icons';
 import { ChangeLabel } from '@/components/metrics/ChangeLabel';
+import { useLocale } from '@/components/hooks';
 import { formatNumber } from '@/lib/format';
 
 export interface MetricCardProps {
@@ -13,7 +14,7 @@ export interface MetricCardProps {
   label?: string;
   tooltip?: ReactNode;
   reverseColors?: boolean;
-  formatValue?: (n: any) => string;
+  formatValue?: (n: number) => string;
   showLabel?: boolean;
   showChange?: boolean;
 }
@@ -24,10 +25,12 @@ export const MetricCard = ({
   label,
   tooltip,
   reverseColors = false,
-  formatValue = formatNumber,
+  formatValue,
   showLabel = true,
   showChange = false,
 }: MetricCardProps) => {
+  const { locale } = useLocale();
+  const format = formatValue ?? ((n: number) => formatNumber(n, locale));
   const diff = value - change;
   const pct = diff !== 0 ? ((value - diff) / diff) * 100 : value !== 0 ? 100 : 0;
   const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
@@ -61,10 +64,10 @@ export const MetricCard = ({
         </Row>
       )}
       <Text size="4xl" weight="bold" wrap="nowrap">
-        <AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
+        <AnimatedDiv title={value?.toString()}>{props?.x?.to(x => format(x))}</AnimatedDiv>
       </Text>
       {showChange && (
-        <ChangeLabel value={change} title={formatValue(change)} reverseColors={reverseColors}>
+        <ChangeLabel value={change} title={format(change)} reverseColors={reverseColors}>
           <AnimatedDiv>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</AnimatedDiv>
         </ChangeLabel>
       )}

src/components/metrics/PerformanceCard.tsx

@@ -3,7 +3,7 @@ import { Column, Text } from '@umami/react-zen';
 import { useRef } from 'react';
 import { AnimatedDiv } from '@/components/common/AnimatedDiv';
 import { Badge } from '@/components/common/Badge';
-import { useMessages } from '@/components/hooks';
+import { useLocale, useMessages } from '@/components/hooks';
 import { WEB_VITALS_THRESHOLDS } from '@/lib/constants';
 import { formatNumber } from '@/lib/format';
 import styles from './PerformanceCard.module.css';
@@ -12,7 +12,7 @@ export interface PerformanceCardProps {
   metric: 'lcp' | 'inp' | 'cls' | 'fcp' | 'ttfb';
   value: number;
   label: string;
-  formatValue?: (n: any) => string;
+  formatValue?: (n: number) => string;
   onClick?: () => void;
   selected?: boolean;
 }
@@ -35,11 +35,13 @@ export const PerformanceCard = ({
   metric,
   value = 0,
   label,
-  formatValue = formatNumber,
+  formatValue,
   onClick,
   selected = false,
 }: PerformanceCardProps) => {
   const { t, labels } = useMessages();
+  const { locale } = useLocale();
+  const format = formatValue ?? ((n: number) => formatNumber(n, locale));
   const rating = getRating(metric, value);
   const prevMetricRef = useRef(metric);
   const metricChanged = prevMetricRef.current !== metric;
@@ -67,7 +69,7 @@ export const PerformanceCard = ({
         {label}
       </Text>
       <Text size="4xl" weight="bold" wrap="nowrap">
-        <AnimatedDiv>{spring.value.to(n => formatValue(n))}</AnimatedDiv>
+        <AnimatedDiv>{spring.value.to(n => format(n))}</AnimatedDiv>
       </Text>
       <Badge variant={RATING_VARIANTS[rating]}>
         {t(labels[rating === 'needs-improvement' ? 'needsImprovement' : rating])}

src/lib/format.ts

@@ -42,15 +42,15 @@ export function formatShortTime(val: number, formats = ['m', 's'], space = '') {
   return t;
 }
 
-export function formatNumber(n: string | number) {
-  return Number(n).toFixed(0);
+export function formatNumber(n: string | number, locale = 'en-US') {
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(Number(n));
 }
 
 export function formatLongNumber(value: number) {
   const n = Number(value);
 
   if (n >= 1000000000) {
-    return `${(n / 1000000).toFixed(1)}b`;
+    return `${(n / 1000000000).toFixed(1)}b`;
   }
   if (n >= 1000000) {
     return `${(n / 1000000).toFixed(1)}m`;