feat(WIP): add user config for dates and hours format

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

@@ -10,7 +10,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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString } 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';
@@ -251,7 +251,6 @@ function RelatedCases({
 }) {
   const { t } = useTranslation(['common', 'cases']);
   const casesQuery = usePivotRelatedCasesQuery(pivotValue);
-  const language = useFormatLanguage();
 
   return match(casesQuery)
     .with({ isError: true }, () => {
@@ -271,7 +270,7 @@ function RelatedCases({
       if (cases.length === 0) {
         return null;
       }
-
+      const formatDateTime = useFormatDateTimeString();
       return (
         <div className="flex flex-col gap-v2-md">
           <div className="text-h2 font-semibold">
@@ -289,10 +288,7 @@ function RelatedCases({
                       className: 'shrink border-r leading-[28px]',
                     })}
                   >
-                    {formatDateTimeWithoutPresets(caseObj.createdAt, {
-                      language,
-                      dateStyle: 'short',
-                    })}
+                    {formatDateTime(caseObj.createdAt, { dateStyle: 'short' })}
                   </div>
                   <div
                     className={cellVariants({

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

@@ -8,7 +8,7 @@ import { ScoreModifier } from '@app-builder/components/Scenario/Rules/ScoreModif
 import { type PivotObject } from '@app-builder/models/cases';
 import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
 import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
-import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, useFormatLanguage } from '@app-builder/utils/format';
 import { Await, useLoaderData } from '@remix-run/react';
 import { Dict } from '@swan-io/boxed';
 import { formatRelative } from 'date-fns';
@@ -30,6 +30,7 @@ export const SnoozePanel = ({
 }) => {
   const { t } = useTranslation(casesI18n);
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
   const { rulesByPivotPromise, dataModelWithTableOptions, pivotObjects, entitlements } =
     useLoaderData<typeof loader>();
   const { setExpanded } = DrawerContext.useValue();
@@ -131,10 +132,7 @@ export const SnoozePanel = ({
                             <span
                               className={cn('text-grey-50 text-xs', { 'opacity-30': r.isSnoozed })}
                             >
-                              {formatDateTimeWithoutPresets(r.hitAt, {
-                                language,
-                                dateStyle: 'short',
-                              })}
+                              {formatDateTime(r.hitAt, { 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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, 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';
@@ -31,6 +31,7 @@ export const CaseAlerts = ({
     dataModelWithTableOptions,
   } = useLoaderData<typeof loader>();
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
   const [selectedDecision, setSelectedDecision] = useState<string | null>(null);
 
   return (
@@ -63,10 +64,7 @@ export const CaseAlerts = ({
                   >
                     <div className="flex min-h-full flex-col items-center p-2">
                       <span className="text-grey-50 text-xs font-normal">
-                        {formatDateTimeWithoutPresets(decision.createdAt, {
-                          language,
-                          dateStyle: 'short',
-                        })}
+                        {formatDateTime(decision.createdAt, { 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

@@ -7,7 +7,7 @@ import { CaseReview } from '@app-builder/models/cases';
 import { useAddReviewToCaseCommentsMutation } from '@app-builder/queries/add-review-to-case-comments';
 import { useCaseReviewFeedbackMutation } from '@app-builder/queries/case-review-feedback';
 import { type loader } from '@app-builder/routes/_builder+/cases+/$caseId+/_index';
-import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString } from '@app-builder/utils/format';
 import { useLoaderData, useRevalidator } from '@remix-run/react';
 import { cva } from 'class-variance-authority';
 import { useRef, useState } from 'react';
@@ -53,7 +53,8 @@ export const CaseDetails = ({
 }) => {
   const { case: detail, inboxes, reports } = useLoaderData<typeof loader>();
   const { t } = useTranslation(['common', 'cases']);
-  const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
+
   const sentinelRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const intersection = useIntersection(sentinelRef, {
@@ -142,8 +143,7 @@ export const CaseDetails = ({
                   {detail.snoozedUntil ? (
                     <span className="font-medium text-grey-00">
                       {t('cases:case.snoozed_until', {
-                        date: formatDateTimeWithoutPresets(detail.snoozedUntil, {
-                          language,
+                        date: formatDateTime(detail.snoozedUntil, {
                           dateStyle: 'short',
                         }),
                       })}
@@ -154,8 +154,7 @@ export const CaseDetails = ({
               <div className="grid grid-cols-[170px_1fr] items-center">
                 <span className="text-grey-50 font-normal">{t('cases:creation_date')}</span>
                 <time className="font-medium" dateTime={detail.createdAt}>
-                  {formatDateTimeWithoutPresets(detail.createdAt, {
-                    language,
+                  {formatDateTime(detail.createdAt, {
                     dateStyle: 'short',
                   })}
                 </time>

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

@@ -2,7 +2,7 @@ import { type Case } from '@app-builder/models/cases';
 import { useOrganizationTags } from '@app-builder/services/organization/organization-tags';
 import {
   formatDateRelative,
-  formatDateTimeWithoutPresets,
+  useFormatDateTimeString,
   useFormatLanguage,
 } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
@@ -36,6 +36,7 @@ export function CasesList({
 }) {
   const { t } = useTranslation(casesI18n);
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
   const [sorting, setSorting] = useState<SortingState>(initSorting);
   const { orgTags } = useOrganizationTags();
 
@@ -83,19 +84,14 @@ export function CasesList({
         cell: ({ getValue }) => {
           const dateTime = getValue();
           return Math.abs(differenceInDays(new Date(), dateTime)) > 1 ? (
-            <time dateTime={dateTime}>
-              {formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
-            </time>
+            <time dateTime={dateTime}>{formatDateTime(dateTime, { 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">
-                  {formatDateTimeWithoutPresets(dateTime, {
-                    language,
-                    dateStyle: 'short',
-                  })}
+                  {formatDateTime(dateTime, { dateStyle: 'short' })}
                 </span>
               }
             >

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

@@ -3,15 +3,15 @@ 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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString } from '@app-builder/utils/format';
 import { useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Icon } from 'ui-icons';
 
 export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
   const { getOrgUserById } = useOrganizationUsers();
   const { t } = useTranslation(casesI18n);
-  const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
   const user = useMemo(
     () => (event.userId ? getOrgUserById(event.userId) : undefined),
     [event.userId, getOrgUserById],
@@ -29,11 +29,7 @@ export const CaseSnoozedDetail = ({ event }: { event: CaseSnoozedEvent }) => {
           components={{ Style: <span className="font-bold capitalize" /> }}
           values={{
             actor: user ? getFullName(user) : 'Marble',
-            date: formatDateTimeWithoutPresets(event.snoozeUntil, {
-              language,
-              dateStyle: 'short',
-              timeStyle: 'short',
-            }),
+            date: formatDateTime(event.snoozeUntil, { dateStyle: 'short', timeStyle: 'short' }),
           }}
         />
       </span>

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

@@ -3,7 +3,7 @@ import {
   DEFAULT_CASE_EVENT_CATEGORIES_FILTER,
 } from '@app-builder/constants/cases';
 import { getDateFnsLocale } from '@app-builder/services/i18n/i18n-config';
-import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, 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';
@@ -34,6 +34,7 @@ export type CaseEventFiltersProps = {
 export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps) => {
   const { t } = useTranslation(casesI18n);
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
   const isDirty = useMemo(
     () =>
       diff(filters.types, DEFAULT_CASE_EVENT_CATEGORIES_FILTER).length !== 0 ||
@@ -120,8 +121,7 @@ export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps)
             {filters.startDate ? (
               <Badge>
                 {t('common:from', {
-                  input: formatDateTimeWithoutPresets(filters.startDate, {
-                    language,
+                  input: formatDateTime(filters.startDate, {
                     dateStyle: 'short',
                     timeStyle: 'short',
                   }),
@@ -131,8 +131,7 @@ export const CaseEventFilters = ({ filters, setFilters }: CaseEventFiltersProps)
             {filters.endDate ? (
               <Badge>
                 {t('common:to', {
-                  input: formatDateTimeWithoutPresets(filters.endDate, {
-                    language,
+                  input: formatDateTime(filters.endDate, {
                     dateStyle: 'short',
                     timeStyle: 'short',
                   }),

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

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

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

@@ -1,5 +1,5 @@
 import { type DataModelObject, type TableModel } from '@app-builder/models';
-import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, 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';
@@ -44,8 +44,8 @@ export const IngestedObjectDetail = ({
 }: IngestedObjectDetailProps) => {
   const { t } = useTranslation(['data']);
   const parsedTriggerObject = useParsedTriggerObject(object.data) ?? [];
+  const formatDateTime = useFormatDateTimeString();
   const language = useFormatLanguage();
-
   const dataModelTable = dataModel.find((table) => table.name === tableName);
   const links = R.pipe(
     dataModelTable?.linksToSingle ?? [],
@@ -67,8 +67,7 @@ export const IngestedObjectDetail = ({
         </span>
         <span className="bg-grey-100 border-grey-50 text-grey-50 rounded-sm border px-2 py-1">
           {t('data:last_ingestion_at', {
-            date: formatDateTimeWithoutPresets(object.metadata.validFrom, {
-              language,
+            date: formatDateTime(object.metadata.validFrom, {
               dateStyle: 'short',
               timeStyle: 'short',
             }),

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

@@ -1,6 +1,6 @@
 import { CaseStatusBadge, decisionsI18n } from '@app-builder/components';
 import { type DecisionDetails } from '@app-builder/models/decision';
-import { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString } 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';
@@ -9,7 +9,7 @@ import { Collapsible } from 'ui-design-system';
 
 export function DecisionDetail({ decision }: { decision: DecisionDetails }) {
   const { t } = useTranslation(decisionsI18n);
-  const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
 
   const { case: caseDetail, createdAt, scenario, triggerObjectType } = decision;
 
@@ -20,11 +20,7 @@ export function DecisionDetail({ decision }: { decision: DecisionDetails }) {
         <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}>
-            {formatDateTimeWithoutPresets(createdAt, {
-              language,
-              dateStyle: 'short',
-              timeStyle: 'short',
-            })}
+            {formatDateTime(createdAt, { dateStyle: 'short', timeStyle: 'short' })}
           </time>
 
           <DetailLabel>{t('decisions:scenario.name')}</DetailLabel>

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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, 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';
@@ -90,6 +90,7 @@ export function DecisionsList({
 }: DecisionsListProps) {
   const { t } = useTranslation(decisionsI18n);
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
 
   const columns = useMemo(
     () => [
@@ -132,9 +133,7 @@ export function DecisionsList({
         cell: ({ getValue }) => {
           const dateTime = getValue();
           return (
-            <time dateTime={dateTime}>
-              {formatDateTimeWithoutPresets(dateTime, { language, dateStyle: 'short' })}
-            </time>
+            <time dateTime={dateTime}>{formatDateTime(dateTime, { dateStyle: 'short' })}</time>
           );
         },
       }),
@@ -223,7 +222,7 @@ export function DecisionsList({
         },
       }),
     ],
-    [t, selectable, language],
+    [t, selectable, language, formatDateTime],
   );
 
   const { table, getBodyProps, rows, getContainerProps } = useTable({

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 { formatDateTimeWithoutPresets, useFormatLanguage } from '@app-builder/utils/format';
+import { useFormatDateTimeString, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { useFetcher } from '@remix-run/react';
 import { matchSorter } from 'match-sorter';
@@ -15,6 +15,7 @@ import { useScheduledExecutionFilter } from '../DecisionFiltersContext';
 export function ScheduledExecutionFilter() {
   const { t } = useTranslation(decisionsI18n);
   const language = useFormatLanguage();
+  const formatDateTime = useFormatDateTimeString();
 
   const loadFetcher = useFetcher<ScheduledExecutionsLoader>();
   React.useEffect(() => {
@@ -31,8 +32,7 @@ export function ScheduledExecutionFilter() {
           scenarioName: scheduledExecution.scenarioName,
           startedAt: {
             dateTime: scheduledExecution.startedAt,
-            formattedDateTime: formatDateTimeWithoutPresets(scheduledExecution.startedAt, {
-              language,
+            formattedDateTime: formatDateTime(scheduledExecution.startedAt, {
               dateStyle: 'short',
               timeStyle: 'short',
             }),