@cccsaurora/howler-ui 2.13.0-dev.171 → 2.13.0-dev.176

package/commons/components/notification/elements/item/NotificationItemDate.js

@@ -1,10 +1,10 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
 import {} from '@cccsaurora/howler-ui/commons/components/notification';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 export const NotificationItemDate = memo(({ date_published = null }) => {
     const { i18n } = useTranslation(['notification']);
-    return !date_published ? null : (_jsx(Typography, { lineHeight: "revert", display: "block", variant: "caption", color: "textSecondary", children: _jsx(_Fragment, { children: moment(date_published).locale(i18n.language).fromNow() }) }));
+    return !date_published ? null : (_jsx(Typography, { lineHeight: "revert", display: "block", variant: "caption", color: "textSecondary", children: _jsx(_Fragment, { children: dayjs(date_published).locale(i18n.language).fromNow() }) }));
 });

package/components/app/drawers/ApiKeyDrawer.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Alert, AlertTitle, Button, Checkbox, Divider, FormControl, FormControlLabel, FormGroup, FormLabel, Stack, TextField, Typography } from '@mui/material';
 import { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import dayjs from 'dayjs';
 import {} from '@cccsaurora/howler-ui/models/entities/generated/ApiType';
-import moment from 'moment';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { ApiConfigContext } from '../providers/ApiConfigProvider';
@@ -30,7 +30,7 @@ const ApiKeyDrawer = ({ onCreated }) => {
         if (!amount || !unit) {
             return null;
         }
-        return moment().add(amount, unit);
+        return dayjs().add(amount, unit);
     }, [amount, unit]);
     const updatePrivs = useCallback((priv) => (ev) => {
         if (ev.target.checked) {
@@ -62,6 +62,6 @@ const ApiKeyDrawer = ({ onCreated }) => {
     useEffect(() => {
         setExpiryDate(maxDate);
     }, [maxDate]);
-    return (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { sx: { maxWidth: '500px' }, children: _jsx(Trans, { i18nKey: "app.drawer.user.apikey.description" }) }), amount && unit && moment.duration(amount, unit).asSeconds() < moment.duration(7, 'days').asSeconds() && (_jsxs(Alert, { severity: "warning", variant: "outlined", sx: { maxWidth: '500px' }, children: [_jsx(AlertTitle, { children: t('app.drawer.user.apikey.limit.title') }), t('app.drawer.user.apikey.limit.description'), " (", maxDate?.format('MMM D HH:mm:ss'), ")"] })), _jsx(TextField, { label: t('app.drawer.user.apikey.field.name'), required: true, fullWidth: true, value: keyName, onChange: onChange }), _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { component: "legend", children: t('app.drawer.user.apikey.permissions') }), _jsxs(FormGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('R') }), label: t('@cccsaurora/howler-ui/apikey.read') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('W') }), label: t('@cccsaurora/howler-ui/apikey.write') }), _jsx(FormControlLabel, { disabled: privs.includes('E'), control: _jsx(Checkbox, { onChange: updatePrivs('I') }), label: t('@cccsaurora/howler-ui/apikey.impersonate') }), config.configuration.auth.allow_extended_apikeys && (_jsx(FormControlLabel, { disabled: privs.includes('I'), control: _jsx(Checkbox, { onChange: updatePrivs('E') }), label: t('@cccsaurora/howler-ui/apikey.extended') }))] })] }), _jsxs(FormControl, { required: !!maxDate, children: [_jsx(FormLabel, { children: t('app.drawer.user.apikey.expiry.date') }), _jsx(StaticDateTimePicker, { orientation: "landscape", ampm: false, value: expiryDate, onChange: newValue => setExpiryDate(newValue), disablePast: true, maxDate: maxDate, maxTime: maxDate, sx: { backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } } })] }), _jsx(Button, { onClick: onSubmit, disabled: !keyName || (!privs.includes('R') && !privs.includes('W')) || (maxDate && !expiryDate), variant: "outlined", children: _jsx(Trans, { i18nKey: "button.create" }) }), createdKey && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { size: "small", value: createdKey, inputProps: { readOnly: true }, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: onCopy, disabled: !createdKey, children: _jsx(Trans, { i18nKey: "button.copy" }) })] })] }))] }) }));
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { sx: { maxWidth: '500px' }, children: _jsx(Trans, { i18nKey: "app.drawer.user.apikey.description" }) }), amount && unit && dayjs.duration(amount, unit).asSeconds() < dayjs.duration(7, 'days').asSeconds() && (_jsxs(Alert, { severity: "warning", variant: "outlined", sx: { maxWidth: '500px' }, children: [_jsx(AlertTitle, { children: t('app.drawer.user.apikey.limit.title') }), t('app.drawer.user.apikey.limit.description'), " (", maxDate?.format('MMM D HH:mm:ss'), ")"] })), _jsx(TextField, { label: t('app.drawer.user.apikey.field.name'), required: true, fullWidth: true, value: keyName, onChange: onChange }), _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { component: "legend", children: t('app.drawer.user.apikey.permissions') }), _jsxs(FormGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('R') }), label: t('@cccsaurora/howler-ui/apikey.read') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('W') }), label: t('@cccsaurora/howler-ui/apikey.write') }), _jsx(FormControlLabel, { disabled: privs.includes('E'), control: _jsx(Checkbox, { onChange: updatePrivs('I') }), label: t('@cccsaurora/howler-ui/apikey.impersonate') }), config.configuration.auth.allow_extended_apikeys && (_jsx(FormControlLabel, { disabled: privs.includes('I'), control: _jsx(Checkbox, { onChange: updatePrivs('E') }), label: t('@cccsaurora/howler-ui/apikey.extended') }))] })] }), _jsxs(FormControl, { required: !!maxDate, children: [_jsx(FormLabel, { children: t('app.drawer.user.apikey.expiry.date') }), _jsx(StaticDateTimePicker, { orientation: "landscape", ampm: false, value: expiryDate, onChange: newValue => setExpiryDate(newValue), disablePast: true, maxDate: maxDate, maxTime: maxDate, sx: { backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } } })] }), _jsx(Button, { onClick: onSubmit, disabled: !keyName || (!privs.includes('R') && !privs.includes('W')) || (maxDate && !expiryDate), variant: "outlined", children: _jsx(Trans, { i18nKey: "button.create" }) }), createdKey && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { size: "small", value: createdKey, inputProps: { readOnly: true }, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: onCopy, disabled: !createdKey, children: _jsx(Trans, { i18nKey: "button.copy" }) })] })] }))] }) }));
 };
 export default ApiKeyDrawer;

package/components/elements/hit/HitSummary.js

@@ -143,7 +143,7 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
     return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, { query: query }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
-                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count, " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key].sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source)))] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
+                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
                         _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(_key => (_jsx(Grid, { item: true, xs: "auto", children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: _key, label: `${_key} (${aggregateResults[key][_key]})`, onClick: () => setSearch(key, `"${_key}"`) }) }, _key))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
                                     .map(d => new Date(d).toLocaleString())
                                     .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')

package/components/elements/hit/aggregate/HitGraph.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { FC } from 'react';
 declare const HitGraph: FC<{
     query: string;

package/components/elements/hit/aggregate/HitGraph.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenterFocusWeak, Refresh } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, CircularProgress, IconButton, Stack, TextField, Tooltip, alpha, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
+import dayjs from 'dayjs';
 import { capitalize } from 'lodash-es';
-import moment from 'moment';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Scatter } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
@@ -96,10 +96,10 @@ const HitGraph = ({ query }) => {
                 return {
                     label: `${label} (${category.total})`,
                     data: category.items.map(hit => {
-                        const createdMoment = moment(hit.event?.created ?? hit.timestamp);
+                        const createdDate = dayjs(hit.event?.created ?? hit.timestamp);
                         return {
-                            x: createdMoment.clone().hour(0).minute(0).second(0).toISOString(),
-                            y: createdMoment.hour() + createdMoment.minute() / 60 + createdMoment.second() / 3600,
+                            x: createdDate.clone().hour(0).minute(0).second(0).toISOString(),
+                            y: createdDate.hour() + createdDate.minute() / 60 + createdDate.second() / 3600,
                             hit,
                             label
                         };
@@ -157,7 +157,7 @@ const HitGraph = ({ query }) => {
                 tooltip: {
                     callbacks: {
                         title: entries => `${entries.length} ${t('hits')}`,
-                        label: entry => `${entry.raw.hit.howler.analytic}: ${entry.raw.hit.howler.detection} (${moment(entry.raw.hit.event.created).format('MMM D HH:mm:ss')})`,
+                        label: entry => `${entry.raw.hit.howler.analytic}: ${entry.raw.hit.howler.detection} (${dayjs(entry.raw.hit.event.created).format('MMM D HH:mm:ss')})`,
                         afterLabel: entry => `${entry.raw.hit.howler.outline.threat} ${entry.raw.hit.howler.outline.target}`
                     }
                 },
@@ -183,7 +183,7 @@ const HitGraph = ({ query }) => {
                     ticks: {
                         callback: (value) => {
                             const [hour, minute] = [Math.floor(value), Math.floor((value - Math.floor(value)) * 60)];
-                            return moment().hour(hour).minute(minute).format('HH:mm');
+                            return dayjs().hour(hour).minute(minute).format('HH:mm');
                         }
                     }
                 }

package/components/elements/hit/elements/HitTimestamp.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip, Tooltip } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatDate } from '@cccsaurora/howler-ui/utils/utils';
@@ -14,31 +14,31 @@ const TIMESTAMP_MESSAGES = {
 const HitTimestamp = ({ hit, layout }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    const threshold = useMemo(() => moment().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
+    const threshold = useMemo(() => dayjs().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
     const timestamp = useMemo(() => {
         const validFieldValues = [hit.howler?.expiry, hit.event?.created, hit.timestamp];
         const earliestDate = validFieldValues
             .filter(entry => !!entry)
             .reduce((earliest, current) => {
-            return moment(earliest).isBefore(current) ? earliest : current;
+            return dayjs(earliest).isBefore(current) ? earliest : current;
         });
         return earliestDate;
     }, [hit]);
     const color = useMemo(() => {
-        if (moment(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
+        if (dayjs(timestamp).isBefore(threshold.clone().add(2, 'weeks'))) {
             return 'error';
         }
-        if (moment(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
+        if (dayjs(timestamp).isBefore(threshold.clone().add(1, 'months'))) {
             return 'warning';
         }
         return 'default';
     }, [threshold, timestamp]);
     const duration = useMemo(() => {
-        if (moment(timestamp).isBefore(threshold)) {
+        if (dayjs(timestamp).isBefore(threshold)) {
             return t('retention.imminent');
         }
-        const diff = moment(timestamp).diff(threshold, 'seconds');
-        const _duration = moment.duration(diff, 'seconds');
+        const diff = dayjs(timestamp).diff(threshold, 'seconds');
+        const _duration = dayjs.duration(diff, 'seconds');
         return _duration.humanize();
     }, [t, threshold, timestamp]);
     return (_jsx(Tooltip, { title: t(TIMESTAMP_MESSAGES[color], {

package/components/hooks/useMyChart.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 declare const useMyChart: () => {
     line: (titleKey: string, subtitleKey?: string) => {
         responsive: boolean;

package/components/hooks/useMyChart.js

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material';
 import { ArcElement, BarElement, CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, SubTitle, TimeScale, Title, Tooltip } from 'chart.js';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

package/components/routes/advanced/QueryBuilder.js

@@ -13,7 +13,7 @@ import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/butto
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -41,8 +41,8 @@ description: A basic example of using sigma rule notation to query howler
 references:
     - https://github.com/SigmaHQ/sigma
 author: You
-date: ${moment().format('YYYY/MM/DD')}
-modified: ${moment().format('YYYY/MM/DD')}
+date: ${dayjs().format('YYYY/MM/DD')}
+modified: ${dayjs().format('YYYY/MM/DD')}
 tags:
     - attack.command_and_control
 logsource:

package/components/routes/analytics/AnalyticOverview.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const AnalyticOverview: FC<{

package/components/routes/analytics/AnalyticOverview.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Check, Edit } from '@mui/icons-material';
 import { Alert, AlertTitle, Box, Card, CardContent, CircularProgress, Divider, IconButton, Skeleton, Stack, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';

package/components/routes/analytics/AnalyticOverviews.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import { type FC } from 'react';
 declare const AnalyticOverviews: FC<{

package/components/routes/analytics/AnalyticOverviews.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import { useContext, useEffect, useMemo, useState } from 'react';

package/components/routes/analytics/AnalyticTemplates.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import { type FC } from 'react';
 declare const AnalyticTemplates: FC<{

package/components/routes/analytics/AnalyticTemplates.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useState } from 'react';

package/components/routes/analytics/RuleView.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const RuleView: FC<{

package/components/routes/analytics/RuleView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Edit } from '@mui/icons-material';
 import { Box, CircularProgress, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useState } from 'react';

package/components/routes/analytics/TriageSettings.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 import type { FC } from 'react';
 declare const TriageSettings: FC<{

package/components/routes/analytics/TriageSettings.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, Divider, Grid, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import EditRow from '@cccsaurora/howler-ui/components/elements/EditRow';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';

package/components/routes/analytics/widgets/Assessment.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Assessment: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Assessment.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Skeleton, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import { forwardRef, useEffect, useState } from 'react';
 import { Bar } from 'react-chartjs-2';

package/components/routes/analytics/widgets/Created.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Created: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Created.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import { forwardRef, useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';

package/components/routes/analytics/widgets/Detection.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Detection: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Detection.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import { forwardRef } from 'react';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 import Stacked from './Stacked';

package/components/routes/analytics/widgets/Escalation.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Escalation: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Escalation.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { Doughnut } from 'react-chartjs-2';

package/components/routes/analytics/widgets/Stacked.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Stacked: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Stacked.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import useMyChart from '@cccsaurora/howler-ui/components/hooks/useMyChart';
 import sum from 'lodash-es/sum';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';

package/components/routes/analytics/widgets/Status.d.ts

@@ -1,4 +1,4 @@
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
 declare const Status: import("react").ForwardRefExoticComponent<{
     analytic: Analytic;

package/components/routes/analytics/widgets/Status.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from '@mui/material';
-import 'chartjs-adapter-moment';
+import 'chartjs-adapter-dayjs';
 import { forwardRef } from 'react';
 import { STATUS_COLORS } from '@cccsaurora/howler-ui/utils/constants';
 import Stacked from './Stacked';

package/components/routes/help/TemplateDocumentation.js

@@ -5,7 +5,7 @@ import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import DefaultOutline from '@cccsaurora/howler-ui/components/elements/hit/outlines/DefaultOutline';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import TEMPLATES_EN from './markdown/en/templates.md';
@@ -14,8 +14,8 @@ const ALERTS = [
     {
         howler: { id: 'hit1', analytic: 'Cat Checker', detection: 'Listening for Meows' },
         event: {
-            start: moment().subtract(4, 'hour').toString(),
-            end: moment().subtract(3, 'hour').toString(),
+            start: dayjs().subtract(4, 'hour').toString(),
+            end: dayjs().subtract(3, 'hour').toString(),
             kind: 'Loud meow',
             outcome: 'Food provided'
         }
@@ -23,8 +23,8 @@ const ALERTS = [
     {
         howler: { id: 'hit2', analytic: 'Cat Checker', detection: 'Looking for paw prints' },
         event: {
-            start: moment().subtract(6, 'hour').toString(),
-            end: moment().subtract(5, 'hour').toString(),
+            start: dayjs().subtract(6, 'hour').toString(),
+            end: dayjs().subtract(5, 'hour').toString(),
             provider: "The neighbour's cat (probably)",
             reason: 'There was some fish we forgot to put away in the kitchen'
         }

package/components/routes/hits/search/HitBrowser.js

@@ -10,8 +10,8 @@ import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/Fl
 import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import dayjs from 'dayjs';
 import { has, isNull } from 'lodash-es';
-import moment from 'moment';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams, useSearchParams } from 'react-router-dom';
@@ -88,7 +88,7 @@ const HitBrowser = () => {
     useEffect(() => {
         // On load check to filter out any queries older than one month
         setQueryHistory(_queryHistory => {
-            const filterQueryTime = moment().subtract(1, 'month').toISOString();
+            const filterQueryTime = dayjs().subtract(1, 'month').toISOString();
             return Object.fromEntries(Object.entries(_queryHistory).filter(([_, value]) => value > filterQueryTime));
         });
     }, [setQueryHistory]);

package/components/routes/hits/search/shared/CustomSpan.js

@@ -1,24 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 const CustomSpan = () => {
     const { t } = useTranslation();
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
-    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? moment(ctx.startDate) : null));
+    const startDate = useContextSelector(ParameterContext, ctx => (ctx.startDate ? dayjs(ctx.startDate) : null));
     const setCustomSpan = useContextSelector(ParameterContext, ctx => ctx.setCustomSpan);
-    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? moment(ctx.endDate) : null));
+    const endDate = useContextSelector(ParameterContext, ctx => (ctx.endDate ? dayjs(ctx.endDate) : null));
     useEffect(() => {
         if (span?.endsWith('custom') && (!startDate || !endDate)) {
-            setCustomSpan(moment().subtract(3, 'days').toISOString(), moment().toISOString());
+            setCustomSpan(dayjs().subtract(3, 'days').toISOString(), dayjs().toISOString());
         }
     }, [endDate, setCustomSpan, span, startDate]);
-    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterMoment, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? moment(startDate) : moment().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
+    return span?.endsWith('custom') ? (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "row", spacing: 1, useFlexGap: true, flexWrap: "wrap", children: [_jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.start'), value: startDate ? dayjs(startDate) : dayjs().subtract(1, 'days'), maxDate: endDate, onChange: (newStartDate) => setCustomSpan(newStartDate.toISOString(), endDate.toISOString()), ampm: false, disableFuture: true }), _jsx(DateTimePicker, { sx: { minWidth: '175px', flexGrow: 1, marginTop: 1 }, slotProps: { textField: { size: 'small' } }, label: t('date.select.end'), value: endDate, minDate: startDate, onChange: (newEndDate) => setCustomSpan(startDate.toISOString(), newEndDate.toISOString()), ampm: false, disableFuture: true })] }) })) : null;
 };
 export default memo(CustomSpan);

package/components/routes/home/index.js

@@ -10,8 +10,8 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
+import dayjs from 'dayjs';
 import isEqual from 'lodash-es/isEqual';
-import moment from 'moment';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
@@ -26,7 +26,7 @@ const Home = () => {
     const { user, setUser } = useAppUser();
     const { setDashboard } = useMyUserFunctions();
     const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
-    const [lastViewed, setLastViewed] = useMyLocalStorageItem(StorageKey.LAST_VIEW, moment().utc().format(LUCENE_DATE_FMT));
+    const [lastViewed, setLastViewed] = useMyLocalStorageItem(StorageKey.LAST_VIEW, dayjs().utc().format(LUCENE_DATE_FMT));
     const [loading, setLoading] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
     const [updatedHitTotal, setUpdatedHitTotal] = useState(0);
@@ -81,8 +81,8 @@ const Home = () => {
         })
             .then(result => setUpdatedHitTotal(result.total));
     }, [updateQuery]);
-    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(moment().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
-                                    setLastViewed(moment().utc().format(LUCENE_DATE_FMT));
+    return (_jsx(PageCenter, { maxWidth: "1800px", textAlign: "left", height: "100%", children: _jsxs(Stack, { direction: "column", spacing: 1, sx: { height: '100%' }, children: [_jsxs(Stack, { direction: "row", justifyContent: "end", spacing: 1, children: [isEditing && (_jsx(CustomButton, { variant: "outlined", size: "small", color: "error", startIcon: _jsx(Cancel, {}), onClick: discardChanges, children: t('cancel') })), _jsx(CustomButton, { variant: "outlined", size: "small", disabled: isEditing && isEqual(dashboard, user.dashboard), color: isEditing ? 'success' : 'primary', startIcon: isEditing ? loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Check, {}) : _jsx(Edit, {}), onClick: () => (!isEditing ? setIsEditing(true) : saveChanges()), children: t(isEditing ? 'save' : 'edit') })] }), updatedHitTotal > 0 && (_jsxs(Alert, { severity: "info", variant: "outlined", action: _jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(IconButton, { color: "info", component: Link, to: `/hits?query=${encodeURIComponent(updateQuery)}`, onClick: () => setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT)), children: _jsx(OpenInNew, {}) }), _jsx(IconButton, { color: "info", onClick: () => {
+                                    setLastViewed(dayjs().utc().format(LUCENE_DATE_FMT));
                                     setUpdatedHitTotal(0);
                                 }, children: _jsx(Close, {}) })] }), children: [_jsx(AlertTitle, { children: t('route.home.alert.updated.title') }), t('route.home.alert.updated.description', { count: updatedHitTotal })] })), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (dashboard ?? []).map(entry => getIdFromEntry(entry)), children: _jsxs(Grid, { container: true, spacing: 1, alignItems: "stretch", sx: [
                                 theme => ({

package/components/routes/settings/SecuritySection.js

@@ -3,7 +3,7 @@ import { Add } from '@mui/icons-material';
 import { Chip, Grid, IconButton, TableCell, TableRow } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useContext, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -26,6 +26,6 @@ const SecuritySection = ({ user, editPassword, addApiKey, removeApiKey, editQuot
     return (_jsxs(SettingsSection, { title: t('page.settings.security.title'), colSpan: 3, children: [!isOAuth && editPassword && (_jsx(EditRow, { titleKey: "page.settings.security.table.password", value: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF", onEdit: editPassword, type: "password" })), config?.configuration.auth.allow_apikeys && (_jsxs(TableRow, { sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.security.table.apikeys') }), _jsx(TableCell, { width: "100%", children: _jsxs(Grid, { container: true, spacing: 1, children: [user?.apikeys?.map(apiKey => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: apiKey[0].toLocaleLowerCase() +
                                             (apiKey[1].length > 0
                                                 ? ` (${apiKey[1].map(permission => t(APIKEY_LABELS[permission])).join(', ')})`
-                                                : ''), style: { backgroundColor: moment.utc(apiKey[2]).isBefore(moment().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(Add, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
+                                                : ''), style: { backgroundColor: dayjs.utc(apiKey[2]).isBefore(dayjs().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(Add, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
 };
 export default SecuritySection;

package/index.js

@@ -1,10 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import '@fontsource/roboto';
 import App from '@cccsaurora/howler-ui/components/app/App';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
 import '@cccsaurora/howler-ui/i18n';
 import 'index.css';
 // import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import * as ReactDOM from 'react-dom/client';
+dayjs.extend(utc);
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
 // This is where you can inject UI plugins to modify Howler's interface.
 // howlerPluginStore.install(new ExamplePlugin());
 ReactDOM.createRoot(document.getElementById('root')).render(_jsx(App, {}));

package/package.json

@@ -31,10 +31,11 @@
     "axios-retry": "^3.9.1",
     "borealis-ui": "0.11.0",
     "chart.js": "^4.5.0",
-    "chartjs-adapter-moment": "^1.0.1",
+    "chartjs-adapter-dayjs": "^1.0.0",
     "chartjs-plugin-zoom": "^2.2.0",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
+    "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
     "express": "^4.21.2",
     "flat": "^6.0.1",
@@ -47,7 +48,6 @@
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "mermaid": "^11.10.0",
-    "moment": "^2.30.1",
     "monaco-editor": "^0.49.0",
     "notistack": "^3.0.2",
     "react": "^18.3.1",
@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.13.0-dev.171",
+  "version": "2.13.0-dev.176",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/utils/constants.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LocalPolice, MoodBad, NewReleases, PsychologyAlt, Star, Timeline } from '@mui/icons-material';
 import { blue, grey, indigo, orange, pink, red, teal, yellow } from '@mui/material/colors';
-import moment from 'moment';
+import dayjs from 'dayjs';
 export const HOWLER_API = import.meta.env.VITE_API;
 export const LOCAL = HOWLER_API === 'MOCK';
 export const VERSION = import.meta.env.VITE_VERSION;
@@ -66,7 +66,7 @@ export var StorageKey;
 export const MOCK_SEARCH_QUERY_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_SEARCH_QUERY_STORE}`;
 export const MOCK_FAVOURITES_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_FAVOURITES_STORE}`;
 export const VALID_ACTION_TRIGGERS = ['create', 'promote', 'demote'];
-const CURRENT_TIME = moment();
+const CURRENT_TIME = dayjs();
 export const minutes = [CURRENT_TIME.get('minute'), CURRENT_TIME.add(30, 'minute').get('minute')].sort();
 export const hours = [
     CURRENT_TIME.get('hour'),

package/utils/utils.js

@@ -1,7 +1,7 @@
 import * as colors from '@mui/material/colors';
+import dayjs from 'dayjs';
 import { flatten, unflatten } from 'flat';
 import { isArray, isEmpty, isNil, isObject, isPlainObject } from 'lodash-es';
-import moment from 'moment';
 export const bytesToSize = (bytes) => {
     const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
     if (bytes === 0 || bytes === null)
@@ -39,7 +39,7 @@ export const formatDate = (date) => {
     if (!date) {
         return '?';
     }
-    return moment(date).utc().format(DATE_FORMAT);
+    return dayjs(date).utc().format(DATE_FORMAT);
 };
 export const compareTimestamp = (a, b) => {
     return (new Date(a).getTime() - new Date(b).getTime()) / 1000;
@@ -48,7 +48,7 @@ export const twitterShort = (date) => {
     if (!date || date === '?') {
         return '?';
     }
-    return moment(date).fromNow();
+    return dayjs(date).fromNow();
 };
 export const hashCode = (s) => s.split('').reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
 export const stringToColor = (string) => {