Migrate to DayJs from moment

14 files changed, 127 insertions, 123 deletions

diff --git a/modern/package-lock.json b/modern/package-lock.json
index 375f7f78..06744a6a 100644
--- a/modern/package-lock.json
+++ b/modern/package-lock.json
@@ -22,10 +22,10 @@
         "@turf/circle": "^6.5.0",
         "@turf/turf": "^6.5.0",
         "@vitejs/plugin-react": "^4.0.4",
+        "dayjs": "^1.11.9",
         "events": "^3.3.0",
         "mapbox-gl": "^1.13.3",
         "maplibre-gl": "^3.3.0",
-        "moment": "^2.29.4",
         "react": "^18.2.0",
         "react-country-flag": "3.1.0",
         "react-dom": "^18.2.0",
@@ -5968,6 +5968,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/dayjs": {
+      "version": "1.11.9",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.9.tgz",
+      "integrity": "sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -8567,14 +8572,6 @@
         "ufo": "^1.3.0"
       }
     },
-    "node_modules/moment": {
-      "version": "2.29.4",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
-      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/modern/package.json b/modern/package.json
index c7d1e4bb..ce17f09d 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -17,10 +17,10 @@
     "@turf/circle": "^6.5.0",
     "@turf/turf": "^6.5.0",
     "@vitejs/plugin-react": "^4.0.4",
+    "dayjs": "^1.11.9",
     "events": "^3.3.0",
     "mapbox-gl": "^1.13.3",
     "maplibre-gl": "^3.3.0",
-    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-country-flag": "3.1.0",
     "react-dom": "^18.2.0",
diff --git a/modern/src/common/components/LocalizationProvider.jsx b/modern/src/common/components/LocalizationProvider.jsx
index 2ace1e24..d48b12ce 100644
--- a/modern/src/common/components/LocalizationProvider.jsx
+++ b/modern/src/common/components/LocalizationProvider.jsx
@@ -2,67 +2,66 @@
 import React, {
   createContext, useContext, useEffect, useMemo,
 } from 'react';
-import moment from 'moment';
-import 'moment/min/locales.min';
-
-import af from '../../resources/l10n/af.json';
-import ar from '../../resources/l10n/ar.json';
-import az from '../../resources/l10n/az.json';
-import bg from '../../resources/l10n/bg.json';
-import bn from '../../resources/l10n/bn.json';
-import ca from '../../resources/l10n/ca.json';
-import cs from '../../resources/l10n/cs.json';
-import da from '../../resources/l10n/da.json';
-import de from '../../resources/l10n/de.json';
-import el from '../../resources/l10n/el.json';
-import en from '../../resources/l10n/en.json';
-import es from '../../resources/l10n/es.json';
-import fa from '../../resources/l10n/fa.json';
-import fi from '../../resources/l10n/fi.json';
-import fr from '../../resources/l10n/fr.json';
-import gl from '../../resources/l10n/gl.json';
-import he from '../../resources/l10n/he.json';
-import hi from '../../resources/l10n/hi.json';
-import hr from '../../resources/l10n/hr.json';
-import hu from '../../resources/l10n/hu.json';
-import id from '../../resources/l10n/id.json';
-import it from '../../resources/l10n/it.json';
-import ja from '../../resources/l10n/ja.json';
-import ka from '../../resources/l10n/ka.json';
-import kk from '../../resources/l10n/kk.json';
-import km from '../../resources/l10n/km.json';
-import ko from '../../resources/l10n/ko.json';
-import lo from '../../resources/l10n/lo.json';
-import lt from '../../resources/l10n/lt.json';
-import lv from '../../resources/l10n/lv.json';
-import ml from '../../resources/l10n/ml.json';
-import mn from '../../resources/l10n/mn.json';
-import ms from '../../resources/l10n/ms.json';
-import nb from '../../resources/l10n/nb.json';
-import ne from '../../resources/l10n/ne.json';
-import nl from '../../resources/l10n/nl.json';
-import nn from '../../resources/l10n/nn.json';
-import pl from '../../resources/l10n/pl.json';
-import pt from '../../resources/l10n/pt.json';
-import ptBR from '../../resources/l10n/pt_BR.json';
-import ro from '../../resources/l10n/ro.json';
-import ru from '../../resources/l10n/ru.json';
-import si from '../../resources/l10n/si.json';
-import sk from '../../resources/l10n/sk.json';
-import sl from '../../resources/l10n/sl.json';
-import sq from '../../resources/l10n/sq.json';
-import sr from '../../resources/l10n/sr.json';
-import sv from '../../resources/l10n/sv.json';
-import ta from '../../resources/l10n/ta.json';
-import th from '../../resources/l10n/th.json';
-import tr from '../../resources/l10n/tr.json';
-import uk from '../../resources/l10n/uk.json';
-import uz from '../../resources/l10n/uz.json';
-import vi from '../../resources/l10n/vi.json';
-import zh from '../../resources/l10n/zh.json';
-import zhTW from '../../resources/l10n/zh_TW.json';
+import dayjs from 'dayjs';
 import usePersistedState from '../util/usePersistedState';
 
+import af from '../../resources/l10n/af.json'; import 'dayjs/locale/af';
+import ar from '../../resources/l10n/ar.json'; import 'dayjs/locale/ar';
+import az from '../../resources/l10n/az.json'; import 'dayjs/locale/az';
+import bg from '../../resources/l10n/bg.json'; import 'dayjs/locale/bg';
+import bn from '../../resources/l10n/bn.json'; import 'dayjs/locale/bn';
+import ca from '../../resources/l10n/ca.json'; import 'dayjs/locale/ca';
+import cs from '../../resources/l10n/cs.json'; import 'dayjs/locale/cs';
+import da from '../../resources/l10n/da.json'; import 'dayjs/locale/da';
+import de from '../../resources/l10n/de.json'; import 'dayjs/locale/de';
+import el from '../../resources/l10n/el.json'; import 'dayjs/locale/el';
+import en from '../../resources/l10n/en.json'; import 'dayjs/locale/en';
+import es from '../../resources/l10n/es.json'; import 'dayjs/locale/es';
+import fa from '../../resources/l10n/fa.json'; import 'dayjs/locale/fa';
+import fi from '../../resources/l10n/fi.json'; import 'dayjs/locale/fi';
+import fr from '../../resources/l10n/fr.json'; import 'dayjs/locale/fr';
+import gl from '../../resources/l10n/gl.json'; import 'dayjs/locale/gl';
+import he from '../../resources/l10n/he.json'; import 'dayjs/locale/he';
+import hi from '../../resources/l10n/hi.json'; import 'dayjs/locale/hi';
+import hr from '../../resources/l10n/hr.json'; import 'dayjs/locale/hr';
+import hu from '../../resources/l10n/hu.json'; import 'dayjs/locale/hu';
+import id from '../../resources/l10n/id.json'; import 'dayjs/locale/id';
+import it from '../../resources/l10n/it.json'; import 'dayjs/locale/it';
+import ja from '../../resources/l10n/ja.json'; import 'dayjs/locale/ja';
+import ka from '../../resources/l10n/ka.json'; import 'dayjs/locale/ka';
+import kk from '../../resources/l10n/kk.json'; import 'dayjs/locale/kk';
+import km from '../../resources/l10n/km.json'; import 'dayjs/locale/km';
+import ko from '../../resources/l10n/ko.json'; import 'dayjs/locale/ko';
+import lo from '../../resources/l10n/lo.json'; import 'dayjs/locale/lo';
+import lt from '../../resources/l10n/lt.json'; import 'dayjs/locale/lt';
+import lv from '../../resources/l10n/lv.json'; import 'dayjs/locale/lv';
+import ml from '../../resources/l10n/ml.json'; import 'dayjs/locale/ml';
+import mn from '../../resources/l10n/mn.json'; import 'dayjs/locale/mn';
+import ms from '../../resources/l10n/ms.json'; import 'dayjs/locale/ms';
+import nb from '../../resources/l10n/nb.json'; import 'dayjs/locale/nb';
+import ne from '../../resources/l10n/ne.json'; import 'dayjs/locale/ne';
+import nl from '../../resources/l10n/nl.json'; import 'dayjs/locale/nl';
+import nn from '../../resources/l10n/nn.json'; import 'dayjs/locale/nn';
+import pl from '../../resources/l10n/pl.json'; import 'dayjs/locale/pl';
+import pt from '../../resources/l10n/pt.json'; import 'dayjs/locale/pt';
+import ptBR from '../../resources/l10n/pt_BR.json'; import 'dayjs/locale/pt-br';
+import ro from '../../resources/l10n/ro.json'; import 'dayjs/locale/ro';
+import ru from '../../resources/l10n/ru.json'; import 'dayjs/locale/ru';
+import si from '../../resources/l10n/si.json'; import 'dayjs/locale/si';
+import sk from '../../resources/l10n/sk.json'; import 'dayjs/locale/sk';
+import sl from '../../resources/l10n/sl.json'; import 'dayjs/locale/sl';
+import sq from '../../resources/l10n/sq.json'; import 'dayjs/locale/sq';
+import sr from '../../resources/l10n/sr.json'; import 'dayjs/locale/sr';
+import sv from '../../resources/l10n/sv.json'; import 'dayjs/locale/sv';
+import ta from '../../resources/l10n/ta.json'; import 'dayjs/locale/ta';
+import th from '../../resources/l10n/th.json'; import 'dayjs/locale/th';
+import tr from '../../resources/l10n/tr.json'; import 'dayjs/locale/tr';
+import uk from '../../resources/l10n/uk.json'; import 'dayjs/locale/uk';
+import uz from '../../resources/l10n/uz.json'; import 'dayjs/locale/uz';
+import vi from '../../resources/l10n/vi.json'; import 'dayjs/locale/vi';
+import zh from '../../resources/l10n/zh.json'; import 'dayjs/locale/zh';
+import zhTW from '../../resources/l10n/zh_TW.json'; import 'dayjs/locale/zh-tw';
+
 const languages = {
   af: { data: af, country: 'ZA', name: 'Afrikaans' },
   ar: { data: ar, country: 'AE', name: 'العربية' },
@@ -156,14 +155,12 @@ export const LocalizationProvider = ({ children }) => {
 
   useEffect(() => {
     let selected;
-    if (language === 'zh') {
-      selected = 'zh-cn';
-    } else if (language.length > 2) {
+    if (language.length > 2) {
       selected = `${language.slice(0, 2)}-${language.slice(-2).toLowerCase()}`;
     } else {
       selected = language;
     }
-    moment.locale([selected, 'en']);
+    dayjs.locale(selected);
   }, [language]);
 
   return (
diff --git a/modern/src/common/util/formatter.js b/modern/src/common/util/formatter.js
index b00896c2..370542d1 100644
--- a/modern/src/common/util/formatter.js
+++ b/modern/src/common/util/formatter.js
@@ -1,4 +1,8 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
+import 'dayjs/plugin/duration';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
 import {
   altitudeFromMeters,
   altitudeUnitString,
@@ -11,6 +15,9 @@ import {
 } from './converter';
 import { prefixString } from './stringUtils';
 
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+
 export const formatBoolean = (value, t) => (value ? t('sharedYes') : t('sharedNo'));
 
 export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
@@ -25,16 +32,16 @@ export const formatConsumption = (value, t) => `${value} ${t('sharedLiterPerHour
 
 export const formatTime = (value, format, hours12) => {
   if (value) {
-    const m = moment(value);
+    const d = dayjs(value);
     switch (format) {
       case 'date':
-        return m.format('YYYY-MM-DD');
+        return d.format('YYYY-MM-DD');
       case 'time':
-        return m.format(hours12 ? 'hh:mm:ss A' : 'HH:mm:ss');
+        return d.format(hours12 ? 'hh:mm:ss A' : 'HH:mm:ss');
       case 'minutes':
-        return m.format(hours12 ? 'YYYY-MM-DD hh:mm A' : 'YYYY-MM-DD HH:mm');
+        return d.format(hours12 ? 'YYYY-MM-DD hh:mm A' : 'YYYY-MM-DD HH:mm');
       default:
-        return m.format(hours12 ? 'YYYY-MM-DD hh:mm:ss A' : 'YYYY-MM-DD HH:mm:ss');
+        return d.format(hours12 ? 'YYYY-MM-DD hh:mm:ss A' : 'YYYY-MM-DD HH:mm:ss');
     }
   }
   return '';
@@ -60,7 +67,7 @@ export const formatSpeed = (value, unit, t) => `${speedFromKnots(value, unit).to
 
 export const formatVolume = (value, unit, t) => `${volumeFromLiters(value, unit).toFixed(2)} ${volumeUnitString(unit, t)}`;
 
-export const formatHours = (value) => moment.duration(value).humanize();
+export const formatHours = (value) => dayjs.duration(value).humanize();
 
 export const formatNumericHours = (value, t) => {
   const hours = Math.floor(value / 3600000);
diff --git a/modern/src/login/LoginPage.jsx b/modern/src/login/LoginPage.jsx
index a177505c..73104def 100644
--- a/modern/src/login/LoginPage.jsx
+++ b/modern/src/login/LoginPage.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   useMediaQuery, InputLabel, Select, MenuItem, FormControl, Button, TextField, Link, Snackbar, IconButton, Tooltip, LinearProgress, Box,
 } from '@mui/material';
@@ -72,7 +72,7 @@ const LoginPage = () => {
     if (nativeEnvironment) {
       let token = '';
       try {
-        const expiration = moment().add(6, 'months').toISOString();
+        const expiration = dayjs().add(6, 'months').toISOString();
         const response = await fetch('/api/session/token', {
           method: 'POST',
           body: new URLSearchParams(`expiration=${expiration}`),
diff --git a/modern/src/main/DeviceRow.jsx b/modern/src/main/DeviceRow.jsx
index 82ffb1b5..9f6f3a22 100644
--- a/modern/src/main/DeviceRow.jsx
+++ b/modern/src/main/DeviceRow.jsx
@@ -11,7 +11,8 @@ import BatteryCharging60Icon from '@mui/icons-material/BatteryCharging60';
 import Battery20Icon from '@mui/icons-material/Battery20';
 import BatteryCharging20Icon from '@mui/icons-material/BatteryCharging20';
 import ErrorIcon from '@mui/icons-material/Error';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { devicesActions } from '../store';
 import {
   formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
@@ -22,6 +23,8 @@ import { useAdministrator } from '../common/util/permissions';
 import { ReactComponent as EngineIcon } from '../resources/images/data/engine.svg';
 import { useAttributePreference } from '../common/util/preferences';
 
+dayjs.extend(relativeTime);
+
 const useStyles = makeStyles((theme) => ({
   icon: {
     width: '25px',
@@ -65,7 +68,7 @@ const DeviceRow = ({ data, index, style }) => {
     if (item.status === 'online' || !item.lastUpdate) {
       status = formatStatus(item.status, t);
     } else {
-      status = moment(item.lastUpdate).fromNow();
+      status = dayjs(item.lastUpdate).fromNow();
     }
     return (
       <>
diff --git a/modern/src/main/useFilter.js b/modern/src/main/useFilter.js
index 96a8c4b9..ccda6e14 100644
--- a/modern/src/main/useFilter.js
+++ b/modern/src/main/useFilter.js
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 export default (keyword, filter, filterSort, filterMap, positions, setFilteredDevices, setFilteredPositions) => {
   const groups = useSelector((state) => state.groups.items);
@@ -30,8 +30,8 @@ export default (keyword, filter, filterSort, filterMap, positions, setFilteredDe
         break;
       case 'lastUpdate':
         filtered.sort((device1, device2) => {
-          const time1 = device1.lastUpdate ? moment(device1.lastUpdate).valueOf() : 0;
-          const time2 = device2.lastUpdate ? moment(device2.lastUpdate).valueOf() : 0;
+          const time1 = device1.lastUpdate ? dayjs(device1.lastUpdate).valueOf() : 0;
+          const time2 = device2.lastUpdate ? dayjs(device2.lastUpdate).valueOf() : 0;
           return time2 - time1;
         });
         break;
diff --git a/modern/src/reports/ChartReportPage.jsx b/modern/src/reports/ChartReportPage.jsx
index 643625df..6175e1d8 100644
--- a/modern/src/reports/ChartReportPage.jsx
+++ b/modern/src/reports/ChartReportPage.jsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useState } from 'react';
 import {
   FormControl, InputLabel, Select, MenuItem,
@@ -52,7 +52,7 @@ const ChartReportPage = () => {
       const formattedPositions = positions.map((position) => {
         const data = { ...position, ...position.attributes };
         const formatted = {};
-        formatted.fixTime = moment(position.fixTime).valueOf();
+        formatted.fixTime = dayjs(position.fixTime).valueOf();
         Object.keys(data).filter((key) => !['id', 'deviceId'].includes(key)).forEach((key) => {
           const value = data[key];
           if (typeof value === 'number') {
diff --git a/modern/src/reports/components/ReportFilter.jsx b/modern/src/reports/components/ReportFilter.jsx
index ff0dc146..eab7d0eb 100644
--- a/modern/src/reports/components/ReportFilter.jsx
+++ b/modern/src/reports/components/ReportFilter.jsx
@@ -3,7 +3,7 @@ import {
   FormControl, InputLabel, Select, MenuItem, Button, TextField, Typography,
 } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 import useReportStyles from '../common/useReportStyles';
 import { devicesActions, reportsActions } from '../../store';
@@ -47,32 +47,32 @@ const ReportFilter = ({ children, handleSubmit, handleSchedule, showOnly, ignore
       let selectedTo;
       switch (period) {
         case 'today':
-          selectedFrom = moment().startOf('day');
-          selectedTo = moment().endOf('day');
+          selectedFrom = dayjs().startOf('day');
+          selectedTo = dayjs().endOf('day');
           break;
         case 'yesterday':
-          selectedFrom = moment().subtract(1, 'day').startOf('day');
-          selectedTo = moment().subtract(1, 'day').endOf('day');
+          selectedFrom = dayjs().subtract(1, 'day').startOf('day');
+          selectedTo = dayjs().subtract(1, 'day').endOf('day');
           break;
         case 'thisWeek':
-          selectedFrom = moment().startOf('week');
-          selectedTo = moment().endOf('week');
+          selectedFrom = dayjs().startOf('week');
+          selectedTo = dayjs().endOf('week');
           break;
         case 'previousWeek':
-          selectedFrom = moment().subtract(1, 'week').startOf('week');
-          selectedTo = moment().subtract(1, 'week').endOf('week');
+          selectedFrom = dayjs().subtract(1, 'week').startOf('week');
+          selectedTo = dayjs().subtract(1, 'week').endOf('week');
           break;
         case 'thisMonth':
-          selectedFrom = moment().startOf('month');
-          selectedTo = moment().endOf('month');
+          selectedFrom = dayjs().startOf('month');
+          selectedTo = dayjs().endOf('month');
           break;
         case 'previousMonth':
-          selectedFrom = moment().subtract(1, 'month').startOf('month');
-          selectedTo = moment().subtract(1, 'month').endOf('month');
+          selectedFrom = dayjs().subtract(1, 'month').startOf('month');
+          selectedTo = dayjs().subtract(1, 'month').endOf('month');
           break;
         default:
-          selectedFrom = moment(from, moment.HTML5_FMT.DATETIME_LOCAL);
-          selectedTo = moment(to, moment.HTML5_FMT.DATETIME_LOCAL);
+          selectedFrom = dayjs(from, 'YYYY-MM-DDTHH:mm');
+          selectedTo = dayjs(to, 'YYYY-MM-DDTHH:mm');
           break;
       }
 
diff --git a/modern/src/settings/CalendarPage.jsx b/modern/src/settings/CalendarPage.jsx
index 2868d3d5..099858a3 100644
--- a/modern/src/settings/CalendarPage.jsx
+++ b/modern/src/settings/CalendarPage.jsx
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import dayjs from 'dayjs';
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import TextField from '@mui/material/TextField';
@@ -53,8 +53,8 @@ const simpleCalendar = () => window.btoa([
   'PRODID:-//Traccar//NONSGML Traccar//EN',
   'BEGIN:VEVENT',
   'UID:00000000-0000-0000-0000-000000000000',
-  `DTSTART;${formatCalendarTime(moment())}`,
-  `DTEND;${formatCalendarTime(moment().add(1, 'hours'))}`,
+  `DTSTART;${formatCalendarTime(dayjs())}`,
+  `DTEND;${formatCalendarTime(dayjs().add(1, 'hours'))}`,
   'RRULE:FREQ=DAILY',
   'SUMMARY:Event',
   'END:VEVENT',
@@ -148,18 +148,18 @@ const CalendarPage = () => {
                   <TextField
                     label={t('reportFrom')}
                     type="datetime-local"
-                    value={moment(lines[5].slice(-15)).locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL)}
+                    value={dayjs(lines[5].slice(-15)).locale('en').format('YYYY-MM-DDTHH:mm')}
                     onChange={(e) => {
-                      const time = formatCalendarTime(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL));
+                      const time = formatCalendarTime(dayjs(e.target.value, 'YYYY-MM-DDTHH:mm'));
                       setItem({ ...item, data: updateCalendar(lines, 5, `DTSTART;${time}`) });
                     }}
                   />
                   <TextField
                     label={t('reportTo')}
                     type="datetime-local"
-                    value={moment(lines[6].slice(-15)).locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL)}
+                    value={dayjs(lines[6].slice(-15)).locale('en').format('YYYY-MM-DDTHH:mm')}
                     onChange={(e) => {
-                      const time = formatCalendarTime(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL));
+                      const time = formatCalendarTime(dayjs(e.target.value, 'YYYY-MM-DDTHH:mm'));
                       setItem({ ...item, data: updateCalendar(lines, 6, `DTEND;${time}`) });
                     }}
                   />
diff --git a/modern/src/settings/DevicePage.jsx b/modern/src/settings/DevicePage.jsx
index 11d122d3..435a48bd 100644
--- a/modern/src/settings/DevicePage.jsx
+++ b/modern/src/settings/DevicePage.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import {
   Accordion,
   AccordionSummary,
@@ -137,8 +137,8 @@ const DevicePage = () => {
               <TextField
                 label={t('userExpirationTime')}
                 type="date"
-                value={(item.expirationTime && moment(item.expirationTime).locale('en').format(moment.HTML5_FMT.DATE)) || '2099-01-01'}
-                onChange={(e) => setItem({ ...item, expirationTime: moment(e.target.value, moment.HTML5_FMT.DATE).locale('en').format() })}
+                value={(item.expirationTime && dayjs(item.expirationTime).locale('en').format('YYYY-MM-DD')) || '2099-01-01'}
+                onChange={(e) => setItem({ ...item, expirationTime: dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format() })}
                 disabled={!admin}
               />
               <FormControlLabel
diff --git a/modern/src/settings/PreferencesPage.jsx b/modern/src/settings/PreferencesPage.jsx
index 15fd762a..e0673688 100644
--- a/modern/src/settings/PreferencesPage.jsx
+++ b/modern/src/settings/PreferencesPage.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -70,7 +70,7 @@ const PreferencesPage = () => {
   const socket = useSelector((state) => state.session.socket);
 
   const [token, setToken] = useState(null);
-  const [tokenExpiration, setTokenExpiration] = useState(moment().add(1, 'week').locale('en').format(moment.HTML5_FMT.DATE));
+  const [tokenExpiration, setTokenExpiration] = useState(dayjs().add(1, 'week').locale('en').format('YYYY-MM-DD'));
 
   const mapStyles = useMapStyles();
   const mapOverlays = useMapOverlays();
@@ -80,7 +80,7 @@ const PreferencesPage = () => {
   const filter = createFilterOptions();
 
   const generateToken = useCatch(async () => {
-    const expiration = moment(tokenExpiration, moment.HTML5_FMT.DATE).toISOString();
+    const expiration = dayjs(tokenExpiration, 'YYYY-MM-DD').toISOString();
     const response = await fetch('/api/session/token', {
       method: 'POST',
       body: new URLSearchParams(`expiration=${expiration}`),
diff --git a/modern/src/settings/UserPage.jsx b/modern/src/settings/UserPage.jsx
index 21859ea7..939859ae 100644
--- a/modern/src/settings/UserPage.jsx
+++ b/modern/src/settings/UserPage.jsx
@@ -19,7 +19,7 @@ import makeStyles from '@mui/styles/makeStyles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import { useDispatch, useSelector } from 'react-redux';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import EditItemView from './components/EditItemView';
 import EditAttributesAccordion from './components/EditAttributesAccordion';
 import { useTranslation } from '../common/components/LocalizationProvider';
@@ -304,8 +304,8 @@ const UserPage = () => {
               <TextField
                 label={t('userExpirationTime')}
                 type="date"
-                value={(item.expirationTime && moment(item.expirationTime).locale('en').format(moment.HTML5_FMT.DATE)) || '2099-01-01'}
-                onChange={(e) => setItem({ ...item, expirationTime: moment(e.target.value, moment.HTML5_FMT.DATE).locale('en').format() })}
+                value={(item.expirationTime && dayjs(item.expirationTime).locale('en').format('YYYY-MM-DD')) || '2099-01-01'}
+                onChange={(e) => setItem({ ...item, expirationTime: dayjs(e.target.value, 'YYYY-MM-DD').locale('en').format() })}
                 disabled={!manager}
               />
               <TextField
diff --git a/modern/src/store/reports.js b/modern/src/store/reports.js
index 9834c8b8..d0c1f6dd 100644
--- a/modern/src/store/reports.js
+++ b/modern/src/store/reports.js
@@ -1,13 +1,13 @@
 import { createSlice } from '@reduxjs/toolkit';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const { reducer, actions } = createSlice({
   name: 'reports',
   initialState: {
     groupIds: [],
     period: 'today',
-    from: moment().subtract(1, 'hour').locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL),
-    to: moment().locale('en').format(moment.HTML5_FMT.DATETIME_LOCAL),
+    from: dayjs().subtract(1, 'hour').locale('en').format('YYYY-MM-DDTHH:mm'),
+    to: dayjs().locale('en').format('YYYY-MM-DDTHH:mm'),
   },
   reducers: {
     updateGroupIds(state, action) {