Reorganize remaining files

64 files changed, 251 insertions, 348 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index 4eb73211..5c5c2591 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -4,20 +4,20 @@ import { Switch, Route, useHistory } from 'react-router-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles, LinearProgress, useMediaQuery } from '@material-ui/core';
-import MainPage from './MainPage';
+import MainPage from './main/MainPage';
 import RouteReportPage from './reports/RouteReportPage';
-import ServerPage from './admin/ServerPage';
-import UsersPage from './admin/UsersPage';
-import DevicePage from './DevicePage';
-import UserPage from './UserPage';
+import ServerPage from './settings/ServerPage';
+import UsersPage from './settings/UsersPage';
+import DevicePage from './settings/DevicePage';
+import UserPage from './settings/UserPage';
 import SocketController from './SocketController';
 import NotificationsPage from './settings/NotificationsPage';
 import NotificationPage from './settings/NotificationPage';
 import GroupsPage from './settings/GroupsPage';
 import GroupPage from './settings/GroupPage';
-import PositionPage from './PositionPage';
+import PositionPage from './main/PositionPage';
 import EventReportPage from './reports/EventReportPage';
-import ReplayPage from './reports/ReplayPage';
+import ReplayPage from './other/ReplayPage';
 import TripReportPage from './reports/TripReportPage';
 import StopReportPage from './reports/StopReportPage';
 import SummaryReportPage from './reports/SummaryReportPage';
@@ -32,7 +32,7 @@ import MaintenancesPage from './settings/MaintenancesPage';
 import MaintenancePage from './settings/MaintenancePage';
 import CommandsPage from './settings/CommandsPage';
 import CommandPage from './settings/CommandPage';
-import StatisticsPage from './admin/StatisticsPage';
+import StatisticsPage from './reports/StatisticsPage';
 import CachingController from './CachingController';
 
 import LoginPage from './login/LoginPage';
@@ -40,17 +40,17 @@ import RegisterPage from './login/RegisterPage';
 import ResetPasswordPage from './login/ResetPasswordPage';
 
 import theme from './common/theme';
-import GeofencesPage from './GeofencesPage';
-import GeofencePage from './GeofencePage';
-import { LocalizationProvider } from './LocalizationProvider';
+import GeofencesPage from './other/GeofencesPage';
+import GeofencePage from './settings/GeofencePage';
+import { LocalizationProvider } from './common/components/LocalizationProvider';
 import useQuery from './common/util/useQuery';
 import { useEffectAsync } from './reactHelper';
 import { devicesActions } from './store';
-import EventPage from './EventPage';
+import EventPage from './other/EventPage';
 import PreferencesPage from './settings/PreferencesPage';
 import BottomMenu from './common/components/BottomMenu';
 import AccumulatorsPage from './settings/AccumulatorsPage';
-import SendCommandPage from './settings/SendCommandPage';
+import CommandSendPage from './settings/CommandSendPage';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -141,7 +141,7 @@ const App = () => {
                     <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
                     <Route exact path="/settings/commands" component={CommandsPage} />
                     <Route exact path="/settings/command/:id?" component={CommandPage} />
-                    <Route exact path="/command/:deviceId?" component={SendCommandPage} />
+                    <Route exact path="/command/:deviceId?" component={CommandSendPage} />
                     <Route exact path="/admin/server" component={ServerPage} />
                     <Route exact path="/admin/users" component={UsersPage} />
                     <Route exact path="/admin/statistics" component={StatisticsPage} />
diff --git a/modern/src/RegisterDialog.js b/modern/src/RegisterDialog.js
deleted file mode 100644
index 6cae602f..00000000
--- a/modern/src/RegisterDialog.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import Button from '@material-ui/core/Button';
-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 TextField from '@material-ui/core/TextField';
-import Snackbar from '@material-ui/core/Snackbar';
-import { useTranslation } from './LocalizationProvider';
-import { snackBarDurationShortMs } from './common/util/duration';
-
-const RegisterDialog = ({ showDialog, onResult }) => {
-  const t = useTranslation();
-
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [snackbarOpen, setSnackbarOpen] = useState(false);
-
-  const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password;
-
-  const handleRegister = async () => {
-    const response = await fetch('/api/users', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, email, password }),
-    });
-
-    if (response.ok) {
-      showDialog = false;
-      setSnackbarOpen(true);
-    }
-  };
-
-  if (snackbarOpen) {
-    return (
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        open={snackbarOpen}
-        autoHideDuration={snackBarDurationShortMs}
-        onClose={() => { onResult(true); }}
-        message={t('loginCreated')}
-      />
-    );
-  } if (showDialog) {
-    return (
-      <Dialog
-        open
-        onClose={() => { onResult(false); }}
-      >
-        <DialogContent>
-          <DialogContentText>{t('loginRegister')}</DialogContentText>
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            label={t('sharedName')}
-            name="name"
-            value={name || ''}
-            autoComplete="name"
-            autoFocus
-            onChange={(event) => setName(event.target.value)}
-          />
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            type="email"
-            label={t('userEmail')}
-            name="email"
-            value={email || ''}
-            autoComplete="email"
-            onChange={(event) => setEmail(event.target.value)}
-          />
-          <TextField
-            margin="normal"
-            required
-            fullWidth
-            label={t('userPassword')}
-            name="password"
-            value={password || ''}
-            type="password"
-            autoComplete="current-password"
-            onChange={(event) => setPassword(event.target.value)}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button color="primary" onClick={handleRegister} disabled={submitDisabled()}>{t('loginRegister')}</Button>
-          <Button autoFocus onClick={() => onResult(false)}>{t('sharedCancel')}</Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-  return null;
-};
-
-export default RegisterDialog;
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index adf6ffa5..cf01ff7f 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 
 import { positionsActions, devicesActions, sessionActions } from './store';
 import { useEffectAsync } from './reactHelper';
-import { useTranslation } from './LocalizationProvider';
+import { useTranslation } from './common/components/LocalizationProvider';
 import { prefixString } from './common/util/stringUtils';
 import { snackBarDurationLongMs } from './common/util/duration';
 
diff --git a/modern/src/attributes/AddAttributeDialog.js b/modern/src/common/attributes/AddAttributeDialog.js
index 4669ba02..37b36c76 100644
--- a/modern/src/attributes/AddAttributeDialog.js
+++ b/modern/src/common/attributes/AddAttributeDialog.js
@@ -4,7 +4,7 @@ import {
 } from '@material-ui/core';
 
 import { Autocomplete, createFilterOptions } from '@material-ui/lab';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../components/LocalizationProvider';
 
 const AddAttributeDialog = ({ open, onResult, definitions }) => {
   const t = useTranslation();
diff --git a/modern/src/attributes/EditAttributesView.js b/modern/src/common/attributes/EditAttributesView.js
index 3618aa2f..4bc34b19 100644
--- a/modern/src/attributes/EditAttributesView.js
+++ b/modern/src/common/attributes/EditAttributesView.js
@@ -6,11 +6,11 @@ import {
 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/util/preferences';
+import { useTranslation } from '../components/LocalizationProvider';
+import { useAttributePreference } from '../util/preferences';
 import {
   distanceFromMeters, distanceToMeters, distanceUnitString, speedFromKnots, speedToKnots, speedUnitString, volumeFromLiters, volumeToLiters, volumeUnitString,
-} from '../common/util/converter';
+} from '../util/converter';
 
 const useStyles = makeStyles((theme) => ({
   addButton: {
diff --git a/modern/src/attributes/useCommandAttributes.js b/modern/src/common/attributes/useCommandAttributes.js
index 1212d283..1212d283 100644
--- a/modern/src/attributes/useCommandAttributes.js
+++ b/modern/src/common/attributes/useCommandAttributes.js
diff --git a/modern/src/attributes/useDeviceAttributes.js b/modern/src/common/attributes/useDeviceAttributes.js
index 8a4d886c..8a4d886c 100644
--- a/modern/src/attributes/useDeviceAttributes.js
+++ b/modern/src/common/attributes/useDeviceAttributes.js
diff --git a/modern/src/attributes/useGeofenceAttributes.js b/modern/src/common/attributes/useGeofenceAttributes.js
index 89908aa5..89908aa5 100644
--- a/modern/src/attributes/useGeofenceAttributes.js
+++ b/modern/src/common/attributes/useGeofenceAttributes.js
diff --git a/modern/src/attributes/usePositionAttributes.js b/modern/src/common/attributes/usePositionAttributes.js
index 7b33720a..7b33720a 100644
--- a/modern/src/attributes/usePositionAttributes.js
+++ b/modern/src/common/attributes/usePositionAttributes.js
diff --git a/modern/src/attributes/useUserAttributes.js b/modern/src/common/attributes/useUserAttributes.js
index fa6d7d8f..fa6d7d8f 100644
--- a/modern/src/attributes/useUserAttributes.js
+++ b/modern/src/common/attributes/useUserAttributes.js
diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js
index d26b4ae2..3865de29 100644
--- a/modern/src/common/components/BottomMenu.js
+++ b/modern/src/common/components/BottomMenu.js
@@ -12,7 +12,7 @@ import PersonIcon from '@material-ui/icons/Person';
 import ExitToAppIcon from '@material-ui/icons/ExitToApp';
 
 import { sessionActions } from '../../store';
-import { useTranslation } from '../../LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 import { useReadonly } from '../util/permissions';
 
 const BottomMenu = () => {
diff --git a/modern/src/form/LinkField.js b/modern/src/common/components/LinkField.js
index 81467a1b..e11438df 100644
--- a/modern/src/form/LinkField.js
+++ b/modern/src/common/components/LinkField.js
@@ -2,7 +2,7 @@ import {
   FormControl, InputLabel, MenuItem, Select,
 } from '@material-ui/core';
 import React, { useState } from 'react';
-import { useEffectAsync } from '../reactHelper';
+import { useEffectAsync } from '../../reactHelper';
 
 const LinkField = ({
   margin,
diff --git a/modern/src/LocalizationProvider.js b/modern/src/common/components/LocalizationProvider.js
index 33f3df8e..0df242dc 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/common/components/LocalizationProvider.js
@@ -1,60 +1,60 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import usePersistedState from './common/util/usePersistedState';
+import usePersistedState from '../util/usePersistedState';
 
-import af from '../../web/l10n/af.json';
-import ar from '../../web/l10n/ar.json';
-import az from '../../web/l10n/az.json';
-import bg from '../../web/l10n/bg.json';
-import bn from '../../web/l10n/bn.json';
-import cs from '../../web/l10n/cs.json';
-import da from '../../web/l10n/da.json';
-import de from '../../web/l10n/de.json';
-import el from '../../web/l10n/el.json';
-import en from '../../web/l10n/en.json';
-import es from '../../web/l10n/es.json';
-import fa from '../../web/l10n/fa.json';
-import fi from '../../web/l10n/fi.json';
-import fr from '../../web/l10n/fr.json';
-import he from '../../web/l10n/he.json';
-import hi from '../../web/l10n/hi.json';
-import hr from '../../web/l10n/hr.json';
-import hu from '../../web/l10n/hu.json';
-import id from '../../web/l10n/id.json';
-import it from '../../web/l10n/it.json';
-import ja from '../../web/l10n/ja.json';
-import ka from '../../web/l10n/ka.json';
-import kk from '../../web/l10n/kk.json';
-import km from '../../web/l10n/km.json';
-import ko from '../../web/l10n/ko.json';
-import lo from '../../web/l10n/lo.json';
-import lt from '../../web/l10n/lt.json';
-import lv from '../../web/l10n/lv.json';
-import ml from '../../web/l10n/ml.json';
-import mn from '../../web/l10n/mn.json';
-import ms from '../../web/l10n/ms.json';
-import nb from '../../web/l10n/nb.json';
-import ne from '../../web/l10n/ne.json';
-import nl from '../../web/l10n/nl.json';
-import nn from '../../web/l10n/nn.json';
-import pl from '../../web/l10n/pl.json';
-import pt from '../../web/l10n/pt.json';
-import ptBR from '../../web/l10n/pt_BR.json';
-import ro from '../../web/l10n/ro.json';
-import ru from '../../web/l10n/ru.json';
-import si from '../../web/l10n/si.json';
-import sk from '../../web/l10n/sk.json';
-import sl from '../../web/l10n/sl.json';
-import sq from '../../web/l10n/sq.json';
-import sr from '../../web/l10n/sr.json';
-import sv from '../../web/l10n/sv.json';
-import ta from '../../web/l10n/ta.json';
-import th from '../../web/l10n/th.json';
-import tr from '../../web/l10n/tr.json';
-import uk from '../../web/l10n/uk.json';
-import uz from '../../web/l10n/uz.json';
-import vi from '../../web/l10n/vi.json';
-import zh from '../../web/l10n/zh.json';
-import zhTW from '../../web/l10n/zh_TW.json';
+import af from '../../../../web/l10n/af.json';
+import ar from '../../../../web/l10n/ar.json';
+import az from '../../../../web/l10n/az.json';
+import bg from '../../../../web/l10n/bg.json';
+import bn from '../../../../web/l10n/bn.json';
+import cs from '../../../../web/l10n/cs.json';
+import da from '../../../../web/l10n/da.json';
+import de from '../../../../web/l10n/de.json';
+import el from '../../../../web/l10n/el.json';
+import en from '../../../../web/l10n/en.json';
+import es from '../../../../web/l10n/es.json';
+import fa from '../../../../web/l10n/fa.json';
+import fi from '../../../../web/l10n/fi.json';
+import fr from '../../../../web/l10n/fr.json';
+import he from '../../../../web/l10n/he.json';
+import hi from '../../../../web/l10n/hi.json';
+import hr from '../../../../web/l10n/hr.json';
+import hu from '../../../../web/l10n/hu.json';
+import id from '../../../../web/l10n/id.json';
+import it from '../../../../web/l10n/it.json';
+import ja from '../../../../web/l10n/ja.json';
+import ka from '../../../../web/l10n/ka.json';
+import kk from '../../../../web/l10n/kk.json';
+import km from '../../../../web/l10n/km.json';
+import ko from '../../../../web/l10n/ko.json';
+import lo from '../../../../web/l10n/lo.json';
+import lt from '../../../../web/l10n/lt.json';
+import lv from '../../../../web/l10n/lv.json';
+import ml from '../../../../web/l10n/ml.json';
+import mn from '../../../../web/l10n/mn.json';
+import ms from '../../../../web/l10n/ms.json';
+import nb from '../../../../web/l10n/nb.json';
+import ne from '../../../../web/l10n/ne.json';
+import nl from '../../../../web/l10n/nl.json';
+import nn from '../../../../web/l10n/nn.json';
+import pl from '../../../../web/l10n/pl.json';
+import pt from '../../../../web/l10n/pt.json';
+import ptBR from '../../../../web/l10n/pt_BR.json';
+import ro from '../../../../web/l10n/ro.json';
+import ru from '../../../../web/l10n/ru.json';
+import si from '../../../../web/l10n/si.json';
+import sk from '../../../../web/l10n/sk.json';
+import sl from '../../../../web/l10n/sl.json';
+import sq from '../../../../web/l10n/sq.json';
+import sr from '../../../../web/l10n/sr.json';
+import sv from '../../../../web/l10n/sv.json';
+import ta from '../../../../web/l10n/ta.json';
+import th from '../../../../web/l10n/th.json';
+import tr from '../../../../web/l10n/tr.json';
+import uk from '../../../../web/l10n/uk.json';
+import uz from '../../../../web/l10n/uz.json';
+import vi from '../../../../web/l10n/vi.json';
+import zh from '../../../../web/l10n/zh.json';
+import zhTW from '../../../../web/l10n/zh_TW.json';
 
 const languages = {
   af: { data: af, name: 'Afrikaans' },
diff --git a/modern/src/common/components/PositionValue.js b/modern/src/common/components/PositionValue.js
index b160be34..17e7b1d2 100644
--- a/modern/src/common/components/PositionValue.js
+++ b/modern/src/common/components/PositionValue.js
@@ -5,7 +5,7 @@ import {
   formatAlarm, formatBoolean, formatCoordinate, formatCourse, formatDistance, formatNumber, formatPercentage, formatSpeed, formatTime,
 } from '../util/formatter';
 import { useAttributePreference, usePreference } from '../util/preferences';
-import { useTranslation } from '../../LocalizationProvider';
+import { useTranslation } from './LocalizationProvider';
 import { useAdministrator } from '../util/permissions';
 
 const PositionValue = ({ position, property, attribute }) => {
diff --git a/modern/src/common/components/RemoveDialog.js b/modern/src/common/components/RemoveDialog.js
index 1b75e926..6d191d6a 100644
--- a/modern/src/common/components/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/form/SelectField.js b/modern/src/common/components/SelectField.js
index 420ad19e..98473b16 100644
--- a/modern/src/form/SelectField.js
+++ b/modern/src/common/components/SelectField.js
@@ -2,7 +2,7 @@ import {
   FormControl, InputLabel, MenuItem, Select,
 } from '@material-ui/core';
 import React, { useState } from 'react';
-import { useEffectAsync } from '../reactHelper';
+import { useEffectAsync } from '../../reactHelper';
 
 const SelectField = ({
   margin,
diff --git a/modern/src/login/LoginPage.js b/modern/src/login/LoginPage.js
index d89ccd73..ae7b982d 100644
--- a/modern/src/login/LoginPage.js
+++ b/modern/src/login/LoginPage.js
@@ -8,7 +8,7 @@ import { useTheme } from '@material-ui/core/styles';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { sessionActions } from '../store';
-import { useLocalization, useTranslation } from '../LocalizationProvider';
+import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
 import LoginLayout from './LoginLayout';
 import usePersistedState from '../common/util/usePersistedState';
 
diff --git a/modern/src/login/RegisterPage.js b/modern/src/login/RegisterPage.js
index 6f252b1a..cd6fc381 100644
--- a/modern/src/login/RegisterPage.js
+++ b/modern/src/login/RegisterPage.js
@@ -5,7 +5,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 import { snackBarDurationShortMs } from '../common/util/duration';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/modern/src/login/ResetPasswordPage.js b/modern/src/login/ResetPasswordPage.js
index 86a289ee..6f7e784f 100644
--- a/modern/src/login/ResetPasswordPage.js
+++ b/modern/src/login/ResetPasswordPage.js
@@ -5,7 +5,7 @@ import {
 import { useHistory } from 'react-router-dom';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import LoginLayout from './LoginLayout';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 import useQuery from '../common/util/useQuery';
 import { snackBarDurationShortMs } from '../common/util/duration';
 
diff --git a/modern/src/DevicesList.js b/modern/src/main/DevicesList.js
index 6eeaec41..57778667 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/main/DevicesList.js
@@ -20,13 +20,13 @@ import FlashOnIcon from '@material-ui/icons/FlashOn';
 import FlashOffIcon from '@material-ui/icons/FlashOff';
 import ErrorIcon from '@material-ui/icons/Error';
 
-import { devicesActions } from './store';
-import EditCollectionView from './EditCollectionView';
-import { useEffectAsync } from './reactHelper';
+import { devicesActions } from '../store';
+import EditCollectionView from '../settings/components/EditCollectionView';
+import { useEffectAsync } from '../reactHelper';
 import {
   formatAlarm, formatBoolean, formatPercentage, formatStatus, getStatusColor,
-} from './common/util/formatter';
-import { useTranslation } from './LocalizationProvider';
+} from '../common/util/formatter';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   list: {
diff --git a/modern/src/MainPage.js b/modern/src/main/MainPage.js
index 70d2a32b..569978af 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -13,22 +13,22 @@ import ListIcon from '@material-ui/icons/ViewList';
 
 import { useDispatch, useSelector } from 'react-redux';
 import DevicesList from './DevicesList';
-import Map from './map/core/Map';
-import SelectedDeviceMap from './map/main/SelectedDeviceMap';
-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 './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/util/usePersistedState';
-import LiveRoutesMap from './map/main/LiveRoutesMap';
-import { useDeviceReadonly } from './common/util/permissions';
+import Map from '../map/core/Map';
+import SelectedDeviceMap from '../map/main/SelectedDeviceMap';
+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 '../common/components/BottomMenu';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PoiMap from '../map/main/PoiMap';
+import MapPadding from '../map/MapPadding';
+import StatusCard from './StatusCard';
+import { devicesActions } from '../store';
+import DefaultCameraMap from '../map/main/DefaultCameraMap';
+import usePersistedState from '../common/util/usePersistedState';
+import LiveRoutesMap from '../map/main/LiveRoutesMap';
+import { useDeviceReadonly } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/PositionPage.js b/modern/src/main/PositionPage.js
index 946e4a75..ecb4095d 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/main/PositionPage.js
@@ -6,10 +6,10 @@ import {
 } from '@material-ui/core';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory, useParams } from 'react-router-dom';
-import { useEffectAsync } from './reactHelper';
-import { prefixString } from './common/util/stringUtils';
-import { useTranslation } from './LocalizationProvider';
-import PositionValue from './common/components/PositionValue';
+import { useEffectAsync } from '../reactHelper';
+import { prefixString } from '../common/util/stringUtils';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import PositionValue from '../common/components/PositionValue';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/map/main/StatusCard.js b/modern/src/main/StatusCard.js
index 33f924b3..46d288c6 100644
--- a/modern/src/map/main/StatusCard.js
+++ b/modern/src/main/StatusCard.js
@@ -10,12 +10,12 @@ import PublishIcon from '@material-ui/icons/Publish';
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 
-import { useTranslation } from '../../LocalizationProvider';
-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';
+import { useTranslation } from '../common/components/LocalizationProvider';
+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/map/core/Map.js b/modern/src/map/core/Map.js
index e1254af6..c328ba56 100644
--- a/modern/src/map/core/Map.js
+++ b/modern/src/map/core/Map.js
@@ -12,7 +12,7 @@ import {
 } from './mapStyles';
 import { useAttributePreference } from '../../common/util/preferences';
 import palette from '../../common/theme/palette';
-import { useTranslation } from '../../LocalizationProvider';
+import { useTranslation } from '../../common/components/LocalizationProvider';
 import usePersistedState, { savePersistedState } from '../../common/util/usePersistedState';
 
 const element = document.createElement('div');
diff --git a/modern/src/EventPage.js b/modern/src/other/EventPage.js
index 2131baab..46f5e67c 100644
--- a/modern/src/EventPage.js
+++ b/modern/src/other/EventPage.js
@@ -6,10 +6,10 @@ import {
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory, useParams } from 'react-router-dom';
 import ContainerDimensions from 'react-container-dimensions';
-import { useEffectAsync } from './reactHelper';
-import { useTranslation } from './LocalizationProvider';
-import Map from './map/core/Map';
-import PositionsMap from './map/PositionsMap';
+import { useEffectAsync } from '../reactHelper';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import Map from '../map/core/Map';
+import PositionsMap from '../map/PositionsMap';
 
 const useStyles = makeStyles(() => ({
   root: {
diff --git a/modern/src/GeofencesList.js b/modern/src/other/GeofencesList.js
index 73bcb520..b4fde749 100644
--- a/modern/src/GeofencesList.js
+++ b/modern/src/other/GeofencesList.js
@@ -9,8 +9,8 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-import { devicesActions } from './store';
-import EditCollectionView from './EditCollectionView';
+import { devicesActions } from '../store';
+import EditCollectionView from '../settings/components/EditCollectionView';
 
 const useStyles = makeStyles(() => ({
   list: {
diff --git a/modern/src/GeofencesPage.js b/modern/src/other/GeofencesPage.js
index a616d8f0..79eed22a 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/other/GeofencesPage.js
@@ -6,11 +6,11 @@ import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useHistory } from 'react-router-dom';
-import Map from './map/core/Map';
-import CurrentLocationMap from './map/CurrentLocationMap';
-import GeofenceEditMap from './map/GeofenceEditMap';
+import Map from '../map/core/Map';
+import CurrentLocationMap from '../map/CurrentLocationMap';
+import GeofenceEditMap from '../map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
-import { useTranslation } from './LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/reports/ReplayPage.js b/modern/src/other/ReplayPage.js
index a8d4844f..9b66853d 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/other/ReplayPage.js
@@ -14,8 +14,8 @@ import Map from '../map/core/Map';
 import ReplayPathMap from '../map/ReplayPathMap';
 import PositionsMap from '../map/PositionsMap';
 import { formatTime } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import { useTranslation } from '../LocalizationProvider';
+import ReportFilter from '../reports/components/ReportFilter';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 8803f2be..70429ec5 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import {
   Grid, FormControl, InputLabel, Select, MenuItem,
 } from '@material-ui/core';
-import ReportLayout from './ReportLayout';
-import ReportFilter from './ReportFilter';
-import Graph from './Graph';
+import ReportLayout from './components/ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import Graph from './components/Graph';
 import { useAttributePreference } from '../common/util/preferences';
 import { formatDate } from '../common/util/formatter';
 import { speedFromKnots } from '../common/util/converter';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ children, setItems }) => {
   const speedUnit = useAttributePreference('speedUnit');
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 45bb4c25..bbd92d59 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -6,10 +6,10 @@ import {
 import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayout from './ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import ReportLayout from './components/ReportLayout';
 import { prefixString } from '../common/util/stringUtils';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const t = useTranslation();
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index a3549924..035f6acd 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -5,10 +5,10 @@ import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
 } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayout from './ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import ReportLayout from './components/ReportLayout';
 import { useAttributePreference, usePreference } from '../common/util/preferences';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
diff --git a/modern/src/admin/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index b8caa9ec..4b0d9bfe 100644
--- a/modern/src/admin/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -4,8 +4,8 @@ import {
 } from '@material-ui/core';
 import moment from 'moment';
 import { formatDate } from '../common/util/formatter';
-import OptionsLayout from '../settings/OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import OptionsLayout from '../settings/components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const t = useTranslation();
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index b0c5169f..0dca99b3 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -4,10 +4,10 @@ import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayout from './ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index f86a55fe..fe6f4aa1 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -5,10 +5,10 @@ import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
 } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayout from './ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const t = useTranslation();
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 7a74e673..a87031d3 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -4,10 +4,10 @@ import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
-import ReportFilter from './ReportFilter';
-import ReportLayout from './ReportLayout';
+import ReportFilter from './components/ReportFilter';
+import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
diff --git a/modern/src/reports/Graph.js b/modern/src/reports/components/Graph.js
index 63d24eee..63d24eee 100644
--- a/modern/src/reports/Graph.js
+++ b/modern/src/reports/components/Graph.js
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 827b36fb..bc9c5af6 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -4,7 +4,7 @@ import {
 } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
-import { useTranslation } from '../LocalizationProvider';
+import { useTranslation } from '../../common/components/LocalizationProvider';
 
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   const t = useTranslation();
diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/components/ReportLayout.js
index b2be2ac1..c028530b 100644
--- a/modern/src/reports/ReportLayout.js
+++ b/modern/src/reports/components/ReportLayout.js
@@ -11,9 +11,9 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import SideNav from '../common/components/SideNav';
-import NavBar from '../common/components/NavBar';
-import { useTranslation } from '../LocalizationProvider';
+import SideNav from '../../common/components/SideNav';
+import NavBar from '../../common/components/NavBar';
+import { useTranslation } from '../../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   root: {
diff --git a/modern/src/settings/AccumulatorsPage.js b/modern/src/settings/AccumulatorsPage.js
index 3e98612a..f8895bbe 100644
--- a/modern/src/settings/AccumulatorsPage.js
+++ b/modern/src/settings/AccumulatorsPage.js
@@ -5,8 +5,8 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, TextField, FormControl, Button,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useTranslation } from '../LocalizationProvider';
-import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
 
 const useStyles = makeStyles((theme) => ({
   container: {
diff --git a/modern/src/settings/CalendarPage.js b/modern/src/settings/CalendarPage.js
index 0d35d2f3..bd3aa700 100644
--- a/modern/src/settings/CalendarPage.js
+++ b/modern/src/settings/CalendarPage.js
@@ -5,9 +5,9 @@ import {
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { DropzoneArea } from 'material-ui-dropzone';
-import EditItemView from '../EditItemView';
-import EditAttributesView from '../attributes/EditAttributesView';
-import { useTranslation } from '../LocalizationProvider';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/CalendarsPage.js b/modern/src/settings/CalendarsPage.js
index 8b7a2c1b..db4dc770 100644
--- a/modern/src/settings/CalendarsPage.js
+++ b/modern/src/settings/CalendarsPage.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import EditCollectionView from './components/EditCollectionView';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/CommandPage.js b/modern/src/settings/CommandPage.js
index 0cd440e1..99bb21f2 100644
--- a/modern/src/settings/CommandPage.js
+++ b/modern/src/settings/CommandPage.js
@@ -3,9 +3,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, TextField,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import EditItemView from '../EditItemView';
-import { useTranslation } from '../LocalizationProvider';
-import BaseCommandView from './BaseCommandView';
+import EditItemView from './components/EditItemView';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import BaseCommandView from './components/BaseCommandView';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/SendCommandPage.js b/modern/src/settings/CommandSendPage.js
index 91130fa1..79de1b84 100644
--- a/modern/src/settings/SendCommandPage.js
+++ b/modern/src/settings/CommandSendPage.js
@@ -4,10 +4,10 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, Button, FormControl,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useTranslation } from '../LocalizationProvider';
-import OptionsLayout from './OptionsLayout';
-import BaseCommandView from './BaseCommandView';
-import SelectField from '../form/SelectField';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
+import BaseCommandView from './components/BaseCommandView';
+import SelectField from '../common/components/SelectField';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -25,7 +25,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-const SendCommandPage = () => {
+const CommandSendPage = () => {
   const history = useHistory();
   const classes = useStyles();
   const t = useTranslation();
@@ -112,4 +112,4 @@ const SendCommandPage = () => {
   );
 };
 
-export default SendCommandPage;
+export default CommandSendPage;
diff --git a/modern/src/settings/CommandsPage.js b/modern/src/settings/CommandsPage.js
index c9240f11..6081b48c 100644
--- a/modern/src/settings/CommandsPage.js
+++ b/modern/src/settings/CommandsPage.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import EditCollectionView from './components/EditCollectionView';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 import { formatBoolean } from '../common/util/formatter';
 import { prefixString } from '../common/util/stringUtils';
 
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index 2aa40ef0..52a583dc 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -3,9 +3,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControl, InputLabel, MenuItem, Select, TextField,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import EditItemView from '../EditItemView';
-import { useTranslation } from '../LocalizationProvider';
-import usePositionAttributes from '../attributes/usePositionAttributes';
+import EditItemView from './components/EditItemView';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/ComputedAttributesPage.js b/modern/src/settings/ComputedAttributesPage.js
index 40c7e339..3b60419d 100644
--- a/modern/src/settings/ComputedAttributesPage.js
+++ b/modern/src/settings/ComputedAttributesPage.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import EditCollectionView from './components/EditCollectionView';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 import { useAdministrator } from '../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/modern/src/DevicePage.js b/modern/src/settings/DevicePage.js
index c57faa84..93b7f638 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -5,15 +5,15 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
 } from '@material-ui/core';
 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/util/deviceCategories';
-import LinkField from './form/LinkField';
-import { prefixString } from './common/util/stringUtils';
-import { useTranslation } from './LocalizationProvider';
-import useDeviceAttributes from './attributes/useDeviceAttributes';
-import { useAdministrator } from './common/util/permissions';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import SelectField from '../common/components/SelectField';
+import deviceCategories from '../common/util/deviceCategories';
+import LinkField from '../common/components/LinkField';
+import { prefixString } from '../common/util/stringUtils';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import useDeviceAttributes from '../common/attributes/useDeviceAttributes';
+import { useAdministrator } from '../common/util/permissions';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/DriverPage.js b/modern/src/settings/DriverPage.js
index ff703916..06b290fc 100644
--- a/modern/src/settings/DriverPage.js
+++ b/modern/src/settings/DriverPage.js
@@ -4,9 +4,9 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import EditItemView from '../EditItemView';
-import EditAttributesView from '../attributes/EditAttributesView';
-import { useTranslation } from '../LocalizationProvider';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/DriversPage.js b/modern/src/settings/DriversPage.js
index 5fb93a99..5b01bdfa 100644
--- a/modern/src/settings/DriversPage.js
+++ b/modern/src/settings/DriversPage.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import EditCollectionView from './components/EditCollectionView';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/GeofencePage.js b/modern/src/settings/GeofencePage.js
index 89762b60..27259ed2 100644
--- a/modern/src/GeofencePage.js
+++ b/modern/src/settings/GeofencePage.js
@@ -5,10 +5,10 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import EditItemView from './EditItemView';
-import EditAttributesView from './attributes/EditAttributesView';
-import { useTranslation } from './LocalizationProvider';
-import useGeofenceAttributes from './attributes/useGeofenceAttributes';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import useGeofenceAttributes from '../common/attributes/useGeofenceAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index 3750fc0e..2864a961 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -5,11 +5,11 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import EditItemView from '../EditItemView';
-import EditAttributesView from '../attributes/EditAttributesView';
-import useDeviceAttributes from '../attributes/useDeviceAttributes';
-import SelectField from '../form/SelectField';
-import { useTranslation } from '../LocalizationProvider';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import useDeviceAttributes from '../common/attributes/useDeviceAttributes';
+import SelectField from '../common/components/SelectField';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/GroupsPage.js b/modern/src/settings/GroupsPage.js
index 8ae5a33f..3642c02f 100644
--- a/modern/src/settings/GroupsPage.js
+++ b/modern/src/settings/GroupsPage.js
@@ -4,9 +4,9 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import EditCollectionView from './components/EditCollectionView';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index 7f539ddf..3d32a0b4 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -5,14 +5,14 @@ import {
 import InputAdornment from '@material-ui/core/InputAdornment';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { prefixString } from '../common/util/stringUtils';
-import EditItemView from '../EditItemView';
-import EditAttributesView from '../attributes/EditAttributesView';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
 import { useAttributePreference } from '../common/util/preferences';
 import {
   speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
 } from '../common/util/converter';
-import { useTranslation } from '../LocalizationProvider';
-import usePositionAttributes from '../attributes/usePositionAttributes';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index a5ef530e..038e5dff 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -4,13 +4,13 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
+import EditCollectionView from './components/EditCollectionView';
 
-import usePositionAttributes from '../attributes/usePositionAttributes';
+import usePositionAttributes from '../common/attributes/usePositionAttributes';
 import { formatDistance, formatSpeed } from '../common/util/formatter';
 import { useAttributePreference } from '../common/util/preferences';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 3daa4e51..ed0b3e5e 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -4,10 +4,10 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useTranslation, useTranslationKeys } from '../LocalizationProvider';
-import EditItemView from '../EditItemView';
+import { useTranslation, useTranslationKeys } from '../common/components/LocalizationProvider';
+import EditItemView from './components/EditItemView';
 import { prefixString, unprefixString } from '../common/util/stringUtils';
-import SelectField from '../form/SelectField';
+import SelectField from '../common/components/SelectField';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/settings/NotificationsPage.js b/modern/src/settings/NotificationsPage.js
index 9bc553d6..d96bc3da 100644
--- a/modern/src/settings/NotificationsPage.js
+++ b/modern/src/settings/NotificationsPage.js
@@ -4,11 +4,11 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
+import EditCollectionView from './components/EditCollectionView';
 import { prefixString } from '../common/util/stringUtils';
 import { formatBoolean } from '../common/util/formatter';
-import OptionsLayout from './OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/PreferencesPage.js b/modern/src/settings/PreferencesPage.js
index bd03f8d2..8b259bf2 100644
--- a/modern/src/settings/PreferencesPage.js
+++ b/modern/src/settings/PreferencesPage.js
@@ -3,8 +3,8 @@ import {
   Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, Container, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel,
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { useLocalization, useTranslation } from '../LocalizationProvider';
-import OptionsLayout from './OptionsLayout';
+import { useLocalization, useTranslation } from '../common/components/LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
 import usePersistedState from '../common/util/usePersistedState';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/modern/src/admin/ServerPage.js b/modern/src/settings/ServerPage.js
index 19a5c993..e7026bb4 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/settings/ServerPage.js
@@ -8,12 +8,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { sessionActions } from '../store';
-import EditAttributesView from '../attributes/EditAttributesView';
-import useDeviceAttributes from '../attributes/useDeviceAttributes';
-import useUserAttributes from '../attributes/useUserAttributes';
-import OptionsLayout from '../settings/OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
-import SelectField from '../form/SelectField';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import useDeviceAttributes from '../common/attributes/useDeviceAttributes';
+import useUserAttributes from '../common/attributes/useUserAttributes';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import SelectField from '../common/components/SelectField';
 
 const useStyles = makeStyles((theme) => ({
   container: {
diff --git a/modern/src/UserPage.js b/modern/src/settings/UserPage.js
index cb643b8a..abb12edf 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -6,13 +6,13 @@ import {
 } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { useDispatch, useSelector } from 'react-redux';
-import EditItemView from './EditItemView';
-import EditAttributesView from './attributes/EditAttributesView';
-import LinkField from './form/LinkField';
-import { useTranslation } from './LocalizationProvider';
-import useUserAttributes from './attributes/useUserAttributes';
-import { sessionActions } from './store';
-import SelectField from './form/SelectField';
+import EditItemView from './components/EditItemView';
+import EditAttributesView from '../common/attributes/EditAttributesView';
+import LinkField from '../common/components/LinkField';
+import { useTranslation } from '../common/components/LocalizationProvider';
+import useUserAttributes from '../common/attributes/useUserAttributes';
+import { sessionActions } from '../store';
+import SelectField from '../common/components/SelectField';
 
 const useStyles = makeStyles(() => ({
   details: {
diff --git a/modern/src/admin/UsersPage.js b/modern/src/settings/UsersPage.js
index d8e8bc3c..07c859d5 100644
--- a/modern/src/admin/UsersPage.js
+++ b/modern/src/settings/UsersPage.js
@@ -4,10 +4,10 @@ import {
 } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { useEffectAsync } from '../reactHelper';
-import EditCollectionView from '../EditCollectionView';
+import EditCollectionView from './components/EditCollectionView';
 import { formatBoolean } from '../common/util/formatter';
-import OptionsLayout from '../settings/OptionsLayout';
-import { useTranslation } from '../LocalizationProvider';
+import OptionsLayout from './components/OptionsLayout';
+import { useTranslation } from '../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   columnAction: {
diff --git a/modern/src/settings/BaseCommandView.js b/modern/src/settings/components/BaseCommandView.js
index 03605d0f..b422e153 100644
--- a/modern/src/settings/BaseCommandView.js
+++ b/modern/src/settings/components/BaseCommandView.js
@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react';
 import {
   TextField, FormControlLabel, Checkbox,
 } from '@material-ui/core';
-import { useTranslation } from '../LocalizationProvider';
-import SelectField from '../form/SelectField';
-import { prefixString } from '../common/util/stringUtils';
-import useCommandAttributes from '../attributes/useCommandAttributes';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import SelectField from '../../common/components/SelectField';
+import { prefixString } from '../../common/util/stringUtils';
+import useCommandAttributes from '../../common/attributes/useCommandAttributes';
 
 const BaseCommandView = ({ item, setItem }) => {
   const t = useTranslation();
diff --git a/modern/src/EditCollectionView.js b/modern/src/settings/components/EditCollectionView.js
index 9ed0362a..9107b68e 100644
--- a/modern/src/EditCollectionView.js
+++ b/modern/src/settings/components/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 './common/components/RemoveDialog';
-import { useTranslation } from './LocalizationProvider';
-import dimensions from './common/theme/dimensions';
-import { useEditable } from './common/util/permissions';
+import RemoveDialog from '../../common/components/RemoveDialog';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import dimensions from '../../common/theme/dimensions';
+import { useEditable } from '../../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   fab: {
diff --git a/modern/src/EditItemView.js b/modern/src/settings/components/EditItemView.js
index 550369fc..90e5294a 100644
--- a/modern/src/EditItemView.js
+++ b/modern/src/settings/components/EditItemView.js
@@ -5,9 +5,9 @@ import Container from '@material-ui/core/Container';
 import Button from '@material-ui/core/Button';
 import FormControl from '@material-ui/core/FormControl';
 
-import { useEffectAsync } from './reactHelper';
-import OptionsLayout from './settings/OptionsLayout';
-import { useTranslation } from './LocalizationProvider';
+import { useEffectAsync } from '../../reactHelper';
+import OptionsLayout from './OptionsLayout';
+import { useTranslation } from '../../common/components/LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
   container: {
diff --git a/modern/src/settings/OptionsLayout.js b/modern/src/settings/components/OptionsLayout.js
index b427d0c0..9f2a1aac 100644
--- a/modern/src/settings/OptionsLayout.js
+++ b/modern/src/settings/components/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 '../common/components/SideNav';
-import NavBar from '../common/components/NavBar';
-import { useTranslation } from '../LocalizationProvider';
-import { useAdministrator, useReadonly } from '../common/util/permissions';
+import SideNav from '../../common/components/SideNav';
+import NavBar from '../../common/components/NavBar';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import { useAdministrator, useReadonly } from '../../common/util/permissions';
 
 const useStyles = makeStyles((theme) => ({
   root: {