Organize common code

56 files changed, 82 insertions, 82 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index ab13f992..4eb73211 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -39,16 +39,16 @@ import LoginPage from './login/LoginPage';
 import RegisterPage from './login/RegisterPage';
 import ResetPasswordPage from './login/ResetPasswordPage';
 
-import theme from './theme';
+import theme from './common/theme';
 import GeofencesPage from './GeofencesPage';
 import GeofencePage from './GeofencePage';
 import { LocalizationProvider } from './LocalizationProvider';
-import useQuery from './common/useQuery';
+import useQuery from './common/util/useQuery';
 import { useEffectAsync } from './reactHelper';
 import { devicesActions } from './store';
 import EventPage from './EventPage';
 import PreferencesPage from './settings/PreferencesPage';
-import BottomMenu from './components/BottomMenu';
+import BottomMenu from './common/components/BottomMenu';
 import AccumulatorsPage from './settings/AccumulatorsPage';
 import SendCommandPage from './settings/SendCommandPage';
 
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 560bbd20..c57faa84 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -8,12 +8,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditItemView from './EditItemView';
 import EditAttributesView from './attributes/EditAttributesView';
 import SelectField from './form/SelectField';
-import deviceCategories from './common/deviceCategories';
+import deviceCategories from './common/util/deviceCategories';
 import LinkField from './form/LinkField';
-import { prefixString } from './common/stringUtils';
+import { prefixString } from './common/util/stringUtils';
 import { useTranslation } from './LocalizationProvider';
 import useDeviceAttributes from './attributes/useDeviceAttributes';
-import { useAdministrator } from './common/permissions';
+import { useAdministrator } from './common/util/permissions';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 5b7a2db9..6eeaec41 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -25,7 +25,7 @@ import EditCollectionView from './EditCollectionView';
 import { useEffectAsync } from './reactHelper';
 import {
   formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
-} from './common/formatter';
+} from './common/util/formatter';
 import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/modern/src/EditCollectionView.js b/modern/src/EditCollectionView.js
index 11fe490a..9ed0362a 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/EditCollectionView.js
@@ -6,10 +6,10 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 
-import RemoveDialog from './RemoveDialog';
+import RemoveDialog from './common/components/RemoveDialog';
 import { useTranslation } from './LocalizationProvider';
-import dimensions from './theme/dimensions';
-import { useEditable } from './common/permissions';
+import dimensions from './common/theme/dimensions';
+import { useEditable } from './common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   fab: {
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index d2c663a3..33f3df8e 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import usePersistedState from './common/usePersistedState';
+import usePersistedState from './common/util/usePersistedState';
 
 import af from '../../web/l10n/af.json';
 import ar from '../../web/l10n/ar.json';
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 1bb52519..70d2a32b 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -19,16 +19,16 @@ import AccuracyMap from './map/main/AccuracyMap';
 import GeofenceMap from './map/main/GeofenceMap';
 import CurrentPositionsMap from './map/main/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
-import BottomMenu from './components/BottomMenu';
+import BottomMenu from './common/components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 import PoiMap from './map/main/PoiMap';
 import MapPadding from './map/MapPadding';
 import StatusCard from './map/main/StatusCard';
 import { devicesActions } from './store';
 import DefaultCameraMap from './map/main/DefaultCameraMap';
-import usePersistedState from './common/usePersistedState';
+import usePersistedState from './common/util/usePersistedState';
 import LiveRoutesMap from './map/main/LiveRoutesMap';
-import { useDeviceReadonly } from './common/permissions';
+import { useDeviceReadonly } from './common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 6a9809d4..946e4a75 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -7,9 +7,9 @@ import {
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory, useParams } from 'react-router-dom';
 import { useEffectAsync } from './reactHelper';
-import { prefixString } from './common/stringUtils';
+import { prefixString } from './common/util/stringUtils';
 import { useTranslation } from './LocalizationProvider';
-import PositionValue from './components/PositionValue';
+import PositionValue from './common/components/PositionValue';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
index d0dd707f..6cae602f 100644
--- a/modern/src/RegisterDialog.js
+++ b/modern/src/RegisterDialog.js
@@ -7,7 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText';
 import TextField from '@material-ui/core/TextField';
 import Snackbar from '@material-ui/core/Snackbar';
 import { useTranslation } from './LocalizationProvider';
-import { snackBarDurationShortMs } from './common/duration';
+import { snackBarDurationShortMs } from './common/util/duration';
 
 const RegisterDialog = ({ showDialog, onResult }) => {
   const t = useTranslation();
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 28ca29ab..adf6ffa5 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -6,8 +6,8 @@ import { useHistory } from 'react-router-dom';
 import { positionsActions, devicesActions, sessionActions } from './store';
 import { useEffectAsync } from './reactHelper';
 import { useTranslation } from './LocalizationProvider';
-import { prefixString } from './common/stringUtils';
-import { snackBarDurationLongMs } from './common/duration';
+import { prefixString } from './common/util/stringUtils';
+import { snackBarDurationLongMs } from './common/util/duration';
 
 const SocketController = () => {
   const dispatch = useDispatch();
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/admin/StatisticsPage.js
index 5088178e..b8caa9ec 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/admin/StatisticsPage.js
@@ -3,7 +3,7 @@ import {
   FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
 } from '@material-ui/core';
 import moment from 'moment';
-import { formatDate } from '../common/formatter';
+import { formatDate } from '../common/util/formatter';
 import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
diff --git a/modern/src/admin/UsersPage.js b/modern/src/admin/UsersPage.js
index b609c91a..d8e8bc3c 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/admin/UsersPage.js
@@ -5,7 +5,7 @@ import {
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
-import { formatBoolean } from '../common/formatter';
+import { formatBoolean } from '../common/util/formatter';
 import OptionsLayout from '../settings/OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/attributes/EditAttributesView.js
index 9ca42d2f..3618aa2f 100644
--- a/modern/src/attributes/EditAttributesView.js
+++ b/modern/src/attributes/EditAttributesView.js
@@ -7,10 +7,10 @@ import CloseIcon from '@material-ui/icons/Close';
 import AddIcon from '@material-ui/icons/Add';
 import AddAttributeDialog from './AddAttributeDialog';
 import { useTranslation } from '../LocalizationProvider';
-import { useAttributePreference } from '../common/preferences';
+import { useAttributePreference } from '../common/util/preferences';
 import {
   distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString,
-} from '../common/converter';
+} from '../common/util/converter';
 
 const useStyles = makeStyles((theme) => ({
   addButton: {
diff --git a/modern/src/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js
index ff68a2ef..d26b4ae2 100644
--- a/modern/src/components/BottomMenu.js
+++ b/modern/src/common/components/BottomMenu.js
@@ -11,9 +11,9 @@ import MapIcon from '@material-ui/icons/Map';
 import PersonIcon from '@material-ui/icons/Person';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
-import { sessionActions } from '../store';
-import { useTranslation } from '../LocalizationProvider';
-import { useReadonly } from '../common/permissions';
+import { sessionActions } from '../../store';
+import { useTranslation } from '../../LocalizationProvider';
+import { useReadonly } from '../util/permissions';
 
 const BottomMenu = () => {
   const history = useHistory();
diff --git a/modern/src/components/NavBar.js b/modern/src/common/components/NavBar.js
index ac689e76..ac689e76 100644
--- a/modern/src/components/NavBar.js
+++ b/modern/src/common/components/NavBar.js
diff --git a/modern/src/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index 5a07959d..b160be34 100644
--- a/modern/src/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -3,10 +3,10 @@ import { Link } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 import {
   formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime,
-} from '../common/formatter';
-import { useAttributePreference, usePreference } from '../common/preferences';
-import { useTranslation } from '../LocalizationProvider';
-import { useAdministrator } from '../common/permissions';
+} from '../util/formatter';
+import { useAttributePreference, usePreference } from '../util/preferences';
+import { useTranslation } from '../../LocalizationProvider';
+import { useAdministrator } from '../util/permissions';
 
 const PositionValue = ({ position, property, attribute }) => {
   const t = useTranslation();
diff --git a/modern/src/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js
index 6d191d6a..1b75e926 100644
--- a/modern/src/RemoveDialog.js
+++ b/modern/src/common/components/RemoveDialog.js
@@ -4,7 +4,7 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
-import { useTranslation } from './LocalizationProvider';
+import { useTranslation } from '../../LocalizationProvider';
 
 const RemoveDialog = ({
   open, endpoint, itemId, onResult,
diff --git a/modern/src/components/SideNav.js b/modern/src/common/components/SideNav.js
index ad7c212a..ad7c212a 100644
--- a/modern/src/components/SideNav.js
+++ b/modern/src/common/components/SideNav.js
diff --git a/modern/src/theme/dimensions.js b/modern/src/common/theme/dimensions.js
index fa7d3b25..fa7d3b25 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/common/theme/dimensions.js
diff --git a/modern/src/theme/index.js b/modern/src/common/theme/index.js
index 02865c23..02865c23 100644
--- a/modern/src/theme/index.js
+++ b/modern/src/common/theme/index.js
diff --git a/modern/src/theme/overrides.js b/modern/src/common/theme/overrides.js
index d1fe844c..d1fe844c 100644
--- a/modern/src/theme/overrides.js
+++ b/modern/src/common/theme/overrides.js
diff --git a/modern/src/theme/palette.js b/modern/src/common/theme/palette.js
index 02261950..02261950 100644
--- a/modern/src/theme/palette.js
+++ b/modern/src/common/theme/palette.js
diff --git a/modern/src/common/converter.js b/modern/src/common/util/converter.js
index 61e2dfe6..61e2dfe6 100644
--- a/modern/src/common/converter.js
+++ b/modern/src/common/util/converter.js
diff --git a/modern/src/common/deviceCategories.js b/modern/src/common/util/deviceCategories.js
index f5d749aa..f5d749aa 100644
--- a/modern/src/common/deviceCategories.js
+++ b/modern/src/common/util/deviceCategories.js
diff --git a/modern/src/common/duration.js b/modern/src/common/util/duration.js
index aae74868..aae74868 100644
--- a/modern/src/common/duration.js
+++ b/modern/src/common/util/duration.js
diff --git a/modern/src/common/formatter.js b/modern/src/common/util/formatter.js
index 08e29bc4..08e29bc4 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/util/formatter.js
diff --git a/modern/src/common/permissions.js b/modern/src/common/util/permissions.js
index 72ca0b08..72ca0b08 100644
--- a/modern/src/common/permissions.js
+++ b/modern/src/common/util/permissions.js
diff --git a/modern/src/common/preferences.js b/modern/src/common/util/preferences.js
index aba3c82c..aba3c82c 100644
--- a/modern/src/common/preferences.js
+++ b/modern/src/common/util/preferences.js
diff --git a/modern/src/common/stringUtils.js b/modern/src/common/util/stringUtils.js
index fc997fe0..fc997fe0 100644
--- a/modern/src/common/stringUtils.js
+++ b/modern/src/common/util/stringUtils.js
diff --git a/modern/src/common/usePersistedState.js b/modern/src/common/util/usePersistedState.js
index 8bc4401f..8bc4401f 100644
--- a/modern/src/common/usePersistedState.js
+++ b/modern/src/common/util/usePersistedState.js
diff --git a/modern/src/common/useQuery.js b/modern/src/common/util/useQuery.js
index f246df7c..f246df7c 100644
--- a/modern/src/common/useQuery.js
+++ b/modern/src/common/util/useQuery.js
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index 64570b24..d89ccd73 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -10,7 +10,7 @@ import { useHistory } from 'react-router-dom';
 import { sessionActions } from '../store';
 import { useLocalization, useTranslation } from '../LocalizationProvider';
 import LoginLayout from './LoginLayout';
-import usePersistedState from '../common/usePersistedState';
+import usePersistedState from '../common/util/usePersistedState';
 
 const useStyles = makeStyles((theme) => ({
   legacy: {
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index f622f679..6f252b1a 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -6,7 +6,7 @@ import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../LocalizationProvider';
-import { snackBarDurationShortMs } from '../common/duration';
+import { snackBarDurationShortMs } from '../common/util/duration';
 
 const useStyles = makeStyles((theme) => ({
   title: {
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index 27c30763..86a289ee 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -6,8 +6,8 @@ import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
 import { useTranslation } from '../LocalizationProvider';
-import useQuery from '../common/useQuery';
-import { snackBarDurationShortMs } from '../common/duration';
+import useQuery from '../common/util/useQuery';
+import { snackBarDurationShortMs } from '../common/util/duration';
 
 const useStyles = makeStyles((theme) => ({
   title: {
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 103c1051..74b58beb 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -2,9 +2,9 @@ import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { map } from './core/Map';
-import { getStatusColor } from '../common/formatter';
+import { getStatusColor } from '../common/util/formatter';
 import { devicesActions } from '../store';
-import usePersistedState from '../common/usePersistedState';
+import usePersistedState from '../common/util/usePersistedState';
 
 const PositionsMap = ({ positions }) => {
   const id = 'positions';
diff --git a/modern/src/map/core/Map.js b/modern/src/map/core/Map.js
index b763dca2..e1254af6 100644
--- a/modern/src/map/core/Map.js
+++ b/modern/src/map/core/Map.js
@@ -5,15 +5,15 @@ import React, {
   useRef, useLayoutEffect, useEffect, useState,
 } from 'react';
 import { SwitcherControl } from '../switcher/switcher';
-import deviceCategories from '../../common/deviceCategories';
+import deviceCategories from '../../common/util/deviceCategories';
 import { prepareIcon, loadImage } from './mapUtil';
 import {
   styleCarto, styleLocationIq, styleMapbox, styleMapTiler, styleOsm,
 } from './mapStyles';
-import { useAttributePreference } from '../../common/preferences';
-import palette from '../../theme/palette';
+import { useAttributePreference } from '../../common/util/preferences';
+import palette from '../../common/theme/palette';
 import { useTranslation } from '../../LocalizationProvider';
-import usePersistedState, { savePersistedState } from '../../common/usePersistedState';
+import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
 
 const element = document.createElement('div');
 element.style.width = '100%';
diff --git a/modern/src/map/main/DefaultCameraMap.js b/modern/src/map/main/DefaultCameraMap.js
index e8baadc4..256fbd04 100644
--- a/modern/src/map/main/DefaultCameraMap.js
+++ b/modern/src/map/main/DefaultCameraMap.js
@@ -1,7 +1,7 @@
 import maplibregl from 'maplibre-gl';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { usePreference } from '../../common/preferences';
+import { usePreference } from '../../common/util/preferences';
 import { map } from '../core/Map';
 
 const DefaultCameraMap = () => {
diff --git a/modern/src/map/main/PoiMap.js b/modern/src/map/main/PoiMap.js
index 4635148a..5874f356 100644
--- a/modern/src/map/main/PoiMap.js
+++ b/modern/src/map/main/PoiMap.js
@@ -3,7 +3,7 @@ import { kml } from '@tmcw/togeojson';
 
 import { map } from '../core/Map';
 import { useEffectAsync } from '../../reactHelper';
-import { usePreference } from '../../common/preferences';
+import { usePreference } from '../../common/util/preferences';
 
 const PoiMap = () => {
   const id = 'poi';
diff --git a/modern/src/map/main/SelectedDeviceMap.js b/modern/src/map/main/SelectedDeviceMap.js
index b5392b70..250be372 100644
--- a/modern/src/map/main/SelectedDeviceMap.js
+++ b/modern/src/map/main/SelectedDeviceMap.js
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
 
 import { useSelector } from 'react-redux';
-import dimensions from '../../theme/dimensions';
+import dimensions from '../../common/theme/dimensions';
 import { map } from '../core/Map';
 import { usePrevious } from '../../reactHelper';
-import usePersistedState from '../../common/usePersistedState';
+import usePersistedState from '../../common/util/usePersistedState';
 
 const SelectedDeviceMap = () => {
   const selectedDeviceId = useSelector((state) => state.devices.selectedId);
diff --git a/modern/src/map/main/StatusCard.js b/modern/src/map/main/StatusCard.js
index d431e647..33f924b3 100644
--- a/modern/src/map/main/StatusCard.js
+++ b/modern/src/map/main/StatusCard.js
@@ -11,11 +11,11 @@ import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 
 import { useTranslation } from '../../LocalizationProvider';
-import { formatStatus } from '../../common/formatter';
-import RemoveDialog from '../../RemoveDialog';
-import PositionValue from '../../components/PositionValue';
-import dimensions from '../../theme/dimensions';
-import { useDeviceReadonly, useReadonly } from '../../common/permissions';
+import { formatStatus } from '../../common/util/formatter';
+import RemoveDialog from '../../common/components/RemoveDialog';
+import PositionValue from '../../common/components/PositionValue';
+import dimensions from '../../common/theme/dimensions';
+import { useDeviceReadonly, useReadonly } from '../../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   card: {
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 3639b98a..8803f2be 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -5,9 +5,9 @@ import {
 import ReportLayout from './ReportLayout';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
-import { useAttributePreference } from '../common/preferences';
-import { formatDate } from '../common/formatter';
-import { speedFromKnots } from '../common/converter';
+import { useAttributePreference } from '../common/util/preferences';
+import { formatDate } from '../common/util/formatter';
+import { speedFromKnots } from '../common/util/converter';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ children, setItems }) => {
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index b76ee955..45bb4c25 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -5,10 +5,10 @@ import {
 } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
-import { formatDate } from '../common/formatter';
+import { formatDate } from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
-import { prefixString } from '../common/stringUtils';
+import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 3f05aec8..a8d4844f 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -13,7 +13,7 @@ import { useSelector } from 'react-redux';
 import Map from '../map/core/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
-import { formatTime } from '../common/formatter';
+import { formatTime } from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import { useTranslation } from '../LocalizationProvider';
 
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js
index bacebddf..b2be2ac1 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/ReportLayout.js
@@ -11,8 +11,8 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import SideNav from '../components/SideNav';
-import NavBar from '../components/NavBar';
+import SideNav from '../common/components/SideNav';
+import NavBar from '../common/components/NavBar';
 import { useTranslation } from '../LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 3be2107b..a3549924 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -4,10 +4,10 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
-} from '../common/formatter';
+} from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
-import { useAttributePreference, usePreference } from '../common/preferences';
+import { useAttributePreference, usePreference } from '../common/util/preferences';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index aa668d57..b0c5169f 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -3,10 +3,10 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
-} from '../common/formatter';
+} from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
-import { useAttributePreference } from '../common/preferences';
+import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index d993d2e8..f86a55fe 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -4,10 +4,10 @@ import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
-} from '../common/formatter';
+} from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
-import { useAttributePreference } from '../common/preferences';
+import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 632da7cc..7a74e673 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -3,10 +3,10 @@ import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
-} from '../common/formatter';
+} from '../common/util/formatter';
 import ReportFilter from './ReportFilter';
 import ReportLayout from './ReportLayout';
-import { useAttributePreference } from '../common/preferences';
+import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../LocalizationProvider';
 
 const Filter = ({ setItems }) => {
diff --git a/modern/src/settings/BaseCommandView.js b/modern/src/settings/BaseCommandView.js
index 51151588..03605d0f 100644
--- a/modern/src/settings/BaseCommandView.js
+++ b/modern/src/settings/BaseCommandView.js
@@ -4,7 +4,7 @@ import {
 } from '@material-ui/core';
 import { useTranslation } from '../LocalizationProvider';
 import SelectField from '../form/SelectField';
-import { prefixString } from '../common/stringUtils';
+import { prefixString } from '../common/util/stringUtils';
 import useCommandAttributes from '../attributes/useCommandAttributes';
 
 const BaseCommandView = ({ item, setItem }) => {
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index bf6b10aa..c9240f11 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -7,8 +7,8 @@ import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
-import { formatBoolean } from '../common/formatter';
-import { prefixString } from '../common/stringUtils';
+import { formatBoolean } from '../common/util/formatter';
+import { prefixString } from '../common/util/stringUtils';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 27be681e..40c7e339 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -7,7 +7,7 @@ import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 import OptionsLayout from './OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
-import { useAdministrator } from '../common/permissions';
+import { useAdministrator } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index a612abb7..7f539ddf 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -4,13 +4,13 @@ import {
 } from '@material-ui/core';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { prefixString } from '../common/stringUtils';
+import { prefixString } from '../common/util/stringUtils';
 import EditItemView from '../EditItemView';
 import EditAttributesView from '../attributes/EditAttributesView';
-import { useAttributePreference } from '../common/preferences';
+import { useAttributePreference } from '../common/util/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
-} from '../common/converter';
+} from '../common/util/converter';
 import { useTranslation } from '../LocalizationProvider';
 import usePositionAttributes from '../attributes/usePositionAttributes';
 
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 87207f0f..a5ef530e 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -7,8 +7,8 @@ import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
 
 import usePositionAttributes from '../attributes/usePositionAttributes';
-import { formatDistance, formatSpeed } from '../common/formatter';
-import { useAttributePreference } from '../common/preferences';
+import { formatDistance, formatSpeed } from '../common/util/formatter';
+import { useAttributePreference } from '../common/util/preferences';
 import OptionsLayout from './OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 1e214ddd..3daa4e51 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -6,7 +6,7 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useTranslation, useTranslationKeys } from '../LocalizationProvider';
 import EditItemView from '../EditItemView';
-import { prefixString, unprefixString } from '../common/stringUtils';
+import { prefixString, unprefixString } from '../common/util/stringUtils';
 import SelectField from '../form/SelectField';
 
 const useStyles = makeStyles(() => ({
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 965e8c33..9bc553d6 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -5,8 +5,8 @@ import {
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
 import EditCollectionView from '../EditCollectionView';
-import { prefixString } from '../common/stringUtils';
-import { formatBoolean } from '../common/formatter';
+import { prefixString } from '../common/util/stringUtils';
+import { formatBoolean } from '../common/util/formatter';
 import OptionsLayout from './OptionsLayout';
 import { useTranslation } from '../LocalizationProvider';
 
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/OptionsLayout.js
index c70ef7fe..b427d0c0 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/OptionsLayout.js
@@ -23,10 +23,10 @@ import BarChartIcon from '@material-ui/icons/BarChart';
 import TodayIcon from '@material-ui/icons/Today';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
-import SideNav from '../components/SideNav';
-import NavBar from '../components/NavBar';
+import SideNav from '../common/components/SideNav';
+import NavBar from '../common/components/NavBar';
 import { useTranslation } from '../LocalizationProvider';
-import { useAdministrator, useReadonly } from '../common/permissions';
+import { useAdministrator, useReadonly } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index 3c7862c7..bd03f8d2 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -5,7 +5,7 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useLocalization, useTranslation } from '../LocalizationProvider';
 import OptionsLayout from './OptionsLayout';
-import usePersistedState from '../common/usePersistedState';
+import usePersistedState from '../common/util/usePersistedState';
 
 const useStyles = makeStyles((theme) => ({
   container: {