added status and renamed components

2025-12-06 07:49:52 +03:00 · 2024-03-20 23:57:19 +01:00
parent 863bc04c21
commit 24ea975575
53 changed files with 633 additions and 536 deletions
--- a/interface/package.json
+++ b/interface/package.json
@@ -23,7 +23,7 @@
  },
  "dependencies": {
    "@alova/adapter-xhr": "^1.0.3",
-    "@babel/core": "^7.24.1",
+    "@babel/core": "^7.24.3",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.14",
@@ -35,7 +35,7 @@
    "@types/react": "^18.2.67",
    "@types/react-dom": "^18.2.22",
    "@types/react-router-dom": "^5.3.3",
-    "alova": "^2.17.1",
+    "alova": "^2.18.0",
    "async-validator": "^4.2.5",
    "history": "^5.3.0",
    "jwt-decode": "^4.0.0",
@@ -66,11 +66,11 @@
    "eslint-plugin-prettier": "alpha",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "preact": "^10.19.7",
+    "preact": "^10.20.0",
    "prettier": "^3.2.5",
    "rollup-plugin-visualizer": "^5.12.0",
    "terser": "^5.29.2",
-    "vite": "^5.1.6",
+    "vite": "^5.2.2",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-tsconfig-paths": "^4.3.2"
  },
--- a/interface/src/AuthenticatedRouting.tsx
+++ b/interface/src/AuthenticatedRouting.tsx
@@ -6,12 +6,12 @@ import { AuthenticatedContext } from 'contexts/authentication';
 import Settings from 'framework/Settings';
 import AccessPoint from 'framework/ap/AccessPoint';
 import Mqtt from 'framework/mqtt/Mqtt';
-import NetworkConnection from 'framework/network/NetworkConnection';
+import Network from 'framework/network/Network';
 import NetworkTime from 'framework/ntp/NetworkTime';
-import OTASettingsForm from 'framework/ota/OTASettingsForm';
+import OTASettings from 'framework/ota/OTASettings';
 import Security from 'framework/security/Security';
 import ESPSystemStatus from 'framework/system/ESPSystemStatus';
-import Status from 'framework/system/Status';
+import System from 'framework/system/System';
 import UploadDownload from 'framework/system/UploadDownload';
 import ApplicationSettings from 'project/ApplicationSettings';
 import CustomEntities from 'project/CustomEntities';
@@ -27,7 +27,7 @@ const AuthenticatedRouting: FC = () => {
      <Routes>
        <Route path="/devices/*" element={<Devices />} />
        <Route path="/sensors/*" element={<Sensors />} />
-        <Route path="/status/*" element={<Status />} />
+        <Route path="/system/*" element={<System />} />
        <Route path="/help/*" element={<Help />} />
        <Route path="/*" element={<Navigate to="/" />} />
        {me.admin && (
@@ -36,12 +36,12 @@ const AuthenticatedRouting: FC = () => {
            <Route path="/scheduler/*" element={<Scheduler />} />
            <Route path="/customentities/*" element={<CustomEntities />} />
            <Route path="/settings/*" element={<Settings />} />
-            <Route path="/settings/network/*" element={<NetworkConnection />} />
+            <Route path="/settings/network/*" element={<Network />} />
            <Route path="/settings/ems-esp/*" element={<ApplicationSettings />} />
            <Route path="/settings/ap/*" element={<AccessPoint />} />
            <Route path="/settings/ntp/*" element={<NetworkTime />} />
            <Route path="/settings/mqtt/*" element={<Mqtt />} />
-            <Route path="/settings/ota/*" element={<OTASettingsForm />} />
+            <Route path="/settings/ota/*" element={<OTASettings />} />
            <Route path="/settings/security/*" element={<Security />} />
            <Route path="/settings/espsystemstatus/*" element={<ESPSystemStatus />} />
            <Route path="/settings/upload/*" element={<UploadDownload />} />
--- a/interface/src/api/mqtt.ts
+++ b/interface/src/api/mqtt.ts
@@ -1,6 +1,7 @@
 import { alovaInstance } from './endpoints';
-import type { MqttSettings, MqttStatus } from 'types';
+import type { MqttSettingsType, MqttStatusType } from 'types';

-export const readMqttStatus = () => alovaInstance.Get<MqttStatus>('/rest/mqttStatus');
-export const readMqttSettings = () => alovaInstance.Get<MqttSettings>('/rest/mqttSettings');
-export const updateMqttSettings = (data: MqttSettings) => alovaInstance.Post<MqttSettings>('/rest/mqttSettings', data);
+export const readMqttStatus = () => alovaInstance.Get<MqttStatusType>('/rest/mqttStatus');
+export const readMqttSettings = () => alovaInstance.Get<MqttSettingsType>('/rest/mqttSettings');
+export const updateMqttSettings = (data: MqttSettingsType) =>
+  alovaInstance.Post<MqttSettingsType>('/rest/mqttSettings', data);
--- a/interface/src/components/layout/LayoutMenu.tsx
+++ b/interface/src/components/layout/LayoutMenu.tsx
@@ -2,12 +2,14 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
 import CategoryIcon from '@mui/icons-material/Category';
 import ConstructionIcon from '@mui/icons-material/Construction';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import LiveHelpIcon from '@mui/icons-material/LiveHelp';
 import MoreTimeIcon from '@mui/icons-material/MoreTime';
 import PersonIcon from '@mui/icons-material/Person';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import SensorsIcon from '@mui/icons-material/Sensors';
 import SettingsIcon from '@mui/icons-material/Settings';
+
 import {
  Divider,
  List,
@@ -52,6 +54,8 @@ const LayoutMenu: FC = () => {
  const open = Boolean(anchorEl);
  const id = anchorEl ? 'app-menu-popover' : undefined;

+  const [menuOpen, setMenuOpen] = useState(true);
+
  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({ target }) => {
    const loc = target.value as Locales;
    localStorage.setItem('lang', loc);
@@ -73,6 +77,50 @@ const LayoutMenu: FC = () => {
        <LayoutMenuItem icon={CategoryIcon} label={LL.DEVICES()} to={`/devices`} />
        <LayoutMenuItem icon={SensorsIcon} label={LL.SENSORS()} to={`/sensors`} />
        <Divider />
+
+        <Box
+          sx={{
+            bgcolor: menuOpen ? 'rgba(71, 98, 130, 0.2)' : null,
+            pb: menuOpen ? 2 : 0
+          }}
+        >
+          <ListItemButton
+            alignItems="flex-start"
+            onClick={() => setMenuOpen(!menuOpen)}
+            sx={{
+              pt: 2.5,
+              pb: menuOpen ? 0 : 2.5,
+              '&:hover, &:focus': { '& svg': { opacity: 1 } }
+            }}
+          >
+            <ListItemText
+              // TODO: translate
+              primary="Customize"
+              primaryTypographyProps={{
+                fontWeight: '600',
+                mb: '2px',
+                color: 'lightblue'
+              }}
+              // TODO: translate
+              secondary="Customizations, Scheduler and Custom Entities"
+              secondaryTypographyProps={{
+                noWrap: true,
+                fontSize: 12,
+                color: menuOpen ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)'
+              }}
+              sx={{ my: 0 }}
+            />
+            <KeyboardArrowDown
+              sx={{
+                mr: -1,
+                opacity: 0,
+                transform: menuOpen ? 'rotate(-180deg)' : 'rotate(0)',
+                transition: '0.2s'
+              }}
+            />
+          </ListItemButton>
+          {menuOpen && (
+            <>
              <LayoutMenuItem
                icon={ConstructionIcon}
                label={LL.CUSTOMIZATIONS()}
@@ -86,9 +134,13 @@ const LayoutMenu: FC = () => {
                disabled={!me.admin}
                to={`/customentities`}
              />
+            </>
+          )}
+        </Box>
      </List>
+
      <List style={{ marginTop: `auto` }}>
-        <LayoutMenuItem icon={AssessmentIcon} label={LL.STATUS_OF('')} to="/status" />
+        <LayoutMenuItem icon={AssessmentIcon} label={LL.SYSTEM(0)} to="/system" />
        <LayoutMenuItem icon={SettingsIcon} label={LL.SETTINGS(0)} disabled={!me.admin} to="/settings" />
        <LayoutMenuItem icon={LiveHelpIcon} label={LL.HELP_OF('')} to={`/help`} />
      </List>
--- a/interface/src/components/layout/LayoutMenuItem.tsx
+++ b/interface/src/components/layout/LayoutMenuItem.tsx
@@ -1,4 +1,4 @@
-import { ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import type { SvgIconProps } from '@mui/material';
 import type { FC } from 'react';
@@ -18,14 +18,12 @@ const LayoutMenuItem: FC<LayoutMenuItemProps> = ({ icon: Icon, label, to, disabl
  const selected = routeMatches(to, pathname);

  return (
-    <ListItem disablePadding>
    <ListItemButton component={Link} to={to} disabled={disabled} selected={selected}>
      <ListItemIcon sx={{ color: selected ? '#90caf9' : '#9e9e9e' }}>
        <Icon />
      </ListItemIcon>
      <ListItemText sx={{ color: selected ? '#90caf9' : '#f5f5f5' }}>{label}</ListItemText>
    </ListItemButton>
-    </ListItem>
  );
 };

--- a/interface/src/components/layout/ListMenuItem.tsx
+++ b/interface/src/components/layout/ListMenuItem.tsx
@@ -0,0 +1,52 @@
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import { Avatar, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Fragment, type FC } from 'react';
+import { Link } from 'react-router-dom';
+import type { SvgIconProps } from '@mui/material';
+
+interface ListMenuItemProps {
+  icon: React.ComponentType<SvgIconProps>;
+  bgcolor?: string;
+  label: string;
+  text: string;
+  to: string;
+  disabled?: boolean;
+}
+
+function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
+  return (
+    <>
+      <ListItemAvatar>
+        <Avatar sx={{ bgcolor, color: 'white' }}>
+          <Icon />
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={label} secondary={text} />
+    </>
+  );
+}
+
+const LayoutMenuItem: FC<ListMenuItemProps> = ({ icon, bgcolor, label, text, to, disabled }) => (
+  <Fragment>
+    {disabled ? (
+      <ListItem>
+        <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} to="" />
+      </ListItem>
+    ) : (
+      <ListItem
+        disablePadding
+        secondaryAction={
+          <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
+            <NavigateNextIcon />
+          </ListItemIcon>
+        }
+      >
+        <ListItemButton component={Link} to={to}>
+          <RenderIcon icon={icon} bgcolor={bgcolor} label={label} text={text} to="" />
+        </ListItemButton>
+      </ListItem>
+    )}
+  </Fragment>
+);
+
+export default LayoutMenuItem;
--- a/interface/src/framework/Settings.tsx
+++ b/interface/src/framework/Settings.tsx
@@ -5,37 +5,20 @@ import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
 import MemoryIcon from '@mui/icons-material/Memory';
-import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TuneIcon from '@mui/icons-material/Tune';

-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Avatar,
-  ListItemButton,
-  ListItemIcon,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Box,
-  Divider
-} from '@mui/material';
+import { List, Button, Dialog, DialogActions, DialogContent, DialogTitle, Box } from '@mui/material';
 import { useRequest } from 'alova';
 import { useState, type FC } from 'react';
-import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import RestartMonitor from './system/RestartMonitor';
 import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { ButtonRow, SectionContent, useLayoutTitle } from 'components';
+import ListMenuItem from 'components/layout/ListMenuItem';
 import { useI18nContext } from 'i18n/i18n-react';

 const Settings: FC = () => {
@@ -134,7 +117,7 @@ const Settings: FC = () => {
          disabled={processing}
          color="primary"
        >
-          EMS-ESP-Loader
+          EMS-ESP Loader
        </Button>
      </DialogActions>
    </Dialog>
@@ -170,169 +153,62 @@ const Settings: FC = () => {
  const content = () => (
    <>
      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="ems-esp">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#134ba2', color: 'white' }}>
-                <TuneIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.APPLICATION_SETTINGS()} secondary="Modify EMS-ESP Application Settings" />
-          </ListItemButton>
-        </ListItem>
+        {/* TODO: translate */}
+        <ListMenuItem
+          icon={TuneIcon}
+          bgcolor="#134ba2"
+          label={LL.APPLICATION_SETTINGS()}
+          text="Modify EMS-ESP Application Settings"
+          to="ems-esp"
+        />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="network">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#40828f', color: 'white' }}>
-                <SettingsEthernetIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.NETWORK(0)} secondary="Configure Network settings" />
-          </ListItemButton>
-        </ListItem>
+        <ListMenuItem
+          icon={SettingsEthernetIcon}
+          bgcolor="#40828f"
+          label={LL.NETWORK(0)}
+          text={LL.CONFIGURE(LL.SETTINGS_OF(LL.NETWORK(0)))}
+          to="network"
+        />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="ap">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <SettingsInputAntennaIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.ACCESS_POINT(0)} secondary="Configure Access Point" />
-          </ListItemButton>
-        </ListItem>
+        <ListMenuItem
+          icon={AccessTimeIcon}
+          bgcolor="#5f9a5f"
+          label={LL.ACCESS_POINT(0)}
+          text={LL.CONFIGURE(LL.ACCESS_POINT(0))}
+          to="ap"
+        />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="ntp">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
-                <AccessTimeIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary="NTP" secondary="Configure Network Time" />
-          </ListItemButton>
-        </ListItem>
+        <ListMenuItem
+          icon={AccessTimeIcon}
+          bgcolor="#c5572c"
+          label="NTP"
+          text={LL.CONFIGURE(LL.LOCAL_TIME())}
+          to="ntp"
+        />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="mqtt">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#68374d', color: 'white' }}>
-                <DeviceHubIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary="MQTT" secondary="Configure MQTT" />
-          </ListItemButton>
-        </ListItem>
+        <ListMenuItem icon={DeviceHubIcon} bgcolor="#68374d" label="MQTT" text={LL.CONFIGURE('MQTT')} to="mqtt" />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="ota">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#efc34b', color: 'white' }}>
-                <CastIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary="OTA" secondary="Configure OTA" />
-          </ListItemButton>
-        </ListItem>
+        <ListMenuItem icon={CastIcon} bgcolor="#efc34b" label="OTA" text={LL.CONFIGURE('OTA')} to="ota" />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="security">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#b1395f', color: 'white' }}>
-                <LockIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.SECURITY(0)} secondary="Add/Remove Users" />
-          </ListItemButton>
-        </ListItem>
+        {/* TODO: translate */}
+        <ListMenuItem icon={LockIcon} label={LL.SECURITY(0)} text="Add/Remove Users" to="security" />

-        <Divider />
+        <ListMenuItem
+          icon={MemoryIcon}
+          bgcolor="#b1395f"
+          label={LL.STATUS_OF('ESP32')}
+          text="ESP32 Information"
+          to="espsystemstatus"
+        />

-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="espsystemstatus">
-            <ListItemAvatar>
-              <Avatar sx={{ color: 'white' }}>
-                <MemoryIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.STATUS_OF('ESP32')} secondary="ESP32 Information" />
-          </ListItemButton>
-        </ListItem>
-
-        <ListItem
-          disablePadding
-          secondaryAction={
-            <ListItemIcon style={{ justifyContent: 'right', color: 'lightblue', verticalAlign: 'middle' }}>
-              <NavigateNextIcon />
-            </ListItemIcon>
-          }
-        >
-          <ListItemButton component={Link} to="upload">
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
-                <ImportExportIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.UPLOAD_DOWNLOAD()} secondary="Upload/Download Settings and Firmware" />
-          </ListItemButton>
-        </ListItem>
+        {/* TODO: translate */}
+        <ListMenuItem
+          icon={ImportExportIcon}
+          bgcolor="#5d89f7"
+          label={LL.UPLOAD_DOWNLOAD()}
+          text="Upload/Download Settings and Firmware"
+          to="upload"
+        />
      </List>

      {renderRestartDialog()}
--- a/interface/src/framework/ap/APSettingsForm.tsx
+++ b/interface/src/framework/ap/APSettingsForm.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { APSettings } from 'types';
+import type { APSettingsType } from 'types';
 import * as APApi from 'api/ap';
 import {
  BlockFormControlLabel,
@@ -24,10 +24,10 @@ import { numberValue, updateValueDirty, useRest } from 'utils';

 import { createAPSettingsValidator, validate } from 'validators';

-export const isAPEnabled = ({ provision_mode }: APSettings) =>
+export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
  provision_mode === APProvisionMode.AP_MODE_ALWAYS || provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;

-const APSettingsForm: FC = () => {
+const APSettings: FC = () => {
  const {
    loadData,
    saving,
@@ -39,7 +39,7 @@ const APSettingsForm: FC = () => {
    blocker,
    saveData,
    errorMessage
-  } = useRest<APSettings>({
+  } = useRest<APSettingsType>({
    read: APApi.readAPSettings,
    update: APApi.updateAPSettings
  });
@@ -212,4 +212,4 @@ const APSettingsForm: FC = () => {
  );
 };

-export default APSettingsForm;
+export default APSettings;
--- a/interface/src/framework/ap/APStatusForm.tsx
+++ b/interface/src/framework/ap/APStatusForm.tsx
@@ -7,14 +7,14 @@ import { useRequest } from 'alova';
 import type { Theme } from '@mui/material';
 import type { FC } from 'react';

-import type { APStatus } from 'types';
+import type { APStatusType } from 'types';
 import * as APApi from 'api/ap';
 import { ButtonRow, FormLoader, SectionContent } from 'components';

 import { useI18nContext } from 'i18n/i18n-react';
 import { APNetworkStatus } from 'types';

-export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
+export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
  switch (status) {
    case APNetworkStatus.ACTIVE:
      return theme.palette.success.main;
@@ -27,14 +27,14 @@ export const apStatusHighlight = ({ status }: APStatus, theme: Theme) => {
  }
 };

-const APStatusForm: FC = () => {
+const APStatus: FC = () => {
  const { data: data, send: loadData, error } = useRequest(APApi.readAPStatus);

  const { LL } = useI18nContext();

  const theme = useTheme();

-  const apStatus = ({ status }: APStatus) => {
+  const apStatus = ({ status }: APStatusType) => {
    switch (status) {
      case APNetworkStatus.ACTIVE:
        return LL.ACTIVE();
@@ -102,4 +102,4 @@ const APStatusForm: FC = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default APStatusForm;
+export default APStatus;
--- a/interface/src/framework/ap/AccessPoint.tsx
+++ b/interface/src/framework/ap/AccessPoint.tsx
@@ -1,8 +1,8 @@
 import { Tab } from '@mui/material';
 import { Navigate, Routes, Route } from 'react-router-dom';

-import APSettingsForm from './APSettingsForm';
-import APStatusForm from './APStatusForm';
+import APSettings from './APSettings';
+import APStatus from './APStatus';
 import type { FC } from 'react';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';

@@ -22,12 +22,12 @@ const AccessPoint: FC = () => {
        <Tab value="status" label={LL.STATUS_OF(LL.ACCESS_POINT(1))} />
      </RouterTabs>
      <Routes>
-        <Route path="status" element={<APStatusForm />} />
+        <Route path="status" element={<APStatus />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
-              <APSettingsForm />
+              <APSettings />
            </RequireAdmin>
          }
        />
--- a/interface/src/framework/mqtt/Mqtt.tsx
+++ b/interface/src/framework/mqtt/Mqtt.tsx
@@ -1,7 +1,7 @@
 import { Tab } from '@mui/material';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import MqttSettingsForm from './MqttSettingsForm';
-import MqttStatusForm from './MqttStatusForm';
+import MqttSettings from './MqttSettings';
+import MqttStatus from './MqttStatus';
 import type { FC } from 'react';

 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
@@ -22,12 +22,12 @@ const Mqtt: FC = () => {
        <Tab value="status" label={LL.STATUS_OF('MQTT')} />
      </RouterTabs>
      <Routes>
-        <Route path="status" element={<MqttStatusForm />} />
+        <Route path="status" element={<MqttStatus />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
-              <MqttSettingsForm />
+              <MqttSettings />
            </RequireAdmin>
          }
        />
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { MqttSettings } from 'types';
+import type { MqttSettingsType } from 'types';
 import * as MqttApi from 'api/mqtt';
 import {
  BlockFormControlLabel,
@@ -21,7 +21,7 @@ import { numberValue, updateValueDirty, useRest } from 'utils';

 import { createMqttSettingsValidator, validate } from 'validators';

-const MqttSettingsForm: FC = () => {
+const MqttSettings: FC = () => {
  const {
    loadData,
    saving,
@@ -33,7 +33,7 @@ const MqttSettingsForm: FC = () => {
    blocker,
    saveData,
    errorMessage
-  } = useRest<MqttSettings>({
+  } = useRest<MqttSettingsType>({
    read: MqttApi.readMqttSettings,
    update: MqttApi.updateMqttSettings
  });
@@ -456,4 +456,4 @@ const MqttSettingsForm: FC = () => {
  );
 };

-export default MqttSettingsForm;
+export default MqttSettings;
--- a/interface/src/framework/mqtt/MqttStatusForm.tsx
+++ b/interface/src/framework/mqtt/MqttStatusForm.tsx
@@ -8,13 +8,13 @@ import { useRequest } from 'alova';
 import type { Theme } from '@mui/material';
 import type { FC } from 'react';

-import type { MqttStatus } from 'types';
+import type { MqttStatusType } from 'types';
 import * as MqttApi from 'api/mqtt';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { MqttDisconnectReason } from 'types';

-export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: Theme) => {
+export const mqttStatusHighlight = ({ enabled, connected }: MqttStatusType, theme: Theme) => {
  if (!enabled) {
    return theme.palette.info.main;
  }
@@ -24,27 +24,27 @@ export const mqttStatusHighlight = ({ enabled, connected }: MqttStatus, theme: T
  return theme.palette.error.main;
 };

-export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
+export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatusType, theme: Theme) => {
  if (mqtt_fails === 0) return theme.palette.success.main;
  if (mqtt_fails < 10) return theme.palette.warning.main;

  return theme.palette.error.main;
 };

-export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatus, theme: Theme) => {
+export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatusType, theme: Theme) => {
  if (mqtt_queued <= 1) return theme.palette.success.main;

  return theme.palette.warning.main;
 };

-const MqttStatusForm: FC = () => {
+const MqttStatus: FC = () => {
  const { data: data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);

  const { LL } = useI18nContext();

  const theme = useTheme();

-  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatus) => {
+  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatusType) => {
    if (!enabled) {
      return LL.NOT_ENABLED();
    }
@@ -54,7 +54,7 @@ const MqttStatusForm: FC = () => {
    return LL.DISCONNECTED() + (connect_count > 1 ? ' (' + connect_count + ')' : '');
  };

-  const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
+  const disconnectReason = ({ disconnect_reason }: MqttStatusType) => {
    switch (disconnect_reason) {
      case MqttDisconnectReason.TCP_DISCONNECTED:
        return 'TCP disconnected';
@@ -149,4 +149,4 @@ const MqttStatusForm: FC = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default MqttStatusForm;
+export default MqttStatus;
--- a/interface/src/framework/network/NetworkConnection.tsx
+++ b/interface/src/framework/network/NetworkConnection.tsx
@@ -1,8 +1,8 @@
 import { Tab } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { Navigate, Routes, Route, useNavigate } from 'react-router-dom';
-import NetworkSettingsForm from './NetworkSettingsForm';
-import NetworkStatusForm from './NetworkStatusForm';
+import NetworkSettings from './NetworkSettings';
+import NetworkStatus from './NetworkStatus';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
 import WiFiNetworkScanner from './WiFiNetworkScanner';
 import type { FC } from 'react';
@@ -11,7 +11,7 @@ import type { WiFiNetwork } from 'types';
 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';

-const NetworkConnection: FC = () => {
+const Network: FC = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.NETWORK(0));

@@ -43,11 +43,11 @@ const NetworkConnection: FC = () => {
    >
      <RouterTabs value={routerTab}>
        <Tab value="settings" label={LL.SETTINGS_OF(LL.NETWORK(1))} />
-        <Tab value="scan" label={LL.NETWORK_SCAN()} />
        <Tab value="status" label={LL.STATUS_OF(LL.NETWORK(1))} />
+        <Tab value="scan" label={LL.NETWORK_SCAN()} />
      </RouterTabs>
      <Routes>
-        <Route path="status" element={<NetworkStatusForm />} />
+        <Route path="status" element={<NetworkStatus />} />
        <Route
          path="scan"
          element={
@@ -60,7 +60,7 @@ const NetworkConnection: FC = () => {
          path="settings"
          element={
            <RequireAdmin>
-              <NetworkSettingsForm />
+              <NetworkSettings />
            </RequireAdmin>
          }
        />
@@ -70,4 +70,4 @@ const NetworkConnection: FC = () => {
  );
 };

-export default NetworkConnection;
+export default Network;
--- a/interface/src/framework/network/NetworkSettingsForm.tsx
+++ b/interface/src/framework/network/NetworkSettingsForm.tsx
@@ -28,7 +28,7 @@ import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { NetworkSettings } from 'types';
+import type { NetworkSettingsType } from 'types';
 import * as NetworkApi from 'api/network';
 import * as SystemApi from 'api/system';
 import {
@@ -48,7 +48,7 @@ import { updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 import { createNetworkSettingsValidator } from 'validators/network';

-const WiFiSettingsForm: FC = () => {
+const NetworkSettings: FC = () => {
  const { LL } = useI18nContext();

  const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);
@@ -68,7 +68,7 @@ const WiFiSettingsForm: FC = () => {
    saveData,
    errorMessage,
    restartNeeded
-  } = useRest<NetworkSettings>({
+  } = useRest<NetworkSettingsType>({
    read: NetworkApi.readNetworkSettings,
    update: NetworkApi.updateNetworkSettings
  });
@@ -135,7 +135,7 @@ const WiFiSettingsForm: FC = () => {

    return (
      <>
-        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+        <Typography variant="h6" color="primary">
          WiFi
        </Typography>
        {selectedNetwork ? (
@@ -367,4 +367,4 @@ const WiFiSettingsForm: FC = () => {
  );
 };

-export default WiFiSettingsForm;
+export default NetworkSettings;
--- a/interface/src/framework/network/NetworkStatusForm.tsx
+++ b/interface/src/framework/network/NetworkStatusForm.tsx
@@ -11,18 +11,18 @@ import { useRequest } from 'alova';
 import type { Theme } from '@mui/material';
 import type { FC } from 'react';

-import type { NetworkStatus } from 'types';
+import type { NetworkStatusType } from 'types';
 import * as NetworkApi from 'api/network';
 import { ButtonRow, FormLoader, SectionContent } from 'components';

 import { useI18nContext } from 'i18n/i18n-react';
 import { NetworkConnectionStatus } from 'types';

-const isConnected = ({ status }: NetworkStatus) =>
+const isConnected = ({ status }: NetworkStatusType) =>
  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;

-const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => {
+const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
  switch (status) {
    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -39,7 +39,7 @@ const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => {
  }
 };

-const networkQualityHighlight = ({ rssi }: NetworkStatus, theme: Theme) => {
+const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
  if (rssi <= -85) {
    return theme.palette.error.main;
  } else if (rssi <= -75) {
@@ -48,17 +48,18 @@ const networkQualityHighlight = ({ rssi }: NetworkStatus, theme: Theme) => {
  return theme.palette.success.main;
 };

-export const isWiFi = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
-export const isEthernet = ({ status }: NetworkStatus) => status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
+export const isWiFi = ({ status }: NetworkStatusType) => status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
+export const isEthernet = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;

-const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatus) => {
+const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
  if (!dns_ip_1) {
    return 'none';
  }
  return dns_ip_1 + (!dns_ip_2 || dns_ip_2 === '0.0.0.0' ? '' : ',' + dns_ip_2);
 };

-const IPs = (status: NetworkStatus) => {
+const IPs = (status: NetworkStatusType) => {
  if (!status.local_ipv6 || status.local_ipv6 === '0000:0000:0000:0000:0000:0000:0000:0000') {
    return status.local_ip;
  }
@@ -68,14 +69,14 @@ const IPs = (status: NetworkStatus) => {
  return status.local_ip + ', ' + status.local_ipv6;
 };

-const NetworkStatusForm: FC = () => {
+const NetworkStatus: FC = () => {
  const { data: data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);

  const { LL } = useI18nContext();

  const theme = useTheme();

-  const networkStatus = ({ status }: NetworkStatus) => {
+  const networkStatus = ({ status }: NetworkStatusType) => {
    switch (status) {
      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
        return LL.INACTIVE(1);
@@ -196,4 +197,4 @@ const NetworkStatusForm: FC = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default NetworkStatusForm;
+export default NetworkStatus;
--- a/interface/src/framework/ntp/NTPSettingsForm.tsx
+++ b/interface/src/framework/ntp/NTPSettingsForm.tsx
@@ -8,7 +8,7 @@ import { selectedTimeZone, timeZoneSelectItems, TIME_ZONES } from './TZ';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { NTPSettings } from 'types';
+import type { NTPSettingsType } from 'types';
 import * as NTPApi from 'api/ntp';
 import {
  BlockFormControlLabel,
@@ -23,7 +23,7 @@ import { updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';

-const NTPSettingsForm: FC = () => {
+const NTPSettings: FC = () => {
  const {
    loadData,
    saving,
@@ -35,7 +35,7 @@ const NTPSettingsForm: FC = () => {
    blocker,
    saveData,
    errorMessage
-  } = useRest<NTPSettings>({
+  } = useRest<NTPSettingsType>({
    read: NTPApi.readNTPSettings,
    update: NTPApi.updateNTPSettings
  });
@@ -137,4 +137,4 @@ const NTPSettingsForm: FC = () => {
  );
 };

-export default NTPSettingsForm;
+export default NTPSettings;
--- a/interface/src/framework/ntp/NTPStatusForm.tsx
+++ b/interface/src/framework/ntp/NTPStatusForm.tsx
@@ -27,7 +27,7 @@ import { toast } from 'react-toastify';
 import type { Theme } from '@mui/material';
 import type { FC } from 'react';

-import type { NTPStatus } from 'types';
+import type { NTPStatusType } from 'types';
 import { dialogStyle } from 'CustomTheme';
 import * as NTPApi from 'api/ntp';
 import { ButtonRow, FormLoader, SectionContent } from 'components';
@@ -36,23 +36,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { NTPSyncStatus } from 'types';
 import { formatDateTime, formatLocalDateTime } from 'utils';

-export const isNtpActive = ({ status }: NTPStatus) => status === NTPSyncStatus.NTP_ACTIVE;
-export const isNtpEnabled = ({ status }: NTPStatus) => status !== NTPSyncStatus.NTP_DISABLED;
-
-export const ntpStatusHighlight = ({ status }: NTPStatus, theme: Theme) => {
-  switch (status) {
-    case NTPSyncStatus.NTP_DISABLED:
-      return theme.palette.info.main;
-    case NTPSyncStatus.NTP_INACTIVE:
-      return theme.palette.error.main;
-    case NTPSyncStatus.NTP_ACTIVE:
-      return theme.palette.success.main;
-    default:
-      return theme.palette.error.main;
-  }
-};
-
-const NTPStatusForm: FC = () => {
+const NTPStatus: FC = () => {
  const { data: data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);

  const [localTime, setLocalTime] = useState<string>('');
@@ -67,6 +51,22 @@ const NTPStatusForm: FC = () => {

  NTPApi.updateTime;

+  const isNtpActive = ({ status }: NTPStatusType) => status === NTPSyncStatus.NTP_ACTIVE;
+  const isNtpEnabled = ({ status }: NTPStatusType) => status !== NTPSyncStatus.NTP_DISABLED;
+
+  const ntpStatusHighlight = ({ status }: NTPStatusType, theme: Theme) => {
+    switch (status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return theme.palette.info.main;
+      case NTPSyncStatus.NTP_INACTIVE:
+        return theme.palette.error.main;
+      case NTPSyncStatus.NTP_ACTIVE:
+        return theme.palette.success.main;
+      default:
+        return theme.palette.error.main;
+    }
+  };
+
  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value);

  const openSetTime = () => {
@@ -76,7 +76,7 @@ const NTPStatusForm: FC = () => {

  const theme = useTheme();

-  const ntpStatus = ({ status }: NTPStatus) => {
+  const ntpStatus = ({ status }: NTPStatusType) => {
    switch (status) {
      case NTPSyncStatus.NTP_DISABLED:
        return LL.NOT_ENABLED();
@@ -217,4 +217,4 @@ const NTPStatusForm: FC = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default NTPStatusForm;
+export default NTPStatus;
--- a/interface/src/framework/ntp/NetworkTime.tsx
+++ b/interface/src/framework/ntp/NetworkTime.tsx
@@ -1,7 +1,7 @@
 import { Tab } from '@mui/material';
 import { Navigate, Route, Routes } from 'react-router-dom';
-import NTPSettingsForm from './NTPSettingsForm';
-import NTPStatusForm from './NTPStatusForm';
+import NTPSettings from './NTPSettings';
+import NTPStatus from './NTPStatus';
 import type { FC } from 'react';

 import { RequireAdmin, RouterTabs, useLayoutTitle, useRouterTab } from 'components';
@@ -21,12 +21,12 @@ const NetworkTime: FC = () => {
        <Tab value="status" label={LL.STATUS_OF('NTP')} />
      </RouterTabs>
      <Routes>
-        <Route path="status" element={<NTPStatusForm />} />
+        <Route path="status" element={<NTPStatus />} />
        <Route
          path="settings"
          element={
            <RequireAdmin>
-              <NTPSettingsForm />
+              <NTPSettings />
            </RequireAdmin>
          }
        />
--- a/interface/src/framework/ota/OTASettingsForm.tsx
+++ b/interface/src/framework/ota/OTASettingsForm.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { OTASettings } from 'types';
+import type { OTASettingsType } from 'types';
 import * as SystemApi from 'api/system';
 import {
  BlockFormControlLabel,
@@ -24,7 +24,7 @@ import { numberValue, updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 import { OTA_SETTINGS_VALIDATOR } from 'validators/system';

-const OTASettingsForm: FC = () => {
+const OTASettings: FC = () => {
  const {
    loadData,
    saveData,
@@ -36,7 +36,7 @@ const OTASettingsForm: FC = () => {
    setDirtyFlags,
    blocker,
    errorMessage
-  } = useRest<OTASettings>({
+  } = useRest<OTASettingsType>({
    read: SystemApi.readOTASettings,
    update: SystemApi.updateOTASettings
  });
@@ -127,4 +127,4 @@ const OTASettingsForm: FC = () => {
  );
 };

-export default OTASettingsForm;
+export default OTASettings;
--- a/interface/src/framework/security/ManageUsersForm.tsx
+++ b/interface/src/framework/security/ManageUsersForm.tsx
@@ -14,9 +14,9 @@ import { useContext, useState } from 'react';

 import { useBlocker } from 'react-router-dom';
 import GenerateToken from './GenerateToken';
-import UserForm from './UserForm';
+import User from './User';
 import type { FC } from 'react';
-import type { SecuritySettings, User } from 'types';
+import type { SecuritySettingsType, UserType } from 'types';
 import * as SecurityApi from 'api/security';
 import { ButtonRow, FormLoader, MessageBox, SectionContent, BlockNavigation } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';
@@ -24,13 +24,13 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { useRest } from 'utils';
 import { createUserValidator } from 'validators';

-const ManageUsersForm: FC = () => {
-  const { loadData, saveData, saving, data, updateDataValue, errorMessage } = useRest<SecuritySettings>({
+const ManageUsers: FC = () => {
+  const { loadData, saveData, saving, data, updateDataValue, errorMessage } = useRest<SecuritySettingsType>({
    read: SecurityApi.readSecuritySettings,
    update: SecurityApi.updateSecuritySettings
  });

-  const [user, setUser] = useState<User>();
+  const [user, setUser] = useState<UserType>();
  const [creating, setCreating] = useState<boolean>(false);
  const [changed, setChanged] = useState<number>(0);
  const [generatingToken, setGeneratingToken] = useState<string>();
@@ -86,7 +86,7 @@ const ManageUsersForm: FC = () => {

    const noAdminConfigured = () => !data.users.find((u) => u.admin);

-    const removeUser = (toRemove: User) => {
+    const removeUser = (toRemove: UserType) => {
      const users = data.users.filter((u) => u.username !== toRemove.username);
      updateDataValue({ ...data, users });
      setChanged(changed + 1);
@@ -101,7 +101,7 @@ const ManageUsersForm: FC = () => {
      });
    };

-    const editUser = (toEdit: User) => {
+    const editUser = (toEdit: UserType) => {
      setCreating(false);
      setUser({ ...toEdit });
    };
@@ -219,7 +219,7 @@ const ManageUsersForm: FC = () => {
        </Box>

        <GenerateToken username={generatingToken} onClose={closeGenerateToken} />
-        <UserForm
+        <User
          user={user}
          setUser={setUser}
          creating={creating}
@@ -239,4 +239,4 @@ const ManageUsersForm: FC = () => {
  );
 };

-export default ManageUsersForm;
+export default ManageUsers;
--- a/interface/src/framework/security/Security.tsx
+++ b/interface/src/framework/security/Security.tsx
@@ -1,7 +1,7 @@
 import { Tab } from '@mui/material';
 import { Navigate, Routes, Route } from 'react-router-dom';
-import ManageUsersForm from './ManageUsersForm';
-import SecuritySettingsForm from './SecuritySettingsForm';
+import ManageUsers from './ManageUsers';
+import SecuritySettings from './SecuritySettings';
 import type { FC } from 'react';

 import { RouterTabs, useRouterTab, useLayoutTitle } from 'components';
@@ -21,8 +21,8 @@ const Security: FC = () => {
        <Tab value="users" label={LL.MANAGE_USERS()} />
      </RouterTabs>
      <Routes>
-        <Route path="users" element={<ManageUsersForm />} />
-        <Route path="settings" element={<SecuritySettingsForm />} />
+        <Route path="users" element={<ManageUsers />} />
+        <Route path="settings" element={<SecuritySettings />} />
        <Route path="*" element={<Navigate replace to="settings" />} />
      </Routes>
    </>
--- a/interface/src/framework/security/SecuritySettingsForm.tsx
+++ b/interface/src/framework/security/SecuritySettingsForm.tsx
@@ -5,7 +5,7 @@ import { useContext, useState } from 'react';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { SecuritySettings } from 'types';
+import type { SecuritySettingsType } from 'types';
 import * as SecurityApi from 'api/security';
 import { ButtonRow, FormLoader, MessageBox, SectionContent, ValidatedPasswordField, BlockNavigation } from 'components';

@@ -14,7 +14,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 import { updateValueDirty, useRest } from 'utils';
 import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';

-const SecuritySettingsForm: FC = () => {
+const SecuritySettings: FC = () => {
  const { LL } = useI18nContext();

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -29,7 +29,7 @@ const SecuritySettingsForm: FC = () => {
    blocker,
    saveData,
    errorMessage
-  } = useRest<SecuritySettings>({
+  } = useRest<SecuritySettingsType>({
    read: SecurityApi.readSecuritySettings,
    update: SecurityApi.updateSecuritySettings
  });
@@ -103,4 +103,4 @@ const SecuritySettingsForm: FC = () => {
  );
 };

-export default SecuritySettingsForm;
+export default SecuritySettings;
--- a/interface/src/framework/security/UserForm.tsx
+++ b/interface/src/framework/security/UserForm.tsx
@@ -8,7 +8,7 @@ import type Schema from 'async-validator';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';

-import type { User } from 'types';
+import type { UserType } from 'types';
 import { dialogStyle } from 'CustomTheme';
 import { BlockFormControlLabel, ValidatedPasswordField, ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -19,14 +19,14 @@ interface UserFormProps {
  creating: boolean;
  validator: Schema;

-  user?: User;
-  setUser: React.Dispatch<React.SetStateAction<User | undefined>>;
+  user?: UserType;
+  setUser: React.Dispatch<React.SetStateAction<UserType | undefined>>;

  onDoneEditing: () => void;
  onCancelEditing: () => void;
 }

-const UserForm: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEditing, onCancelEditing }) => {
+const User: FC<UserFormProps> = ({ creating, validator, user, setUser, onDoneEditing, onCancelEditing }) => {
  const { LL } = useI18nContext();

  const updateFormValue = updateValue(setUser);
@@ -104,4 +104,4 @@ const UserForm: FC<UserFormProps> = ({ creating, validator, user, setUser, onDon
  );
 };

-export default UserForm;
+export default User;
--- a/interface/src/framework/system/ESPSystemStatus.tsx
+++ b/interface/src/framework/system/ESPSystemStatus.tsx
@@ -133,6 +133,7 @@ const ESPSystemStatus: FC = () => {
              secondary={formatNumber(data.fs_used) + ' KB / ' + formatNumber(data.fs_free) + ' KB'}
            />
          </ListItem>
+          <Divider variant="inset" component="li" />
        </List>
        <Box display="flex" flexWrap="wrap">
          <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
--- a/interface/src/framework/system/System.tsx
+++ b/interface/src/framework/system/System.tsx
@@ -7,25 +7,25 @@ import type { FC } from 'react';
 import { useRouterTab, RouterTabs, useLayoutTitle } from 'components';

 import { useI18nContext } from 'i18n/i18n-react';
-import Activity from 'project/Activity';
+import SystemActivity from 'project/SystemActivity';

-const Status: FC = () => {
+const System: FC = () => {
  const { LL } = useI18nContext();

-  useLayoutTitle(LL.STATUS_OF(''));
+  useLayoutTitle(LL.SYSTEM(0));

  const { routerTab } = useRouterTab();

  return (
    <>
      <RouterTabs value={routerTab}>
-        <Tab value="status" label={LL.SYSTEM(1)} />
+        <Tab value="status" label={LL.STATUS_OF('')} />
        <Tab value="activity" label={LL.ACTIVITY()} />
        <Tab value="log" label={LL.LOG_OF('')} />
      </RouterTabs>
      <Routes>
        <Route path="status" element={<SystemStatus />} />
-        <Route path="activity" element={<Activity />} />
+        <Route path="activity" element={<SystemActivity />} />
        <Route path="log" element={<SystemLog />} />
        <Route path="*" element={<Navigate replace to="status" />} />
      </Routes>
@@ -33,4 +33,4 @@ const Status: FC = () => {
  );
 };

-export default Status;
+export default System;
--- a/interface/src/framework/system/SystemLog.tsx
+++ b/interface/src/framework/system/SystemLog.tsx
@@ -11,7 +11,7 @@ import { addAccessTokenParameter } from 'api/authentication';
 import { EVENT_SOURCE_ROOT } from 'api/endpoints';
 import * as SystemApi from 'api/system';

-import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation } from 'components';
+import { SectionContent, FormLoader, BlockFormControlLabel, BlockNavigation, useLayoutTitle } from 'components';

 import { useI18nContext } from 'i18n/i18n-react';
 import { LogLevel } from 'types';
@@ -50,6 +50,8 @@ const levelLabel = (level: LogLevel) => {
 const SystemLog: FC = () => {
  const { LL } = useI18nContext();

+  useLayoutTitle(LL.LOG_OF(''));
+
  const { loadData, data, updateDataValue, origData, dirtyFlags, setDirtyFlags, blocker, saveData, errorMessage } =
    useRest<LogSettings>({
      read: SystemApi.readLogSettings,
--- a/interface/src/framework/system/SystemStatus.tsx
+++ b/interface/src/framework/system/SystemStatus.tsx
@@ -1,7 +1,9 @@
 import BuildIcon from '@mui/icons-material/Build';
 import CancelIcon from '@mui/icons-material/Cancel';
+import CastIcon from '@mui/icons-material/Cast';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
+import MemoryIcon from '@mui/icons-material/Memory';
 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import TimerIcon from '@mui/icons-material/Timer';
@@ -29,10 +31,12 @@ import { toast } from 'react-toastify';
 import { dialogStyle } from 'CustomTheme';
 import * as SystemApi from 'api/system';
 import { FormLoader, SectionContent, useLayoutTitle } from 'components';
+import ListMenuItem from 'components/layout/ListMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import * as EMSESP from 'project/api';
 import { busConnectionStatus } from 'project/types';
+import { NTPSyncStatus } from 'types';

 const SystemStatus: FC = () => {
  const { LL } = useI18nContext();
@@ -71,6 +75,10 @@ const SystemStatus: FC = () => {
    return formatted;
  };

+  function formatNumber(num: number) {
+    return new Intl.NumberFormat().format(num);
+  }
+
  const busStatus = () => {
    if (data) {
      switch (data.status) {
@@ -85,8 +93,6 @@ const SystemStatus: FC = () => {
    return 'Unknown';
  };

-  // export const isConnected = ({ status }: Status) => status !== busConnectionStatus.BUS_STATUS_OFFLINE;
-
  const busStatusHighlight = () => {
    switch (data.status) {
      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
@@ -100,6 +106,34 @@ const SystemStatus: FC = () => {
    }
  };

+  const ntpStatus = () => {
+    switch (data.ntp_status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return LL.NOT_ENABLED();
+      case NTPSyncStatus.NTP_INACTIVE:
+        return LL.INACTIVE(0);
+      case NTPSyncStatus.NTP_ACTIVE:
+        return LL.ACTIVE();
+      default:
+        return LL.UNKNOWN();
+    }
+  };
+
+  const ntpStatusHighlight = () => {
+    switch (data.ntp_status) {
+      case NTPSyncStatus.NTP_DISABLED:
+        return theme.palette.info.main;
+      case NTPSyncStatus.NTP_INACTIVE:
+        return theme.palette.error.main;
+      case NTPSyncStatus.NTP_ACTIVE:
+        return theme.palette.success.main;
+      default:
+        return theme.palette.error.main;
+    }
+  };
+
+  const activeHighlight = (value: boolean) => (value ? theme.palette.success.main : theme.palette.info.main);
+
  const scan = async () => {
    await scanDevices()
      .then(() => {
@@ -136,27 +170,7 @@ const SystemStatus: FC = () => {
        <List>
          <ListItem>
            <ListItemAvatar>
-              <Avatar>
-                <BuildIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.EMS_ESP_VER()} secondary={data.emsesp_version} />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <TimerIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: busStatusHighlight() }}>
+              <Avatar sx={{ bgcolor: busStatusHighlight(), color: 'white' }}>
                <DirectionsBusIcon />
              </Avatar>
            </ListItemAvatar>
@@ -166,7 +180,7 @@ const SystemStatus: FC = () => {

          <ListItem>
            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: theme.palette.success.main }}>
+              <Avatar sx={{ bgcolor: '#5d89f7', color: 'white' }}>
                <DeviceHubIcon />
              </Avatar>
            </ListItemAvatar>
@@ -191,7 +205,67 @@ const SystemStatus: FC = () => {
              </Button>
            )}
          </ListItem>
+          <Divider variant="inset" component="li" />

+          <ListItem>
+            <ListItemAvatar>
+              <Avatar sx={{ bgcolor: '#c5572c', color: 'white' }}>
+                <TimerIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText primary={LL.UPTIME()} secondary={formatDurationSec(data.uptime)} />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={BuildIcon}
+            bgcolor="#134ba2"
+            label={LL.EMS_ESP_VER()}
+            text={data.emsesp_version}
+            to="/settings/ems-esp"
+          />
+          <Divider variant="inset" component="li" />
+
+          {/* TODO: translate */}
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={MemoryIcon}
+            bgcolor="#68374d"
+            label="System Memory"
+            text={formatNumber(data.free_heap) + ' KB'}
+            to="/settings/espsystemstatus"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={DeviceHubIcon}
+            bgcolor={activeHighlight(data.mqtt_status)}
+            label={LL.STATUS_OF('MQTT')}
+            text={data.mqtt_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            to="/settings/mqtt/status"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={DeviceHubIcon}
+            bgcolor={ntpStatusHighlight()}
+            label={LL.STATUS_OF('NTP')}
+            text={ntpStatus()}
+            to="/settings/ntp/status"
+          />
+          <Divider variant="inset" component="li" />
+
+          <ListMenuItem
+            disabled={!me.admin}
+            icon={CastIcon}
+            bgcolor={activeHighlight(data.ota_status)}
+            label={LL.STATUS_OF('OTA')}
+            text={data.ota_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            to="/settings/ota"
+          />
          <Divider variant="inset" component="li" />
        </List>

--- a/interface/src/i18n/de/index.ts
+++ b/interface/src/i18n/de/index.ts
@@ -322,8 +322,8 @@ const de: Translation = {
  ACTIVELOW: 'Aktiv Negativ',
  UNCHANGED: 'Unverändert',
  ALWAYS: 'Immer',
-  ACTIVITY: 'Activity' // TODO translate
-
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default de;
--- a/interface/src/i18n/en/index.ts
+++ b/interface/src/i18n/en/index.ts
@@ -322,7 +322,8 @@ const en: Translation = {
  ACTIVELOW: 'Active Low',
  UNCHANGED: 'Unchanged',
  ALWAYS: 'Always',
-  ACTIVITY: 'Activity'
+  ACTIVITY: 'Activity',
+  CONFIGURE: 'Configure {0}'
 };

 export default en;
--- a/interface/src/i18n/fr/index.ts
+++ b/interface/src/i18n/fr/index.ts
@@ -322,7 +322,8 @@ const fr: Translation = {
  ACTIVELOW: 'Active Low', // TODO translate
  UNCHANGED: 'Unchanged', // TODO translate
  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default fr;
--- a/interface/src/i18n/it/index.ts
+++ b/interface/src/i18n/it/index.ts
@@ -322,7 +322,8 @@ const it: Translation = {
  ACTIVELOW: 'Active Low', // TODO translate
  UNCHANGED: 'Unchanged', // TODO translate
  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default it;
--- a/interface/src/i18n/nl/index.ts
+++ b/interface/src/i18n/nl/index.ts
@@ -122,7 +122,7 @@ const nl: Translation = {
  BYPASS_TOKEN: 'API Access Token authenticatie uitschakelen',
  READONLY: 'Activeer read-only modus (blokkeert alle outgaande EMS Tx schrijf commandos)',
  UNDERCLOCK_CPU: 'Underclock CPU snelheid',
-  HEATINGOFF: 'Start boiler with forced heating off', // TODO translate
+  HEATINGOFF: 'Start ketel met geforceerde verwarming uit',
  ENABLE_SHOWER_TIMER: 'Activeer Douche Timer (tijdmeting)',
  ENABLE_SHOWER_ALERT: 'Activeer Douchemelding',
  TRIGGER_TIME: 'Trigger tijd',
@@ -272,7 +272,7 @@ const nl: Translation = {
  NETWORK_SCANNER: 'Netwerk Scanner',
  NETWORK_NO_WIFI: 'Geen WiFi networken gevonden',
  NETWORK_BLANK_SSID: 'laat leeg om WiFi uit te schakelen',
-  NETWORK_BLANK_BSSID: 'leave blank to use only SSID', // TODO translate
+  NETWORK_BLANK_BSSID: 'laat leeg om alleen SSID te bebruiken',
  TX_POWER: 'Tx Vermogen',
  HOSTNAME: 'Hostname',
  NETWORK_DISABLE_SLEEP: 'WiFi Sleep Mode uitzetten',
@@ -308,21 +308,22 @@ const nl: Translation = {
  SCHEDULE_TIMER_2: 'elke minuut',
  SCHEDULE_TIMER_3: 'elke huur',
  CUSTOM_ENTITIES: 'Aangepaste Entiteiten',
-  ENTITIES_HELP_1: 'Aangepaste entiteiten ophalen uit de EMS-bus', // TODO translate
+  ENTITIES_HELP_1: 'Aangepaste entiteiten ophalen uit de EMS-bus',
  ENTITIES_UPDATED: 'Entiteiten bijgewerkt',
  WRITEABLE: 'Beschrijfbare',
  SHOWING: 'Tonen',
  SEARCH: 'Zoek',
-  CERT: 'TLS rootcertificaat (laat leeg om TLS-insecure)', // TODO translate
+  CERT: 'TLS rootcertificaat (laat leeg om TLS-insecure)',
  ENABLE_TLS: 'Activeer TLS',
-  ON: 'On', // TODO translate
-  OFF: 'Off', // TODO translate
-  POLARITY: 'Polarity', // TODO translate
-  ACTIVEHIGH: 'Active High', // TODO translate
-  ACTIVELOW: 'Active Low', // TODO translate
-  UNCHANGED: 'Unchanged', // TODO translate
-  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ON: 'Aan',
+  OFF: 'Uit',
+  POLARITY: 'Polariteit',
+  ACTIVEHIGH: 'Actiev Hoog',
+  ACTIVELOW: 'Actiev Laag',
+  UNCHANGED: 'Ongewijzigd',
+  ALWAYS: 'Altijd',
+  ACTIVITY: 'Activiteit',
+  CONFIGURE: '{0} Configureren'
 };

 export default nl;
--- a/interface/src/i18n/no/index.ts
+++ b/interface/src/i18n/no/index.ts
@@ -322,7 +322,8 @@ const no: Translation = {
  ACTIVELOW: 'Active Low', // TODO translate
  UNCHANGED: 'Unchanged', // TODO translate
  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default no;
--- a/interface/src/i18n/pl/index.ts
+++ b/interface/src/i18n/pl/index.ts
@@ -308,7 +308,7 @@ const pl: BaseTranslation = {
  SCHEDULE_TIMER_2: 'co minutę',
  SCHEDULE_TIMER_3: 'co godzinę',
  CUSTOM_ENTITIES: '{{N|n|}}iestandardowe{{|j|}} encj{{e|i|}}',
-  ENTITIES_HELP_1: 'Zdefiniuj niestandardowe encje dla magistrali EMS.', // TODO translate
+  ENTITIES_HELP_1: 'Zdefiniuj niestandardowe encje dla magistrali EMS.',
  ENTITIES_UPDATED: 'Niestandardowe encje zostały uaktualnione.',
  WRITEABLE: 'Zapisywalna',
  SHOWING: 'Wyświetlane',
@@ -322,7 +322,8 @@ const pl: BaseTranslation = {
  ACTIVELOW: 'Wyzwalany stanem niskim',
  UNCHANGED: 'Zachowaj stan',
  ALWAYS: 'Zawsze',
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Aktywność',
+  CONFIGURE: 'Konfiguracja {0}'
 };

 export default pl;
--- a/interface/src/i18n/sk/index.ts
+++ b/interface/src/i18n/sk/index.ts
@@ -308,7 +308,7 @@ const sk: Translation = {
  SCHEDULE_TIMER_2: 'každú minútu',
  SCHEDULE_TIMER_3: 'každú hodinu',
  CUSTOM_ENTITIES: 'Vlastné entity',
-  ENTITIES_HELP_1: 'Získavanie vlastných entít zo zbernice EMS', // TODO translate
+  ENTITIES_HELP_1: 'Získavanie vlastných entít zo zbernice EMS',
  ENTITIES_UPDATED: 'Aktualizované entity',
  WRITEABLE: 'Zapísateľný',
  SHOWING: 'Zobrazenie',
@@ -322,7 +322,8 @@ const sk: Translation = {
  ACTIVELOW: 'Aktívny Nízky',
  UNCHANGED: 'Nezmenené',
  ALWAYS: 'Vždy',
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default sk;
--- a/interface/src/i18n/sv/index.ts
+++ b/interface/src/i18n/sv/index.ts
@@ -322,7 +322,8 @@ const sv: Translation = {
  ACTIVELOW: 'Active Low', // TODO translate
  UNCHANGED: 'Unchanged', // TODO translate
  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default sv;
--- a/interface/src/i18n/tr/index.ts
+++ b/interface/src/i18n/tr/index.ts
@@ -322,7 +322,8 @@ const tr: Translation = {
  ACTIVELOW: 'Active Low', // TODO translate
  UNCHANGED: 'Unchanged', // TODO translate
  ALWAYS: 'Always', // TODO translate
-  ACTIVITY: 'Activity' // TODO translate
+  ACTIVITY: 'Activity', // TODO translate
+  CONFIGURE: 'Configure {0}' // TODO translate
 };

 export default tr;
--- a/interface/src/project/ApplicationSettings.tsx
+++ b/interface/src/project/ApplicationSettings.tsx
@@ -139,7 +139,7 @@ const ApplicationSettings: FC = () => {

    return (
      <>
-        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
+        <Typography sx={{ pb: 1 }} variant="h6" color="primary">
          {LL.INTERFACE_BOARD_PROFILE()}
        </Typography>
        <Box color="warning.main">
--- a/interface/src/project/Sensors.tsx
+++ b/interface/src/project/Sensors.tsx
@@ -410,7 +410,7 @@ const Sensors: FC = () => {
    <SectionContent>
      {sensorData.ts.length > 0 && (
        <>
-          <Typography sx={{ pt: 2, pb: 1 }} variant="h6" color="secondary">
+          <Typography sx={{ pb: 1 }} variant="h6" color="secondary">
            {LL.TEMP_SENSORS()}
          </Typography>
          <RenderTemperatureSensors />
--- a/interface/src/project/SystemActivity.tsx
+++ b/interface/src/project/SystemActivity.tsx
@@ -10,14 +10,16 @@ import type { Stat } from './types';

 import type { Translation } from 'i18n/i18n-types';
 import type { FC } from 'react';
-import { FormLoader, SectionContent } from 'components';
+import { FormLoader, SectionContent, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';

-const Activity: FC = () => {
+const SystemActivity: FC = () => {
  const { data: data, send: loadData, error } = useRequest(EMSESP.readActivity);

  const { LL } = useI18nContext();

+  useLayoutTitle(LL.ACTIVITY());
+
  const stats_theme = tableTheme({
    Table: `
      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
@@ -125,4 +127,4 @@ const Activity: FC = () => {
  return <SectionContent>{content()}</SectionContent>;
 };

-export default Activity;
+export default SystemActivity;
--- a/interface/src/types/ap.ts
+++ b/interface/src/types/ap.ts
@@ -10,14 +10,14 @@ export enum APNetworkStatus {
  LINGERING = 2
 }

-export interface APStatus {
+export interface APStatusType {
  status: APNetworkStatus;
  ip_address: string;
  mac_address: string;
  station_num: number;
 }

-export interface APSettings {
+export interface APSettingsType {
  provision_mode: APProvisionMode;
  ssid: string;
  password: string;
--- a/interface/src/types/mqtt.ts
+++ b/interface/src/types/mqtt.ts
@@ -9,7 +9,7 @@ export enum MqttDisconnectReason {
  TCP_DISCONNECTED = 7
 }

-export interface MqttStatus {
+export interface MqttStatusType {
  enabled: boolean;
  connected: boolean;
  client_id: string;
@@ -19,7 +19,7 @@ export interface MqttStatus {
  connect_count: number;
 }

-export interface MqttSettings {
+export interface MqttSettingsType {
  enabled: boolean;
  host: string;
  port: number;
--- a/interface/src/types/network.ts
+++ b/interface/src/types/network.ts
@@ -20,7 +20,7 @@ export enum WiFiEncryptionType {
  WIFI_AUTH_WPA2_WPA3_PSK = 7
 }

-export interface NetworkStatus {
+export interface NetworkStatusType {
  status: NetworkConnectionStatus;
  local_ip: string;
  local_ipv6: string;
@@ -36,7 +36,7 @@ export interface NetworkStatus {
  hostname: string;
 }

-export interface NetworkSettings {
+export interface NetworkSettingsType {
  ssid: string;
  bssid: string;
  password: string;
--- a/interface/src/types/ntp.ts
+++ b/interface/src/types/ntp.ts
@@ -4,14 +4,14 @@ export enum NTPSyncStatus {
  NTP_ACTIVE = 2
 }

-export interface NTPStatus {
+export interface NTPStatusType {
  status: NTPSyncStatus;
  utc_time: string;
  local_time: string;
  server: string;
 }

-export interface NTPSettings {
+export interface NTPSettingsType {
  enabled: boolean;
  server: string;
  tz_label: string;
--- a/interface/src/types/security.ts
+++ b/interface/src/types/security.ts
@@ -1,11 +1,11 @@
-export interface User {
+export interface UserType {
  username: string;
  password: string;
  admin: boolean;
 }

-export interface SecuritySettings {
-  users: User[];
+export interface SecuritySettingsType {
+  users: UserType[];
  jwt_secret: string;
 }

--- a/interface/src/types/system.ts
+++ b/interface/src/types/system.ts
@@ -28,14 +28,17 @@ export interface SystemStatus {
  emsesp_version: string;
  esp_platform: string;
  status: busConnectionStatus;
-  tx_mode: number;
  uptime: number;
  num_devices: number;
  num_sensors: number;
  num_analogs: number;
+  free_heap: number;
+  ntp_status: number;
+  ota_status: boolean;
+  mqtt_status: boolean;
 }

-export interface OTASettings {
+export interface OTASettingsType {
  enabled: boolean;
  port: number;
  password: string;
--- a/interface/src/validators/ap.ts
+++ b/interface/src/validators/ap.ts
@@ -1,9 +1,9 @@
 import Schema from 'async-validator';
 import { IP_ADDRESS_VALIDATOR } from './shared';
-import type { APSettings } from 'types';
-import { isAPEnabled } from 'framework/ap/APSettingsForm';
+import type { APSettingsType } from 'types';
+import { isAPEnabled } from 'framework/ap/APSettings';

-export const createAPSettingsValidator = (apSettings: APSettings) =>
+export const createAPSettingsValidator = (apSettings: APSettingsType) =>
  new Schema({
    provision_mode: { required: true, message: 'Please provide a provision mode' },
    ...(isAPEnabled(apSettings) && {
--- a/interface/src/validators/mqtt.ts
+++ b/interface/src/validators/mqtt.ts
@@ -1,8 +1,8 @@
 import Schema from 'async-validator';
 import { IP_OR_HOSTNAME_VALIDATOR } from './shared';
-import type { MqttSettings } from 'types';
+import type { MqttSettingsType } from 'types';

-export const createMqttSettingsValidator = (mqttSettings: MqttSettings) =>
+export const createMqttSettingsValidator = (mqttSettings: MqttSettingsType) =>
  new Schema({
    ...(mqttSettings.enabled && {
      host: [{ required: true, message: 'Host is required' }, IP_OR_HOSTNAME_VALIDATOR],
--- a/interface/src/validators/network.ts
+++ b/interface/src/validators/network.ts
@@ -1,8 +1,8 @@
 import Schema from 'async-validator';
 import { HOSTNAME_VALIDATOR, IP_ADDRESS_VALIDATOR } from './shared';
-import type { NetworkSettings } from 'types';
+import type { NetworkSettingsType } from 'types';

-export const createNetworkSettingsValidator = (networkSettings: NetworkSettings) =>
+export const createNetworkSettingsValidator = (networkSettings: NetworkSettingsType) =>
  new Schema({
    ssid: [{ type: 'string', max: 32, message: 'SSID must be 32 characters or less' }],
    bssid: [{ type: 'string', max: 17, message: 'BSSID must be 17 characters or empty' }],
--- a/interface/src/validators/security.ts
+++ b/interface/src/validators/security.ts
@@ -1,6 +1,6 @@
 import Schema from 'async-validator';
 import type { InternalRuleItem } from 'async-validator';
-import type { User } from 'types';
+import type { UserType } from 'types';

 export const SECURITY_SETTINGS_VALIDATOR = new Schema({
  jwt_secret: [
@@ -9,7 +9,7 @@ export const SECURITY_SETTINGS_VALIDATOR = new Schema({
  ]
 });

-export const createUniqueUsernameValidator = (users: User[]) => ({
+export const createUniqueUsernameValidator = (users: UserType[]) => ({
  validator(rule: InternalRuleItem, username: string, callback: (error?: string) => void) {
    if (username && users.find((u) => u.username === username)) {
      callback('Username already in use');
@@ -19,7 +19,7 @@ export const createUniqueUsernameValidator = (users: User[]) => ({
  }
 });

-export const createUserValidator = (users: User[], creating: boolean) =>
+export const createUserValidator = (users: UserType[], creating: boolean) =>
  new Schema({
    username: [
      { required: true, message: 'Username is required' },
--- a/interface/yarn.lock
+++ b/interface/yarn.lock
@@ -49,6 +49,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/code-frame@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/code-frame@npm:7.24.2"
+  dependencies:
+    "@babel/highlight": "npm:^7.24.2"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.23.5":
  version: 7.23.5
  resolution: "@babel/compat-data@npm:7.23.5"
@@ -79,12 +89,12 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/core@npm:^7.24.1":
-  version: 7.24.1
-  resolution: "@babel/core@npm:7.24.1"
+"@babel/core@npm:^7.24.3":
+  version: 7.24.3
+  resolution: "@babel/core@npm:7.24.3"
  dependencies:
    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.24.1"
+    "@babel/code-frame": "npm:^7.24.2"
    "@babel/generator": "npm:^7.24.1"
    "@babel/helper-compilation-targets": "npm:^7.23.6"
    "@babel/helper-module-transforms": "npm:^7.23.3"
@@ -98,7 +108,7 @@ __metadata:
    gensync: "npm:^1.0.0-beta.2"
    json5: "npm:^2.2.3"
    semver: "npm:^6.3.1"
-  checksum: 10/f8c153acd619a5d17caee7aff052a2aa306ceda280ffc07182d7b5dd40c41c7511ae89d64bc23ec5555e4639fc9c87ceb7b4afc12252acab548ebb7654397680
+  checksum: 10/3a7b9931fe0d93c500dcdb6b36f038b0f9d5090c048818e62aa8321c8f6e8ccc3d47373f0b40591c1fe3b13e5096bacabb1ade83f9f4d86f57878c39a9d1ade1
  languageName: node
  linkType: hard

@@ -289,6 +299,18 @@ __metadata:
  languageName: node
  linkType: hard

+"@babel/highlight@npm:^7.24.2":
+  version: 7.24.2
+  resolution: "@babel/highlight@npm:7.24.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6
+  languageName: node
+  linkType: hard
+
 "@babel/parser@npm:^7.24.0":
  version: 7.24.0
  resolution: "@babel/parser@npm:7.24.0"
@@ -557,79 +579,79 @@ __metadata:
  languageName: node
  linkType: hard

-"@esbuild/aix-ppc64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/aix-ppc64@npm:0.19.12"
+"@esbuild/aix-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/aix-ppc64@npm:0.20.2"
  conditions: os=aix & cpu=ppc64
  languageName: node
  linkType: hard

-"@esbuild/android-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-arm64@npm:0.19.12"
+"@esbuild/android-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm64@npm:0.20.2"
  conditions: os=android & cpu=arm64
  languageName: node
  linkType: hard

-"@esbuild/android-arm@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-arm@npm:0.19.12"
+"@esbuild/android-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-arm@npm:0.20.2"
  conditions: os=android & cpu=arm
  languageName: node
  linkType: hard

-"@esbuild/android-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/android-x64@npm:0.19.12"
+"@esbuild/android-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/android-x64@npm:0.20.2"
  conditions: os=android & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/darwin-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/darwin-arm64@npm:0.19.12"
+"@esbuild/darwin-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-arm64@npm:0.20.2"
  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"@esbuild/darwin-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/darwin-x64@npm:0.19.12"
+"@esbuild/darwin-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/darwin-x64@npm:0.20.2"
  conditions: os=darwin & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/freebsd-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/freebsd-arm64@npm:0.19.12"
+"@esbuild/freebsd-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-arm64@npm:0.20.2"
  conditions: os=freebsd & cpu=arm64
  languageName: node
  linkType: hard

-"@esbuild/freebsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/freebsd-x64@npm:0.19.12"
+"@esbuild/freebsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/freebsd-x64@npm:0.20.2"
  conditions: os=freebsd & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/linux-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-arm64@npm:0.19.12"
+"@esbuild/linux-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm64@npm:0.20.2"
  conditions: os=linux & cpu=arm64
  languageName: node
  linkType: hard

-"@esbuild/linux-arm@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-arm@npm:0.19.12"
+"@esbuild/linux-arm@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-arm@npm:0.20.2"
  conditions: os=linux & cpu=arm
  languageName: node
  linkType: hard

-"@esbuild/linux-ia32@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-ia32@npm:0.19.12"
+"@esbuild/linux-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ia32@npm:0.20.2"
  conditions: os=linux & cpu=ia32
  languageName: node
  linkType: hard
@@ -641,86 +663,86 @@ __metadata:
  languageName: node
  linkType: hard

-"@esbuild/linux-loong64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-loong64@npm:0.19.12"
+"@esbuild/linux-loong64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-loong64@npm:0.20.2"
  conditions: os=linux & cpu=loong64
  languageName: node
  linkType: hard

-"@esbuild/linux-mips64el@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-mips64el@npm:0.19.12"
+"@esbuild/linux-mips64el@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-mips64el@npm:0.20.2"
  conditions: os=linux & cpu=mips64el
  languageName: node
  linkType: hard

-"@esbuild/linux-ppc64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-ppc64@npm:0.19.12"
+"@esbuild/linux-ppc64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-ppc64@npm:0.20.2"
  conditions: os=linux & cpu=ppc64
  languageName: node
  linkType: hard

-"@esbuild/linux-riscv64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-riscv64@npm:0.19.12"
+"@esbuild/linux-riscv64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-riscv64@npm:0.20.2"
  conditions: os=linux & cpu=riscv64
  languageName: node
  linkType: hard

-"@esbuild/linux-s390x@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-s390x@npm:0.19.12"
+"@esbuild/linux-s390x@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-s390x@npm:0.20.2"
  conditions: os=linux & cpu=s390x
  languageName: node
  linkType: hard

-"@esbuild/linux-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/linux-x64@npm:0.19.12"
+"@esbuild/linux-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/linux-x64@npm:0.20.2"
  conditions: os=linux & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/netbsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/netbsd-x64@npm:0.19.12"
+"@esbuild/netbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/netbsd-x64@npm:0.20.2"
  conditions: os=netbsd & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/openbsd-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/openbsd-x64@npm:0.19.12"
+"@esbuild/openbsd-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/openbsd-x64@npm:0.20.2"
  conditions: os=openbsd & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/sunos-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/sunos-x64@npm:0.19.12"
+"@esbuild/sunos-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/sunos-x64@npm:0.20.2"
  conditions: os=sunos & cpu=x64
  languageName: node
  linkType: hard

-"@esbuild/win32-arm64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-arm64@npm:0.19.12"
+"@esbuild/win32-arm64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-arm64@npm:0.20.2"
  conditions: os=win32 & cpu=arm64
  languageName: node
  linkType: hard

-"@esbuild/win32-ia32@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-ia32@npm:0.19.12"
+"@esbuild/win32-ia32@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-ia32@npm:0.20.2"
  conditions: os=win32 & cpu=ia32
  languageName: node
  linkType: hard

-"@esbuild/win32-x64@npm:0.19.12":
-  version: 0.19.12
-  resolution: "@esbuild/win32-x64@npm:0.19.12"
+"@esbuild/win32-x64@npm:0.20.2":
+  version: 0.20.2
+  resolution: "@esbuild/win32-x64@npm:0.20.2"
  conditions: os=win32 & cpu=x64
  languageName: node
  linkType: hard
@@ -1751,7 +1773,7 @@ __metadata:
  resolution: "EMS-ESP@workspace:."
  dependencies:
    "@alova/adapter-xhr": "npm:^1.0.3"
-    "@babel/core": "npm:^7.24.1"
+    "@babel/core": "npm:^7.24.3"
    "@emotion/react": "npm:^11.11.4"
    "@emotion/styled": "npm:^11.11.0"
    "@mui/icons-material": "npm:^5.15.14"
@@ -1767,7 +1789,7 @@ __metadata:
    "@types/react-router-dom": "npm:^5.3.3"
    "@typescript-eslint/eslint-plugin": "npm:^7.3.1"
    "@typescript-eslint/parser": "npm:^7.3.1"
-    alova: "npm:^2.17.1"
+    alova: "npm:^2.18.0"
    async-validator: "npm:^4.2.5"
    concurrently: "npm:^8.2.2"
    eslint: "npm:^8.57.0"
@@ -1783,7 +1805,7 @@ __metadata:
    jwt-decode: "npm:^4.0.0"
    lodash-es: "npm:^4.17.21"
    mime-types: "npm:^2.1.35"
-    preact: "npm:^10.19.7"
+    preact: "npm:^10.20.0"
    prettier: "npm:^3.2.5"
    react: "npm:latest"
    react-dom: "npm:latest"
@@ -1796,7 +1818,7 @@ __metadata:
    terser: "npm:^5.29.2"
    typesafe-i18n: "npm:^5.26.2"
    typescript: "npm:^5.4.2"
-    vite: "npm:^5.1.6"
+    vite: "npm:^5.2.2"
    vite-plugin-imagemin: "npm:^0.6.1"
    vite-tsconfig-paths: "npm:^4.3.2"
  languageName: unknown
@@ -1858,10 +1880,10 @@ __metadata:
  languageName: node
  linkType: hard

-"alova@npm:^2.17.1":
-  version: 2.17.1
-  resolution: "alova@npm:2.17.1"
-  checksum: 10/8ad39e0847157cbff285be078a7f490ddcfacc4a0de8a2d5976607206e29c8fa232fcf088079bc87ef26eea2bc432a2bda835bc0d996e02a526990ef93f7a6d3
+"alova@npm:^2.18.0":
+  version: 2.18.0
+  resolution: "alova@npm:2.18.0"
+  checksum: 10/6edf15157f4bce4239ba3461bf71a653fd4e904c80e5e7d4574328bb30d5704d5e4fc9c024b60f886bb010ee3e29e56cfb6ab7fc235a6a2aa4ee879cae35e387
  languageName: node
  linkType: hard

@@ -3554,33 +3576,33 @@ __metadata:
  languageName: node
  linkType: hard

-"esbuild@npm:^0.19.3":
-  version: 0.19.12
-  resolution: "esbuild@npm:0.19.12"
+"esbuild@npm:^0.20.1":
+  version: 0.20.2
+  resolution: "esbuild@npm:0.20.2"
  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.19.12"
-    "@esbuild/android-arm": "npm:0.19.12"
-    "@esbuild/android-arm64": "npm:0.19.12"
-    "@esbuild/android-x64": "npm:0.19.12"
-    "@esbuild/darwin-arm64": "npm:0.19.12"
-    "@esbuild/darwin-x64": "npm:0.19.12"
-    "@esbuild/freebsd-arm64": "npm:0.19.12"
-    "@esbuild/freebsd-x64": "npm:0.19.12"
-    "@esbuild/linux-arm": "npm:0.19.12"
-    "@esbuild/linux-arm64": "npm:0.19.12"
-    "@esbuild/linux-ia32": "npm:0.19.12"
-    "@esbuild/linux-loong64": "npm:0.19.12"
-    "@esbuild/linux-mips64el": "npm:0.19.12"
-    "@esbuild/linux-ppc64": "npm:0.19.12"
-    "@esbuild/linux-riscv64": "npm:0.19.12"
-    "@esbuild/linux-s390x": "npm:0.19.12"
-    "@esbuild/linux-x64": "npm:0.19.12"
-    "@esbuild/netbsd-x64": "npm:0.19.12"
-    "@esbuild/openbsd-x64": "npm:0.19.12"
-    "@esbuild/sunos-x64": "npm:0.19.12"
-    "@esbuild/win32-arm64": "npm:0.19.12"
-    "@esbuild/win32-ia32": "npm:0.19.12"
-    "@esbuild/win32-x64": "npm:0.19.12"
+    "@esbuild/aix-ppc64": "npm:0.20.2"
+    "@esbuild/android-arm": "npm:0.20.2"
+    "@esbuild/android-arm64": "npm:0.20.2"
+    "@esbuild/android-x64": "npm:0.20.2"
+    "@esbuild/darwin-arm64": "npm:0.20.2"
+    "@esbuild/darwin-x64": "npm:0.20.2"
+    "@esbuild/freebsd-arm64": "npm:0.20.2"
+    "@esbuild/freebsd-x64": "npm:0.20.2"
+    "@esbuild/linux-arm": "npm:0.20.2"
+    "@esbuild/linux-arm64": "npm:0.20.2"
+    "@esbuild/linux-ia32": "npm:0.20.2"
+    "@esbuild/linux-loong64": "npm:0.20.2"
+    "@esbuild/linux-mips64el": "npm:0.20.2"
+    "@esbuild/linux-ppc64": "npm:0.20.2"
+    "@esbuild/linux-riscv64": "npm:0.20.2"
+    "@esbuild/linux-s390x": "npm:0.20.2"
+    "@esbuild/linux-x64": "npm:0.20.2"
+    "@esbuild/netbsd-x64": "npm:0.20.2"
+    "@esbuild/openbsd-x64": "npm:0.20.2"
+    "@esbuild/sunos-x64": "npm:0.20.2"
+    "@esbuild/win32-arm64": "npm:0.20.2"
+    "@esbuild/win32-ia32": "npm:0.20.2"
+    "@esbuild/win32-x64": "npm:0.20.2"
  dependenciesMeta:
    "@esbuild/aix-ppc64":
      optional: true
@@ -3630,7 +3652,7 @@ __metadata:
      optional: true
  bin:
    esbuild: bin/esbuild
-  checksum: 10/861fa8eb2428e8d6521a4b7c7930139e3f45e8d51a86985cc29408172a41f6b18df7b3401e7e5e2d528cdf83742da601ddfdc77043ddc4f1c715a8ddb2d8a255
+  checksum: 10/663215ab7e599651e00d61b528a63136e1f1d397db8b9c3712540af928c9476d61da95aefa81b7a8dfc7a9fdd7616fcf08395c27be68be8c99953fb461863ce4
  languageName: node
  linkType: hard

@@ -6762,21 +6784,21 @@ __metadata:
  languageName: node
  linkType: hard

-"postcss@npm:^8.4.35":
-  version: 8.4.35
-  resolution: "postcss@npm:8.4.35"
+"postcss@npm:^8.4.36":
+  version: 8.4.37
+  resolution: "postcss@npm:8.4.37"
  dependencies:
    nanoid: "npm:^3.3.7"
    picocolors: "npm:^1.0.0"
-    source-map-js: "npm:^1.0.2"
-  checksum: 10/93a7ce50cd6188f5f486a9ca98950ad27c19dfed996c45c414fa242944497e4d084a8760d3537f078630226f2bd3c6ab84b813b488740f4432e7c7039cd73a20
+    source-map-js: "npm:^1.2.0"
+  checksum: 10/9acf36dfeaa350aab1100518af2da8cabebbbaf7d28356d0f81e1c30c9307f5ecb7356515585c63e5b011895ce3f5c7265df2cb9fce2e812b462aaf308199ffe
  languageName: node
  linkType: hard

-"preact@npm:^10.19.7":
-  version: 10.19.7
-  resolution: "preact@npm:10.19.7"
-  checksum: 10/3f64d5a0c7c01f773d5fa35ee408aa7efa87cccab75fbce2db413111815054eadef0329c65725b8f0d78d3116d6a576a6d0d4f9772450849cdd60bf325280a2a
+"preact@npm:^10.20.0":
+  version: 10.20.0
+  resolution: "preact@npm:10.20.0"
+  checksum: 10/fb8cfc1ab1b4b8f2bd483b9fdd2f8614cc7e099d741ec33f41d95d9056aefbe3fe5897201ef0f37c76238e7657ecd38afdef377e171cb1477068aae1dcf020d6
  languageName: node
  linkType: hard

@@ -7267,7 +7289,7 @@ __metadata:
  languageName: node
  linkType: hard

-"rollup@npm:^4.2.0":
+"rollup@npm:^4.13.0":
  version: 4.13.0
  resolution: "rollup@npm:4.13.0"
  dependencies:
@@ -7609,10 +7631,10 @@ __metadata:
  languageName: node
  linkType: hard

-"source-map-js@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "source-map-js@npm:1.0.2"
-  checksum: 10/38e2d2dd18d2e331522001fc51b54127ef4a5d473f53b1349c5cca2123562400e0986648b52e9407e348eaaed53bce49248b6e2641e6d793ca57cb2c360d6d51
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5
  languageName: node
  linkType: hard

@@ -8469,14 +8491,14 @@ __metadata:
  languageName: node
  linkType: hard

-"vite@npm:^5.1.6":
-  version: 5.1.6
-  resolution: "vite@npm:5.1.6"
+"vite@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "vite@npm:5.2.2"
  dependencies:
-    esbuild: "npm:^0.19.3"
+    esbuild: "npm:^0.20.1"
    fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.35"
-    rollup: "npm:^4.2.0"
+    postcss: "npm:^8.4.36"
+    rollup: "npm:^4.13.0"
  peerDependencies:
    "@types/node": ^18.0.0 || >=20.0.0
    less: "*"
@@ -8505,7 +8527,7 @@ __metadata:
      optional: true
  bin:
    vite: bin/vite.js
-  checksum: 10/f48073e93ead62fa58034398442de4517c824b3e50184f8b4059fb24077a26f2c04e910e29d7fb7ec51ea53eb61b9c7d94d56b14a38851de80c67480094cc79d
+  checksum: 10/8e7f1e79e00a092b43378565898b5b60f66738d55fdcd2bb3a17b07183d32c3bfda30135490956ad8eb5eb77b0e56d4377655bf9478898616edbb20645477edb
  languageName: node
  linkType: hard

--- a/mock-api/handler.ts
+++ b/mock-api/handler.ts
@@ -187,7 +187,7 @@ let ntp_settings = {
  tz_format: 'CET-1CEST,M3.5.0,M10.5.0/3'
 };
 const ntp_status = {
-  status: 1,
+  status: 2,
  utc_time: '2021-04-01T14:25:42Z',
  local_time: '2021-04-01T16:25:42',
  server: 'time.google.com',
@@ -316,7 +316,7 @@ const list_networks = {
 // OTA
 const OTA_SETTINGS_ENDPOINT = REST_ENDPOINT_ROOT + 'otaSettings';
 let ota_settings = {
-  enabled: true,
+  enabled: false,
  port: 8266,
  password: 'ems-esp-neo'
 };
@@ -400,16 +400,20 @@ const ESPsystem_status = {
  arduino_version: 'ESP32 Arduino v2.0.14'
 };

+// TODO fix this
 const system_status = {
  emsesp_version: '3.6-demo',
  esp_platform: 'ESP32',
  status: 0,
  // status: 2,
-  tx_mode: 1,
  uptime: 77186,
  num_devices: 2,
  num_sensors: 1,
-  num_analogs: 1
+  num_analogs: 1,
+  free_heap: 143,
+  ntp_status: 2,
+  ota_status: false,
+  mqtt_status: true
 };

 let security_settings = {