feat(billing): refacto billing (#14243)

… prices for metered billing

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/page-layout/widgets/graph/utils/graphFormatters.ts

@@ -1,5 +1,8 @@
 import { isDefined } from 'twenty-shared/utils';
-import { formatNumber } from '~/utils/format/formatNumber';
+import {
+  formatNumber as utilFormatNumber,
+  type FormatNumberOptions,
+} from '~/utils/format/formatNumber';
 import { formatToShortNumber } from '~/utils/format/formatToShortNumber';
 
 export type GraphValueFormatOptions = {
@@ -8,6 +11,10 @@ export type GraphValueFormatOptions = {
   prefix?: string;
   suffix?: string;
   customFormatter?: (value: number) => string;
+  formatNumberFn?: (
+    value: number,
+    options?: Omit<FormatNumberOptions, 'format'>,
+  ) => string;
 };
 
 export const formatGraphValue = (
@@ -20,26 +27,32 @@ export const formatGraphValue = (
     prefix = '',
     suffix = '',
     customFormatter,
+    formatNumberFn,
   } = options || {};
 
+  const formatNumber =
+    formatNumberFn ??
+    ((v: number, opts?: Omit<FormatNumberOptions, 'format'>) =>
+      utilFormatNumber(v, opts));
+
   if (displayType === 'custom' && isDefined(customFormatter)) {
     return customFormatter(value);
   }
 
   switch (displayType) {
     case 'percentage':
-      return `${formatNumber(value * 100, decimals)}%`;
+      return `${formatNumber(value * 100, { decimals })}%`;
 
     case 'shortNumber':
       return `${prefix}${formatToShortNumber(value)}${suffix}`;
 
     case 'currency': {
       const currencyPrefix = prefix || '$';
-      return `${currencyPrefix}${formatNumber(value, decimals)}${suffix}`;
+      return `${currencyPrefix}${formatNumber(value, { decimals })}${suffix}`;
     }
 
     case 'number':
     default:
-      return `${prefix}${formatNumber(value, decimals)}${suffix}`;
+      return `${prefix}${formatNumber(value, { decimals })}${suffix}`;
   }
 };