add dynamic dates for webhookGraphDataUsage (#7720)

**Before:**
Only last 5 days where displayed on Developers Settings Webhook Usage
Graph.

![image](https://github.com/user-attachments/assets/7b7f2e6b-9637-489e-a7a7-5a3cb70525aa)


**Now**
Added component where you can select the time range where you want to
view the webhook usage. To do better the styling and content depassing .

<img width="652" alt="Screenshot 2024-10-15 at 16 56 45"
src="https://github.com/user-attachments/assets/d06e7f4c-a689-49a0-8839-f015ce36bab9">


**In order to test**

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_TOKEN to your token from the workspace
twenty_analytics_playground
3. Write your client tinybird token in
SettingsDeveloppersWebhookDetail.tsx in line 93
4. Create a Webhook in twenty and set wich events it needs to track
5. Run twenty-worker in order to make the webhooks work.
6. Do your tasks in order to populate the data
7. Enter to settings> webhook>your webhook and the statistics section
should be displayed.
8.  Select the desired time range in the dropdown

**To do list**

- Tooltip is truncated when accessing values at the right end of the
graph
- DateTicks needs to follow a more clear standard
- Update this PR with more representative images

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettings.tsx

@@ -77,7 +77,7 @@ export const DateTimeSettings = () => {
         );
         dateTime[settingName] =
           (value as DateFormat) === DateFormat.SYSTEM
-            ? detectDateFormat()
+            ? DateFormat[detectDateFormat()]
             : (value as DateFormat);
         break;
       }
@@ -87,7 +87,7 @@ export const DateTimeSettings = () => {
         );
         dateTime[settingName] =
           (value as TimeFormat) === TimeFormat.SYSTEM
-            ? detectTimeFormat()
+            ? TimeFormat[detectTimeFormat()]
             : (value as TimeFormat);
         break;
       }

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx

@@ -20,7 +20,7 @@ export const DateTimeSettingsDateFormatSelect = ({
 
   const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
 
-  const systemDateFormat = detectDateFormat();
+  const systemDateFormat = DateFormat[detectDateFormat()];
 
   return (
     <Select

packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx

@@ -20,7 +20,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
 
   const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
 
-  const systemTimeFormat = detectTimeFormat();
+  const systemTimeFormat = TimeFormat[detectTimeFormat()];
 
   return (
     <Select