feat: add short number formatting option to number field (#12613)

resolve #11927
Add a new 'Short Number' option that disables decimals and resets the
value to 0 when selected.


https://github.com/user-attachments/assets/d3524115-e3ec-4a07-9dbf-e19d03cf65dd



https://github.com/user-attachments/assets/2f2b46d1-06d9-4a92-8f37-0291d46accab

---------

Co-authored-by: prastoin <paul@twenty.com>

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx

@@ -1,6 +1,7 @@
 import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useNumberFieldDisplay';
 import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay';
 import { isDefined } from 'twenty-shared/utils';
+import { formatAmount } from '~/utils/format/formatAmount';
 import { formatNumber } from '~/utils/format/number';
 
 export const NumberFieldDisplay = () => {
@@ -13,7 +14,9 @@ export const NumberFieldDisplay = () => {
   const value =
     type === 'percentage'
       ? `${formatNumber(Number(fieldValue) * 100, decimals)}%`
-      : formatNumber(Number(fieldValue), decimals);
+      : type === 'shortNumber'
+        ? formatAmount(Number(fieldValue))
+        : formatNumber(Number(fieldValue), decimals);
 
   return <NumberDisplay value={value} decimals={decimals} />;
 };

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -56,7 +56,12 @@ export type FieldDateMetadata = BaseFieldMetadata & {
   settings?: FieldDateMetadataSettings;
 };
 
-export type FieldNumberVariant = 'number' | 'percentage';
+export const FIELD_NUMBER_VARIANT = [
+  'number',
+  'percentage',
+  'shortNumber',
+] as const;
+export type FieldNumberVariant = (typeof FIELD_NUMBER_VARIANT)[number];
 
 export type FieldNumberMetadata = BaseFieldMetadata & {
   placeHolder: string;

packages/twenty-front/src/modules/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema.ts

@@ -1,6 +1,7 @@
+import { FIELD_NUMBER_VARIANT } from '@/object-record/record-field/types/FieldMetadata';
 import { z } from 'zod';
 
 export const numberFieldDefaultValueSchema = z.object({
   decimals: z.number().nullable(),
-  type: z.enum(['percentage', 'number']).nullable(),
+  type: z.enum(FIELD_NUMBER_VARIANT).nullable(),
 });

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx

@@ -6,11 +6,11 @@ import { numberFieldDefaultValueSchema } from '@/object-record/record-field/vali
 import { Separator } from '@/settings/components/Separator';
 import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter';
 import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
+import { NUMBER_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions';
 import { Select } from '@/ui/input/components/Select';
 import { useLingui } from '@lingui/react/macro';
 import { IconDecimal, IconEye } from 'twenty-ui/display';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
-import { NUMBER_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions';
 
 export const settingsDataModelFieldNumberFormSchema = z.object({
   settings: numberFieldDefaultValueSchema,
@@ -60,7 +60,13 @@ export const SettingsDataModelFieldNumberForm = ({
                 dropdownId="number-type"
                 dropdownWidth={120}
                 value={type}
-                onChange={(value) => onChange({ type: value, decimals: count })}
+                onChange={(value) =>
+                  onChange({
+                    type: value,
+                    decimals:
+                      value === 'shortNumber' ? DEFAULT_DECIMAL_VALUE : count,
+                  })
+                }
                 disabled={disabled}
                 needIconCheck={false}
                 options={NUMBER_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
@@ -70,16 +76,18 @@ export const SettingsDataModelFieldNumberForm = ({
               />
             </SettingsOptionCardContentSelect>
             <Separator />
-            <SettingsOptionCardContentCounter
+            {type !== 'shortNumber' && (
-              Icon={IconDecimal}
+              <SettingsOptionCardContentCounter
-              title={t`Number of decimals`}
+                Icon={IconDecimal}
-              description={`E.g. ${(type === 'percentage' ? 99 : 1000).toFixed(count)}${type === 'percentage' ? '%' : ''} for ${count} decimal${count > 1 ? 's' : ''}`}
+                title={t`Number of decimals`}
-              value={count}
+                description={`E.g. ${(type === 'percentage' ? 99 : 1000).toFixed(count)}${type === 'percentage' ? '%' : ''} for ${count} decimal${count > 1 ? 's' : ''}`}
-              onChange={(value) => onChange({ type: type, decimals: value })}
+                value={count}
-              disabled={disabled}
+                onChange={(value) => onChange({ type: type, decimals: value })}
-              minValue={0}
+                disabled={disabled}
-              maxValue={100} // needs to be changed
+                minValue={0}
-            />
+                maxValue={100} // needs to be changed
+              />
+            )}
           </>
         );
       }}

packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts

@@ -1,15 +1,36 @@
+import { FieldNumberVariant } from '@/object-record/record-field/types/FieldMetadata';
+import { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
-import { IconNumber9, IconPercentage } from 'twenty-ui/display';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import {
+  IconComponent,
+  IconComponentProps,
+  IconLetterK,
+  IconNumber9,
+  IconPercentage,
+} from 'twenty-ui/display';
 
+type NumberDataModelSelectOptions = {
+  Icon: ForwardRefExoticComponent<
+    IconComponentProps & RefAttributes<IconComponent>
+  >;
+  label: MessageDescriptor;
+  value: FieldNumberVariant;
+};
 export const NUMBER_DATA_MODEL_SELECT_OPTIONS = [
   {
     Icon: IconNumber9,
     label: msg`Number`,
     value: 'number',
   },
+  {
+    Icon: IconLetterK,
+    label: msg`Short`,
+    value: 'shortNumber',
+  },
   {
     Icon: IconPercentage,
     label: msg`Percentage`,
     value: 'percentage',
   },
-];
+] as const satisfies Array<NumberDataModelSelectOptions>;

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata-validation.service.ts

@@ -25,6 +25,7 @@ import {
 enum ValueType {
   PERCENTAGE = 'percentage',
   NUMBER = 'number',
+  SHORT_NUMBER = 'shortNumber',
 }
 
 class NumberSettingsValidation {
@@ -35,7 +36,7 @@ class NumberSettingsValidation {
 
   @IsOptional()
   @IsEnum(ValueType)
-  type?: 'percentage' | 'number';
+  type?: 'percentage' | 'number' | 'shortNumber';
 }
 
 class TextSettingsValidation {

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -4,18 +4,18 @@ export {
   IconAlertCircle,
   IconAlertTriangle,
   IconApi,
-  IconApps,
   IconAppWindow,
+  IconApps,
   IconArchive,
   IconArchiveOff,
   IconArrowBackUp,
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -47,8 +47,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -186,6 +186,7 @@ export {
   IconLayoutSidebarRight,
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,
+  IconLetterK,
   IconLibraryPlus,
   IconLifebuoy,
   IconLink,

packages/twenty-ui/src/display/index.ts

@@ -65,18 +65,18 @@ export {
   IconAlertCircle,
   IconAlertTriangle,
   IconApi,
-  IconApps,
   IconAppWindow,
+  IconApps,
   IconArchive,
   IconArchiveOff,
   IconArrowBackUp,
   IconArrowDown,
   IconArrowLeft,
   IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
   IconArrowUp,
   IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
   IconAt,
   IconBaselineDensitySmall,
   IconBell,
@@ -108,8 +108,8 @@ export {
   IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
-  IconChevronsRight,
   IconChevronUp,
+  IconChevronsRight,
   IconCircleDot,
   IconCircleOff,
   IconCirclePlus,
@@ -247,6 +247,7 @@ export {
   IconLayoutSidebarRight,
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,
+  IconLetterK,
   IconLibraryPlus,
   IconLifebuoy,
   IconLink,