Pascal/pagination numbers fire

packages/app-builder/src/components/CaseManager/PivotsPanel/PivotsPanelContent.tsx

@@ -8,7 +8,7 @@ import {
 } from '@app-builder/models';
 import { type CaseDetail, type PivotObject } from '@app-builder/models/cases';
 import { usePivotRelatedCasesQuery } from '@app-builder/queries/pivot-related-cases';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
 import { Link } from '@remix-run/react';
@@ -167,7 +167,10 @@ function RelatedCases({
                       className: 'shrink border-r leading-[28px]',
                     })}
                   >
-                    {formatDateTime(caseObj.createdAt, { language, timeStyle: undefined })}
+                    {formatDateTimeWithoutPresets(caseObj.createdAt, {
+                      language,
+                      dateStyle: 'short',
+                    })}
                   </div>
                   <div
                     className={cellVariants({

packages/app-builder/src/components/CaseManager/SnoozePanel/SnoozePanel.tsx

@@ -8,7 +8,7 @@ import { type PivotObject } from '@app-builder/models/cases';
 import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
 import { AddRuleSnooze } from '@app-builder/routes/ressources+/cases+/add-rule-snooze';
 import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { Await, useLoaderData } from '@remix-run/react';
 import { Dict } from '@swan-io/boxed';
 import { formatRelative } from 'date-fns';
@@ -131,7 +131,10 @@ export const SnoozePanel = ({
                             <span
                               className={cn('text-grey-50 text-xs', { 'opacity-30': r.isSnoozed })}
                             >
-                              {formatDateTime(r.hitAt, { language, timeStyle: undefined })}
+                              {formatDateTimeWithoutPresets(r.hitAt, {
+                                language,
+                                dateStyle: 'short',
+                              })}
                             </span>
                           );
 

packages/app-builder/src/components/Cases/CaseAlerts.tsx

@@ -1,5 +1,5 @@
 import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { parseUnknownData } from '@app-builder/utils/parse';
 import { Await, useLoaderData } from '@remix-run/react';
 import { Suspense, useState } from 'react';
@@ -63,7 +63,10 @@ export const CaseAlerts = ({
                   >
                     <div className="flex min-h-full flex-col items-center p-2">
                       <span className="text-grey-50 text-xs font-normal">
-                        {formatDateTime(decision.createdAt, { language, timeStyle: undefined })}
+                        {formatDateTimeWithoutPresets(decision.createdAt, {
+                          language,
+                          dateStyle: 'short',
+                        })}
                       </span>
                     </div>
                     <div className="border-grey-90 flex min-h-full flex-col gap-2 border-x p-2">

packages/app-builder/src/components/Cases/CaseDetails.tsx

@@ -13,7 +13,7 @@ import { OpenCase } from '@app-builder/routes/ressources+/cases+/open-case';
 import { SnoozeCase } from '@app-builder/routes/ressources+/cases+/snooze-case';
 import { UploadFile } from '@app-builder/routes/ressources+/files+/upload-file';
 import { getCaseFileUploadEndpoint } from '@app-builder/utils/files';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { useLoaderData } from '@remix-run/react';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -79,9 +79,9 @@ export const CaseDetails = ({
         <div className="grid grid-cols-[170px,1fr] items-center">
           <span className="text-grey-50 text-xs font-normal">{t('cases:creation_date')}</span>
           <time className="text-xs font-medium" dateTime={detail.createdAt}>
-            {formatDateTime(detail.createdAt, {
+            {formatDateTimeWithoutPresets(detail.createdAt, {
               language,
-              timeStyle: undefined,
+              dateStyle: 'short',
             })}
           </time>
         </div>

packages/app-builder/src/components/Cases/CasesList.tsx

@@ -1,6 +1,10 @@
 import { type Case } from '@app-builder/models/cases';
 import { useOrganizationTags } from '@app-builder/services/organization/organization-tags';
-import { formatDateRelative, formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import {
+  formatDateRelative,
+  formatDateTimeWithoutPresets,
+  useFormatLanguage,
+} from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
 import { Link } from '@remix-run/react';
@@ -80,17 +84,16 @@ export function CasesList({
           const dateTime = getValue();
           return Math.abs(differenceInDays(new Date(), dateTime)) > 1 ? (
             <time dateTime={dateTime}>
-              {formatDateTime(dateTime, { language, timeStyle: undefined })}
+              {formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
             </time>
           ) : (
             <Tooltip.Default
               arrow={false}
               className="border-grey-90 flex items-center border px-1.5 py-1"
               content={
                 <span className="text-2xs font-normal">
-                  {formatDateTime(dateTime, {
+                  {formatDateTimeWithoutPresets(dateTime, {
                     language,
-                    timeStyle: undefined,
                     dateStyle: 'short',
                   })}
                 </span>

packages/app-builder/src/components/Cases/Events/CaseSnoozed.tsx

@@ -3,7 +3,7 @@ import { EventTime } from '@app-builder/components/Cases/Events/Time';
 import { type CaseSnoozedEvent } from '@app-builder/models/cases';
 import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
 import { getFullName } from '@app-builder/services/user';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Icon } from 'ui-icons';
@@ -29,7 +29,11 @@ export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
           components={{ Style: <span className="font-bold capitalize" /> }}
           values={{
             actor: user ? getFullName(user) : 'Marble',
-            date: formatDateTime(event.snoozeUntil, { language }),
+            date: formatDateTimeWithoutPresets(event.snoozeUntil, {
+              language,
+              dateStyle: 'short',
+              timeStyle: 'short',
+            }),
           }}
         />
       </span>

packages/app-builder/src/components/Cases/Events/Filters/index.tsx

@@ -1,6 +1,6 @@
 import { type CaseEventType, caseEventTypes } from '@app-builder/models/cases';
 import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { endOfDay, startOfDay } from 'date-fns';
 import { diff, toggle } from 'radash';
 import { type ComponentProps, type Dispatch, type SetStateAction, useMemo } from 'react';
@@ -126,10 +126,26 @@ export const CaseEventFilters = ({
               <div className="bg-grey-80 mx-1 h-3 w-px" />
             ) : null}
             {filters.startDate ? (
-              <Badge>From {formatDateTime(filters.startDate, { language })}</Badge>
+              <Badge>
+                {t('common:from', {
+                  input: formatDateTimeWithoutPresets(filters.startDate, {
+                    language,
+                    dateStyle: 'short',
+                    timeStyle: 'short',
+                  }),
+                })}
+              </Badge>
             ) : null}
             {filters.endDate ? (
-              <Badge>To {formatDateTime(filters.endDate, { language })}</Badge>
+              <Badge>
+                {t('common:to', {
+                  input: formatDateTimeWithoutPresets(filters.endDate, {
+                    language,
+                    dateStyle: 'short',
+                    timeStyle: 'short',
+                  }),
+                })}
+              </Badge>
             ) : null}
           </Button>
         </MenuCommand.Trigger>

packages/app-builder/src/components/Cases/Events/Time.tsx

@@ -1,4 +1,8 @@
-import { formatDateRelative, formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import {
+  formatDateRelative,
+  formatDateTimeWithoutPresets,
+  useFormatLanguage,
+} from '@app-builder/utils/format';
 import { differenceInDays } from 'date-fns';
 import { TooltipV2 } from 'ui-design-system';
 
@@ -17,7 +21,7 @@ export const EventTime = ({ time }: { time: string }) => {
         </TooltipV2.TooltipTrigger>
         <TooltipV2.TooltipContent>
           <span className="text-2xs font-normal">
-            {formatDateTime(date, {
+            {formatDateTimeWithoutPresets(date, {
               language,
               timeStyle: is6daysOld ? 'short' : undefined,
               dateStyle: is6daysOld ? undefined : 'short',

packages/app-builder/src/components/Data/IngestedObjectDetail.tsx

@@ -1,10 +1,11 @@
 import { type DataModelObject, type TableModel } from '@app-builder/models';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { parseUnknownData } from '@app-builder/utils/parse';
 import { getRoute } from '@app-builder/utils/routes';
 import { Link } from '@remix-run/react';
 import clsx from 'clsx';
 import { Fragment, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as R from 'remeda';
 import { Icon } from 'ui-icons';
 
@@ -41,6 +42,7 @@ export const IngestedObjectDetail = ({
   bordered = true,
   withLinks = true,
 }: IngestedObjectDetailProps) => {
+  const { t } = useTranslation(['data']);
   const parsedTriggerObject = useParsedTriggerObject(object.data) ?? [];
   const language = useFormatLanguage();
 
@@ -64,9 +66,12 @@ export const IngestedObjectDetail = ({
           ID: {objectId}
         </span>
         <span className="bg-grey-100 border-grey-50 text-grey-50 rounded border px-2 py-1">
-          last ingestion at:{' '}
-          {formatDateTime(object.metadata.validFrom, {
-            language,
+          {t('data:last_ingestion_at', {
+            date: formatDateTimeWithoutPresets(object.metadata.validFrom, {
+              language,
+              dateStyle: 'short',
+              timeStyle: 'short',
+            }),
           })}
         </span>
       </div>

packages/app-builder/src/components/Decisions/DecisionDetail.tsx

@@ -1,6 +1,6 @@
 import { CaseStatusBadge, decisionsI18n } from '@app-builder/components';
 import { type DecisionDetail } from '@app-builder/models/decision';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
 import { Link } from '@remix-run/react';
@@ -19,7 +19,13 @@ export function DecisionDetail({ decision }: { decision: DecisionDetail }) {
       <Collapsible.Content>
         <div className="grid auto-rows-fr grid-cols-[max-content_1fr] items-center gap-x-10 gap-y-2">
           <DetailLabel>{t('decisions:created_at')}</DetailLabel>
-          <time dateTime={createdAt}>{formatDateTime(createdAt, { language })}</time>
+          <time dateTime={createdAt}>
+            {formatDateTimeWithoutPresets(createdAt, {
+              language,
+              dateStyle: 'short',
+              timeStyle: 'short',
+            })}
+          </time>
 
           <DetailLabel>{t('decisions:scenario.name')}</DetailLabel>
           <Link

packages/app-builder/src/components/Decisions/DecisionsList.tsx

@@ -2,7 +2,7 @@ import { CaseStatusBadge, decisionsI18n, OutcomeBadge } from '@app-builder/compo
 import { type CaseStatus as TCaseStatus } from '@app-builder/models/cases';
 import { type ReviewStatus } from '@app-builder/models/decision';
 import { type Outcome } from '@app-builder/models/outcome';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromUUIDtoSUUID } from '@app-builder/utils/short-uuid';
 import { Link } from '@remix-run/react';
@@ -133,7 +133,7 @@ export function DecisionsList({
           const dateTime = getValue();
           return (
             <time dateTime={dateTime}>
-              {formatDateTime(dateTime, { language, timeStyle: undefined })}
+              {formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
             </time>
           );
         },

packages/app-builder/src/components/Decisions/Filters/FilterDetail/ScheduledExecutionFilter.tsx

@@ -1,6 +1,6 @@
 import { Highlight } from '@app-builder/components/Highlight';
 import { type ScheduledExecutionsLoader } from '@app-builder/routes/ressources+/decisions+/list-scheduled-execution';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { useFetcher } from '@remix-run/react';
 import { matchSorter } from 'match-sorter';
@@ -31,8 +31,10 @@ export function ScheduledExecutionFilter() {
           scenarioName: scheduledExecution.scenarioName,
           startedAt: {
             dateTime: scheduledExecution.startedAt,
-            formattedDateTime: formatDateTime(scheduledExecution.startedAt, {
+            formattedDateTime: formatDateTimeWithoutPresets(scheduledExecution.startedAt, {
               language,
+              dateStyle: 'short',
+              timeStyle: 'short',
             }),
           },
         })),

packages/app-builder/src/components/Files/FilesList.tsx

@@ -3,7 +3,7 @@ import {
   AuthRequestError,
   useDownloadFile,
 } from '@app-builder/services/DownloadFilesService';
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import toast from 'react-hot-toast';
@@ -77,7 +77,7 @@ export function FilesListTable({ files, downloadEnpoint }: Omit<FilesListProps,
           const dateTime = getValue();
           return (
             <time dateTime={dateTime}>
-              {formatDateTime(dateTime, { language, timeStyle: undefined })}
+              {formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
             </time>
           );
         },

packages/app-builder/src/components/Filters/DateRangeFilter.tsx

@@ -1,6 +1,10 @@
 import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
 import { createSimpleContext } from '@app-builder/utils/create-context';
-import { formatDateTime, formatDuration, useFormatLanguage } from '@app-builder/utils/format';
+import {
+  formatDateTimeWithoutPresets,
+  formatDuration,
+  useFormatLanguage,
+} from '@app-builder/utils/format';
 import { clsx } from 'clsx';
 import { add, sub } from 'date-fns';
 import { useCallback } from 'react';
@@ -194,9 +198,9 @@ function FormatStaticDate({ date, className }: { date?: string | Date; className
 
   const dateTime = typeof date === 'string' ? date : date?.toDateString();
   const formattedDate = date
-    ? formatDateTime(date, {
+    ? formatDateTimeWithoutPresets(date, {
         language,
-        timeStyle: undefined,
+        dateStyle: 'short',
       })
     : '--/--/----';
 

packages/app-builder/src/components/Form/DateSelector.tsx

@@ -1,4 +1,4 @@
-import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
 import { Popover, PopoverDisclosure, PopoverProvider } from '@ariakit/react';
 import clsx from 'clsx';
 import { type ElementRef, forwardRef, useState } from 'react';
@@ -37,9 +37,9 @@ export const DateSelector = forwardRef<ElementRef<typeof Input>, DateSelectorPro
               })}
             >
               {selectedDate
-                ? formatDateTime(selectedDate, {
+                ? formatDateTimeWithoutPresets(selectedDate, {
                     language,
-                    timeStyle: undefined,
+                    dateStyle: 'short',
                   })
                 : props.placeholder}
             </span>

packages/app-builder/src/components/FormatData.tsx

@@ -1,4 +1,4 @@
-import { formatDateTime, formatNumber } from '@app-builder/utils/format';
+import { formatDateTimeWithoutPresets, formatNumber } from '@app-builder/utils/format';
 
 import { ExternalLink } from './ExternalLink';
 
@@ -39,7 +39,11 @@ export function FormatData({
     case 'datetime':
       return (
         <time dateTime={data.value} className={className}>
-          {formatDateTime(data.value, { language })}
+          {formatDateTimeWithoutPresets(data.value, {
+            language,
+            dateStyle: 'short',
+            timeStyle: 'short',
+          })}
         </time>
       );
     case 'number':