Added relative date filter to dashboards (#16292)

This PR adds relative date filter operand to dashboard filters : 

<img width="1685" height="558" alt="image"
src="https://github.com/user-attachments/assets/a1f927e7-8c99-4171-b487-4b6a28779547"
/>

It also refactors the logic to add timezone and first day of the week
taking users preferences.

It has been tested on workflows and regular advanced filters also.


For step filters, which use a JSON format to store relative date
filters, I kept the current way to handle it.

There are a few workspaces that use a relative date filter in step
filter, so we want to avoid a migration, and instead handle both code
paths, and refactor everything to JSON later.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx

@@ -4,6 +4,7 @@ import { RELATIVE_DATE_DIRECTION_SELECT_OPTIONS } from '@/ui/input/components/in
 import { RELATIVE_DATE_UNITS_SELECT_OPTIONS } from '@/ui/input/components/internal/date/constants/RelativeDateUnitSelectOptions';
 
 import styled from '@emotion/styled';
+import { useState } from 'react';
 import { type Nullable } from 'twenty-shared/types';
 import {
   relativeDateFilterSchema,
@@ -43,8 +44,10 @@ export const RelativeDatePickerHeader = ({
 }: RelativeDatePickerHeaderProps) => {
   const amountString = amount?.toString() ?? '';
 
-  const textInputValue = direction === 'THIS' ? '' : amountString;
-  const textInputPlaceholder = direction === 'THIS' ? '-' : 'Number';
+  const amountTextValue = direction === 'THIS' ? '' : amountString;
+  const amountInputPlaceholder = direction === 'THIS' ? '-' : 'Number';
+
+  const [draftAmountValue, setDraftAmountValue] = useState(amountTextValue);
 
   const isUnitPlural = amount && amount > 1 && direction !== 'THIS';
   const unitSelectOptions = RELATIVE_DATE_UNITS_SELECT_OPTIONS.map((unit) => ({
@@ -62,6 +65,14 @@ export const RelativeDatePickerHeader = ({
             return;
           }
 
+          if (draftAmountValue === '') {
+            setDraftAmountValue('1');
+          }
+
+          if (newDirection === 'THIS') {
+            setDraftAmountValue('');
+          }
+
           onChange?.({
             direction: newDirection,
             amount: amount,
@@ -75,9 +86,11 @@ export const RelativeDatePickerHeader = ({
       <SettingsTextInput
         instanceId={`relative-date-picker-amount-${instanceId}`}
         width={50}
-        value={textInputValue}
+        value={draftAmountValue}
         onChange={(text) => {
           const amountString = text.replace(/[^0-9]|^0+/g, '');
+          setDraftAmountValue(amountString);
+
           const amount = parseInt(amountString);
 
           const valueParts = {
@@ -90,7 +103,7 @@ export const RelativeDatePickerHeader = ({
             onChange?.(valueParts);
           }
         }}
-        placeholder={textInputPlaceholder}
+        placeholder={amountInputPlaceholder}
         disabled={direction === 'THIS' || readonly}
       />
       <Select
@@ -101,6 +114,10 @@ export const RelativeDatePickerHeader = ({
             return;
           }
 
+          if (draftAmountValue === '' && direction !== 'THIS') {
+            setDraftAmountValue('1');
+          }
+
           onChange?.({
             direction,
             amount: amount,