From 0c4c3ac5ef1b08a70cd10c23122144ac0ac6f86a Mon Sep 17 00:00:00 2001
From: guillim <guillaume@twenty.com>
Date: Wed, 13 Nov 2024 17:53:43 +0100
Subject: [PATCH] adding % on the company page

---
 .../components/SettingsObjectFieldDataType.tsx           | 9 ++++++++-
 .../components/SettingsObjectFieldItemTableRow.tsx       | 5 ++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
index 188e5b97211c..bfb27641939e 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@@ -11,6 +11,7 @@ type SettingsObjectFieldDataTypeProps = {
   to?: string;
   Icon?: IconComponent;
   label?: string;
+  labelDetail?: string;
   value: SettingsFieldType;
 };
 
@@ -50,11 +51,15 @@ const StyledLabelContainer = styled.div`
   white-space: nowrap;
 `;
 
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.extraLight};
+`;
 export const SettingsObjectFieldDataType = ({
   to,
   value,
   Icon: IconFromProps,
   label: labelFromProps,
+  labelDetail,
 }: SettingsObjectFieldDataTypeProps) => {
   const theme = useTheme();
 
@@ -70,7 +75,9 @@ export const SettingsObjectFieldDataType = ({
   return (
     <StyledDataType as={to ? Link : 'div'} to={to} value={value}>
       <StyledIcon size={theme.icon.size.sm} />
-      <StyledLabelContainer>{label}</StyledLabelContainer>
+      <StyledLabelContainer>
+        {label} <StyledSpan>{labelDetail && `· ${labelDetail}`}</StyledSpan>
+      </StyledLabelContainer>
     </StyledDataType>
   );
 };
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index b1d2341d2f4a..d236cfb17bc8 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -90,7 +90,7 @@ export const SettingsObjectFieldItemTableRow = ({
       () => getRelationMetadata({ fieldMetadataItem }),
       [fieldMetadataItem, getRelationMetadata],
     ) ?? {};
-
+  console.log('fieldMetadataItem:', fieldMetadataItem);
   const fieldType = fieldMetadataItem.type;
   const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
 
@@ -234,6 +234,9 @@ export const SettingsObjectFieldItemTableRow = ({
               ? relationObjectMetadataItem?.labelSingular
               : relationObjectMetadataItem?.labelPlural
           }
+          labelDetail={
+            fieldMetadataItem.settings?.type === 'percentage' ? '%' : undefined
+          }
           to={
             relationObjectMetadataItem?.namePlural &&
             !relationObjectMetadataItem.isSystem