Add date filter to activity table

src/apps/dashboard/AppLayout.tsx

@@ -2,6 +2,8 @@ import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import { type Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
@@ -10,6 +12,7 @@ import AppToolbar from 'components/toolbar/AppToolbar';
 import ElevationScroll from 'components/ElevationScroll';
 import { DRAWER_WIDTH } from 'components/ResponsiveDrawer';
 import { useApi } from 'hooks/useApi';
+import { useLocale } from 'hooks/useLocale';
 
 import AppTabs from './components/AppTabs';
 import AppDrawer from './components/drawer/AppDrawer';
@@ -23,6 +26,7 @@ export const Component: FC = () => {
     const [ isDrawerActive, setIsDrawerActive ] = useState(false);
     const location = useLocation();
     const { user } = useApi();
+    const { dateFnsLocale } = useLocale();
 
     const isMediumScreen = useMediaQuery((t: Theme) => t.breakpoints.up('md'));
     const isDrawerAvailable = Boolean(user)
@@ -43,6 +47,7 @@ export const Component: FC = () => {
     }, []);
 
     return (
+        <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={dateFnsLocale}>
             <Box sx={{ display: 'flex' }}>
                 <ElevationScroll elevate={false}>
                     <AppBar
@@ -90,5 +95,6 @@ export const Component: FC = () => {
                     </AppBody>
                 </Box>
             </Box>
+        </LocalizationProvider>
     );
 };

src/apps/dashboard/routes/activity.tsx

@@ -101,7 +101,8 @@ const Activity = () => {
             accessorFn: row => parseISO8601Date(row.Date),
             header: globalize.translate('LabelTime'),
             size: 160,
-            Cell: ({ cell }) => toLocaleString(cell.getValue<Date>())
+            Cell: ({ cell }) => toLocaleString(cell.getValue<Date>()),
+            filterVariant: 'datetime-range'
         },
         {
             accessorKey: 'Severity',

src/hooks/useLocale.tsx

@@ -0,0 +1,40 @@
+import type { Locale } from 'date-fns';
+import enUS from 'date-fns/locale/en-US';
+import { useEffect, useMemo, useState } from 'react';
+
+import { getDefaultLanguage, normalizeLocaleName } from 'lib/globalize';
+import { fetchLocale, normalizeLocale } from 'utils/dateFnsLocale';
+
+import { useUserSettings } from './useUserSettings';
+
+export function useLocale() {
+    const { dateTimeLocale: dateTimeSetting, language } = useUserSettings();
+    const [ dateFnsLocale, setDateFnsLocale ] = useState<Locale>(enUS);
+
+    const locale = useMemo(() => (
+        normalizeLocaleName(language || getDefaultLanguage())
+    ), [ language ]);
+
+    const dateTimeLocale = useMemo(() => (
+        dateTimeSetting ? normalizeLocaleName(dateTimeSetting) : locale
+    ), [ dateTimeSetting, locale ]);
+
+    useEffect(() => {
+        const fetchDateFnsLocale = async () => {
+            try {
+                const dfLocale = await fetchLocale(normalizeLocale(dateTimeLocale));
+                setDateFnsLocale(dfLocale);
+            } catch (err) {
+                console.warn('[useLocale] failed to fetch dateFns locale', err);
+            }
+        };
+
+        void fetchDateFnsLocale();
+    }, [ dateTimeLocale ]);
+
+    return {
+        locale,
+        dateTimeLocale,
+        dateFnsLocale
+    };
+}

src/lib/globalize/index.js

@@ -25,7 +25,7 @@ export function getCurrentDateTimeLocale() {
     return currentDateTimeCulture;
 }
 
-function getDefaultLanguage() {
+export function getDefaultLanguage() {
     const culture = document.documentElement.getAttribute('data-culture');
     if (culture) {
         return culture;
@@ -127,7 +127,7 @@ function ensureTranslation(translationInfo, culture) {
     });
 }
 
-function normalizeLocaleName(culture) {
+export function normalizeLocaleName(culture) {
     return culture.replace('_', '-').toLowerCase();
 }
 

src/utils/dateFnsLocale.ts

@@ -67,11 +67,21 @@ const DEFAULT_LOCALE = 'en-US';
 let localeString = DEFAULT_LOCALE;
 let locale = enUS;
 
+export function fetchLocale(localeName: string) {
+    return import(`date-fns/locale/${localeName}/index.js`);
+}
+
+export function normalizeLocale(localeName: string) {
+    return LOCALE_MAP[localeName]
+        || LOCALE_MAP[localeName.replace(/-.*/, '')]
+        || DEFAULT_LOCALE;
+}
+
 export async function updateLocale(newLocale: string) {
     console.debug('[dateFnsLocale] updating date-fns locale', newLocale);
-    localeString = LOCALE_MAP[newLocale] || LOCALE_MAP[newLocale.replace(/-.*/, '')] || DEFAULT_LOCALE;
+    localeString = normalizeLocale(newLocale);
     console.debug('[dateFnsLocale] mapped to date-fns locale', localeString);
-    locale = await import(`date-fns/locale/${localeString}/index.js`);
+    locale = await fetchLocale(localeString);
 }
 
 export function getLocale() {